Service-Termine: CI-Icons statt Wortlaut, Anstehende-Termine neu gegliedert
Naechster-Service-Kachel (Uebersicht): das "bis zum Oelwechsel"/
"bis zur Inspektion" vor der Kennzahl entfaellt zugunsten der echten
Audi-CI-Icons oil-change/inspection (vom Nutzer als SVG geliefert,
verbatim uebernommen wie die uebrigen CI-Icons). Hauptuntersuchung hat
kein eigenes Icon (kein Restkilometer-Ziel) und zeigt stattdessen ihr
Datum in derselben 40px-Groesse wie die km-Zahlen, mit dem Wort
"Hauptuntersuchung" darunter statt "bis zur Hauptuntersuchung" - vorher
war das Datumsfeld kleiner (30px), um Umbruch zu vermeiden; am
laufenden Panel nachgemessen, dass 40px keinen Umbruch verursacht.
"vsl." wird ausgeschrieben zu "voraussichtlich am". bisText()/ART_BIS
(Panel) und bisText()/BIS_TEXT (companion-app) wurden durch die
Aenderung ueberfluessig und als Orphans entfernt.
Anstehende-Termine-Box (Service-Seite): aus der dt/dd-Liste werden drei
sichtbar getrennte Bloecke (Kopfzeile mit Icon + Name + optionalem
Werkstatt-Chip, optionale Herstellervorgabe-Zeile, grosse Kennzahl,
optionale Prognose-Fusszeile) - Apple HIG (Hierarchie ueber
Position/Groesse, Inhalt nicht mit Nebensaechlichem ueberladen) plus
Audi-CI (Flaeche mit Haarlinien statt Karten). Durchlief drei
Mockup-Runden als Artefakt vor der Umsetzung, zwei davon vom Nutzer
zurueckgewiesen ("Major Information is missing" bzw. Kommentare zu
Icon-Groesse/Herstellervorgabe/Ausrichtung).
Herstellervorgabe-Logik korrigiert: eine Fahrzeugmeldung stammt immer
aus dem werkseigenen Wartungsprogramm des Bordcomputers, unabhaengig
vom in "Einrichten" gewaehlten App-Intervall - zaehlt also immer als
Herstellervorgabe, nicht nur wenn der App-Modus zufaellig "hersteller"
ist. Die Prognose-Fusszeile zeigt die Restkilometerzahl nur noch beim
eigenen (kuerzeren) Intervall, bei Herstellervorgabe nur noch das
Datum. "Eigenes" in der Ölwechsel-Intervall-Auswahl umbenannt zu
"Individuell".
companion-app-Portierung ist eine echte Neustrukturierung: die
bisherige "Naechster Oelwechsel"-Kachel mischte Oelwechsel-,
Inspektions- und Hauptuntersuchungs-Zeilen in einer gemeinsamen
Werteliste, jetzt "Anstehende Termine" mit denselben drei Bloecken wie
im Panel. Neuer Export letzterInspektion() in service.ts. Zwei
dokumentierte, vorbestehende Luecken bleiben bestehen statt neu
kaschiert zu werden: kein Werkstatt-Chip (companion-app hat keine
"Termin vereinbaren"-Funktion), Herstellervorgabe kommt aus
fahrzeug.oel.modus statt einem intervalle()-Aequivalent (das es dort
nicht gibt).
npm run typecheck sauber, npm run test 99/99, npm run build erfolgreich.
Panel deployed als Version 1787013003, synchron in installationspaket/,
live im Docker-Testcontainer per DOM-Abfrage geprueft.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -971,6 +971,16 @@ const CI = {
|
||||
verbatim uebernommen) - l im 48er-, s im 24er-Grid wie poi-l/poi-s. */
|
||||
editL: '<path fill="currentColor" d="M28.99 3.6c.34-.1.73-.11 1.1.04h.02l3.61 1.81c.35.18.58.5.68.84s.11.73-.04 1.1v.01l-2.01 4.06 4.02 2.02-6.72 13.44-.9-.44 6.28-12.56-3.13-1.56-13.6 27.47-6.3 4.66v-7.8L28.15 4.27c.18-.35.5-.58.84-.68Zm2.46 7.42 2-4.02a.65.65 0 0 0 0-.41c-.05-.14-.12-.22-.17-.24l-3.58-1.8a.65.65 0 0 0-.41 0c-.14.05-.22.12-.24.17L27.02 8.8zm-4.88-1.33-13.4 26.89 4.5 2.25L31.01 11.9l-4.44-2.2ZM13 37.61v4.9l3.95-2.93z"/>',
|
||||
editS: '<path fill="currentColor" d="m14.14 1.06 2.4 1.1.04.02c.23.16.42.39.52.65.1.27.13.6-.06.91l-.91 1.94 2.94 1.38-2.82 5.95-.9-.42 2.38-5.05-2.02-.95L9.5 19.8 5 23.57v-5.88l7.56-16.14.02-.03c.16-.23.39-.42.65-.52a1 1 0 0 1 .9.06Zm1.08 4.2.94-2 .02-.03v-.04a.4.4 0 0 0-.13-.16l-2.4-1.1-.02-.01h-.04a.4.4 0 0 0-.16.13L12.53 4l2.7 1.27Zm-3.12-.37L6.16 17.56l2.7 1.27L14.8 6.16 12.1 4.9ZM6 18.6v2.84l2.18-1.81L6 18.59Z"/>',
|
||||
/* oil-change-l/-s, inspection-l/-s aus dem Audi-CI-Icon-Satz (vom Nutzer als
|
||||
SVG geliefert, verbatim uebernommen) - l im 48er-, s im 24er-Grid wie
|
||||
poi-l/poi-s. Die -s-Variante steht links neben der Kennzahl im
|
||||
Nächster-Service-Block (vHome()) statt des vorherigen "bis zum/zur..."
|
||||
Textes - die Serviceart wird jetzt ueber das Icon erkannt, nicht ueber
|
||||
Worte. */
|
||||
oilChangeL: '<path fill="currentColor" d="M15 16a.5.5 0 0 0-.5.5c0 .28.22.5.5.5h5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5zm-1.5.5c0-.83.66-1.5 1.5-1.5h5a1.5 1.5 0 1 1 0 3h-2v3h5.67l3.92 2.94 16.45-5.48 3.72 1.86-2.11 2.81-2.17-1.08-9.65 3.86L27.77 35H9V24.73L5.82 22H1v-3.5h6.16l3.5 2.5H17v-3h-2a1.5 1.5 0 0 1-1.5-1.5M2 19.5V21h4.18L10 24.27V34h17.23l5.94-8.9 10.35-4.15 1.83.92.89-1.2-2.28-1.13-16.55 5.52L23.33 22H10.34l-3.5-2.5zm43.5 4.1.42.62-.42.28-.42-.28zm0 1.84a17 17 0 0 0-.8 1.55c-.14.34-.2.59-.2.73 0 .8.52 1.28 1 1.28s1-.49 1-1.28c0-.14-.06-.39-.2-.73a10 10 0 0 0-.8-1.55m0-.94.42-.28v.01l.01.02.02.03.03.05a18 18 0 0 1 1.25 2.29c.14.36.27.76.27 1.1 0 1.18-.82 2.28-2 2.28s-2-1.1-2-2.28c0-.34.13-.74.27-1.1.15-.38.35-.77.54-1.12a19 19 0 0 1 .76-1.25v-.02h.01z"/>',
|
||||
oilChangeS: '<path fill="currentColor" d="M9 8H7.5V7h4v1H10v2h2.77l.94 1.41 7.93-2.48 2.21 2.22-.7.7-1.79-1.78-1.03.32L15.25 17H4v-6.8L2.8 9H0V8h3.2l2 2H9zm-4 3v5h9.75l3.92-5.1-5.38 1.69L12.23 11z"/>',
|
||||
inspectionL: '<path fill="currentColor" d="M11.5 1.8 13 3.3v4l.7.7h4.6l.7-.7v-4l1.5-1.5L25 6.3v6.4l-5 5v24.8c0 1.98-1.52 3.5-3.5 3.5h-1a3.45 3.45 0 0 1-3.5-3.5V17.7l-5-5V6.3zm21.2.2h4.6L40 6.87v4.84l-3 3L36.9 26H40v3.12l-1 2v5.26l1 2v5.12a2.5 2.5 0 0 1-2.5 2.5h-5a2.5 2.5 0 0 1-2.5-2.5v-5.12l1-2v-5.26l-1-2V26h3V14.7l-3-3V6.88zm3.2 23.9.1-11.6 3-3V7.12L36.7 3h-3.4L31 7.13v4.16l3 3V25.9zM8 6.7v5.6l5 5v25.2c0 1.42 1.08 2.5 2.5 2.5h1c1.42 0 2.5-1.08 2.5-2.5V17.3l5-5V6.7l-3.5-3.5-.5.5v4L18.7 9h-5.4L12 7.7v-4l-.5-.5zM31 27v1.88l1 2v5.74l-1 2v4.88c0 .82.68 1.5 1.5 1.5h5c.82 0 1.5-.68 1.5-1.5v-4.88l-1-2v-5.74l1-2V27z"/>',
|
||||
inspectionS: '<path fill="currentColor" d="M3.3 0H5v3.3l.7.7h2.6l.7-.7V0h1.7L13 2.3v4.4l-3 3V21c0 .69-.3 1.42-.76 1.98A2.57 2.57 0 0 1 7.3 24h-.6c-.79 0-1.47-.42-1.93-.98A3.22 3.22 0 0 1 4 21V9.7l-3-3V2.3zm.4 1L2 2.7v3.6l3 3V21c0 .47.2.98.53 1.38.34.4.76.62 1.17.62h.6c.4 0 .82-.24 1.16-.65.34-.42.54-.94.54-1.35V9.3l3-3V2.7L10.3 1H10v2.7L8.7 5H5.3L4 3.7V1zm12.44-1h3.72L21 3.42V6.7l-1 1V14h1v7.5a2.5 2.5 0 0 1-2.5 2.5h-1a2.5 2.5 0 0 1-2.5-2.5V14h1V7.7l-1-1V3.43zM16 15v6.5c0 .82.68 1.5 1.5 1.5h1c.82 0 1.5-.68 1.5-1.5V15zm3-1V7.3l1-1V3.57L19.14 1h-2.28L16 3.58V6.3l1 1V14z"/>',
|
||||
};
|
||||
function ciSVG(pfad, px = 16) {
|
||||
return `<svg viewBox="0 0 24 24" width="${px}" height="${px}" fill="none" aria-hidden="true">${pfad}</svg>`;
|
||||
@@ -1089,14 +1099,15 @@ function teaser() {
|
||||
|
||||
function naechsterTermin() { return termine().slice().sort((a, b) => a.ziel - b.ziel)[0]; }
|
||||
|
||||
/* "der Ölwechsel", aber "die Inspektion"/"die Hauptuntersuchung" - ohne diese
|
||||
Zuordnung stünde auf der Übersicht "bis zum Inspektion". */
|
||||
const ART_BIS = {
|
||||
"Ölwechsel": "bis zum Ölwechsel",
|
||||
"Inspektion": "bis zur Inspektion",
|
||||
"Hauptuntersuchung": "bis zur Hauptuntersuchung",
|
||||
};
|
||||
const bisText = (art) => ART_BIS[art] || `bis zum nächsten Service (${art})`;
|
||||
// CI-Icon je Serviceart statt eines Wort-Zusatzes ("bis zum Ölwechsel" o.ä.) -
|
||||
// nur Ölwechsel/Inspektion haben eines, die Hauptuntersuchung nicht. Verwendet
|
||||
// von vHome() (Nächster-Service-Block) und vService() (Anstehende Termine).
|
||||
// Das Ölwechsel-Icon ist bei gleicher Boxgröße optisch kleiner als das
|
||||
// Inspektion-Icon (füllt in seinem eigenen 24x24-Raster nur eine 24x10-Fläche
|
||||
// statt fast der vollen Höhe) - deshalb eigene, größere Boxgröße statt einer
|
||||
// gemeinsamen Konstante.
|
||||
const ART_ICON = { "Ölwechsel": CI.oilChangeS, "Inspektion": CI.inspectionS };
|
||||
const ART_ICON_GROESSE = { "Ölwechsel": 26, "Inspektion": 20 };
|
||||
|
||||
function intervalle(t) {
|
||||
const oel = CAR.oel, b = t.basis;
|
||||
@@ -1281,17 +1292,26 @@ function vHome() {
|
||||
const hauptwert = restKm !== null
|
||||
? `${de(restKm)}<span class="unit">km</span>`
|
||||
: (datum ? dedat(datum) : "–");
|
||||
// Ohne Restkilometer steht das Datum selbst im Zahlenfeld - dann kleiner,
|
||||
// damit "15.04.2027" auf 375px nicht umbricht.
|
||||
const zahlGroesse = restKm !== null ? 40 : 30;
|
||||
// Ohne Restkilometer steht das Datum selbst im Zahlenfeld - auf Nutzerwunsch
|
||||
// jetzt in derselben Groesse wie die km-Zahl (vorher 30px, damit "15.04.2027"
|
||||
// auf 375px nicht umbricht - am laufenden Panel geprueft, dass es bei 40px
|
||||
// weiterhin einzeilig bleibt).
|
||||
const zahlGroesse = 40;
|
||||
// Icon statt "bis zum Ölwechsel"/"bis zur Inspektion" (nur fuer die beiden
|
||||
// Arten, die eines haben). Die Hauptuntersuchung hat kein Restkilometer-Ziel
|
||||
// und zeigt stattdessen den Art-Namen selbst unter dem Datum.
|
||||
const artIcon = ART_ICON[t.art];
|
||||
const nebenzeile = restKm !== null && datum
|
||||
? `${bisText(t.art)} · vsl. ${dedat(datum)}`
|
||||
: bisText(t.art);
|
||||
? `voraussichtlich am ${dedat(datum)}`
|
||||
: t.art;
|
||||
const figMarkup = artIcon
|
||||
? `<div class="fig-zeile">${ciSVG(artIcon, 31)}<div class="fig" style="font-size:${zahlGroesse}px">${hauptwert}</div></div>`
|
||||
: `<div class="fig" style="font-size:${zahlGroesse}px;margin-top:8px">${hauptwert}</div>`;
|
||||
return `<div class="tile" style="margin-bottom:22px">
|
||||
<button class="serviceblock" data-go="service:x">
|
||||
<span class="label">Nächster Service:</span>
|
||||
<svg class="go" viewBox="0 0 6 10"><polyline points="1,1 5,5 1,9"/></svg>
|
||||
<div class="fig" style="font-size:${zahlGroesse}px;margin-top:8px">${hauptwert}</div>
|
||||
${figMarkup}
|
||||
<span class="label" style="margin-top:8px">${nebenzeile}</span>
|
||||
</button>
|
||||
${kmZeile}
|
||||
@@ -1672,42 +1692,52 @@ function vService() {
|
||||
const sv = CAR.service;
|
||||
return `
|
||||
<div class="tile"><span class="label">Anstehende Termine</span>
|
||||
<dl class="rows" style="margin-top:10px">
|
||||
${termine().map((t, i, arr) => {
|
||||
const letzte = i === arr.length - 1 ? 'style="border-bottom:0"' : "";
|
||||
const iv = intervalle(t);
|
||||
if (!iv) return `<div class="row" ${letzte}>
|
||||
<dt>${t.art}</dt><dd style="color:var(--fg3)">kein Eintrag im Servicebuch</dd></div>`;
|
||||
const anzeige = iv.hersteller || iv.eigen;
|
||||
const fm = fahrzeugMeldungRoh(t.art);
|
||||
const fmDatum = fm.ts ? dedat(new Date(fm.ts)) : null;
|
||||
// Forecast-Zeile aus dem kundeneigenen Intervall in "Einrichten" mit
|
||||
// eigenständiger Reset-nach-Service-Logik (servicePrognose()): beim
|
||||
// Ölwechsel mit Restkilometern, bei der Inspektion auf Wunsch nur mit
|
||||
// dem Datum. Hauptuntersuchung bleibt bewusst ohne.
|
||||
const eigenOel = t.art === "Ölwechsel" ? oelwechselPrognose() : null;
|
||||
const eigenInsp = t.art === "Inspektion" ? inspektionPrognose() : null;
|
||||
const hatMeldung = fm.km != null || fmDatum;
|
||||
// Die Prognose steht als eigene Zeile ueber die volle Kachelbreite
|
||||
// unter dt/dd (.row-fussnote), nicht mehr in der rechten Spalte: dort
|
||||
// standen nur ~217px zur Verfuegung, in die "9.029 km, voraussichtlich
|
||||
// am 12.04.2027" zwangslaeufig zweizeilig umbrach.
|
||||
const fussnote = hatMeldung && eigenOel
|
||||
? `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}`
|
||||
: eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : "";
|
||||
return `<div class="row" ${letzte}>
|
||||
<dt>${t.art}
|
||||
${t.vereinbart ? `<br><span style="color:var(--red);font-size:11px">Werkstatt am ${dedat(new Date(t.vereinbart))}</span>` : ""}
|
||||
</dt>
|
||||
<dd>
|
||||
${iv.hersteller ? `<span class="label" style="margin-bottom:6px">Herstellervorgabe</span>` : ""}
|
||||
<span class="werte">${hatMeldung
|
||||
? `${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""}`
|
||||
: (eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum))}</span>
|
||||
</dd>
|
||||
${fussnote ? `<small class="row-fussnote">${fussnote}</small>` : ""}
|
||||
${termine().map((t) => {
|
||||
const artIcon = ART_ICON[t.art];
|
||||
const iconMarkup = artIcon ? ciSVG(artIcon, ART_ICON_GROESSE[t.art]) : "";
|
||||
const kopf = `<div class="tg-name">${iconMarkup}<span>${t.art}</span></div>`;
|
||||
const iv = intervalle(t);
|
||||
if (!iv) return `<div class="termingruppe">
|
||||
<div class="tg-kopf">${kopf}</div>
|
||||
<div class="tg-wert leer">kein Eintrag im Servicebuch</div>
|
||||
</div>`;
|
||||
const anzeige = iv.hersteller || iv.eigen;
|
||||
const fm = fahrzeugMeldungRoh(t.art);
|
||||
const fmDatum = fm.ts ? dedat(new Date(fm.ts)) : null;
|
||||
// Forecast-Zeile aus dem kundeneigenen Intervall in "Einrichten" mit
|
||||
// eigenständiger Reset-nach-Service-Logik (servicePrognose()): beim
|
||||
// Ölwechsel mit Restkilometern, bei der Inspektion auf Wunsch nur mit
|
||||
// dem Datum. Hauptuntersuchung bleibt bewusst ohne.
|
||||
const eigenOel = t.art === "Ölwechsel" ? oelwechselPrognose() : null;
|
||||
const eigenInsp = t.art === "Inspektion" ? inspektionPrognose() : null;
|
||||
const hatMeldung = fm.km != null || fmDatum;
|
||||
// Bei Herstellervorgabe rechnet die eigene Prognose ohnehin schon mit dem
|
||||
// Herstellerintervall - die Restkilometerzahl daneben waere nur eine
|
||||
// zweite, verwirrende km-Angabe neben dem Fahrzeug-Wert oben. Nur beim
|
||||
// eigenen (kuerzeren) Intervall ist sie eine echte Zusatzinformation.
|
||||
const fussnote = hatMeldung && eigenOel
|
||||
? (CAR.oel.modus === "hersteller"
|
||||
? `voraussichtlich am ${dedat(eigenOel.datum)}`
|
||||
: `${de(eigenOel.restKm)} km, voraussichtlich am ${dedat(eigenOel.datum)}`)
|
||||
: eigenInsp ? `voraussichtlich am ${dedat(eigenInsp.datum)}` : "";
|
||||
const wert = hatMeldung
|
||||
? `${fm.km != null ? de(fm.km) + " km" : ""}${fm.km != null && fmDatum ? " / " : ""}${fmDatum || ""}`
|
||||
: (eigenOel ? de(eigenOel.restKm) + " km · " + dedat(eigenOel.datum) : (anzeige.km !== null ? de(anzeige.km) + " km · " : "") + dedat(anzeige.datum));
|
||||
// Eine Fahrzeugmeldung stammt immer aus dem werkseigenen Wartungsprogramm
|
||||
// des Bordcomputers - das kennt das eigene, in "Einrichten" gewaehlte
|
||||
// Intervall gar nicht. Deshalb zaehlt sie unabhaengig von iv.hersteller
|
||||
// als Herstellervorgabe; nur der App-eigene Eigen-Intervall-Fallback
|
||||
// (anzeige.eigen/eigenOel bei modus "eigen") ist es nicht.
|
||||
const herstellervorgabe = hatMeldung || iv.hersteller;
|
||||
return `<div class="termingruppe">
|
||||
<div class="tg-kopf">
|
||||
${kopf}
|
||||
${t.vereinbart ? `<span class="tg-chip">Werkstatt am ${dedat(new Date(t.vereinbart))}</span>` : ""}
|
||||
</div>
|
||||
${herstellervorgabe ? `<div class="tg-vorgabe">Herstellervorgabe</div>` : ""}
|
||||
<div class="tg-wert">${wert}</div>
|
||||
${fussnote ? `<div class="tg-prognose">${fussnote}</div>` : ""}
|
||||
</div>`; }).join("")}
|
||||
</dl>
|
||||
</div>
|
||||
<div class="tile"><span class="label">Termin vereinbaren</span>
|
||||
${(() => { const ts = termine(), t = ts[Math.min(svAuswahl, ts.length - 1)];
|
||||
@@ -2058,7 +2088,7 @@ function vEinst() {
|
||||
<span class="label" style="margin-top:20px">Ölwechsel-Intervall</span>
|
||||
<div class="seg" style="margin-top:8px">
|
||||
<button data-oel="hersteller" class="${CAR.oel.modus === "hersteller" ? "on" : ""}">Herstellervorgabe</button>
|
||||
<button data-oel="eigen" class="${CAR.oel.modus === "eigen" ? "on" : ""}">Eigenes</button>
|
||||
<button data-oel="eigen" class="${CAR.oel.modus === "eigen" ? "on" : ""}">Individuell</button>
|
||||
</div>
|
||||
${CAR.oel.modus === "hersteller"
|
||||
? `<dl class="rows" style="margin-top:16px">
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version": 1787007000}
|
||||
{"version": 1787013003}
|
||||
|
||||
@@ -482,6 +482,9 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
.serviceblock:active { opacity: .55; }
|
||||
/* Beschriftung nie unter dem Chevron hindurchlaufen lassen */
|
||||
.serviceblock > .label:first-child { padding-right: 24px; }
|
||||
/* Serviceart-Icon links der Kennzahl statt des Wortes "bis zum/zur ...". */
|
||||
.fig-zeile { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
|
||||
.fig-zeile svg { color: var(--fg2); flex: 0 0 auto; }
|
||||
.servicezeile {
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
gap: var(--sp-4);
|
||||
@@ -489,6 +492,35 @@ button.tile, .tilebtn { transition: background .15s, transform .1s; }
|
||||
margin-top: 14px; padding-top: 13px;
|
||||
}
|
||||
|
||||
/* Anstehende Termine (vService): drei sichtbar getrennte Bloecke statt einer
|
||||
dt/dd-Liste - Apple HIG ("essential information... don't obscure it by
|
||||
crowding it with nonessential details") plus Audi-CI (Flaeche mit Haarlinien
|
||||
statt Karten, eigene Groessenklasse fuer Zahlen). Trennung ueber Abstand und
|
||||
eine Haarlinie zwischen den Bloecken, nicht ueber verschachtelte Kacheln.
|
||||
Jeder Block: Kopfzeile (Icon + Art-Name, optional ein Chip fuer einen
|
||||
vereinbarten Werkstatttermin), optionale Herstellervorgabe-Zeile, der Wert,
|
||||
optional die eigene Prognose als Fusszeile. */
|
||||
.termingruppe { padding: 18px 0; border-top: 1px solid var(--line); }
|
||||
.termingruppe:first-of-type { padding-top: 2px; border-top: 0; }
|
||||
.tg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.tg-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
||||
.tg-name svg { color: var(--fg2); flex: 0 0 auto; }
|
||||
.tg-name span { font-size: 16.5px; color: var(--fg); font-weight: 400; }
|
||||
/* Chip statt rotem Fliesstext fuer einen vereinbarten Werkstatttermin - Rot
|
||||
bleibt Akzent (Text/Rahmen), nie Flaeche, wie im Rest der App. */
|
||||
.tg-chip {
|
||||
font-size: 10.5px; color: var(--red);
|
||||
border: 1px solid var(--red); border-radius: var(--r-pill);
|
||||
padding: 3px 8px; white-space: nowrap; flex: 0 0 auto;
|
||||
}
|
||||
.tg-vorgabe { font-size: 11.5px; color: var(--fg2); margin-top: 8px; }
|
||||
.tg-wert {
|
||||
font-family: "Audi Type Wide", var(--font-stack); font-weight: 300;
|
||||
font-size: 22px; color: var(--fg); letter-spacing: -.005em; margin-top: 4px;
|
||||
}
|
||||
.tg-wert.leer { font-family: var(--font-stack); font-weight: 400; font-size: 15px; color: var(--fg3); margin-top: 8px; }
|
||||
.tg-prognose { font-size: 12px; color: var(--fg2); margin-top: 6px; }
|
||||
|
||||
.badge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.badge img { height: 18px; width: auto; display: none; }
|
||||
:host([data-theme=nacht]) .badge img.negative { display: block; }
|
||||
|
||||
Reference in New Issue
Block a user