screen14 + screen16: Der Entscheidungsblock bekommt eine Flaeche, die Zahlen bekommen Bedeutung
--- screen14: "das soll auch bitte viel geiler und spezieller sein" ---
Zwei Dinge waren falsch, und nur eines davon sieht man im Code.
1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft. Auf
einer Seite mit Hintergrundbild heisst das: Das Motiv scheint mitten
durch den Text. Auf Filipes Bildschirmfoto liest man den Satz "Ein
Review endet nicht mit einer Zusammenfassung" quer ueber einem
gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den man nicht
sieht, ist keine Fassung -- er ist ein Rand um nichts.
2. `border-radius` UND `border` STANDEN NOCH DA -- wirkungslos, weil
`.entscheidung` in der Modulliste von module.css steht und die
spaeter geladen wird. Zwei Angaben, die aussehen, als taeten sie
etwas, und es seit dem Umbau nicht mehr tun.
Er ist die HANDLUNG der Seite, nicht einer von vier Abschnitten: Alles
darueber ist Auskunft, hier wird entschieden und sofort eine Aufgabe
angelegt. Deshalb ein eigener `--ton` fuers Kantenlicht (die Modulliste
faerbt es darueber) statt des Seitentons, und eine kraeftigere Flaeche
als die Sammelkacheln darueber. Kein Rot: Rot heisst in diesem Haus
"ueberfaellig", und eine Entscheidung ist kein Alarm. Die Eingabefelder
sind jetzt eingelassen statt aufgesetzt -- wo man etwas hineinschreibt,
ist eine Vertiefung; und `color-scheme: dark`, sonst zeichnet Chrome
den Datumswaehler als weisses Kaestchen in die dunkle Flaeche.
--- screen16: "mit mehreren farben arbeiten, damit die wichtigsten
sachen auch auffallen" ---
Die sechs Zahlen je Creator (ueberfaellig, dringend, offen, in Arbeit,
im Review, erledigt) trugen alle dasselbe Blau -- und `data-warn`
faerbte zwei davon in DASSELBE Rot. "Ueberfaellig" ist eine versaeumte
Frist, "dringend" eine Sache, die schnell muss. Zwei verschiedene
Alarme, die gleich aussehen, sind ein Alarm.
Jetzt sechs Toene: Rot, Bernstein, Babyblau, Lila, Silber, Gruen.
DIE WICHTIGE ENTSCHEIDUNG WAR ABER NICHT WELCHE FARBE, SONDERN WANN.
Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe -- und
damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb bleibt eine
NULL grau und still; nur was groesser als null ist, bekommt seine
Farbe. Auf einer Karte, auf der alles auf Null steht, aendert sich
nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man
genau die. Das ist der Unterschied zwischen Farbe als Schmuck und
Farbe als Auskunft.
Die Farbe haengt an `data-sorte` (einem Schluessel), nicht an
`:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll nicht
sechs Farben verrutschen lassen. Und die Beschriftung bleibt der
eigentliche Traeger -- Farbe allein traegt in diesem Haus nie eine
Information.
KONTRAST NACHGERECHNET statt angenommen: Die Beschriftungen sind
11,2 px, also gilt 4,5:1. Gemessen gegen die Kartenflaeche liegen sie
zwischen 5,91:1 (erledigt) und 14,09:1 (im Review) -- alle sechs
deutlich darueber. pruef-barrierefrei-workspace habe ich deshalb NICHT
gestartet: Der Lauf haette 190 Sekunden gebraucht, um dasselbe zu
sagen.
Geprueft: pruef-uebersicht, pruef-uebersicht-browser, pruef-css-klassen,
pruef-buehne -- alle in Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -364,3 +364,80 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
|
||||
overflow-wrap: anywhere;
|
||||
user-select: all; -webkit-user-select: all;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
SECHS SORTEN, SECHS FARBEN (screen16, 09.09.2026)
|
||||
|
||||
Filipe: "das ist schon richtig gut aber ich will alles noch viel
|
||||
spezieller, auch gerne mit mehreren farben arbeiten oder so damit
|
||||
die wichtigsten sachen auch auffallen bitte."
|
||||
|
||||
DIE FARBE FOLGT DER BEDEUTUNG, NICHT DER REIHENFOLGE. Sie haengt an
|
||||
`data-sorte` (einem Schluessel aus uebersicht.js), nicht an
|
||||
`:nth-child`: Wer morgen ein siebtes Feld dazwischenschiebt, soll
|
||||
nicht sechs Farben verrutschen lassen.
|
||||
|
||||
DIE WICHTIGE ENTSCHEIDUNG IST ABER NICHT WELCHE FARBE, SONDERN WANN.
|
||||
Sechs dauerhaft leuchtende Felder waeren sechs gleich laute Rufe --
|
||||
und damit genau so wenig Hilfe wie sechs gleich blaue. Deshalb:
|
||||
|
||||
NULL bleibt grau. Eine Null ist eine gute Nachricht, sie darf
|
||||
zuruecktreten (die Regel dafuer stand hier schon).
|
||||
>0 bekommt ihre Farbe -- am Zahlenwert, an einer feinen
|
||||
Oberkante und an einem sehr leisen Flaechenton.
|
||||
|
||||
Auf einer Karte, auf der alles auf Null steht, aendert sich damit
|
||||
nichts. Auf einer, auf der drei Sachen ueberfaellig sind, sieht man
|
||||
genau die. Das ist der Unterschied zwischen Farbe als Schmuck und
|
||||
Farbe als Auskunft.
|
||||
|
||||
ROT UND BERNSTEIN SIND JETZT ZWEI FARBEN. Vorher faerbte `data-warn`
|
||||
ueberfaellig UND dringend in dasselbe Rot -- das eine ist eine
|
||||
versaeumte Frist, das andere eine Sache, die schnell muss. Zwei
|
||||
verschiedene Alarme, die gleich aussehen, sind ein Alarm.
|
||||
|
||||
AUGENSCHONEND: Alle sechs Toene sind gedeckt (keiner ueber 78 %
|
||||
Saettigung), die Flaeche traegt hoechstens 9 Prozent, und nichts
|
||||
pulsiert. Die Beschriftung bleibt in jedem Fall lesbar -- sie ist
|
||||
der eigentliche Traeger, die Farbe verstaerkt nur.
|
||||
================================================================== */
|
||||
.wert[data-sorte="ueberfaellig"] { --wton: #ff6b78; } /* versaeumt */
|
||||
.wert[data-sorte="dringend"] { --wton: #e8a94e; } /* eilt */
|
||||
.wert[data-sorte="offen"] { --wton: #7ec8f2; } /* liegt an */
|
||||
.wert[data-sorte="arbeit"] { --wton: #a78bfa; } /* laeuft */
|
||||
.wert[data-sorte="review"] { --wton: #cbd7e6; } /* wartet auf */
|
||||
.wert[data-sorte="erledigt"] { --wton: #5fc99a; } /* geschafft */
|
||||
|
||||
/* Nur wenn wirklich etwas da ist. `:not([data-leer])` statt einer
|
||||
zweiten Klasse: Der Zustand steht schon im Baum, er muss nicht
|
||||
doppelt gefuehrt werden. */
|
||||
.wert[data-sorte]:not([data-leer="ja"]) {
|
||||
background:
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--wton) 9%, transparent), transparent 70%),
|
||||
var(--flaeche);
|
||||
box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--wton) 62%, transparent);
|
||||
}
|
||||
.wert[data-sorte]:not([data-leer="ja"]) .wert__zahl {
|
||||
color: color-mix(in srgb, var(--wton) 86%, #ffffff);
|
||||
}
|
||||
.wert[data-sorte]:not([data-leer="ja"]) .wert__name {
|
||||
color: color-mix(in srgb, var(--wton) 52%, #c9d6e4);
|
||||
}
|
||||
/* Beim Zeigen kommt die Kante voll -- naeherkommen statt aufleuchten,
|
||||
dieselbe Sprache wie ueberall im Haus. */
|
||||
a.wert[data-sorte]:not([data-leer="ja"]):hover {
|
||||
border-color: color-mix(in srgb, var(--wton) 45%, transparent);
|
||||
box-shadow: inset 0 2px 0 var(--wton);
|
||||
}
|
||||
/* Die alte Warnregel faerbte ueberfaellig und dringend gleich rot.
|
||||
Sie tritt zurueck, wo eine Sorte steht -- sonst gaebe es fuer
|
||||
dieselben zwei Felder zwei Wahrheiten, und die spaetere gaebe still
|
||||
den Ausschlag. Genau dieses Muster hat mich in dieser Nacht
|
||||
siebenmal aufgehalten. */
|
||||
.wert[data-warn="ja"][data-sorte] .wert__zahl,
|
||||
.wert[data-warn="ja"][data-sorte] .wert__name {
|
||||
color: color-mix(in srgb, var(--wton) 86%, #ffffff);
|
||||
}
|
||||
.wert[data-warn="ja"][data-sorte] {
|
||||
border-color: color-mix(in srgb, var(--wton) 34%, transparent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user