DogFatherGitandClaude Opus 5
41108d6c3c
--- 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]>
444 lines
18 KiB
CSS
444 lines
18 KiB
CSS
/* ===================================================================
|
|
Dashboard -- die Gesamtuebersicht je Creator.
|
|
|
|
Grundgedanke: eine Karte je Person, in der Reihenfolge des Drucks.
|
|
Ruhige Karten fuer alles, was laeuft; nur was Handlung braucht,
|
|
bekommt Farbe. Waere jede Zahl bunt, waere keine mehr auffaellig --
|
|
und die Augen haetten nichts, worauf sie sich ausruhen koennen.
|
|
=================================================================== */
|
|
|
|
/* ---------- Summen oben ---------------------------------------------------- */
|
|
|
|
.summen {
|
|
display: grid; gap: 8px; margin-bottom: 26px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
|
|
}
|
|
.summe {
|
|
display: grid; gap: 2px; padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.summe[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .32);
|
|
background: rgba(255, 154, 162, .05);
|
|
}
|
|
.summe__zahl {
|
|
font-size: 1.6rem; font-weight: 700; line-height: 1.1;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
.summe[data-warn="ja"] .summe__zahl { color: var(--warn); }
|
|
.summe__name {
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Karten --------------------------------------------------------- */
|
|
|
|
.creator-liste {
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
|
|
}
|
|
.creator {
|
|
position: relative; overflow: hidden;
|
|
padding: 18px 20px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
/* Ein schmaler Streifen an der Kante statt einer eingefaerbten Karte:
|
|
sichtbar genug zum Ueberfliegen, ruhig genug zum Lesen. */
|
|
.creator::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--akzent), transparent 85%);
|
|
opacity: .35;
|
|
}
|
|
.creator[data-achtung="ja"] {
|
|
border-color: rgba(255, 154, 162, .26);
|
|
}
|
|
.creator[data-achtung="ja"]::before {
|
|
background: linear-gradient(180deg, var(--warn), transparent 85%);
|
|
opacity: .75;
|
|
}
|
|
|
|
.creator__kopf {
|
|
display: flex; gap: 18px; align-items: flex-start;
|
|
justify-content: space-between; flex-wrap: wrap;
|
|
margin-bottom: 15px;
|
|
}
|
|
.creator__wer { min-width: 0; }
|
|
.creator__name {
|
|
margin: 0 0 3px; font-size: 1.14rem; font-weight: 700;
|
|
letter-spacing: -.01em; color: var(--text);
|
|
}
|
|
.creator__unter { margin: 0; font-size: .8rem; color: var(--text-still); }
|
|
.creator__unter[data-kalt="ja"] { color: var(--warn); opacity: .82; }
|
|
|
|
.naechstes { display: grid; gap: 2px; justify-items: end; text-align: right; flex: none; }
|
|
.naechstes__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.naechstes__wert {
|
|
font-size: .92rem; font-weight: 650; color: var(--text);
|
|
text-decoration: none; font-variant-numeric: tabular-nums;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
a.naechstes__wert:hover { color: var(--akzent); border-bottom-color: rgba(63, 189, 245, .45); }
|
|
.naechstes__wert--leer { color: var(--text-still); font-weight: 500; }
|
|
|
|
/* ---------- Zahlenreihe ---------------------------------------------------- */
|
|
|
|
.werte {
|
|
display: grid; gap: 6px;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
.wert {
|
|
display: grid; gap: 1px; padding: 9px 4px 8px;
|
|
text-align: center; text-decoration: none;
|
|
border: 1px solid transparent; border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .06); }
|
|
.wert__zahl {
|
|
font-size: 1.22rem; font-weight: 700; line-height: 1.15;
|
|
font-variant-numeric: tabular-nums; color: var(--text);
|
|
}
|
|
/* Eine Zeile, ohne Umbruch: "ERLEDIGT 30 T." brach sonst als einziges
|
|
Feld um und zog die ganze Reihe in die Hoehe. Lieber eine Spur
|
|
kleiner als sechs Kaesten, von denen einer aus der Reihe faellt. */
|
|
/* 0,7 rem = 11,2 px statt 9,6. Unter 10 px ist auch auf einem grossen
|
|
Bildschirm keine Beschriftung mehr, sondern ein Muster -- und es sind
|
|
ausgerechnet die Woerter, die den Zahlen darueber ihre Bedeutung
|
|
geben ("ueberfaellig", "dringend", "offen"). Auf dem Handy stand
|
|
laengst eine Ausnahme auf 0,75 rem; nur der Rechner war vergessen
|
|
worden. */
|
|
.wert__name {
|
|
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
/* Eine Null ist eine gute Nachricht -- sie darf zuruecktreten. */
|
|
.wert[data-leer="ja"] { background: rgba(255, 255, 255, .016); }
|
|
.wert[data-leer="ja"] .wert__zahl { color: var(--text-still); font-weight: 600; }
|
|
.wert[data-warn="ja"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
|
|
}
|
|
.wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
|
|
/* EIN ECHTER FARBWERT, kein halbdurchsichtiges Rosa (06.09.2026).
|
|
|
|
Hier stand `rgba(255, 154, 162, .8)`. Halbdurchsichtige Schrift
|
|
nimmt die Farbe von dem an, was zufaellig dahinterliegt -- sie
|
|
sieht so lange gut aus, wie der Untergrund dunkel bleibt, und
|
|
wird still unlesbar, sobald sich daran etwas aendert. Gemessen
|
|
von pruef-buehne an echten Bildpunkten: 4,05:1 statt der
|
|
noetigen 4,5:1 fuer "Ueberfaellig".
|
|
|
|
Derselbe Fehler steht zwei Dateien weiter schon als Warnung in
|
|
gate.css: "Neutral braucht einen echten Farbwert.
|
|
Halbdurchsichtiges Weiss ergab in der Messung 1,1:1." Es hilft
|
|
offenbar nichts, ihn EINMAL aufzuschreiben. */
|
|
.wert[data-warn="ja"] .wert__name { color: var(--warn); }
|
|
|
|
/* ---------- Start-Check ---------------------------------------------------- */
|
|
|
|
.fortschritt {
|
|
display: block; margin-top: 13px; padding: 11px 13px 12px;
|
|
text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color var(--tempo);
|
|
}
|
|
.fortschritt:hover { border-color: var(--rand-hell); }
|
|
.fortschritt__zeile {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
margin: 0 0 8px;
|
|
}
|
|
.fortschritt__schild {
|
|
font-size: .66rem; font-weight: 700; letter-spacing: .08em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.fortschritt__text { font-size: .8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
|
|
.fortschritt__warn {
|
|
margin-left: auto; padding: 1px 8px;
|
|
font-size: .7rem; font-weight: 650; color: var(--warn);
|
|
background: rgba(255, 154, 162, .1);
|
|
border: 1px solid rgba(255, 154, 162, .26); border-radius: 999px;
|
|
}
|
|
.fortschritt__balken {
|
|
display: block; height: 5px; border-radius: 999px; overflow: hidden;
|
|
background: rgba(255, 255, 255, .07);
|
|
}
|
|
.fortschritt__fuellung {
|
|
display: block; height: 100%; border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
|
|
transition: width .4s cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.fortschritt__fuellung[data-warn="ja"] {
|
|
background: linear-gradient(90deg, rgba(255, 154, 162, .55), var(--warn));
|
|
}
|
|
.fortschritt[data-fertig="ja"] .fortschritt__text { color: var(--akzent); }
|
|
|
|
.creator__luecke {
|
|
display: block; margin: 10px 0 0; padding: 8px 12px;
|
|
font-size: .78rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
|
|
|
/* ---------- Die Zahlen in der Karte (06.09.2026) --------------------------
|
|
|
|
Eine eigene Zeile unter den Arbeitszahlen, durch eine feine Linie
|
|
abgesetzt: Es sind zwei verschiedene Sorten Auskunft. Oben steht, was
|
|
WIR schulden (überfällig, im Review), unten, was der Kanal HERGIBT.
|
|
Ohne die Trennung liest man sie als eine Reihe und vergleicht Zahlen,
|
|
die nichts miteinander zu tun haben. */
|
|
.kzahlen {
|
|
display: flex; flex-wrap: wrap; gap: 8px 26px;
|
|
margin: 12px 0 0; padding: 12px 0 0;
|
|
border-top: 1px solid var(--rand);
|
|
text-decoration: none; color: inherit;
|
|
}
|
|
.kzahlen:hover .kzahlen__wert, .kzahlen:focus-visible .kzahlen__wert { color: var(--akzent); }
|
|
.kzahlen[data-leer="ja"] { border-top-style: dashed; }
|
|
|
|
.kzahlen__feld { display: grid; gap: 1px; min-width: 0; }
|
|
.kzahlen__name {
|
|
font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.kzahlen__wert {
|
|
font-size: 1.05rem; color: var(--text);
|
|
/* Tabellenziffern: gleiche Breite je Ziffer, damit die Werte mehrerer
|
|
Karten untereinander auf derselben Stelle sitzen. */
|
|
font-variant-numeric: tabular-nums;
|
|
transition: color var(--tempo);
|
|
}
|
|
.kzahlen__wandel { margin-left: 7px; font-size: .8rem; }
|
|
/* Gedeckt, nicht grell -- eine Auskunft, kein Alarm. */
|
|
.kzahlen__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
|
.kzahlen__wandel[data-richtung="runter"] { color: #e08c93; }
|
|
.kzahlen__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
|
|
|
.kzahlen__leer { font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Die Frühwarnung ------------------------------------------------
|
|
|
|
Bernstein, nicht Rot. "Hier würde ich nachfassen" ist ein Auftrag,
|
|
kein Fehler -- und Rot wäre auf einer Seite, die man jeden Morgen
|
|
aufmacht, nach drei Tagen Tapete. Dieselbe Farbe wie das Merkzeichen
|
|
in den Bereichen, aus demselben Grund. */
|
|
.warnblock { margin: 0 0 26px; }
|
|
|
|
.warnliste {
|
|
display: grid; gap: 12px;
|
|
/* min(320px, 100%) statt 320px. Eine feste Mindestbreite ist auf einem
|
|
320-px-Schirm groesser als der Platz, der nach den Raendern uebrig
|
|
bleibt -- die Karte stand 9 px aus dem Bild (gemessen von
|
|
pruef-breiten). Dieselbe Schreibweise wie bei .creator-liste und
|
|
.summen zwei Abschnitte weiter oben; ich habe sie hier nur nicht
|
|
uebernommen. */
|
|
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
|
|
}
|
|
|
|
.warnkarte {
|
|
padding: 14px 16px 12px;
|
|
background:
|
|
radial-gradient(120% 100% at 0% 0%, rgba(217, 164, 65, .07), transparent 68%),
|
|
var(--flaeche);
|
|
border: 1px solid rgba(217, 164, 65, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
/* min-width: 0 UND umbrechen duerfen (06.09.2026).
|
|
|
|
`minmax(min(320px, 100%), 1fr)` begrenzt die SPALTE -- nicht das, was
|
|
darin steht. Solange die Karte ihren Mindestinhalt nicht unterbieten
|
|
darf, waechst die Spalte trotzdem mit: Bei 320 px stand sie 9 px aus
|
|
dem Bild, weil Name und "Schreiben"-Knopf nebeneinander bleiben
|
|
wollten. Beides zusammen loest es, einzeln keines von beiden. */
|
|
.warnkarte { min-width: 0; }
|
|
.warnkarte__kopf {
|
|
display: flex; align-items: baseline; justify-content: space-between;
|
|
gap: 12px; margin-bottom: 10px;
|
|
flex-wrap: wrap; min-width: 0;
|
|
}
|
|
/* Ein sehr langer Name ohne Leerzeichen ("SpongBobSchwammKopf") ist
|
|
sonst selbst breiter als der Schirm. */
|
|
.warnkarte__name, .warnsignal__text { overflow-wrap: anywhere; }
|
|
.warnkarte__name {
|
|
font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
|
|
/* EIN FINGERZIEL, KEIN WORT. Als schlichter Inline-Link war der Kasten
|
|
genau so gross wie der Name -- bei "Tili" 22 x 25 px. Das Mindestmass
|
|
nach WCAG 2.2 (2.5.8) sind 24 x 24; darunter trifft man mit dem
|
|
Daumen daneben, und zwar ausgerechnet bei kurzen Namen. Gemessen von
|
|
pruef-handy auf allen drei Geraeten.
|
|
|
|
Die negativen Aussenabstaende heben die Polsterung optisch wieder
|
|
auf: Der Name steht danach exakt dort, wo er vorher stand, hat aber
|
|
eine Flaeche, die man trifft. */
|
|
display: inline-flex; align-items: center;
|
|
min-width: 44px; min-height: 32px;
|
|
padding: 4px 8px; margin: -4px -8px;
|
|
border-radius: 8px;
|
|
}
|
|
.warnkarte__name:hover, .warnkarte__name:focus-visible {
|
|
background: rgba(255, 255, 255, .05);
|
|
}
|
|
|
|
|
|
/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
|
|
ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
|
|
.warnkarte__weg {
|
|
flex: none;
|
|
padding: 5px 12px; min-height: 32px;
|
|
display: inline-flex; align-items: center;
|
|
font-size: .8rem; color: var(--text-leise); text-decoration: none;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.warnkarte__weg:hover, .warnkarte__weg:focus-visible {
|
|
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
|
}
|
|
|
|
.warnkarte__signale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
|
|
|
.warnsignal {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
|
|
padding-left: 14px; position: relative;
|
|
}
|
|
/* Ein kleiner Punkt statt eines Aufzählungszeichens -- sechs Signale
|
|
untereinander mit Spiegelstrichen sähen aus wie eine Mängelliste. */
|
|
.warnsignal::before {
|
|
content: ''; position: absolute; left: 0; top: .55em;
|
|
width: 5px; height: 5px; border-radius: 50%;
|
|
background: rgba(217, 164, 65, .75);
|
|
}
|
|
.warnsignal__text { font-size: .84rem; line-height: 1.55; color: var(--text); }
|
|
.warnsignal__beleg {
|
|
font-size: .8rem; color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- Rest ----------------------------------------------------------- */
|
|
|
|
.stand {
|
|
margin: 20px 0 0; font-size: .74rem; color: var(--text-still); text-align: right;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.creator-liste { grid-template-columns: 1fr; }
|
|
.creator { padding: 16px 15px 14px; }
|
|
/* Sechs Spalten waeren auf dem Handy je 45 px breit -- die Beschriftung
|
|
bricht dann mitten im Wort. Zwei Reihen zu dritt lesen sich sauber. */
|
|
.werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.creator__kopf { gap: 10px; }
|
|
.naechstes { justify-items: flex-start; text-align: left; }
|
|
.summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.stand { text-align: left; }
|
|
|
|
/* Drei Zahlen nebeneinander lassen auf 360 px je 100 px -- "Ø
|
|
Verweildauer" bricht dann in drei Zeilen um. Zwei Spalten, die
|
|
dritte darunter. */
|
|
.kzahlen { gap: 10px 20px; }
|
|
.warnliste { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wert, .fortschritt, .fortschritt__fuellung { transition: none; }
|
|
}
|
|
|
|
/* Der einmalige Zugangscode. Gross, gesperrt, in gleicher Zeichenbreite
|
|
und zum Markieren freigegeben -- er wird abgeschrieben oder kopiert,
|
|
und beides muss auf Anhieb gelingen. `user-select: all` markiert ihn
|
|
mit einem Klick vollstaendig; ein halb markierter Code ist ein Anruf
|
|
am naechsten Tag. */
|
|
.code-anzeige {
|
|
margin: 6px 0 0;
|
|
padding: 12px 14px;
|
|
border-radius: var(--radius-klein);
|
|
border: 1px solid color-mix(in srgb, var(--k-gold) 34%, transparent);
|
|
background: rgba(0, 0, 0, .34);
|
|
box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .7);
|
|
color: #f0d9a8;
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: 1.16rem; font-weight: 700; letter-spacing: .1em;
|
|
font-variant-numeric: tabular-nums;
|
|
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);
|
|
}
|