Portal: Zahlenkreise, Typografie und eine echte Farblogik fuer Phasen
Drei Rueckmeldungen vom 22.08.2026, alle drei berechtigt.
1) "die kisten sollen auch eine spezielle farbe bekommen wenn sie fertig
sind" -- das war inhaltlich der wichtigste Punkt. Vorher sahen
erledigte und gerade laufende Phase fast gleich blau aus. Damit ging
die einzige Aussage verloren, die die Leiste ueberhaupt traegt:
naemlich WO man steht. Jetzt drei klar getrennte Zustaende:
erledigt gruen, ruhig
laeuft grad leuchtendes Blau mit langsamem Puls
kommt noch gedaempft
Die Vorschau erklaert die Logik gleich mit: ihre Leiste wandert von
blau nach gruen, statt nur an- und auszugehen.
Dazu eine Legende in Worten. Farbe allein ist nie Information -- wer
sie nicht unterscheiden kann, liest hier trotzdem, was sie bedeutet.
2) "die zahlen sollen besser im kreis sein" -- vorher ein flacher Kreis
mit Zahl. Jetzt ein doppelter Ring: aussen ein Farbverlauf als Rand,
innen die dunkle Flaeche, dazu ein weicher Schein. Derselbe Kniff wie
bei den Karten (Verlauf ueber border-box); der Kreis wirkt dadurch
plastisch statt aufgemalt. Jede der vier Kacheln hat ihre eigene
Farbe -- vier gleiche Kacheln wirken wie eine Aufzaehlung, vier
unterscheidbare wie ein System.
3) "schrift soll spezieller sein" -- die Kachel-Ueberschrift war so gross
wie der Text darunter und ging unter. Jetzt groesser, in der
Headline-Schrift, enger gesetzt mit leicht negativer Laufweite. Die
Ueberschrift "Gleich geht es los" bekommt einen Farbverlauf.
45/45 Handy-Abnahme, i18n vollstaendig, prefers-reduced-motion beachtet.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -1050,3 +1050,140 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
background: linear-gradient(135deg, rgba(127,208,232,.22), rgba(183,157,255,.18));
|
||||
color: var(--wd-blau-hell); border-color: var(--wd-rand-stark);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
20. LEERER ZUSTAND — GEHOBENE FASSUNG
|
||||
|
||||
Drei Rückmeldungen vom 22.08.2026, alle drei berechtigt:
|
||||
"Schrift und Kacheln sollen viel spezieller sein", "die Zahlen sollen
|
||||
besser im Kreis sein", "die Kisten sollen eine spezielle Farbe
|
||||
bekommen wenn sie fertig sind".
|
||||
|
||||
Der letzte Punkt war der wichtigste und inhaltlich der schwerste:
|
||||
Vorher waren erledigte und laufende Phase fast gleich blau. Damit ging
|
||||
die einzige Information verloren, die die Leiste überhaupt trägt —
|
||||
nämlich WO man gerade steht. Jetzt sind es drei klar verschiedene
|
||||
Zustände: erledigt (grün), gerade dran (leuchtendes Blau mit Puls),
|
||||
kommt noch (gedämpft).
|
||||
--------------------------------------------------------------------- */
|
||||
|
||||
/* ---------- Zahlenkreise ----------
|
||||
Vorher ein flacher Kreis mit Zahl. Jetzt ein doppelter Ring: außen ein
|
||||
Farbverlauf als Rand, innen die dunkle Fläche. Das ist derselbe Kniff
|
||||
wie bei den Karten (Verlauf über border-box) und lässt den Kreis
|
||||
plastisch wirken, statt aufgemalt. */
|
||||
.po-leer-nr {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
font-size: 1.02rem; font-weight: 800;
|
||||
color: var(--wd-blau-hell);
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgba(127, 208, 232, .55);
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -.02em;
|
||||
}
|
||||
|
||||
/* ---------- Merkmalskacheln ----------
|
||||
Jede bekommt oben eine eigene Farbkante. Vier gleiche Kacheln wirken
|
||||
wie eine Aufzählung; vier unterscheidbare wirken wie ein System. */
|
||||
.po-leer-punkt {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 1.1rem 1.15rem 1.15rem;
|
||||
border-radius: 16px;
|
||||
gap: 1rem;
|
||||
background: linear-gradient(180deg, rgba(20, 32, 50, .58), rgba(9, 15, 26, .74));
|
||||
}
|
||||
.po-leer-punkt::before {
|
||||
content: "";
|
||||
position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||||
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
||||
opacity: .8;
|
||||
}
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-lila-tief), var(--wd-lila)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-gold)); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr {
|
||||
color: var(--wd-lila);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
linear-gradient(140deg, var(--wd-lila), var(--wd-blau)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgba(183, 157, 255, .55);
|
||||
}
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr {
|
||||
color: var(--wd-ok);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
linear-gradient(140deg, var(--wd-ok), var(--wd-blau)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgba(111, 214, 163, .5);
|
||||
}
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr {
|
||||
color: var(--wd-gold);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
linear-gradient(140deg, var(--wd-gold), var(--wd-lila)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgba(232, 200, 119, .5);
|
||||
}
|
||||
|
||||
/* ---------- Typografie ----------
|
||||
Die Überschrift der Kachel war so groß wie der Fließtext darunter und
|
||||
ging dadurch unter. Jetzt größer, enger gesetzt und mit einem Hauch
|
||||
negativer Laufweite — das ist der Unterschied, den man als "wertig"
|
||||
empfindet, ohne ihn benennen zu können. */
|
||||
.po-leer-punkt strong {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.06rem; font-weight: 800;
|
||||
letter-spacing: -.015em; line-height: 1.25;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
.po-leer-punkt span { font-size: .9rem; line-height: 1.6; }
|
||||
|
||||
.po-leer h3 {
|
||||
font-size: clamp(1.5rem, 3.6vw, 2rem);
|
||||
letter-spacing: -.02em;
|
||||
background: linear-gradient(120deg, var(--wd-text), var(--wd-blau-hell) 70%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.po-leer > p { font-size: 1.02rem; }
|
||||
|
||||
/* ---------- Phasen: drei klar verschiedene Zustände ----------
|
||||
Das war der eigentliche Mangel. Erledigt und laufend sahen fast gleich
|
||||
aus — damit ging die einzige Aussage der Leiste verloren. */
|
||||
.po-phase, .po-vorschau-phasen span { height: 7px; }
|
||||
.po-phase.po-erledigt {
|
||||
background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
|
||||
box-shadow: 0 0 8px -2px rgba(111, 214, 163, .5);
|
||||
}
|
||||
.po-phase.po-jetzt {
|
||||
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
||||
box-shadow: 0 0 14px -2px rgba(127, 208, 232, .85);
|
||||
animation: po-jetzt-puls 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes po-jetzt-puls { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
|
||||
@media (prefers-reduced-motion: reduce) { .po-phase.po-jetzt { animation: none; opacity: 1; } }
|
||||
|
||||
/* Dieselbe Logik in der Vorschau: die durchlaufende Leiste wechselt von
|
||||
"gerade dran" (blau) nach "erledigt" (grün), statt einfach nur an- und
|
||||
auszugehen. Damit erklärt die Vorschau die Farblogik gleich mit. */
|
||||
@keyframes po-phase-lauf {
|
||||
0%, 8% { background: rgba(127, 208, 232, .13); box-shadow: none; }
|
||||
14%, 30% { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
||||
box-shadow: 0 0 12px -2px rgba(127, 208, 232, .8); }
|
||||
38%, 62% { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
|
||||
box-shadow: 0 0 8px -2px rgba(111, 214, 163, .45); }
|
||||
100% { background: rgba(127, 208, 232, .13); box-shadow: none; }
|
||||
}
|
||||
|
||||
/* Kleine Legende unter der Vorschau, damit die Farben nicht geraten
|
||||
werden müssen. Farbe allein ist nie Information. */
|
||||
.po-legende {
|
||||
display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
|
||||
margin-top: .9rem; font-size: .78rem; color: var(--wd-text-soft);
|
||||
}
|
||||
.po-legende span { display: inline-flex; align-items: center; gap: .4rem; }
|
||||
.po-legende i {
|
||||
width: 16px; height: 6px; border-radius: 999px; display: inline-block;
|
||||
}
|
||||
.po-legende .po-l-fertig { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
|
||||
.po-legende .po-l-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); }
|
||||
.po-legende .po-l-offen { background: rgba(127, 208, 232, .18); }
|
||||
|
||||
Reference in New Issue
Block a user