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:
+16
-5
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user