Paritaetsrunden 2 und 3, Designpruefung umgesetzt (2026.8.30.8)
Drei zusammenhaengende Runden, alle live bei 375x812 gegen audi_ha_test geprueft und in beiden Codebasen angewandt. Paritaetsrunde 2: der gemeinsame Rahmen war das eigentliche Problem - Seitenrand, Kachelabstaende, Kopfleiste, Tableiste und vier Bausteine des Design-Systems trugen noch den Stand vor der iOS-Entscheidung. Dazu sieben Bildschirme neu aufgebaut. Zwei Panel-Fehler dabei mitbehoben: teaser() zeigte unter "Letzte Fahrt" den aeltesten Datensatz, und "Daten bearbeiten" war ein toter Knopf. Paritaetsrunde 3: das Panel hat nie Audi Type gerendert. @font-face in einem Shadow Root wird ignoriert - Schriftschnitte registriert der Browser pro Dokument, nie pro Shadow Tree. Die drei Schnitte liegen jetzt in audi-dashboard-schriften.css und werden ins Dokument gehaengt. Damit erledigt sich eine ganze Reihe von "die Schrift sieht anders aus"-Eindruecken: die beiden Anwendungen zeigten tatsaechlich verschiedene Schriften. Ausserdem "Daten bearbeiten" im Panel gebaut und portiert, das Zeilenmenue entfernt und die letzten neun Bildschirme angeglichen. Designpruefung: die fuenf Punkte der Reihenfolge. Beim vierten hat das Messen den Befund veraendert - gezaehlt waren die deklarierten Groessen, wirksam war laengst eine saubere Sieben-Schritt-Skala mit 27 Ausreissern; die sind jetzt auf den naechsten Schritt gezogen, keiner verschiebt sich um mehr als 1px. Zuletzt: die Standortvorschau zeichnete die falsche Nadel (das Panel wechselt den Icon-Satz ab 34px, die App nahm immer den grossen), und der Kopfabstand der App ist auf den sicheren Bereich reduziert - die 56px des Panels liegen dort unter der Kopfleiste von Home Assistant, in der nativen Huelle steht darueber nichts. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -101,17 +101,20 @@ input[type="date"].dm-eingabe {
|
||||
background: var(--tile);
|
||||
}
|
||||
|
||||
/* `.notiz` im Panel: --ios-fill statt --tile-2, 12px Radius, 14px Abstand
|
||||
nach oben, Zeilenhöhe 1,55 und normaler Schnitt. */
|
||||
.dm-notiz {
|
||||
font: inherit;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
color: var(--fg);
|
||||
background: var(--tile-2);
|
||||
background: var(--ios-fill);
|
||||
border: 0;
|
||||
border-radius: var(--r-func);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
min-height: 88px;
|
||||
line-height: 1.55;
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
}
|
||||
@@ -187,7 +190,7 @@ input[type="date"].dm-eingabe {
|
||||
}
|
||||
|
||||
.dm-einrichtung__hinweis {
|
||||
font-size: 11.5px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
color: var(--fg3);
|
||||
@@ -196,27 +199,27 @@ input[type="date"].dm-eingabe {
|
||||
|
||||
/* ------------------------------------------------- Leer- und Ladezustände */
|
||||
|
||||
/* `.leer` im Panel: linksbündig und knapp gesetzt (gap 8px, padding 4px 0 2px),
|
||||
Titel 16px/400 in --fg, Text 13,5px in --fg2. Hier war der Leerzustand
|
||||
zentriert, mit 44px Polster und dünnerem Schnitt - deutlich mehr Fläche als
|
||||
im Panel. */
|
||||
.dm-leer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--sp-2);
|
||||
padding: 44px 24px;
|
||||
padding: 4px 0 2px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
.dm-leer__titel {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.dm-leer__text {
|
||||
font-size: 13.5px;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
max-width: 34ch;
|
||||
margin: 0;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
@@ -228,7 +231,7 @@ input[type="date"].dm-eingabe {
|
||||
gap: var(--sp-2);
|
||||
padding: 44px 24px;
|
||||
color: var(--fg2);
|
||||
font-size: 13.5px;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@@ -238,10 +241,59 @@ input[type="date"].dm-eingabe {
|
||||
Fahrzeugbild und Name/Kennzeichen sitzen direkt auf dem Seitenhintergrund,
|
||||
nicht in einer grauen Karte. War hier bis 2026-08-30 fälschlich als
|
||||
Kachel mit Hintergrund gebaut (Parität-Audit). */
|
||||
/* Randloses Fahrzeugbild wie im Panel (`.szene.bleed{margin:-10px -20px 0;
|
||||
padding:0 0 10px}` plus `.szene.bleed .carbox{padding:0 8px}` und der
|
||||
Verlauf nach unten in die Fläche). Hier war das Bild bisher auf die
|
||||
Inhaltsbreite eingerückt und in eine abgerundete Kachel geschnitten -
|
||||
im Panel läuft es über die volle Bildschirmbreite und blendet nach unten
|
||||
aus. */
|
||||
.dm-szene {
|
||||
position: relative;
|
||||
border-radius: var(--r-tile);
|
||||
overflow: hidden;
|
||||
margin: -10px calc(-1 * var(--seitenrand)) 0;
|
||||
padding: 0 8px 10px;
|
||||
}
|
||||
|
||||
/* Die drei oberen Kacheln der Übersicht tragen im Panel eigene Abstände
|
||||
(20/22/22 statt der 14 aller anderen). */
|
||||
.dm-kopfblock {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dm-tankkachel,
|
||||
.dm-servicekachel {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dm-szene::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42%;
|
||||
background: linear-gradient(to bottom, transparent, var(--canvas) 78%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Bodenschatten unter dem Fahrzeug (`.szene.strasse::after` /
|
||||
`.szene.winter::after` im Panel, abschaltbar über den Schalter „Boden" in
|
||||
den Einstellungen). */
|
||||
.dm-szene--strasse::after,
|
||||
.dm-szene--winter::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 8%;
|
||||
right: 8%;
|
||||
bottom: 6px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse at center, var(--shade), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dm-szene--winter::after {
|
||||
background: radial-gradient(ellipse at center, rgba(150, 190, 255, .16), transparent 70%);
|
||||
}
|
||||
|
||||
/* Panel: .carbox ~120px, .szene ~130px hoch - ein schmales, breites Band,
|
||||
@@ -253,6 +305,35 @@ input[type="date"].dm-eingabe {
|
||||
aspect-ratio: 16 / 8;
|
||||
}
|
||||
|
||||
/* Ohne Foto bleibt die Fläche flach und läuft nicht randlos: sonst stünden
|
||||
172px leerer Platzhalter vor der Reichweite, der wichtigsten Zahl der
|
||||
Seite (`.bildbox.bild-fehlt.carfix.klein{height:120px}` und
|
||||
`.szene.bleed:has(.bild-fehlt)` im Panel). */
|
||||
/* 72px statt 120px: ohne hinterlegtes Foto stand hier eine leere Flaeche
|
||||
direkt ueber der Reichweite, der wichtigsten Zahl der Seite. Der
|
||||
Platzhalter bleibt sichtbar - er ist der einzige Hinweis, dass es diesen
|
||||
Bildplatz gibt - nur eben schmal (Designpruefung 2026-08-30). */
|
||||
.dm-szene .ads-bildbox:has(.ads-platzhalter) {
|
||||
aspect-ratio: auto;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.dm-galerie-wechsel .ads-bildbox:has(.ads-platzhalter) {
|
||||
aspect-ratio: auto;
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.dm-szene:has(.ads-platzhalter) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.dm-szene:has(.ads-platzhalter)::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dm-szene .ads-bild,
|
||||
.dm-szene img {
|
||||
width: 100%;
|
||||
@@ -265,8 +346,12 @@ input[type="date"].dm-eingabe {
|
||||
(Nutzerbericht "nicht linksbündig zum Rest der Seite", live gemessen:
|
||||
38px hier gegen 22px bei "Reichweite" - im Panel beide bei 16px). Nur
|
||||
oben/unten bleibt Abstand (zum Bild bzw. zur nächsten Kachel). */
|
||||
.dm-szene__text {
|
||||
padding: var(--sp-4) 0 var(--sp-5);
|
||||
/* Ohne eigenes Polster: im Panel sitzen Typenschild, Kennzeichen und
|
||||
Statuszeile direkt in einer randlosen `.tile.flat` (padding 0), das
|
||||
Kennzeichen mit 10px Abstand zum Schild. Die 16/22px hier machten den Block
|
||||
36px höher als im Panel (dort 89px, hier gemessen 125px). */
|
||||
.dm-szene__text > .ads-eyebrow {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Übersicht: "Nächster Service" als tippbare Kennzahl innerhalb der Kachel,
|
||||
@@ -298,11 +383,14 @@ button.dm-serviceblock:active {
|
||||
}
|
||||
.dm-serviceblock__chevron {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
color: var(--fg3);
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
/* Serviceart-Icon links der Kennzahl statt des Wortes "bis zum/zur ..." -
|
||||
deckungsgleich mit .fig-zeile im Panel (audi-dashboard.css). */
|
||||
@@ -324,20 +412,311 @@ button.dm-serviceblock:active {
|
||||
color: var(--fg2);
|
||||
flex: none;
|
||||
}
|
||||
/* `.zahnrad` im Panel: rechts oben in der Kachel, 44px Trefferfläche,
|
||||
17px Symbol. */
|
||||
.dm-kachel--zahnrad {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dm-kachel--zahnrad > .ads-eyebrow:first-child {
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
.dm-zahnrad {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 11px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
color: var(--fg3);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dm-zahnrad:hover,
|
||||
.dm-zahnrad:active {
|
||||
background: var(--tile-2);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.dm-zahnrad:active {
|
||||
transform: scale(.92);
|
||||
}
|
||||
|
||||
/* Rufnummern der Notruf-Kachel: sehen aus wie Aktionsknöpfe, sind aber Links
|
||||
(`<a class="aktion" href="tel:…">` im Panel). */
|
||||
.dm-waehlknopf {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* `.tile` der Kfz-Steuer steht im Panel mit 26px Abstand nach der
|
||||
Vertragskachel. */
|
||||
.dm-steuerkachel {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.dm-diagramm__fuss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Der Zoom-Knopf ist im Panel eine schmale Variante von `.aktion`
|
||||
(`padding:8px 16px;font-size:11px;width:auto;margin-top:0`). */
|
||||
.dm-zoomzurueck {
|
||||
width: auto;
|
||||
min-height: 0;
|
||||
margin-top: 0;
|
||||
padding: 8px 16px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dm-diagramm__tooltip {
|
||||
margin-top: var(--sp-3);
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* Ruhespannungs-Skala auf der Batterieseite (Panel: .bv-skala-kopf plus der
|
||||
Farbverlauf rot → gelb → grün und die drei Eckwerte darunter). */
|
||||
.dm-skalakopf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
letter-spacing: .01em;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
.dm-skalabalken {
|
||||
margin-top: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--r-pill);
|
||||
background: linear-gradient(to right, var(--bad), var(--warn), var(--ok));
|
||||
}
|
||||
|
||||
.dm-skalamarken {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.dm-skalamarken small {
|
||||
font-size: 12.5px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
.dm-bewertung {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.dm-bewertungstext {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: var(--fg2);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Antipp-Menü am Fahrzeugfoto (`.bildmenu` im Panel, iOS-Auflage: kein
|
||||
Rahmen, durchscheinend mit Weichzeichner). */
|
||||
.dm-bildklick {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dm-bildklick__flaeche {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dm-bildmenu-fang {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dm-bildmenu {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
bottom: var(--sp-5);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
padding: var(--sp-2);
|
||||
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);
|
||||
}
|
||||
|
||||
[data-theme="tag"] .dm-bildmenu {
|
||||
background: rgba(250, 250, 252, .92);
|
||||
}
|
||||
|
||||
.dm-bildmenu--rad {
|
||||
bottom: auto;
|
||||
top: 90px;
|
||||
left: 22px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.dm-bildmenu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
padding: 13px 16px;
|
||||
min-height: 46px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dm-bildmenu button:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.dm-bildmenu button:active {
|
||||
background: var(--shade);
|
||||
}
|
||||
|
||||
.dm-bildmenu__loeschen {
|
||||
color: var(--bad);
|
||||
}
|
||||
|
||||
/* Name des Autohauses: 15px in --fg, wie im Panel. */
|
||||
.dm-autohaus__name {
|
||||
font-size: 15px;
|
||||
margin-top: var(--sp-3);
|
||||
}
|
||||
|
||||
/* Fehlender Wert im technischen Datenblatt: „noch offen" in --fg3, wie im
|
||||
Panel (`<dd style="color:var(--fg3)">`). */
|
||||
.dm-offen {
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
/* Zweitzeile unter der Bezeichnung eines Beitragspostens (SF + Beitragssatz). */
|
||||
.dm-beitragsposten__sf {
|
||||
color: var(--fg3);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ Statistik */
|
||||
|
||||
/* `.tile-h` im Panel: der ganze Kachelkopf ist der Schalter zum Aufklappen,
|
||||
ohne eigenes Aussehen. */
|
||||
.dm-statkopf {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dm-statkopf__kopfzeile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.dm-statkopf__kopfzeile .ads-eyebrow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dm-statkopf[aria-expanded="true"] .ads-mark {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.dm-statkopf__zeile {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-top: var(--sp-3);
|
||||
}
|
||||
|
||||
.dm-statkopf__neben {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* `.quad` im Panel: vier Werte nebeneinander, Zahl im Wide-Schnitt. */
|
||||
.dm-quad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--sp-3);
|
||||
margin-top: var(--sp-3);
|
||||
}
|
||||
|
||||
.dm-quad__n {
|
||||
display: block;
|
||||
font-family: var(--font-wide);
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: var(--fg);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.dm-quad__l {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
letter-spacing: normal;
|
||||
color: var(--fg3);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.dm-warnton {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
/* `.wert` im Panel: der normale Fließtext einer Kachel. */
|
||||
.dm-wert {
|
||||
font-size: 14px;
|
||||
letter-spacing: normal;
|
||||
color: var(--fg2);
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
|
||||
.dm-servicezeile {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-4);
|
||||
margin-top: var(--sp-3);
|
||||
margin-top: 14px;
|
||||
padding-top: 13px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.dm-servicezeile__k {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* Service-Seite, "Anstehende Termine": drei sichtbar getrennte Bloecke statt
|
||||
einer Wertzeilen-Liste - deckungsgleich mit .termingruppe im Panel
|
||||
@@ -362,12 +741,12 @@ button.dm-serviceblock:active {
|
||||
flex: none;
|
||||
}
|
||||
.dm-tgkopf span {
|
||||
font-size: 16.5px;
|
||||
font-size: 16px;
|
||||
color: var(--fg);
|
||||
font-weight: 400;
|
||||
}
|
||||
.dm-tgvorgabe {
|
||||
font-size: 11.5px;
|
||||
font-size: 12.5px;
|
||||
color: var(--fg2);
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -388,7 +767,7 @@ button.dm-serviceblock:active {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.dm-tgprognose {
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
color: var(--fg2);
|
||||
margin-top: 6px;
|
||||
}
|
||||
@@ -568,7 +947,7 @@ button.dm-serviceblock:active {
|
||||
|
||||
.dm-fussnote {
|
||||
margin: var(--sp-3) 0 0;
|
||||
font-size: 11.5px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
color: var(--fg3);
|
||||
@@ -619,7 +998,7 @@ button.dm-serviceblock:active {
|
||||
.dm-sicherheitszeile:last-child { border-bottom: 0; }
|
||||
button.dm-sicherheitszeile { cursor: pointer; }
|
||||
button.dm-sicherheitszeile:active { background: var(--tile-2); }
|
||||
.dm-sicherheitszeile__text { flex: 1; font-size: 14.5px; }
|
||||
.dm-sicherheitszeile__text { flex: 1; font-size: 14px; }
|
||||
.dm-sicherheitszeile__chev { margin-left: auto; flex: none; color: var(--fg3); }
|
||||
|
||||
/* Sammelzeile über den vier Sicherheitszeilen - deckungsgleich mit dem
|
||||
@@ -648,34 +1027,101 @@ button.dm-sicherheitszeile:active { background: var(--tile-2); }
|
||||
|
||||
/* ------------------------------------------------------- Listenzeilen */
|
||||
|
||||
.dm-zeile {
|
||||
/* `.dm-zeile`/`.dm-zeile__wisch`/`.dm-zeile__menue` sind mit dem „···"-Knopf
|
||||
entfallen (siehe Zeilenmenue.tsx) - die Zeile ist jetzt direkt die
|
||||
Wischzeile, wie im Panel. */
|
||||
|
||||
/* Zuschnitt von `.leaf` im Panel (audi-dashboard.css + iOS-Auflage, live
|
||||
gemessen): 12px oben/unten, 40px links (Platz der Wischspalte), min-height
|
||||
56px, Trennlinie unten, Beschriftung 16px in --fg mit 12,5px-Zusatz in
|
||||
--fg3, Wert 15px in --fg2 mit demselben Zusatz. */
|
||||
.dm-blatt {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.dm-zeile__wisch {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Immer sichtbarer Zugang zu denselben Aktionen wie die Wischgeste — ohne ihn
|
||||
waere Loeschen fuer Sprachausgabe und Schaltersteuerung unerreichbar. */
|
||||
.dm-zeile__menue {
|
||||
flex: none;
|
||||
width: 44px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-4);
|
||||
width: 100%;
|
||||
padding: 12px 0 12px 40px;
|
||||
min-height: 56px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--fg3);
|
||||
border-radius: var(--r-func);
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dm-zeile__menue:hover {
|
||||
background: var(--shade);
|
||||
.dm-blatt--letzte {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
button.dm-blatt {
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
}
|
||||
|
||||
button.dm-blatt:active {
|
||||
background: var(--tile-2);
|
||||
}
|
||||
|
||||
/* `flex: 0 1 auto` wie `.leaf .k` im Panel — die Beschriftung nimmt ihre
|
||||
natürliche Breite und schrumpft erst, wenn es sonst nicht passt. Mit
|
||||
`1 1 auto` (dem Wert, den das Panel nur für die Zuletzt-Kachel setzt)
|
||||
brach „Fahrt ohne Ortsangabe" hier auf zwei Zeilen um, obwohl es im Panel
|
||||
einzeilig steht. */
|
||||
.dm-blatt__k {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.dm-blatt__v {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
text-align: right;
|
||||
font-size: 15px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
.dm-blatt__k small,
|
||||
.dm-blatt__v small {
|
||||
font-size: 12.5px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
.dm-blatt__chevron {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
flex: 0 0 auto;
|
||||
fill: none;
|
||||
stroke: var(--fg3);
|
||||
stroke-width: 1.6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* Die Zuletzt-Kachel der Übersicht: ohne die linke Wischspalte, und beide
|
||||
Werte auf einer gemeinsamen linken Kante (`.teaser .leaf .v{min-width:72px}`
|
||||
im Panel, samt der dort ausführlich begründeten flex-Verteilung). */
|
||||
.dm-teaser .dm-blatt {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.dm-teaser .dm-blatt__k {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.dm-teaser .dm-blatt__v {
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.dm-listenzeile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -718,7 +1164,7 @@ button.dm-listenzeile {
|
||||
}
|
||||
|
||||
.dm-listenzeile__unter {
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 300;
|
||||
color: var(--fg3);
|
||||
/* Umbrechen statt abschneiden: Datum, Uhrzeit und Dauer sind alle drei
|
||||
@@ -843,7 +1289,7 @@ button.dm-listenzeile {
|
||||
list-style: none;
|
||||
margin: var(--sp-2) 0 0;
|
||||
padding: 0;
|
||||
font-size: 13.5px;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
}
|
||||
@@ -868,11 +1314,14 @@ button.dm-listenzeile {
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* 170px hoch wie BV_H im Panel — 120px ließen die Kurve sichtbar flacher
|
||||
wirken als dort. */
|
||||
.dm-diagramm {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin: var(--sp-3) 0;
|
||||
height: 170px;
|
||||
margin: 14px 0 0;
|
||||
display: block;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.dm-knopfreihe {
|
||||
@@ -945,7 +1394,7 @@ button.dm-listenzeile {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: normal;
|
||||
color: var(--fg2);
|
||||
background: none;
|
||||
@@ -992,7 +1441,7 @@ button.dm-listenzeile {
|
||||
padding: 10px 16px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--r-pill);
|
||||
font-size: 13.5px;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
@@ -1053,7 +1502,8 @@ button.dm-listenzeile {
|
||||
position: relative;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 0 var(--sp-3);
|
||||
/* 14px wie jede andere Kachel im Panel (.tile). */
|
||||
margin: 0 0 14px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: var(--r-tile);
|
||||
@@ -1062,7 +1512,13 @@ button.dm-listenzeile {
|
||||
.dm-standort-vorschau {
|
||||
width: 100%;
|
||||
height: 190px;
|
||||
background: var(--tile);
|
||||
/* Im Panel deklariert .standort-vorschau zwar var(--tile), gewinnt aber
|
||||
nicht: Leaflet setzt der Karte selbst die Klasse .leaflet-container und
|
||||
sein Blatt liegt dort hinter den App-Blaettern. Sichtbar sind also
|
||||
tatsaechlich Leaflets eigene #ddd - waehrend die Kacheln laden und in
|
||||
Luecken. Hier steht derselbe Wert ausdruecklich, damit die Reihenfolge
|
||||
der gebuendelten Blaetter nichts daran aendert. */
|
||||
background: #ddd;
|
||||
}
|
||||
.dm-standort-leer {
|
||||
position: absolute;
|
||||
@@ -1132,7 +1588,7 @@ button.dm-listenzeile {
|
||||
min-height: 400px;
|
||||
border-radius: var(--r-tile);
|
||||
overflow: hidden;
|
||||
margin: 0 calc(-1 * var(--sp-5));
|
||||
margin: 0 calc(-1 * var(--seitenrand));
|
||||
}
|
||||
.dm-standort-karte {
|
||||
width: 100%;
|
||||
@@ -1236,7 +1692,7 @@ button.dm-listenzeile {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.dm-standortmenu__adresse {
|
||||
font-size: 13.5px;
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -1245,7 +1701,7 @@ button.dm-listenzeile {
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
margin-top: 8px;
|
||||
font-size: 13.5px;
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
.dm-standortmenu__status svg {
|
||||
@@ -1264,7 +1720,7 @@ button.dm-listenzeile {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 13.5px;
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
.dm-standortmenu__werte svg {
|
||||
@@ -1304,3 +1760,55 @@ button.dm-listenzeile {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Erläuternder Absatz unter einer Kachelüberschrift. Das Panel setzt ihn als
|
||||
`.label` mit einer Inline-Auflage (`color:var(--fg2);letter-spacing:0;
|
||||
text-transform:none;font-size:12.5px;line-height:1.6`) - unter anderem bei
|
||||
Fahrzeugprofil, Backup und Integration-Update.
|
||||
|
||||
Bewusst eine eigene Klasse statt einer Änderung an `.dm-fussnote`: die wird
|
||||
an 35 Stellen in 13 Dateien für ganz unterschiedliche Kleintexte benutzt
|
||||
(im Paritätsaudit zweimal als offener Punkt notiert). Wer die Panel-Optik
|
||||
braucht, nimmt diese Klasse; alles andere bleibt unangetastet. */
|
||||
.dm-erklaerung {
|
||||
display: block;
|
||||
margin: 10px 0 0;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* Karte auf der Einzelfahrt/dem Einzelbeleg: das Panel setzt sie als eigene
|
||||
Kachel ohne Innenabstand (`.mapbox`, 210px hoch, abgerundet). */
|
||||
.dm-kartenkachel {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Die Distanz-Kachel der Einzelfahrt trägt im Panel eigene Abstände
|
||||
(`style="margin:18px 0 14px"`). */
|
||||
.dm-distanzkachel {
|
||||
margin: 18px 0 14px;
|
||||
}
|
||||
|
||||
/* `.marke` im Panel: Bildmarke und Text nebeneinander, z. B. vor
|
||||
„SmartDeal-Ersparnis" auf dem Einzelbeleg. */
|
||||
.dm-marke {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dm-marke img {
|
||||
height: 13px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Leere Kartenfläche, solange die Tankstellenadresse noch aufgelöst wird.
|
||||
Maße wie `.mapbox` im Panel. */
|
||||
.dm-kartenplatz {
|
||||
height: 210px;
|
||||
background: var(--tile-2);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user