tobias
38e7731a3d
Gemeldet vom Eigentuemer an der realen Instanz, in einem Zug abgearbeitet. STATISTIK. "Monat kleiner als Woche" war kein Rechenfehler, sondern die Definition: am 02.09. begann die Kalenderwoche am 31.08., der Monat erst am 01.09. Umgestellt auf rollende Fenster (1/7/30/365 Tage), damit 1 ⊂ 7 ⊂ 30 ⊂ 365 an jedem Tag gilt. "Jahr" meint damit nicht mehr das Kalenderjahr - so entschieden. Zwei neue Tests halten die Verschachtelung fest. Aus dem Langzeitverbrauch sind Herleitung und Erklaerabsatz aus der ANSICHT genommen, nicht aus der Rechnung; das Datum des letzten Tankstops ebenfalls. UEBERSICHT. Unter "Letzter Tankvorgang" steht das Datum statt der Tankstelle. BILDER. Die Draufsicht war der einzige sichtbare Bildplatz ohne Zugang - bilder.py kannte den Dateinamen, BILDER/BILDPLAETZE nicht. Jetzt ein Platz wie jeder andere. Die Vorschau in den Einstellungen schneidet Fotos nicht mehr an, und der Bildbereich der Fahrzeugseite steht eingerueckt statt randlos. ZAHNRAD. Es lag mit seiner 44px-Trefferflaeche 21px im Kachelinhalt und fing die obere Haelfte des ersten Knopfes ab (Versicherung, "Inland"). Die Kopfzeile bekommt jetzt die Hoehe, die es braucht. SCREENING. Lief ausschliesslich bei einer Aenderung des Kilometerstands, also nur waehrend der Fahrt - im Stand blieben Ortsnamen und Verbrauch liegen. Jetzt zusaetzlich einmal nach dem Start, und danach faellt es selbst nach, solange ein Lauf sein Ortsbudget aufbraucht UND dabei etwas aufloest. Kein Dauertakt: die Kette endet, sobald ein Lauf mit uebrigem Budget durchkommt. GESTEN. Zum Loeschen nach links wischen, jetzt auch im Radarchiv (das Panel hatte die Mechanik, das Archiv war nie angeschlossen; die App hatte sie gar nicht). Vom linken Rand nach rechts wischen = zurueck, jetzt auch in der App, mit denselben Zahlen wie im Panel und in beiden mit sichtbarer Rueckmeldung. CI-SYMBOLE. Das Kachel-Zahnrad ist settings-s - im Panel stand der Pfad sechsmal wortgleich im Markup, jetzt einmal als CI.settingsS. Das handgezeichnete Zahnrad der Seitenleiste ist ersetzt und geloescht. Die Zapfsaeule des Tanken-Reiters ist fuel-station-s, Faktor 0,84 um die Rastermitte - live per getBBox() gemessen, damit sie auf dieselbe senkrechte Spanne kommt wie Statistik. Zurueckgenommen: die Titel der Unterseiten stehen wieder mittig. Zentriert ist Apples HIG fuer Navigationsleisten; die linksbuendigen Titel sind die der Hauptbereiche und folgen der anderen Regel. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
399 lines
22 KiB
CSS
399 lines
22 KiB
CSS
/* ==================================================================
|
|
iOS-Auflage über audi-dashboard.css — Audi CI (Rot F50537, Audi Type,
|
|
dunkle Fläche) in der Formensprache einer modernen iOS-App:
|
|
Große Titel, gruppierte Listen mit 44-px-Zeilen, transluente Tab-Leiste,
|
|
iOS-Schalter und -Segmente, gefüllte Aktionsknöpfe.
|
|
Reine Auflage: audi-dashboard.css und die App-Logik bleiben unberührt.
|
|
================================================================== */
|
|
|
|
:host{
|
|
display:block;height:100%;container-type:inline-size;
|
|
font-family:"Audi Type",Helvetica,Arial,sans-serif;
|
|
--ios-tint:#F50537;
|
|
--ios-sep:rgba(255,255,255,.13);
|
|
--ios-grau:#8E8E93;
|
|
--ios-fill:rgba(120,120,128,.24);
|
|
--r-tile:16px;
|
|
/* deckende Kachelfarbe fuer Flaechen, die etwas verdecken muessen
|
|
(Wischzeile ueber dem Loeschen-Feld, Kartenfeld) */
|
|
--tile-deckend:#171B21;
|
|
}
|
|
:host([data-theme="nacht"]){
|
|
--canvas:#0C1014;
|
|
--tile:rgba(255,255,255,.055);
|
|
--tile-2:rgba(255,255,255,.10);
|
|
--line:rgba(255,255,255,.13);
|
|
--line-strong:rgba(255,255,255,.24);
|
|
--fg:#FFFFFF; --fg2:#BFC4CC; --fg3:#8E8E93;
|
|
--ok:#30D158; --warn:#FFD60A; --bad:#FF453A;
|
|
/* Ohne diese Angabe rendert der Browser native Steuerelemente (Dropdown-
|
|
Aufklapp-Liste bei <select>, Scrollbars) in seiner Standard-Hellansicht,
|
|
egal wie dunkel die App selbst ist - das liess z. B. "Modell" beim
|
|
Aufklappen grell-weiss aufblitzen. Betrifft alle <select>-Felder. */
|
|
color-scheme: dark;
|
|
}
|
|
:host([data-theme="tag"]){
|
|
--canvas:#F2F2F7;
|
|
--tile:#FFFFFF;
|
|
--tile-2:#EFEFF4;
|
|
--line:rgba(60,60,67,.13);
|
|
--line-strong:rgba(60,60,67,.24);
|
|
/* --fg3 traegt jede Kachelueberschrift, jede Einheit und jeden Zusatz.
|
|
Auf hellem Grund lag #8E8E93 bei 2,92:1 gegen die Seitenflaeche und
|
|
3,26:1 gegen die Kachel - fuer einen kurzen Blick im Auto bei
|
|
Sonnenlicht zu wenig (Designpruefung 2026-08-30). #6B6B70 bringt beide
|
|
auf 4,75:1 bzw. 5,30:1, ohne den ruhigen Gesamteindruck zu aendern.
|
|
Der Nachtwert bleibt #8E8E93 - dort sind es ohnehin 5,86:1. */
|
|
--fg:#000000; --fg2:#3C3C43; --fg3:#6B6B70;
|
|
--ok:#34C759; --warn:#FF9F0A; --bad:#FF3B30;
|
|
--ios-sep:rgba(60,60,67,.16);
|
|
--ios-fill:rgba(120,120,128,.16);
|
|
--tile-deckend:#FFFFFF;
|
|
color-scheme: light;
|
|
}
|
|
|
|
body{padding:0;background:var(--canvas)}
|
|
html,body{height:100%}
|
|
/* Der von _aufbauen() eingefuegte Wrapper zwischen Host und .phone. Die
|
|
412px-Deckelung aus audi-dashboard.css (fuer die alte Einzelgroesse
|
|
gedacht) wird hier unbedingt aufgehoben, nicht nur ab 860px: auf
|
|
schmalen Bildschirmen macht der Viewport selbst die Breite eng genug,
|
|
:host-Selektoren innerhalb @container werden von diesem Browser aber
|
|
offenbar verworfen - deshalb unbedingt statt bedingt.
|
|
Die Hoehe bleibt dagegen viewport-verankert (100dvh statt 100%): das ist
|
|
der Grund, warum audi-dashboard.css das ueberhaupt so baute - HA gibt der
|
|
panel_custom-Kette keine verlaessliche Hoehe weiter, height:100% liess den
|
|
Hauptinhalt hier auf 0px kollabieren (Tabbar direkt unter dem Header,
|
|
main#view unsichtbar). Erst ab 860px (siehe @container unten) darf die
|
|
880px-Deckelung fallen, damit die App auf grossen Bildschirmen mehr als
|
|
eine schwebende Telefonkarte ist. */
|
|
:host > div{height:min(880px, calc(100dvh - 24px));max-width:none}
|
|
.phone{width:100%;max-width:none;height:100%;border-radius:0;
|
|
font-family:"Audi Type",Helvetica,Arial,sans-serif;
|
|
-webkit-font-smoothing:antialiased;letter-spacing:0}
|
|
|
|
/* ---------------- Navigationsleiste ---------------- */
|
|
/* Sichere Bereiche des Geräterahmens: Statusleiste oben, Home-Indikator unten */
|
|
/* Linker Innenabstand = --seitenrand von main#view (16px), damit der Titel
|
|
exakt auf der Kante der Kacheln darunter sitzt. */
|
|
.topbar{align-items:center;gap:4px;padding:56px 20px 4px 16px}
|
|
.head{display:flex;flex-direction:column}
|
|
.eyebrow{display:none}
|
|
.title{font-size:22px;font-weight:400;letter-spacing:-.01em;line-height:1.2}
|
|
.back{width:34px;height:34px;margin-left:-8px;justify-content:center}
|
|
/* Design-Audit 2026-08-13, auf allen Breiten nachgezogen 2026-08-17: .back ist
|
|
auch inaktiv (opacity:0) noch ein Flex-Element plus Gap - auf Wurzelseiten
|
|
ohne Zurueck-Pfeil schob das die Kopfzeile (.head/.title) sichtbar weiter
|
|
nach rechts, als main#view darunter beginnt. Das negative margin-right hebt
|
|
zusaetzlich den Gap auf, sonst blieben 4px Versatz. Auf Detailseiten
|
|
(.back.on) bleibt der Platz bewusst reserviert, das ist dort ein echter,
|
|
bedienbarer Knopf. */
|
|
.back:not(.on){width:0;min-width:0;margin:0 -4px 0 0;overflow:hidden}
|
|
/* Rot bleibt Akzent/destruktiv, nicht Navigationsfarbe (dieselbe Regel wie
|
|
bei den Aktions-Buttons und dem aktiven Menü-Icon) - derselbe neutrale Ton
|
|
wie die Kopfzeile selbst. */
|
|
.back svg{width:22px;height:22px;color:var(--fg)}
|
|
.sync{margin-top:3px;font-size:12.5px;color:var(--fg3)}
|
|
.sync svg{width:13px;height:13px}
|
|
.themebtn{width:36px;height:36px;border:0;background:var(--ios-fill);color:var(--fg2)}
|
|
.themebtn:hover{background:var(--tile-2);color:var(--fg)}
|
|
/* Telefonbreite: die Ringe stehen oben rechts und oeffnen die Einstellungen
|
|
(Stand nach dem Design-Audit). Das Zahnrad entfaellt dort, damit oben rechts
|
|
nur ein Element sitzt. */
|
|
.rings{order:9;margin-left:8px;margin-right:-10px;cursor:pointer;
|
|
min-width:44px;min-height:44px;height:44px;justify-content:flex-end;padding:0 10px}
|
|
.rings svg{height:17px}
|
|
.profilbtn{display:none}
|
|
/* Unterseite: kompakter, zentrierter Titel wie in einer iOS-Navigationsleiste */
|
|
/* Gegengewicht zum Zurueck-Pfeil auf Unterseiten.
|
|
|
|
Der Titel wird dort mittig gesetzt (.head{align-items:center}), aber nur
|
|
innerhalb von .head - und .head beginnt erst hinter dem Zurueck-Pfeil.
|
|
Rechts steht nichts, weil die Ringe auf Unterseiten ausgeblendet werden.
|
|
Die Ueberschrift sass deshalb um die halbe Pfeilbreite zu weit rechts;
|
|
in der App an derselben Stelle live gemessen: 17px (2026-08-31).
|
|
|
|
Gleiche Masse wie .back (34px, margin -8px), damit links und rechts
|
|
exakt derselbe Platz belegt ist. Auf breiten Bildschirmen steht der
|
|
Titel linksbuendig - dort ist der Platzhalter abgeschaltet. */
|
|
.kopfgegengewicht{display:none}
|
|
.phone:has(.back.on) .kopfgegengewicht{display:block;order:10;flex:none;width:34px;height:34px;margin-right:-8px}
|
|
.phone:has(.back.on) .topbar{padding:54px 16px 6px;gap:8px}
|
|
.phone:has(.back.on) .head{align-items:center}
|
|
/* Zentriert nach Apples HIG (kleiner Titel in der Navigationsleiste einer
|
|
Detailseite; der große, linksbündige gilt nur auf oberster Ebene). Siehe
|
|
.dm-kopf--unterseite in der App - dort steht die ganze Begründung. */
|
|
.phone:has(.back.on) .title{font-size:17px;font-weight:400;letter-spacing:-.01em;text-align:center}
|
|
.phone:has(.back.on) .sync{margin-top:2px;font-size:12.5px}
|
|
|
|
main#view{--seitenrand:16px;padding:0 var(--seitenrand) 30px;scroll-behavior:smooth}
|
|
|
|
/* ---------------- Karten und Listen ---------------- */
|
|
.tile{padding:16px 18px;margin-bottom:14px;border-radius:var(--r-tile)}
|
|
.tile.flat{padding:0}
|
|
.tilebtn:hover{background:var(--tile-2)}
|
|
/* top/margin-top NICHT von der Basis uebernehmen: alle .go-Kacheln
|
|
(Fahrzeug/Service/Versicherung/Reifen/Schutzbrief) sind mehrzeilige
|
|
Kacheln mit .label oben plus einer ganzen dl.rows-Liste darunter - eine
|
|
vertikale 50%-Zentrierung landet dann mitten in der Zeilenliste statt
|
|
neben dem Titel und ueberlappt umgebrochenen Zeilentext (Design-Audit
|
|
2026-08-13). Bleibt bei top:var(--sp-5) aus der Basis, nur rechter
|
|
Abstand/Farbe werden fuer die iOS-Optik angepasst. */
|
|
.tilebtn .go{right:18px;stroke:var(--ios-grau);stroke-width:1.6}
|
|
.label{font-size:13px;letter-spacing:.01em;text-transform:none;color:var(--fg3)}
|
|
.row{min-height:44px;padding:11px 0;border-bottom:1px solid var(--ios-sep)}
|
|
.row dt{font-size:16px;color:var(--fg)}
|
|
.row dd{font-size:16px;color:var(--fg2)}
|
|
.row dd small{font-size:12.5px;margin-top:2px}
|
|
.rows-fest dt{flex:0 0 150px}
|
|
.chev{stroke:var(--ios-grau);stroke-width:1.6}
|
|
|
|
.acc-h{padding:13px 0;border-bottom:1px solid var(--ios-sep)}
|
|
.acc-h .k{font-size:16px}
|
|
.acc-h .v{font-size:12.5px}
|
|
.leaf{padding:12px 0 12px 40px;border-bottom:1px solid var(--ios-sep)}
|
|
.leaf .k{font-size:16px}
|
|
.leaf .v{font-size:15px}
|
|
.leaf .k small,.leaf .v small{font-size:12.5px}
|
|
.mark::before,.mark::after{background:var(--ios-grau)}
|
|
|
|
/* ---------------- Bedienelemente ---------------- */
|
|
.seg{gap:0;padding:2px;background:var(--ios-fill);border-radius:9px;margin-top:14px}
|
|
.seg button{border:0;border-radius:7px;padding:7px 8px;font-size:13px;font-weight:400;
|
|
letter-spacing:0;text-transform:none;color:var(--fg2)}
|
|
.seg button.on{background:var(--tile-2);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
|
|
|
|
/* Aktive/Primär-Buttons sind grau, nicht rot (Nutzerwunsch 2026-08-16): Rot
|
|
bleibt nur noch für destruktive Aktionen (.loeschen). .aktion allein ist
|
|
die neutrale Sekundäraktion, .primaer die grau gefüllte Hauptaktion -
|
|
dieselbe Fläche wie die Grundauflage (var(--fg)/var(--canvas)). */
|
|
.aktion{margin-top:18px;padding:15px;border:0;border-radius:14px;
|
|
background:var(--ios-fill);color:var(--fg);font-size:16px;font-weight:400;
|
|
letter-spacing:0;text-transform:none}
|
|
.aktion:hover{background:var(--tile-2)}
|
|
.aktion.primaer{background:var(--fg);color:var(--canvas)}
|
|
.aktion.primaer:hover{filter:brightness(1.08)}
|
|
.aktion.loeschen{background:var(--ios-fill);color:var(--bad);border:0}
|
|
.aktion.loeschen:hover{background:var(--bad);color:#fff;filter:none}
|
|
|
|
.feld{min-height:44px;padding:9px 0;border-bottom:1px solid var(--ios-sep)}
|
|
.feld label{font-size:16px;color:var(--fg)}
|
|
.feld input,.feld select{background:transparent;border:0;border-radius:8px;font-size:16px;
|
|
padding:8px 4px;color:var(--fg2)}
|
|
/* Design-Audit 2026-08-13/16: die graue Flaeche ist das einheitliche Signal
|
|
"das hier kann ich aendern". Sie trugen bisher nur die Felder mit Einheit
|
|
(.mitEinheit input, z.B. "Pause bis [15] Minuten"); alles andere - <select>
|
|
wie "10.000 km"/"1 Jahr", aber auch FIN oder Kennzeichen - stand ohne Kasten
|
|
da und war von reinem Anzeigetext nicht zu unterscheiden. Jetzt bekommt
|
|
jedes editierbare Feld denselben Kasten. Ausgenommen sind Eingaben mit
|
|
eigener Optik (Schalter, Auswahlkaestchen, Regler, Dateiauswahl) - die
|
|
behalten die transparente Grundregel darueber.
|
|
.mitEinheit input braucht deshalb keine eigene Regel mehr; Breite und
|
|
Rechtsbuendigkeit dort kommen weiterhin aus audi-dashboard.css. */
|
|
.feld input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
|
|
.feld select{background:var(--ios-fill);padding:8px 10px}
|
|
.feld input:focus,.feld select:focus{color:var(--fg)}
|
|
/* Pull-down-Button-Optik (Apple HIG): ein einzelner Abwaerts-Chevron statt
|
|
des (durch appearance:none in audi-dashboard.css bereits entfernten)
|
|
nativen Browser-Pfeils - macht die Auswahlfelder als solche erkennbar,
|
|
ohne ein eigenes Menue-Widget nachzubauen. Farbe fix auf --ios-grau, das
|
|
ist bereits die Farbe aller anderen Chevrons (.chev) in beiden Themes. */
|
|
.feld select{
|
|
padding-right:28px;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238E8E93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
background-repeat:no-repeat;
|
|
background-position:right 9px center;
|
|
background-size:10px 10px;
|
|
}
|
|
.notiz{background:var(--ios-fill);border:0;border-radius:12px;font-size:16px}
|
|
|
|
.switch{width:51px;height:31px}
|
|
.switch .track{background:var(--ios-fill);border:0}
|
|
.switch .track::before{left:2px;top:2px;width:27px;height:27px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
|
|
/* Grün statt Rot: Schalter-Ein-Zustand ist kein destruktiver/Primär-Akzent,
|
|
sondern ein neutrales "an" - deckt sich mit dem echten iOS-Systemgrün, das
|
|
--ok hier ohnehin schon trägt (Design-Review §B). */
|
|
.switch input:checked+.track{background:var(--ok)}
|
|
.switch input:checked+.track::before{transform:translateX(20px)}
|
|
|
|
.pill{font-size:12.5px;letter-spacing:.01em;text-transform:none;padding:5px 11px;
|
|
border:0;background:var(--ios-fill);color:var(--fg2)}
|
|
|
|
.status{padding:14px 0 2px}
|
|
.status .t{font-size:16px}
|
|
.dot{width:10px;height:10px}
|
|
|
|
/* ---------------- Zahlen (Audi CI bleibt führend) ---------------- */
|
|
.fig{letter-spacing:-.03em}
|
|
.unit{color:var(--fg3)}
|
|
.balken{height:6px;background:var(--ios-fill)}
|
|
.balken i{background:var(--ok)}
|
|
.quad .l{font-size:11px;letter-spacing:.01em;text-transform:none}
|
|
.legend span{font-size:12.5px}
|
|
|
|
/* ---------------- Menüs und Popups ---------------- */
|
|
/* Blaetter statt schwebender Karten (siehe audi-dashboard.css). Die Radien
|
|
folgen der neuen Lage: das Aktionsblatt steht frei ueber der unteren
|
|
Kante und ist rundum rund, das Formularblatt sitzt auf der Kante auf und
|
|
ist nur oben rund. */
|
|
.bildmenu{border:0;border-radius:16px;background:rgba(40,44,52,.92);
|
|
-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
|
|
box-shadow:0 12px 40px rgba(0,0,0,.5)}
|
|
.sdpopup{border:0;border-radius:16px 16px 0 0;background:rgba(40,44,52,.92);
|
|
-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
|
|
box-shadow:0 -8px 40px rgba(0,0,0,.5)}
|
|
:host([data-theme="tag"]) .bildmenu,:host([data-theme="tag"]) .sdpopup{background:rgba(250,250,252,.92)}
|
|
.bildmenu button{padding:16px 18px;font-size:16px;min-height:52px;border-bottom:1px solid var(--ios-sep)}
|
|
.bildmenu button:last-child{border-bottom:none}
|
|
|
|
/* ---------------- Tab-Leiste ---------------- */
|
|
.tabbar{border-top:1px solid var(--ios-sep);padding-bottom:26px;
|
|
background:rgba(12,16,20,.72);
|
|
-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
|
|
:host([data-theme="tag"]) .tabbar{background:rgba(242,242,247,.78)}
|
|
.tab{border-top:0;margin-top:0;padding:7px 2px 6px;gap:3px;
|
|
font-size:10px;letter-spacing:0;text-transform:none;color:var(--ios-grau)}
|
|
/* Beschriftung folgt weiter dem Schalter in den Einstellungen.
|
|
:not(.tabpille) ist Pflicht: die Icon-Huelle ist ebenfalls ein <span> (span
|
|
class="tabpille"), ein blosses ".tab span" traf also nicht nur das Label
|
|
sondern auch die Pille selbst - das Icon verschwand mit, nicht nur der
|
|
Text. Genau das war der gemeldete "ganze Menueleiste verschwindet"-Bug. */
|
|
.tabbar.ohne .tab span:not(.tabpille){display:none}
|
|
.tab svg{width:26px;height:26px;stroke-width:1.5}
|
|
/* myAudi-Menueleiste: das aktive Symbol sitzt hell in einer gefuellten Pille,
|
|
die uebrigen bleiben grau - kein farbiger Tint, kein Oberkantenstrich. */
|
|
.tabpille{width:63px;height:39px;border-radius:20px}
|
|
.tab.on{color:var(--fg);border-top-color:transparent}
|
|
.tab.on .tabpille{background:rgba(255,255,255,.14)}
|
|
:host([data-theme="tag"]) .tab.on .tabpille{background:rgba(0,0,0,.07)}
|
|
/* Ist die Beschriftung sichtbar (nicht .tabbar.ohne), soll die graue Flaeche
|
|
Icon UND Text umschliessen statt nur die enge Pille ums Icon - die Flaeche
|
|
wandert dafuer vom Icon-Symbol auf den ganzen Tab-Knopf. Im reinen
|
|
Icon-Modus bleibt die enge Pille wie zuvor. */
|
|
.tabbar:not(.ohne) .tab.on{background:rgba(255,255,255,.14);border-radius:14px}
|
|
:host([data-theme="tag"]) .tabbar:not(.ohne) .tab.on{background:rgba(0,0,0,.07)}
|
|
.tabbar:not(.ohne) .tab.on .tabpille{background:none}
|
|
.tabbar.ohne .tab{padding:11px 2px 10px}
|
|
|
|
:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
|
|
|
|
/* Die Wischzeile muss das darunterliegende Loeschen-Feld verdecken - das
|
|
halbtransparente --tile der Auflage liess es durchscheinen. */
|
|
.swipe-wrap .swipe-content{background:var(--tile-deckend)}
|
|
.mapbox,.mapbox .leaflet-container{background:var(--tile-deckend)}
|
|
|
|
/* ==================================================================
|
|
Große Bildschirme (Tablet, Desktop): dieselbe App, aber die Tab-Leiste
|
|
wird zur seitlichen Navigation und der Inhalt bekommt eine ruhige,
|
|
begrenzte Spalte. Container-Abfrage statt @media, weil die App in einem
|
|
eigenen Rahmen sitzt und nicht die Fensterbreite messen darf. Schwelle 860 px.
|
|
================================================================== */
|
|
/* Klon der Ringe in der Menueleiste - nur im Spaltenlayout sichtbar */
|
|
.navmarke{display:none}
|
|
|
|
@container (min-width:860px){
|
|
/* Ab hier keine schwebende Telefonkarte mehr - die 880px-Deckelung faellt,
|
|
die App fuellt die tatsaechliche (weiterhin viewport-verankerte) Hoehe. */
|
|
:host > div{height:calc(100dvh - 24px)}
|
|
.phone{display:grid;grid-template-columns:264px minmax(0,1fr);
|
|
grid-template-rows:auto auto minmax(0,1fr)}
|
|
/* max-width:860px muss zu main#view passen, sonst treibt der Flex-Inhalt
|
|
(.head{flex:1} schiebt .profilbtn nach rechts) das Zahnrad bis an den
|
|
Rand der vollen Grid-Spalte statt an den Rand der Inhaltsspalte darunter -
|
|
auf breiten Bildschirmen klaffte da eine sichtbare Luecke. */
|
|
.topbar{grid-column:2;grid-row:1;padding:38px 44px 8px;max-width:860px}
|
|
.phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start;max-width:860px}
|
|
.phone:has(.back.on) .head{align-items:flex-start}
|
|
/* Unterseiten (mit Zurueck-Pfeil, z. B. Standort/Service) behalten die
|
|
normale Titelgroesse - nur die obersten Tab-Seiten bekommen den grossen
|
|
"Large Title"-Auftritt (.title{font-size:34px} unten). Vorher wurden
|
|
Unterseiten hier auf 26px vergroessert, was neben dem sonst durchgaengig
|
|
300er-Fliesstext optisch wie Fettschrift wirkte, obwohl font-weight
|
|
ueberall 400 bleibt - keine echte Auszeichnung, nur eine Grosse, die zu
|
|
einer Unterseite nicht passt. */
|
|
.phone:has(.back.on) .title{font-size:17px;text-align:left}
|
|
.title{font-size:34px}
|
|
.ptr{grid-column:2;grid-row:2;max-width:860px}
|
|
main#view{--seitenrand:44px;grid-column:2;grid-row:3;padding:8px var(--seitenrand) 48px;max-width:860px}
|
|
|
|
.tabbar{grid-column:1;grid-row:1 / 4;display:flex;flex-direction:column;gap:4px;
|
|
align-content:start;width:264px;padding:38px 14px 20px;
|
|
border-top:0;border-right:1px solid var(--ios-sep);background:none;
|
|
-webkit-backdrop-filter:none;backdrop-filter:none}
|
|
.tab{flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;
|
|
padding:12px 14px;border-radius:12px;font-size:15px;letter-spacing:0}
|
|
.tab span{display:block}
|
|
.tab svg{width:22px;height:22px}
|
|
.tabpille{width:auto;height:auto;border-radius:0;background:none}
|
|
.tab.on .tabpille{background:none}
|
|
.tab:hover{background:var(--tile)}
|
|
/* Aktives Symbol: dieselbe Farbe wie die Kopfzeile (--fg), nicht mehr Rot -
|
|
Fläche bleibt neutral hinterlegt statt rosa (Design-Review §B). */
|
|
.tab.on{background:var(--ios-fill);color:var(--fg)}
|
|
.tabbar.ohne .tab span{display:block}
|
|
.tabbar.ohne .tab{padding:12px 14px;gap:14px}
|
|
.tabbar.ohne .tab svg{width:22px;height:22px}
|
|
/* Marke am Kopf der Seitenspalte, dafuer keine Ringe in der Kopfzeile
|
|
(Design-Audit: die Marke soll nur einmal im Bild stehen). */
|
|
.navmarke{display:block;margin:2px 0 26px 14px;color:var(--fg)}
|
|
.navmarke svg{width:54px;height:auto;display:block}
|
|
/* Grosser Bildschirm: Marke am Kopf der Spalte, Zahnrad wieder oben rechts */
|
|
.profilbtn{display:inline-flex}
|
|
/* Die Kopf-Ringe setzt die App per Inline-Stil (display:inline-flex),
|
|
deshalb hier mit !important. */
|
|
.rings{display:none !important}
|
|
.kopfgegengewicht{display:none !important}
|
|
|
|
/* Nur die Box selbst hoeher setzen, nicht jedes Element mit .carfix: die
|
|
Klasse haengt auch am <img> und am Platzhalter-<div> (siehe
|
|
bildMitPlatzhalter()). Der Platzhalter ist position:absolute;inset:0 -
|
|
eine feste Hoehe schlaegt dort das bottom:0 und machte ihn 260px hoch in
|
|
einer 132px hohen, overflow:hidden-Box (leerer Zustand), also sichtbar
|
|
abgeschnitten. Bild und Platzhalter fuellen die Box ohnehin per 100%. */
|
|
.bildbox.carfix{height:260px}
|
|
/* Feste 220px hier wuerden das Foto wieder beschneiden - die Hoehe
|
|
bestimmt seit dem 2026-08-31 das Bild selbst (siehe audi-dashboard.css). */
|
|
.bildbox.carfix.klein{height:auto}
|
|
.quad{gap:14px}
|
|
|
|
/* Design-Audit 2026-08-13: .setup-popup/.sdpopup/.sheet/.standortmenu sind
|
|
position:absolute relativ zu .phone (der vollen Rasterbreite, nicht nur
|
|
der Inhaltsspalte) mit left/right auf einen festen Abstand - auf breiten
|
|
Bildschirmen ergab das einen fast bildschirmbreiten Dialog statt einer
|
|
ruhigen Karte. max-width + margin:auto zentriert sie innerhalb des
|
|
bestehenden left/right-Abstands, ohne die transform-basierte
|
|
Einblend-Animation dieser Elemente zu beruehren. */
|
|
.sdpopup,.sheet,.beleg-popup,.bildmenu{max-width:560px;margin-left:auto;margin-right:auto}
|
|
/* .setup-popup breiter als die übrigen Popups: die Sensorkennung neben der
|
|
Feld-Überschrift (entitaetIdKurz()) kann ein echter Rohsensorname von
|
|
Herstellerseite sein, teils 40-60 Zeichen lang
|
|
("calculated_distance_covered_after_the_latest_refueling") - bei 560px
|
|
wäre das mehrzeiliges Umbrechen auf fast jeder Zeile. */
|
|
.setup-popup{max-width:760px;margin-left:auto;margin-right:auto}
|
|
.standortmenu{max-width:640px;margin-left:auto;margin-right:auto}
|
|
|
|
/* Batteriespannungs-Diagramm: die Hoehe bleibt bewusst bei den festen 170px
|
|
aus BV_H (audi-dashboard-app.js), nur die Breite nutzt die volle
|
|
Spaltenbreite (772px: 860 - 2*44px Seitenrand). Ein Versuch, die Hoehe per
|
|
aspect-ratio mit der Breite mitwachsen zu lassen (~410px bei voller
|
|
Spalte), liess auch die SVG-Beschriftungen (fester font-size in
|
|
Zeichen-Einheiten) auf ~26px mitwachsen und das Diagramm unnoetig hoch
|
|
werden - vom Nutzer als "Zahlen zu gross"/"Hoehe reduzieren" gemeldet.
|
|
Bei fester Hoehe bleibt der Y-Massstab immer 1:1 (170 Einheiten = 170px),
|
|
also bleiben Beschriftungen normal gross; nur die X-Achse dehnt sich -
|
|
genau das breite, flache Band, das der Nutzer hier ausdruecklich wollte. */
|
|
}
|
|
|
|
/* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt
|
|
sichtbar, aber ohne technischen Strichrahmen. */
|
|
.szene{margin-bottom:20px}
|
|
/* --tile statt --ios-fill waere hier naheliegend, faellt im Tag-Theme aber
|
|
auf reines Weiss (#FFFFFF) - ununterscheidbar von Canvas und den meisten
|
|
Kacheln drumherum, die Box verschwand. --ios-fill ist in beiden Themes ein
|
|
deutlich sichtbares transluzentes Grau, dieselbe Konvention wie
|
|
.feld select/.aktion ("das hier ist eine Flaeche"). */
|
|
.bildbox.bild-fehlt .platzhalter{border:0;background:var(--ios-fill);border-radius:var(--r-tile)}
|
|
|
|
/* Zeilen mit Wert plus Statuspunkt rechts (Sicherheitscheck) ruhiger setzen */
|
|
.row dd .dot{width:8px;height:8px}
|