Uebersicht: Ladestaende deutlicher, dunkle Bahn unter den Punkten weg

Die Fuellung war mit 14 Prozent Deckung kaum zu sehen; jetzt 22 Prozent,
beim Laden 32, dazu die Wasserlinie als eigene Kante. Ohne gemeldeten Stand
bleibt die Fuellung ganz weg - eine Wallbox ohne Auto zeigte sonst eine
Linie am unteren Rand. Das Bett ist nur noch eine duenne Linie und
verschwindet, sobald Punkte laufen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 10:01:17 +02:00
co-authored by Claude Opus 5
parent fe12e57d88
commit 357c73cf8a
2 changed files with 25 additions and 9 deletions
+16 -5
View File
@@ -3560,10 +3560,19 @@ svg.enf.enf-hoch { max-height: none; }
/* --- Füllstand als Welle ------------------------------------------------ */
.enf .enf-fuellung {
--r: 67;
opacity: 0;
transform: translateY(calc(var(--r) * (1 - 2 * var(--stand)) * 1px));
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity .6s;
}
.enf .enf-welle { fill: var(--farbe); fill-opacity: .14; animation: enf-wogen 8s linear infinite; }
/* Ladestand: Flaeche etwas kraeftiger als frueher, dazu die Wasserlinie als
eigene Kante - so sieht man auf einen Blick, wie voll Akku oder Auto sind. */
.enf .enf-stand .enf-fuellung { opacity: 1; }
.enf .enf-welle { fill: var(--farbe); fill-opacity: .22; animation: enf-wogen 8s linear infinite; }
.enf .enf-welle-kante {
fill: none; stroke: var(--farbe); stroke-width: 2.2; stroke-opacity: .85;
animation: enf-wogen 8s linear infinite;
}
.enf .enf-laden .enf-welle { fill-opacity: .32; }
@keyframes enf-wogen { to { transform: translateX(calc(var(--r) * 2px)); } }
/* --- Symbole ------------------------------------------------------------ */
@@ -3613,12 +3622,14 @@ svg.enf.enf-hoch { max-height: none; }
/* --- Flüsse -------------------------------------------------------------- */
.enf .enf-bett {
fill: none; stroke: #252b31; stroke-linecap: round;
stroke-width: calc(var(--breite, 0) * .7px + 5px);
fill: none; stroke: #2b333a; stroke-linecap: round;
stroke-width: 2.5;
stroke-dasharray: 1 1; stroke-dashoffset: 1;
transition: stroke-width .8s;
transition: opacity .6s;
animation: enf-zeichnen .9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--verz);
}
/* Fliesst etwas, tragen die Punkte den Weg allein. */
.enf .enf-fluss:not(.enf-still) .enf-bett { opacity: 0; }
@keyframes enf-zeichnen { to { stroke-dashoffset: 0; } }
.enf .enf-strom,
.enf .enf-strom-hof {