Ueberschritten: nur die Zeile hinterlegen, Farbe je Schwelle trennen
Zwei Rueckmeldungen des Eigentuemers vom 07.09.2026.
1. Die Service-Kachel auf "Mein Audi" war als Ganzes gelb hinterlegt. Gelb
wird jetzt nur das ueberschrittene Feld, analog zur Termingruppe im
Service-Blatt: .row.ueberschritten bzw. .dm-wertzeile--ueberschritten,
12 % --warn mit -12px Aussenabstand bis an den Kachelrand. Die dafuer
gebaute Hilfsfunktion serviceUeberschritten() entfaellt ersatzlos.
2. Auch #C55300 wirkte braeunlich. Das ist die Schwelle, nicht der Geschmack:
Apples systemOrange #FF9500 kommt auf Weiss nur auf 2,20:1, jedes Orange
mit 4,5:1 liest sich als Braun. Deshalb traegt jetzt jedes Element seine
eigene WCAG-Schwelle:
--warn-fig 32px = Grosstext, 3:1 -> #DD6000 (3,65:1 auf Weiss)
die Marke 10,5px = Kleintext, 4,5:1 -> gefuellte Pille #C55300 mit
weisser Schrift (4,55:1) statt duenner Schrift
Nachts #FF9F0A (8,41:1) bzw. #FFA056 mit #171B21 (8,57:1).
Im Panel live gemessen (Testcontainer, Tagmodus): Kachelgrund rgb(255,255,255),
nur die HU-Zeile rgba(255,159,10,0.12) und um 2 x 12px breiter als die uebrigen
Zeilen, Marke rgb(255,255,255) auf rgb(197,83,0), Kennzahl rgb(221,96,0).
Damit ist Abschnitt DJ auch im Panel optisch geprueft - OFFEN.md 3b angepasst.
327/327 Tests, tsc sauber, Buendel auf 2026.9.6.9 neu gebaut.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -12799,6 +12799,48 @@ Und die Ausgangsfrage: die **Fläche** ist Apple (die 2026-08-13 übernommene
|
||||
iOS-Palette), das Audi-CI-Gelb `#ffaa00` wurde damals abgelöst und liefert als
|
||||
Schrift nur 1,91:1. Die **Schrift** ist gemessen, nicht übernommen.
|
||||
|
||||
### Nachtrag 07.09.2026: eine Farbe reichte nicht, zwei Rollen reichen
|
||||
|
||||
Auch `#C55300` meldete der Eigentümer als „bräunlich". Der Befund ist keine
|
||||
Geschmacksfrage, sondern die Schwelle selbst: **kräftiges Orange ist bei 4,5:1
|
||||
nicht zu haben.** Apples systemOrange `#FF9500` kommt auf Weiß auf **2,20:1**;
|
||||
jedes Orange, das 4,5:1 schafft, ist so dunkel, dass es als Braun gelesen wird.
|
||||
|
||||
Deshalb tragen die beiden Elemente jetzt **jeweils ihre eigene Schwelle**:
|
||||
|
||||
| Element | Größe | WCAG-Schwelle | Wert | gemessen |
|
||||
|---|---|---|---|---|
|
||||
| Kennzahl `--warn-fig` | 32 px = Großtext | 3:1 | `#DD6000` | 3,65:1 auf Weiß, 3,34:1 auf der Hülle |
|
||||
| Marke, Tag | 10,5 px = Kleintext | 4,5:1 | `#C55300` **gefüllt**, Schrift weiß | 4,55:1 |
|
||||
| Kennzahl nachts | 32 px | 3:1 | `#FF9F0A` | 8,41:1 auf `#171B21` |
|
||||
| Marke, Nacht | 10,5 px | 4,5:1 | `#FFA056` gefüllt, Schrift `#171B21` | 8,57:1 |
|
||||
|
||||
Der Kniff bei der Marke: **nicht dünne Schrift, sondern eine gefüllte Pille.**
|
||||
Derselbe Ton liest sich als Fläche eindeutig als Orange, während er als
|
||||
1 px starker Buchstabenstrich bräunlich wirkt - und weiße Schrift auf `#C55300`
|
||||
erfüllt die 4,5:1 exakt so, wie es umgekehrt nicht ginge.
|
||||
|
||||
Tokens dafür: `--warn-fig`, `--warn-marke-grund`, `--warn-marke-schrift` in
|
||||
`audi-dashboard-ios.css` und `design-system/src/tokens/tokens.css`.
|
||||
|
||||
### Nachtrag 07.09.2026: nur die Zeile, nicht die Kachel
|
||||
|
||||
Die Service-Kachel auf „Mein Audi" war kurzzeitig **als Ganzes** hinterlegt
|
||||
(`.tile.ueberschritten`). Der Eigentümer hat das zurückgewiesen: gelb wird nur
|
||||
das überschrittene Feld, analog zur Termingruppe im Service-Blatt. Die Kachel
|
||||
trägt jetzt keinen Sonderstil mehr, stattdessen bekommt die betroffene Zeile
|
||||
`.row.ueberschritten` (App: `.dm-wertzeile--ueberschritten`) - 12 % `--warn`,
|
||||
`--r-tile`, und über `margin-left/right: -12px` läuft die Tönung bis an den
|
||||
Kachelrand. Die dafür gebaute Hilfsfunktion `serviceUeberschritten()` ist
|
||||
ersatzlos entfallen; die App-Seite reicht `ueberschritten` als Eigenschaft an
|
||||
`Wertzeile` durch.
|
||||
|
||||
**Gemessen im Panel (Testcontainer, 2026.9.6.9):** Kachelgrund
|
||||
`rgb(255,255,255)`, nur die HU-Zeile `rgba(255,159,10,0.12)` und mit 752 px
|
||||
gegenüber 728 px der ungetönten Zeilen um genau 2 × 12 px breiter - die Tönung
|
||||
reicht also bis an den Rand. Marke: `rgb(255,255,255)` auf `rgb(197,83,0)`.
|
||||
Kennzahl der Übersicht: `rgb(221,96,0)`.
|
||||
|
||||
### Geprüft
|
||||
|
||||
* **15 Fälle** gegen die echten Panel-Funktionen (aus der Panel-Quelle
|
||||
|
||||
@@ -100,14 +100,15 @@ Beispielzahlen in der Statistik und ein überholter TODO-Kommentar.
|
||||
|
||||
## 3b. Optisch noch nicht gesehen
|
||||
|
||||
**Das Panel.** Die Markierung überschrittener Servicetermine (Abschnitt DJ) ist
|
||||
in der **App** live geprüft, im **Panel** nicht - dafür fehlt eine angemeldete
|
||||
Home-Assistant-Sitzung. Belegt ist es dort über den Paritätstest gegen die
|
||||
echten Panel-Funktionen und den Modul-Parse.
|
||||
**Erledigt am 07.09.2026.** Die Markierung überschrittener Servicetermine
|
||||
(Abschnitt DJ) ist jetzt auch im **Panel** live gesehen und gemessen -
|
||||
Übersicht und „Mein Audi", Tagmodus, Fassung 2026.9.6.9.
|
||||
|
||||
*Was zu tun ist:* bei nächster Gelegenheit mit angemeldeter Sitzung einmal
|
||||
ansehen; ein vorübergehend zurückdatiertes Erstzulassungsdatum erzeugt den Fall
|
||||
(hinterher zurückstellen).
|
||||
*Offen bleibt allein:* das Erstzulassungsdatum im Testcontainer steht
|
||||
vorübergehend auf **01.03.2020**, damit der Fall überhaupt auftritt. Das
|
||||
Original liegt unter `/config/audi_dashboard/fahrzeugprofil.json.ansicht` und
|
||||
ist zurückzustellen, sobald der Eigentümer sagt, dass er fertig geschaut hat.
|
||||
Der **Nachtmodus** ist nur gerechnet, nicht gesehen.
|
||||
|
||||
## 4. Gemeldet, aber nicht reproduzierbar
|
||||
|
||||
|
||||
@@ -255,7 +255,14 @@ export function MeinAudi({ geheZu }: { geheZu: (name: SeitenName, id?: string) =
|
||||
/>
|
||||
</Tile>
|
||||
|
||||
<Tile variant="button" chevron onClick={() => geheZu("service")}>
|
||||
{/* Die Kachel wird als Ganzes hinterlegt, wenn IRGENDEIN Termin
|
||||
überschritten ist - sie fasst alle drei zusammen; die Marke in der
|
||||
Zeile sagt welcher (Nutzerwunsch 07.09.2026). */}
|
||||
<Tile
|
||||
variant="button"
|
||||
chevron
|
||||
onClick={() => geheZu("service")}
|
||||
>
|
||||
<span className="ads-eyebrow">Service</span>
|
||||
<Werteliste
|
||||
kinder={
|
||||
@@ -276,13 +283,14 @@ export function MeinAudi({ geheZu }: { geheZu: (name: SeitenName, id?: string) =
|
||||
wert={
|
||||
t.ueber ? (
|
||||
<>
|
||||
{t.haupt} <UeberschrittenMarke />
|
||||
<UeberschrittenMarke /> {t.haupt}
|
||||
</>
|
||||
) : (
|
||||
t.haupt
|
||||
)
|
||||
}
|
||||
{...(t.neben ? { zusatz: t.neben } : {})}
|
||||
ueberschritten={t.ueber}
|
||||
/>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -267,20 +267,17 @@ export function Uebersicht({ geheZu }: { geheZu: (name: SeitenName, id?: string)
|
||||
size={32}
|
||||
/>
|
||||
)
|
||||
return Symbol ? (
|
||||
/* Immer die Zeile, auch ohne Symbol: die Marke steht neben der
|
||||
Kennzahl (Nutzerwunsch 07.09.2026 - die Kachel soll durch sie
|
||||
nicht höher werden), und ohne sie hätte die Marke keinen Platz. */
|
||||
return (
|
||||
<div className="dm-servicefig">
|
||||
<Symbol groesse={31} />
|
||||
{Symbol && <Symbol groesse={31} />}
|
||||
{fig}
|
||||
{serviceUeber && <UeberschrittenMarke />}
|
||||
</div>
|
||||
) : (
|
||||
fig
|
||||
)
|
||||
})()}
|
||||
{serviceUeber && (
|
||||
<div className="dm-servicemarke">
|
||||
<UeberschrittenMarke />
|
||||
</div>
|
||||
)}
|
||||
{/* Im Panel ist auch diese Nebenzeile ein `.label` (13px, --fg3),
|
||||
nicht die kleinere Fußnote (11,5px/300), die hier stand. */}
|
||||
<span className="ads-eyebrow" style={{ marginTop: "8px" }}>
|
||||
|
||||
@@ -266,6 +266,7 @@ export function Wertzeile({
|
||||
zusatz,
|
||||
hinweis,
|
||||
warnung,
|
||||
ueberschritten,
|
||||
}: {
|
||||
label: ReactNode
|
||||
wert: ReactNode
|
||||
@@ -277,9 +278,12 @@ export function Wertzeile({
|
||||
/** Hebt den Wert als abweichend hervor (var(--warn)), wie das Panel es bei
|
||||
einem Dongle-Wert tut, der nicht zu unserer Einstellung passt. */
|
||||
warnung?: boolean
|
||||
/** Hinterlegt die ganze Zeile blass gelb - fuer einen ueberschrittenen
|
||||
Servicetermin. Nur die Zeile, nicht die Kachel (Nutzerwunsch 07.09.2026). */
|
||||
ueberschritten?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="dm-wertzeile">
|
||||
<div className={`dm-wertzeile${ueberschritten ? " dm-wertzeile--ueberschritten" : ""}`}>
|
||||
<dt>{label}</dt>
|
||||
<dd
|
||||
className={
|
||||
|
||||
@@ -2417,21 +2417,31 @@ input[type="range"] {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Überschrittene Servicetermine: dezent hinterlegt statt umgefärbt, damit die
|
||||
Zeile lesbar bleibt und der Hinweis trotzdem auffällt (Ansage des
|
||||
Eigentümers 07.09.2026). --warn ist die Fläche, --warn-text die Schrift -
|
||||
dieselbe Rollenteilung wie bei --bad/--bad-flaeche im Panel, und aus
|
||||
demselben Grund: #FF9F0A als Text auf Weiß sind 2.06:1.
|
||||
/* Überschrittene Servicetermine. --warn ist die FLÄCHE (12 % hinterlegt),
|
||||
--warn-text die SCHRIFT - dieselbe Rollenteilung wie bei --bad/--bad-flaeche
|
||||
im Panel.
|
||||
|
||||
Warum nicht Apples eigener Kontrastwert? Am 07.09.2026 auf
|
||||
developer.apple.com/design/human-interface-guidelines/color nachgeschlagen:
|
||||
Yellow "Increased contrast (light)" ist #A16A00, Orange #C55300 - auf UNSEREM
|
||||
Grund nur 4.19 bzw. 4.16:1. Apples Schwelle gilt für Schrift auf einfarbigem
|
||||
Grund; die 12%-Hinterlegung hier senkt sie darunter. Deshalb der gemessene
|
||||
Wert #A15800 (4.90:1) statt eines übernommenen.
|
||||
Die Schrift ist Apples eigener Kontrastwert: Orange "Increased contrast",
|
||||
#C55300 hell und #FFA056 dunkel, am 07.09.2026 auf
|
||||
developer.apple.com/design/human-interface-guidelines/color nachgeschlagen
|
||||
(die Hexwerte stehen dort nur im Alternativtext der Farbfelder). Vorher stand
|
||||
hier ein selbst hergeleitetes #A15800 - rechnerisch kontraststärker, vom
|
||||
Eigentümer aber zu Recht als "braun statt gelb" gemeldet.
|
||||
|
||||
Auf dem hinterlegten Grund (#FFF3E2 tags, #33311E nachts) misst --warn-text
|
||||
4.90:1 bzw. 9.30:1 - beides über der 4.5:1-Grenze für kleine Schrift. */
|
||||
Auch #C55300 wurde als bräunlich gemeldet (07.09.2026). Ursache ist die
|
||||
Schwelle, nicht der Geschmack: kräftiges Orange ist dunkel genug für 4.5:1
|
||||
nicht zu haben - Apples systemOrange #FF9500 kommt auf Weiß nur auf 2.20:1.
|
||||
Deshalb sind die beiden Rollen jetzt getrennt, jede an IHRER Schwelle:
|
||||
|
||||
--warn-fig 32px = Großtext, Schwelle 3:1 -> #DD6000 (3.65:1 auf Weiß,
|
||||
3.34:1 auf der Hülle; nachts #FF9F0A mit 8.41:1)
|
||||
die Marke 10.5px = Kleintext, Schwelle 4.5:1 -> keine dünne Schrift,
|
||||
sondern eine GEFÜLLTE Pille: #C55300 mit weißer Schrift
|
||||
(4.55:1; nachts #FFA056 mit #171B21, 8.57:1). Als Fläche
|
||||
liest sich derselbe Ton als Orange, nicht als Braun.
|
||||
|
||||
Alle Werte am 07.09.2026 nach WCAG 2.1 gerechnet, Hülle = 12 % --warn auf
|
||||
dem jeweiligen Kachelgrund. */
|
||||
.dm-termingruppe--ueberschritten {
|
||||
background: color-mix(in srgb, var(--warn) 12%, transparent);
|
||||
border-radius: var(--r-tile);
|
||||
@@ -2440,25 +2450,38 @@ input[type="range"] {
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
}
|
||||
/* Die Trennlinie zur Vorgängerzeile liefe über die abgerundete Fläche - die
|
||||
übernimmt hier die Abgrenzung. */
|
||||
.dm-termingruppe--ueberschritten,
|
||||
.dm-termingruppe--ueberschritten + .dm-termingruppe {
|
||||
border-top: 0;
|
||||
}
|
||||
.dm-ueberschritten-marke {
|
||||
font-size: 10.5px;
|
||||
color: var(--warn-text);
|
||||
border: 1px solid var(--warn-text);
|
||||
font-weight: 600;
|
||||
color: var(--warn-marke-schrift);
|
||||
background: var(--warn-marke-grund);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 3px 8px;
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dm-tgkopf .dm-ueberschritten-marke { margin-left: auto; }
|
||||
/* Auf der Übersicht wechselt zusätzlich die Kennzahl die Farbe - dort ist sie
|
||||
die Aussage, nicht nur ihr Rahmen. */
|
||||
.dm-serviceblock--ueberschritten .ads-fig,
|
||||
.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-text); }
|
||||
.dm-servicemarke { display: inline-flex; margin-top: 8px; }
|
||||
.dm-serviceblock--ueberschritten .ads-fig * { color: var(--warn-fig); }
|
||||
/* Auf der Übersicht neben der Kennzahl, nicht darunter - die Kachel soll durch
|
||||
die Markierung nicht höher werden (Nutzerwunsch 07.09.2026). */
|
||||
.dm-servicefig .dm-ueberschritten-marke { margin-left: 10px; }
|
||||
/* In "Mein Audi" links vom Wert. */
|
||||
.dm-wertzeile .dm-ueberschritten-marke { margin-right: 8px; }
|
||||
/* In "Mein Audi" wird NUR die überschrittene Zeile hinterlegt, nicht die ganze
|
||||
Kachel - analog zur Termingruppe im Service-Blatt (Nutzerwunsch 07.09.2026).
|
||||
Der volle Rand kommt über die negativen Außenabstände. */
|
||||
.dm-wertzeile--ueberschritten {
|
||||
background: color-mix(in srgb, var(--warn) 12%, transparent);
|
||||
border-radius: var(--r-tile);
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":"2026.9.6.7","sha256":"1c9c672a258f7540a0186ebc12d32965d472478923ff3c44a013d46f58a3805d","bytes":379101,"gebaut":"2026-09-07T12:06:15Z"}
|
||||
{"version":"2026.9.6.9","sha256":"b7bb80fc6f108299e04a389a200756bc4b060767dbed3e157a7f1850b613e221","bytes":379205,"gebaut":"2026-09-07T12:34:09Z"}
|
||||
Binary file not shown.
@@ -2483,18 +2483,20 @@ function vHome() {
|
||||
const nebenzeile = restKm !== null && datum
|
||||
? `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>`;
|
||||
// Auf der Uebersicht wechselt zusaetzlich die Kennzahl selbst die Farbe -
|
||||
// sie ist hier die Aussage, nicht nur ihr Rahmen (Ansage des Eigentuemers).
|
||||
const ueber = terminUeberschritten(datum, t.datum);
|
||||
// Immer eine fig-zeile, auch ohne Icon: die Marke steht neben der Kennzahl
|
||||
// (Nutzerwunsch 07.09.2026 - die Kachel soll durch sie nicht hoeher werden),
|
||||
// und ohne diese Zeile haette sie dort keinen Platz.
|
||||
const figMarkup = `<div class="fig-zeile">${artIcon ? ciSVG(artIcon, 31) : ""}`
|
||||
+ `<div class="fig" style="font-size:${zahlGroesse}px">${hauptwert}</div>`
|
||||
+ `${ueber ? UEBERSCHRITTEN_MARKE : ""}</div>`;
|
||||
return `<div class="tile" style="margin-bottom:22px">
|
||||
<button class="serviceblock${ueber ? " ueberschritten" : ""}" 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>
|
||||
${figMarkup}
|
||||
${ueber ? `<div class="servicemarke">${UEBERSCHRITTEN_MARKE}</div>` : ""}
|
||||
<span class="label" style="margin-top:8px">${nebenzeile}</span>
|
||||
</button>
|
||||
${kmZeile}
|
||||
@@ -2667,16 +2669,16 @@ function vAudi() {
|
||||
if (fm.ts == null && fm.km == null) {
|
||||
const x = terminText(t);
|
||||
const ueber = terminUeberschritten(t.ziel, t.datum);
|
||||
return `<div class="row" ${letzte}>
|
||||
return `<div class="row${ueber ? " ueberschritten" : ""}" ${letzte}>
|
||||
<dt>${t.art}${t.art === "Inspektion" ? eigen : ""}</dt>
|
||||
<dd>${x.haupt}${ueber ? UEBERSCHRITTEN_MARKE : ""}${x.neben ? `<small style="text-align:left">${x.neben}</small>` : ""}</dd></div>`;
|
||||
<dd>${ueber ? UEBERSCHRITTEN_MARKE : ""}${x.haupt}${x.neben ? `<small style="text-align:left">${x.neben}</small>` : ""}</dd></div>`;
|
||||
}
|
||||
const haupt = fm.ts ? dedat(new Date(fm.ts)) : "";
|
||||
const neben = fm.km != null ? "in " + de(fm.km) + " km" : "";
|
||||
const ueber = terminUeberschritten(fm.ts, t.ziel, t.datum);
|
||||
return `<div class="row" ${letzte}>
|
||||
return `<div class="row${ueber ? " ueberschritten" : ""}" ${letzte}>
|
||||
<dt>${t.art}${eigen}</dt>
|
||||
<dd>${haupt}${ueber ? UEBERSCHRITTEN_MARKE : ""}${neben ? `<span style="display:block">${neben}</span>` : ""}</dd></div>`;
|
||||
<dd>${ueber ? UEBERSCHRITTEN_MARKE : ""}${haupt}${neben ? `<span style="display:block">${neben}</span>` : ""}</dd></div>`;
|
||||
}).join("")}
|
||||
</dl></button>
|
||||
<button class="tile tilebtn" data-go="vers:x">
|
||||
|
||||
@@ -25,7 +25,8 @@
|
||||
--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; --warn-text:#FFD60A;
|
||||
--ok:#30D158; --warn:#FFD60A; --bad:#FF453A; --bad-flaeche:#D70015; --warn-text:#FFA056;
|
||||
--warn-fig:#FF9F0A; --warn-marke-grund:#FFA056; --warn-marke-schrift:#171B21;
|
||||
/* 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
|
||||
@@ -45,7 +46,8 @@
|
||||
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; --warn-text:#A15800;
|
||||
--ok:#34C759; --warn:#FF9F0A; --bad:#D70015; --bad-flaeche:#D70015; --warn-text:#C55300;
|
||||
--warn-fig:#DD6000; --warn-marke-grund:#C55300; --warn-marke-schrift:#FFFFFF;
|
||||
--ios-sep:rgba(60,60,67,.16);
|
||||
--ios-fill:rgba(120,120,128,.16);
|
||||
--tile-deckend:#FFFFFF;
|
||||
|
||||
@@ -655,46 +655,60 @@ button.leaf:active { background: var(--tile-2); }
|
||||
.tg-wert.leer { font-family: var(--font-stack); font-weight: 400; font-size: 15px; color: var(--fg3); margin-top: 8px; }
|
||||
.tg-prognose { font-size: 12.5px; color: var(--fg2); margin-top: 6px; }
|
||||
|
||||
/* Ueberschrittene Servicetermine: dezent hinterlegt statt umgefaerbt, damit die
|
||||
Zeile lesbar bleibt und der Hinweis trotzdem auffaellt (Ansage des
|
||||
Eigentuemers 07.09.2026). --warn ist die Flaeche, --warn-text die Schrift -
|
||||
dieselbe Rollenteilung wie bei --bad/--bad-flaeche, und aus demselben Grund:
|
||||
#FF9F0A als Text auf Weiss sind 2.06:1.
|
||||
/* Ueberschrittene Servicetermine. --warn ist die FLAECHE (12% hinterlegt),
|
||||
--warn-text die SCHRIFT - dieselbe Rollenteilung wie bei --bad/--bad-flaeche.
|
||||
|
||||
Warum nicht Apples eigener Kontrastwert? Am 07.09.2026 auf
|
||||
Die Schrift ist Apples eigener Kontrastwert: Orange "Increased contrast",
|
||||
#C55300 hell und #FFA056 dunkel, am 07.09.2026 auf
|
||||
developer.apple.com/design/human-interface-guidelines/color nachgeschlagen
|
||||
(die Werte stehen dort nur im Alternativtext der Farbfelder, nicht im Text):
|
||||
Yellow "Increased contrast (light)" ist #A16A00, Orange #C55300. Beide
|
||||
liefern auf UNSEREM Grund nur 4.19 bzw. 4.16:1 - Apples Schwelle gilt fuer
|
||||
Schrift auf einfarbigem Grund, die 12%-Hinterlegung hier senkt sie darunter.
|
||||
Deshalb der gemessene Wert #A15800 (4.90:1) statt eines uebernommenen.
|
||||
(die Hexwerte stehen dort nur im Alternativtext der Farbfelder). Vorher stand
|
||||
hier ein selbst hergeleitetes #A15800 - rechnerisch kontraststaerker, vom
|
||||
Eigentuemer aber zu Recht als "braun statt gelb" gemeldet.
|
||||
|
||||
Nebenbefund derselben Recherche: die Seite zeigt inzwischen die neue
|
||||
("unified") Palette - systemRed dunkel steht dort auf #FF4245, dieses Projekt
|
||||
fuehrt #FF453A aus der aelteren. Einen einzelnen Wert aus der neuen Generation
|
||||
hereinzunehmen waere ohnehin inkonsistent gewesen.
|
||||
Auch #C55300 wurde als braeunlich gemeldet (07.09.2026). Ursache ist die
|
||||
Schwelle, nicht der Geschmack: kraeftiges Orange ist dunkel genug fuer 4.5:1
|
||||
nicht zu haben - Apples systemOrange #FF9500 kommt auf Weiss nur auf 2.20:1.
|
||||
Deshalb sind die beiden Rollen jetzt getrennt, jede an IHRER Schwelle:
|
||||
|
||||
Auf dem hier hinterlegten Grund (#FFF3E2 tags, #33311E nachts) misst
|
||||
--warn-text 4.90:1 bzw. 9.30:1. */
|
||||
--warn-fig 32px = Grosstext, Schwelle 3:1 -> #DD6000 (3.65:1 auf Weiss,
|
||||
3.34:1 auf der Huelle; nachts #FF9F0A mit 8.41:1)
|
||||
die Marke 10.5px = Kleintext, Schwelle 4.5:1 -> keine duenne Schrift,
|
||||
sondern eine GEFUELLTE Pille: #C55300 mit weisser Schrift
|
||||
(4.55:1; nachts #FFA056 mit #171B21, 8.57:1). Als Flaeche
|
||||
liest sich derselbe Ton als Orange, nicht als Braun.
|
||||
|
||||
Alle Werte am 07.09.2026 nach WCAG 2.1 gerechnet, Huelle = 12% --warn auf
|
||||
dem jeweiligen Kachelgrund. */
|
||||
.termingruppe.ueberschritten {
|
||||
background: color-mix(in srgb, var(--warn) 12%, transparent);
|
||||
border-radius: var(--r-tile); padding-left: 12px; padding-right: 12px;
|
||||
margin-left: -12px; margin-right: -12px;
|
||||
}
|
||||
/* Die Trennlinie zur Vorgaengerzeile wuerde ueber die abgerundete Flaeche
|
||||
laufen - die uebernimmt hier die Abgrenzung. */
|
||||
.termingruppe.ueberschritten, .termingruppe.ueberschritten + .termingruppe { border-top: 0; }
|
||||
/* Deckender Grund: sonst saesse die kleine Schrift auf der Huelle und faellt
|
||||
unter 4.5:1 - siehe oben. */
|
||||
.ueberschritten-marke {
|
||||
font-size: 10.5px; color: var(--warn-text);
|
||||
border: 1px solid var(--warn-text); border-radius: var(--r-pill);
|
||||
font-size: 10.5px; font-weight: 600;
|
||||
color: var(--warn-marke-schrift); background: var(--warn-marke-grund);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 3px 8px; white-space: nowrap; flex: 0 0 auto;
|
||||
display: inline-block; vertical-align: middle;
|
||||
}
|
||||
.serviceblock.ueberschritten .fig, .serviceblock.ueberschritten .fig .unit { color: var(--warn-fig); }
|
||||
/* Auf der Uebersicht neben der Kennzahl, nicht darunter - die Kachel soll durch
|
||||
die Markierung nicht hoeher werden (Nutzerwunsch 07.09.2026). */
|
||||
.fig-zeile .ueberschritten-marke { margin-left: 10px; }
|
||||
/* In "Mein Audi" links vom Wert. */
|
||||
.row .ueberschritten-marke { margin-right: 8px; }
|
||||
/* In "Mein Audi" wird NUR die ueberschrittene Zeile hinterlegt, nicht die
|
||||
ganze Kachel - analog zur Termingruppe im Service-Blatt (Nutzerwunsch
|
||||
07.09.2026). Der volle Rand kommt ueber die negativen Aussenabstaende. */
|
||||
.row.ueberschritten {
|
||||
background: color-mix(in srgb, var(--warn) 12%, transparent);
|
||||
border-radius: var(--r-tile);
|
||||
padding-left: 12px; padding-right: 12px;
|
||||
margin-left: -12px; margin-right: -12px;
|
||||
}
|
||||
/* Auf der Uebersicht wechselt zusaetzlich die Schrift der Kennzahl - dort ist
|
||||
sie die Aussage, nicht nur ihr Rahmen. */
|
||||
.serviceblock.ueberschritten .fig, .serviceblock.ueberschritten .fig .unit { color: var(--warn-text); }
|
||||
.servicemarke { display: inline-flex; margin-top: 8px; }
|
||||
/* In der Zeilenliste von "Mein Audi" reicht die Marke neben dem Wert. */
|
||||
.row .ueberschritten-marke { margin-left: 8px; vertical-align: middle; }
|
||||
|
||||
.badge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.badge img { height: 18px; width: auto; display: none; }
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"domain": "audi_dashboard",
|
||||
"name": "Audi Dashboard",
|
||||
"version": "2026.9.6.7",
|
||||
"version": "2026.9.6.9",
|
||||
"documentation": "https://gitea.nothaft.cloud/paul/audi-app/src/branch/main/README.md",
|
||||
"issue_tracker": "https://gitea.nothaft.cloud/paul/audi-app/issues",
|
||||
"codeowners": [
|
||||
|
||||
@@ -38,7 +38,10 @@
|
||||
--fg3: #8E8E93;
|
||||
--ok: #30D158;
|
||||
--warn: #FFD60A;
|
||||
--warn-text: #FFD60A;
|
||||
--warn-text: #FFA056;
|
||||
--warn-fig: #FF9F0A;
|
||||
--warn-marke-grund: #FFA056;
|
||||
--warn-marke-schrift: #171B21;
|
||||
--bad: #FF453A;
|
||||
/* Rot als FLAECHE, nicht als Schrift.
|
||||
|
||||
@@ -85,7 +88,10 @@
|
||||
--fg3: #6B6B70;
|
||||
--ok: #34C759;
|
||||
--warn: #FF9F0A;
|
||||
--warn-text: #A15800;
|
||||
--warn-text: #C55300;
|
||||
--warn-fig: #DD6000;
|
||||
--warn-marke-grund: #C55300;
|
||||
--warn-marke-schrift: #FFFFFF;
|
||||
/* #FF3B30 (Apples systemRed) auf #F2F2F7 ergab 3,18 - unter den 4,5 fuer
|
||||
16px-Schrift. #D70015 ist Apples systemRed fuer erhoehten Kontrast und
|
||||
kommt auf 4,83 (auf Weiss 5,38). Gemessen am 04.09.2026 am
|
||||
|
||||
Reference in New Issue
Block a user