Paul Nothaft
bc2834e867
Befund 9: In Telefonbreite blendet die iOS-Auflage das Zahnrad aus, die Ringe
waren dort der einzige Zugang zu den Einstellungen - als div mit
pointer-events:none aber weder fokussierbar noch fuer Sprachausgabe
erreichbar. Sie sind jetzt ein echter Knopf mit aria-label, in jeder Breite
bedienbar und unabhaengig davon, ob die Auflage geladen wurde.
Befund 10: .navmarke{display:none} stand nur in der iOS-Auflage. Ohne sie
waere der Markenklon ein sechstes Element im fuenfspaltigen Raster und die
Menueleiste zerfiele. Die Regel steht jetzt in der Basis-CSS, die
Sichtbarkeit in der Auflage - genau andersherum als bisher.
Befund 13: Das Setup-Fenster deklariert role=dialog aria-modal=true, hielt den
Vertrag aber nicht ein. Escape schliesst jetzt (Reihenfolge: Auswahlliste,
dann Fenster), der Tabulator wandert im Fenster im Kreis statt in den
verdeckten Hintergrund, und der Filterschalter hat einen zugaenglichen Namen.
CSS-Spezifitaet: main{padding} in der Auflage verlor gegen main#view in der
Basis - auf grossen Bildschirmen blieb der Seitenrand bei 20px statt 44px.
Der Rand liegt jetzt in einer Variablen, die auch der negative Rand der
randlosen Standortkarte benutzt; sonst haette deren Ausgleich nach dem Fix
nicht mehr gepasst.
Drei Anzeigefehler, im Browser gegen die Testinstanz gefunden und behoben:
ein unlesbares Datum ergab NaN/N statt eines Strichs (das Profil wird laut
INSTALL.md von Hand gepflegt, ein ISO-Datum genuegt), ein fehlender
Tanksensor ergab 0 Prozent statt unbekannt, und neben dem Typenschild stand
die Ausfuehrung doppelt, wenn sie schon im Modellnamen steckt.
Alles im echten Panel geprueft: #marke ist ein BUTTON mit aria-label, der
Markenklon ist ohne die Auflage versteckt, der Seitenrand folgt der
Variablen, und die drei Anzeigen zeigen jetzt Striche statt Rechenreste.
250 lines
12 KiB
CSS
250 lines
12 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;
|
|
}
|
|
:host([data-theme="tag"]){
|
|
--canvas:#F2F2F7;
|
|
--tile:#FFFFFF;
|
|
--tile-2:#EFEFF4;
|
|
--line:rgba(60,60,67,.13);
|
|
--line-strong:rgba(60,60,67,.24);
|
|
--fg:#000000; --fg2:#3C3C43; --fg3:#8E8E93;
|
|
--ok:#34C759; --warn:#FF9F0A; --bad:#FF3B30;
|
|
--ios-sep:rgba(60,60,67,.16);
|
|
--ios-fill:rgba(120,120,128,.16);
|
|
--tile-deckend:#FFFFFF;
|
|
}
|
|
|
|
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 */
|
|
.topbar{align-items:center;gap:4px;padding:56px 20px 4px}
|
|
.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}
|
|
.back svg{width:22px;height:22px;color:var(--ios-tint)}
|
|
.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 */
|
|
.phone:has(.back.on) .topbar{padding:54px 16px 6px;gap:8px}
|
|
.phone:has(.back.on) .head{align-items:center}
|
|
.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:11.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)}
|
|
.tilebtn .go{top:50%;margin-top:-5px;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)}
|
|
|
|
.aktion{margin-top:18px;padding:15px;border:0;border-radius:14px;
|
|
background:var(--ios-tint);color:#fff;font-size:16px;font-weight:400;
|
|
letter-spacing:0;text-transform:none}
|
|
.aktion: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)}
|
|
.feld input:focus,.feld select:focus{background:var(--ios-fill);color:var(--fg)}
|
|
.mitEinheit input{background:var(--ios-fill);padding:8px 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)}
|
|
.switch input:checked+.track{background:var(--ios-tint)}
|
|
.switch input:checked+.track::before{transform:translateX(20px)}
|
|
|
|
.pill{font-size:12px;letter-spacing:.01em;text-transform:none;padding:5px 11px;
|
|
border:0;background:var(--ios-fill);color:var(--fg2)}
|
|
.pill.work{background:rgba(245,5,55,.16);color:var(--ios-tint)}
|
|
|
|
.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 ---------------- */
|
|
.bildmenu,.sdpopup{border:0;border-radius:14px;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)}
|
|
:host([data-theme="tag"]) .bildmenu,:host([data-theme="tag"]) .sdpopup{background:rgba(250,250,252,.92)}
|
|
.bildmenu button{padding:13px 16px;font-size:16px;border-bottom:1px solid var(--ios-sep)}
|
|
|
|
/* ---------------- 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 */
|
|
.tabbar.ohne .tab span{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)}
|
|
.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)}
|
|
.topbar{grid-column:2;grid-row:1;padding:38px 44px 8px}
|
|
.phone:has(.back.on) .topbar{grid-column:2;grid-row:1;padding:34px 44px 8px;justify-content:flex-start}
|
|
.phone:has(.back.on) .head{align-items:flex-start}
|
|
.phone:has(.back.on) .title{font-size:26px;text-align:left}
|
|
.title{font-size:34px}
|
|
.ptr{grid-column:2;grid-row:2}
|
|
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)}
|
|
.tab.on{background:rgba(245,5,55,.14);color:var(--ios-tint)}
|
|
.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}
|
|
|
|
.duo{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
.carfix,.bildbox.carfix{height:260px}
|
|
.carfix.klein,.bildbox.carfix.klein{height:220px}
|
|
.bildgrid{grid-template-columns:repeat(4,1fr)}
|
|
.quad{gap:14px}
|
|
}
|
|
|
|
/* Fahrzeugbild randlos wie in einer Fahrzeug-App: der Platzhalter bleibt
|
|
sichtbar, aber ohne technischen Strichrahmen. */
|
|
.szene{margin-bottom:20px}
|
|
.bildbox.bild-fehlt .platzhalter{border:0;background:var(--tile);border-radius:var(--r-tile)}
|
|
.platzhalter-datei{display:none}
|
|
|
|
/* Zeilen mit Wert plus Statuspunkt rechts (Sicherheitscheck) ruhiger setzen */
|
|
.row dd .dot{width:8px;height:8px}
|