tobias
b0ec8b4982
Gemessen statt geschaut: eine Pruefroutine lief auf jedem Bildschirm und
pruefte Ueberlauf, Tippziele, abgeschnittenen Text, Bilder ohne Quelle und
WCAG-Kontrast fuer jeden Textknoten. Dazu die Live-App mit echten Daten, die
Musterseite fuer Leerzustaende und das Panel zum Abgleich.
1. Deutsche Datumsangaben wurden falsch gelesen. new Date("01.03.2025")
liest amerikanisch: Tage bis 12 wurden still vertauscht, ab Tag 13 fiel
der Wert ganz weg. Die Erstzulassung stand auf zwei Bildschirmen
unterschiedlich da. alsZeitpunkt() erkennt jetzt ISO, TT.MM.JJJJ und
MM/JJJJ, weist unmoegliche Daten ab und fuehrt die Genauigkeit mit -
aus "08/2026" wird "August 2026", kein erfundener Erster.
2. Die Hauptuntersuchung war in beiden Oberflaechen unerreichbar. Das Panel
leitete sie aus der Erstzulassung ab, aber nur bei MM/JJJJ, und benutzte
den eingetragenen Wert gar nicht. Jetzt beide: eingetragene Faelligkeit
vor Servicebuch vor Erstzulassung + 24 Monate.
3. Die Tankstellenmarke stand zweimal da, wenn der Name kein Komma hat
("Shell München Ost"). ohneMarkeVorn() nimmt sie vorn ab.
4. Bilder wurden geholt, obwohl beide wussten, dass es sie nicht gibt -
fuenf 404 fuer dieselbe Datei in einem Ladevorgang. Jetzt gar keine
Adresse bei Stand 0; nachgemessen 4 Anfragen, alle 200.
5. Ein Bildelement ohne Quelle zeigte das kaputte Bildsymbol, und onerror
greift dort nicht: ohne src gibt es keinen Ladeversuch.
Dazu: leere Klammern beim Steuersatz, leere graue Kachel bei leerer
Leistungsgruppe, Umbruch auf dem Einrichtungsbildschirm, drei
Leerdarstellungen in einer Kachel, fehlende Grundschrift.
Apple HIG: Kontrast war an einer Stelle 3,18 statt 4,5, weisse Schrift auf
der Loeschflaeche 3,41/3,55. Rot als Schrift und Rot als Flaeche sind jetzt
getrennte Token (--bad / --bad-flaeche), beide Apples systemRed fuer
erhoehten Kontrast. Tippziele: unsichtbares 44x44-Overlay, wo die sichtbare
Groesse Teil des Bildes ist, echte Mindesthoehe, wo das Element Flaeche ist -
Formulare werden dadurch sichtbar hoeher.
Neu auf Wunsch: Wischen in der Bildergalerie (beide Richtungen) und die
HIG-konforme Loeschgeste - ein voller Wisch loescht ohne zweiten Tipp, ab
55 % der Zeilenbreite, mit wachsender roter Flaeche und erhaltener
Rueckfrage. Dabei fiel auf, dass der Zugwert aus dem React-Zustand gelesen
wurde und ein schneller Wisch dadurch verlorenging; er liegt jetzt in einer
Referenz.
Paritaet: alle 26 Routen und Titel decken sich, Fahrzeugstatus zeilengleich,
zwei ungeplante Abweichungen (Datumsformatierung, Herkunft der
Hauptuntersuchung) geschlossen.
tsc sauber, 271 Tests, vite build sauber, Design-System gebaut, Panel als
Modul geparst, audi_ha_test auf 2026.9.4.23 ohne Traceback. Live nachgemessen:
Datum auf beiden Bildschirmen gleich, keine 404 mehr, Zurueck-Pfeil sichtbar
34x34 und treffbar 44x44, Galerie wischt in beide Richtungen, voller Wisch
loest die Rueckfrage aus, keine Kontrast-Unterschreitung mehr.
426 lines
23 KiB
CSS
426 lines
23 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; --bad-flaeche:#D70015;
|
|
/* 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:#D70015; --bad-flaeche:#D70015;
|
|
--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}
|
|
|
|
/* --- Apple HIG: 44x44 pt als kleinstes Tippziel -------------------------
|
|
Wortgleich mit rahmen.css/screens.css der App (04.09.2026 gemessen).
|
|
Das Overlay laesst das Bild unveraendert und vergroessert nur, was der
|
|
Finger trifft; Mindesthoehen dort, wo das Element ohnehin Flaeche ist. */
|
|
#back, .ringsbtn, .icon-btn, .zahnrad {
|
|
position: relative;
|
|
}
|
|
|
|
#back::after, .ringsbtn::after, .icon-btn::after, .zahnrad::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: var(--r-pill);
|
|
}
|
|
|
|
.feld input, .feld select, .seg button {
|
|
min-height: 44px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
min-height: 44px;
|
|
}
|