/* PXL CMS — Admin-Oberflaeche. Handgeschrieben, fertig ausgeliefert, kein Build-Step (Abschnitt B). Ziel der Gestaltung: ruhig, gross genug zum Lesen, klare Trennung von «Speichern» und «Veroeffentlichen» (R.2). ================================================================ DIE MARKE: PXL-Gruen #50C878 — und warum sie NICHT auf den Knoepfen sitzt ================================================================ #50C878 erreicht als Schrift auf Weiss 2.13 und mit weisser Schrift darauf ebenfalls 2.13. Beides ist unter 4.5, ein gruener Hauptknopf mit weisser Schrift waere also unlesbar. Mit dunkler Schrift DARAUF sind es 7.93. Daraus folgt die Aufteilung, fuer die sich Lorin entschieden hat: #50C878 markiert ZUSTAND — aktiver Navigationspunkt, ausgewaehlt, Fokus, die Marke in der Seitenleiste, «live/veroeffentlicht». HANDLUNGEN sind neutral: der Hauptknopf dunkel gefuellt mit weisser Schrift, die Nebenhandlung nur mit Rand, Links unterstrichen und dunkel. Damit tragen Farbe und Rang zwei verschiedene Aussagen, statt sich zu ueberlagern. Vorher hiess die gefaerbte Flaeche an 38 Stellen zehn verschiedene Dinge — «Veroeffentlichen», «Speichern», «Neu» und «dieser Filter ist gerade aktiv». Verworfen wurde die naheliegende Variante «Gruen auf den Hauptknopf und dafuer abdunkeln»: Dann ist die Marke ueberall und sagt nichts mehr, und die Unterscheidung Speichern/Veroeffentlichen (R.2) haengt wieder allein am Wort. KOLLISION Gruen = Marke UND Gruen = veroeffentlicht: bewusst dieselbe Farbe, weil es dieselbe Aussage ist («das hier ist live/aktiv»). Auseinander gehalten wird sie ueber die FORM, nicht ueber den Farbton: — Zustand einer Sache: Pille, gefuellt (.marke--live) oder Rand + leichte Flaeche (.zustandsmarke). Traegt immer ein Wort. — Ergebnis einer Handlung (Meldung): breiter linker Balken, eigenes Zeichen (✓ ! ✕ i) vor dem Text, eigene Farbfamilie. — Sprachleiste: Punktform (Scheibe/Ring/gestrichelt) plus Wort. Deshalb bleiben --erfolg/--warnung/--fehler eigene Toene und werden NICHT auf die Marke gezogen: «Gespeichert» und «Diese Seite ist live» sind zwei Aussagen, und ein Leser, der nur die Farbe sieht, soll sie nicht verwechseln. ---------------- Nachgerechnete Paare, beide Modi ---------------- (Formel: WCAG 2.x relative Luminanz. Text 4.5, Grosstext und Bedienelement-Raender 3.0. Die Reihenfolge ist dieselbe wie in GestaltungTest::paare() — Zeile fuer Zeile vergleichbar. Wer eine Farbe aendert, rechnet die Spalte nach und schreibt die Zahl hier hin; ein Kommentar mit den Zahlen von vorgestern ist schlimmer als keiner, weil ihm der Naechste glaubt.) hell dunkel min Paar 16.86 14.87 4.5 --text auf --flaeche 15.33 15.83 4.5 --text auf --grund 16.02 12.63 4.5 --text auf --flaeche-2 5.63 6.80 4.5 --text-leise auf --flaeche 5.12 7.24 4.5 --text-leise auf --grund 5.35 5.77 4.5 --text-leise auf --flaeche-2 7.93 8.87 4.5 --akzent-schrift auf --akzent Schrift AUF Gruen 6.98 11.02 4.5 --akzent-dunkel auf --flaeche gruene Schrift 6.35 11.73 4.5 --akzent-dunkel auf --grund 6.63 9.36 4.5 --akzent-dunkel auf --flaeche-2 6.30 8.63 4.5 --akzent-dunkel auf --akzent-leicht aktiver Navipunkt 15.23 11.64 4.5 --text auf --akzent-leicht 3.74 4.30 3.0 --fokus auf --flaeche 3.40 4.58 3.0 --fokus auf --grund 3.55 3.65 3.0 --fokus auf --flaeche-2 3.38 3.36 3.0 --fokus auf --akzent-leicht Fokus auf dem aktiven Punkt 15.91 15.83 4.5 --knopf-haupt-schrift auf --knopf-haupt 11.71 11.41 4.5 --knopf-haupt-schrift auf --knopf-haupt-hover 13.03 10.67 4.5 --text auf --knopf-neben Nebenknopf, gefuellt 11.64 9.15 4.5 --text auf --knopf-neben-hover 5.57 5.23 4.5 --fehler auf --knopf-neben .knopf--gefahr erbt sie 3.43 2.41 3.0* --linie-stark auf --flaeche Feldrand 3.12 2.56 3.0* --linie-stark auf --grund 3.26 2.04 3.0* --linie-stark auf --flaeche-2 3.43 4.68 3.0 --linie-stark auf --flaeche bei prefers-contrast: more 3.43 4.68 3.0 --diagramm-linie auf --flaeche Kacheln, Gitter, Ringsegment 3.12 4.98 3.0 --diagramm-linie auf --grund 3.26 3.97 3.0 --diagramm-linie auf --flaeche-2 * BEWUSSTE ABWEICHUNG von SC 1.4.11, dunkler Modus, auf Lorins Entscheidung: «schreiben eine bewusste Abweichung von 1.4.11 in die README». Sie steht dort unter «Bewusste Abweichungen von der Spezifikation», Punkt 9, mit Zahlen, Folgen und dem Weg zurueck. Unter `prefers-contrast: more` gilt wieder der volle Wert — wer mehr Kontrast braucht, bekommt ihn vom System. DER NEBENKNOPF HAT SEIT DEM 28.08.2026 GAR KEINEN RAND MEHR (Lorin: «alle secondary buttons ausgefuellt ohne Border, anstatt nur eine helle Border»). Damit gilt dieselbe Abweichung dort in BEIDEN Modi, und sie ist groesser: Die Fuellung traegt 1.18 bis 1.48 statt der 3.0 (unten bei den Trennungen). Eine Fuellung mit 3.0 waere #959595 hell und #646464 dunkel — ein mittleres Grau, schwerer als der gruene Hauptknopf; die Rangfolge stuende auf dem Kopf. Getragen wird die Erkennbarkeit deshalb von der Fuellung (geprueft gegen alle drei Untergruende), von der Schrift mit 13.03/10.67 und vom Fokusring mit 3.74/4.30. `prefers-contrast: more` gibt den Rand zurueck. 6.51 9.91 4.5 --erfolg auf --flaeche 5.76 7.75 4.5 --erfolg auf --erfolg-flaeche 6.33 8.12 4.5 --warnung auf --flaeche 5.76 6.57 4.5 --warnung auf --warnung-flaeche 7.21 7.30 4.5 --fehler auf --flaeche 6.28 6.04 4.5 --fehler auf --fehler-flaeche Dazu die TRENNUNGEN: kein Kontrastkriterium aus WCAG, aber die Frage, ob eine Flaeche auf ihrem Untergrund ueberhaupt zu sehen ist. Eine Karte, die dieselbe Helligkeit hat wie der Grund, ist keine Karte mehr. hell dunkel min Flaeche auf Untergrund 1.10 1.06 1.08 --flaeche auf --grund 1.18 1.48 1.15 --knopf-neben auf --grund der randlose Nebenknopf 1.29 1.39 1.15 --knopf-neben auf --flaeche 1.23 1.18 1.15 --knopf-neben auf --flaeche-2 der knappste Fall 1.12 1.17 1.08 --knopf-neben-hover auf --knopf-neben 1.54 1.57 1.30 --rand-gesperrt auf --flaeche Rand eines gesperrten Feldes 16.86 16.25 4.5 --feld-text auf --feld-flaeche Schrift im bedienbaren Feld 5.63 2.71 4.5* --feld-platzhalter auf --feld-flaeche Platzhalter — dunkel BEWUSST darunter 3.43 1.39 3.0* --feld-rand auf --flaeche Feldrand — dunkel BEWUSST darunter 1.00 1.09 1.08 --feld-flaeche auf --flaeche (hell identisch: kein eigener Ton) (und ausdruecklich WENIGER als --linie-stark mit 3.43 / 2.41: «einfach eine Outline die weniger Kontrast hat als die normale». SC 1.4.11 nimmt inaktive Bedienelemente aus.) 1.11 1.28 1.08 --akzent-leicht auf --flaeche 1.13 1.28 1.08 --erfolg-flaeche auf --flaeche 1.10 1.24 1.08 --warnung-flaeche auf --flaeche 1.15 1.21 1.08 --fehler-flaeche auf --flaeche --flaeche-2 steht bewusst NICHT in dieser Liste: hell sind es nur 1.05, und das ist Absicht — der Streifen liegt ueber einer ganzen Tabellenzeile, nicht als Fleck mitten im Text, und eine sichtbare Kante zwischen Weiss und Fast-Weiss waere lauter als die Tabelle. --------- Heller Modus: warum die Marke nicht auf den Knoepfen sitzt ------- --linie-stark war #cfcbc2 und damit 1.62 gegen Weiss. Solange die farbige Flaeche den Hauptknopf trug, fiel das nicht auf; jetzt IST der Rand das Kennzeichen der Nebenhandlung und des Eingabefeldes, also muss er die 3.0 aus SC 1.4.11 halten. --linie (Haarlinie zwischen Zeilen) bleibt hell: sie trennt, sie kennzeichnet nichts. #50C878 selbst hat gegen Weiss nur 2.13. Es steht deshalb nie allein fuer eine Aussage: als Flaeche des aktiven Navipunkts unter gruener, fetter Schrift, als Fuellung mit dunkler Schrift darauf. Der Fokusring nimmt --fokus (dieselbe Farbe abgedunkelt, 6.98) — ein Ring in 2.13 waere auf Weiss nicht zu sehen, und der Fokus ist die eine Markierung, die niemand uebersehen darf. ------------------- Dunkler Modus: Lorins zwei Werte ---------------------- --grund #111112 und --flaeche #18181A sind von Lorin vorgegeben und nicht verhandelbar: «Hintergrund ist der Dunkle und dann Karten und Nav und Sidebar sind der hellere Ton.» Sie loesen die alten #16161a/#1f1f24 ab. Die beiden liegen 1.06 auseinander — noch knapper als die alten mit 1.10. Das ist keine Nachlaessigkeit, sondern die Folge der Vorgabe, und es VERSCHIEBT eine Zustaendigkeit: Die Karte hebt sich nicht mehr durch ihre Flaeche vom Grund ab, sie wird durch ihren RAND zur Karte (--linie, 1.81 auf dem Grund). Solange --flaeche und --grund so nah beieinander liegen, ist --linie tragend und nicht Zierde — wer sie schwaecht, loest die Karten auf. Eine erste Fassung dieses Blocks stand auf --flaeche #28282C (1.29 zum Grund), weil ich den Wert falsch verstanden hatte; Lorin hat auf #18181A korrigiert. Die Zahlen der Tabelle oben sind daraufhin komplett neu gerechnet, 18 Zeilen haben sich geaendert. Deshalb steht hier auch, WOHER eine Zahl kommt: Ein Kommentar, der die Werte einer verworfenen Fassung nennt, ist schlimmer als keiner. Gepruft wird das nicht mehr ueber «die Flaeche muss sich abheben» — dieser Test war mit 1.06 rot, obwohl die Karte tadellos zu sehen ist. Er fragt jetzt nach der Kante und laesst offen, ob Flaeche oder Rand sie traegt: GestaltungTest::testDieKarteIstAmRandOderAnDerFlaecheZuErkennen. Die abgeleiteten Toene haengen an diesen zwei Werten, und JEDER von ihnen wurde neu gerechnet, nicht umgerechnet: --flaeche-2 #26262b Hover und Tabellenstreifen. 1.18 auf der Flaeche — vorher 1.09, der Streifen war fast nicht zu sehen. --linie #28282C Haarlinie, von Lorin vorgegeben. 1.21 auf der Flaeche, 1.29 auf dem Grund. Sie ist das Einzige, was eine Karte als Karte zeigt, weil --flaeche und --grund nur 1.06 auseinanderliegen (siehe oben) — der Kartentest haelt damit ueber den Rand, nicht ueber die Flaeche. Eine Zwischenfassung stand auf #3f3f47 (1.81 auf dem Grund), also deutlich kraeftiger; Lorin hat auf #28282C korrigiert. Die Folge ist sichtbar und hier festgehalten, damit sie niemand fuer einen Fehler haelt: --flaeche-2 #26262b und diese Linie liegen 1.03 auseinander, sind also praktisch dieselbe Farbe. In einer UEBERFAHRENEN Tabellenzeile verschwinden die Zeilenraender daher in der Hover-Flaeche. Verworfen: --flaeche-2 nachdunkeln, damit die Linie sich abhebt. Nachgerechnet bringt das fast nichts — bei #1f1f22 waeren es 1.12 statt 1.03 —, weil in diesem sehr dunklen Band alles eng beieinanderliegt. Fuer 0.09 die Hover-Flaeche unsichtbarer zu machen (1.08 statt 1.18 auf der Karte) ist der schlechtere Tausch. --linie-stark #55555f Knopf- und Feldrand. 2.41 / 2.56 / 2.04 — und damit UNTER den 3.0 aus SC 1.4.11. Die Abweichung ist Lorins Entscheidung nach drei Runden: #82828f (4.68), dann #74747f (3.84), beide Male «diese hellen weissen Linien sind mir noch immer zu hell», dann «schreiben eine bewusste Abweichung von 1.4.11 in die README». #74747f war das Dunkelste OHNE Abweichung: Das Feld hat keine eigene Flaeche — gemessen ist der Grund eines Textfeldes rgb(24,24,26), also --flaeche, genau wie die Karte darunter. Der Rand ist damit das Einzige, woran es als Feld zu erkennen ist. Auch eine eingesenkte Feldflaeche loest das nicht: #101012 liegt mit 1.07 auf der Karte. WAS DIE ABWEICHUNG TRAEGT (ausfuehrlich in der README): jedes Feld hat eine sichtbare Beschriftung, der Fokusring haelt seine 3.0, und `prefers-contrast: more` stellt #82828f wieder her. Nicht dunkler als das: Bei #4a4a54 sind es 1.72 auf --flaeche-2, und dort steht das Feld in einer ueberfahrenen Zeile — ein Rand, den auch ein gutes Auge auf einem guten Schirm sucht. --diagramm-linie Derselbe Grauton, den --linie-stark vorher hatte #8f8a80 / #82828f (3.43 / 4.68), fuer alles, was DATEN traegt: die gefuellten Kacheln im Verlauf, das Nulllinien- und Lueckenzeichen der Diagramme, das Ringsegment «Tablet», das Tendenzband. Er bleibt bei 3.0, und das ist der Grund, warum die Abweichung oben zu vertreten ist: Ein Rand ist Chrom — daneben stehen Beschriftung, Fokus und Inhalt. Eine Kachel IST die Zahl. Wer sie nicht sieht, liest die Zahl nicht, und es gibt nichts, was einspringt. --akzent-leicht #153224 Die Flaeche des aktiven Zustands. UNVERAENDERT, und das ist eine zurueckgenommene Aenderung: In der Fassung auf --flaeche #28282C lag dieser Ton mit 1.06 darauf, der aktive Navipunkt waere unsichtbar geworden, und er wurde auf #1d4a34 gehoben. Auf Lorins #18181A sind es 1.28 — die Schwelle 1.08 ist gehalten, die Anhebung also unnoetig. Und sie war ein Verlust: #153224 traegt --akzent-dunkel mit 8.63, #1d4a34 nur mit 6.27. Wer eine Flaeche aufhellt, um sie sichtbar zu machen, bezahlt mit der Lesbarkeit der Schrift darauf — auf diesem Grund war der Preis nicht faellig. --akzent-schrift, --knopf-haupt-schrift #111112 Beide waren #16161a, also der alte Grund. Sie folgen ihm auf den neuen. --erfolg-flaeche #1b3126, --warnung-flaeche #34281a, --fehler-flaeche #3a2220 Ebenfalls UNVERAENDERT, aus demselben Grund. Auf #28282C lagen sie mit 1.06 / 1.02 / 1.00 auf der Karte — eine Meldung ohne Meldungsflaeche — und waren auf #384741 / #493e34 / #463738 gehoben. Auf #18181A sind es 1.28 / 1.24 / 1.21, und die alten tragen ihre Schrift mit 7.75 / 6.57 / 6.04 statt 5.47 / 4.76 / 4.64. Beim Fehler ist das der Unterschied zwischen bequem und knapp: 4.64 liegt 0.14 ueber der Schwelle. Der Hauptknopf dreht im dunklen Modus die Rollen: dunkel auf dunkel waere kein Knopf mehr, also traegt er die helle Textfarbe als Flaeche. DIE DIFF-FLAECHEN bleiben, wie sie sind — halbdurchsichtig, und genau deshalb muessen sie nicht mit: rgba(…, .22) ueber --flaeche #18181A ergibt #2f4138 / #483130 / #443728, also 1.63 / 1.48 / 1.54 gegen die Karte und 9.11 / 10.02 / 9.66 fuer --text darauf. Eine Deckung rechnet sich mit ihrem Untergrund mit, ein Tokenwert nicht — deshalb prueft GestaltungTest::testDieDiffFlaechenTragenTextUeberDerKarte die MISCHUNG. DER SCHATTEN tut in diesem Modus fast nichts mehr, und das ist ausgerechnet: rgba(0,0,0,.4) ueber --grund #111112 ergibt #0a0a0b — 1.05, unsichtbar. Ueber --flaeche #18181A ergibt er #0e0e10, also 1.09 — auch das ist an der Grenze des Wahrnehmbaren. Damit fiel die Begruendung, mit der er in der Fassung auf #28282C stehen blieb: dort ergab er ueber der Karte 1.21 und war bei .block--zieht wirklich zu sehen. Auf #18181A sind es 1.09. Er BLEIBT trotzdem, aber der Grund ist jetzt ein anderer und ein schwaecherer: Ein gezogener Block braucht ein Zeichen, dass er ueber der Seite haengt, und er hat neben dem Schatten nur noch seinen Rand. Ihn hier auf `none` zu setzen waere ehrlicher als eine Wirkung zu behaupten, die 1.09 nicht hat — aber es waere das Wegnehmen des einzigen zweiten Zeichens, und ein Zeichen mehr, das kaum wirkt, ist besser als ein Zeichen weniger. Wer den gezogenen Block ueberarbeitet, hat hier die offene Frage: Ein deutlicherer Rand oder eine Vergroesserung waeren die tragfaehigeren Mittel, und dann darf der Schatten im dunklen Modus weg. Die Karte auf dem Grund braucht ihn ohnehin nicht — sie traegt ihre Trennung ueber --linie (1.81 auf dem Grund), nicht ueber --flaeche/--grund (1.06). tests/Unit/GestaltungTest.php liest diese Tokenwerte aus der Datei und rechnet die Paare nach. Wer hier eine Farbe aendert und die Schwelle reisst, bekommt einen roten Test — nicht eine Oberflaeche, die niemand mehr liest. */ :root { --grund: #f5f4f1; --flaeche: #ffffff; --flaeche-2: #faf9f7; --linie: #e3e0da; --linie-stark: #8f8a80; /* Der Grauton der Diagramme — siehe den Block oben. Im hellen Modus derselbe Wert wie der Rand: Dort ist nichts abgesenkt, die Linien sind dunkel auf hell und waren nie das Problem. */ --diagramm-linie: #8f8a80; --text: #1e1d1a; --text-leise: #6b675f; /* Die Marke. Nur Flaeche und Markierung, immer mit dunkler Schrift darauf. */ --akzent: #50C878; /* Dieselbe Farbe abgedunkelt: fuer Schrift und tragende Raender auf Hell. */ --akzent-dunkel: #17663f; --akzent-leicht: #e8f7ee; /* Was auf einer Flaeche in --akzent lesbar ist. Nie #fff. */ --akzent-schrift: #1e1d1a; /* Der Fokusring. Eigener Ton und nicht --akzent-dunkel: Er muss 3.0 halten und daneben so leise sein, dass ein Formular beim Durchtabben nicht aufblitzt. Siehe die Begruendung bei :focus-visible. */ --fokus: #3d9464; /* Die Haupthandlung: neutral, damit die Marke der Zustand bleibt. */ --knopf-haupt: #50C878; --knopf-haupt-hover: #43b96b; --knopf-haupt-schrift: #14261c; /* Die Flaeche des Nebenknopfs. Sie ERSETZT seinen Rand (Lorins Entscheidung: «alle secondary buttons ausgefuellt ohne Border, anstatt nur eine helle Border») und traegt damit allein, dass dort ein Bedienelement ist. Deshalb ist sie kraeftiger gewaehlt als die zarten Hinterlegungen weiter unten: 1.18 auf dem Grund, 1.29 auf der Karte, 1.23 auf dem Zeilenstreifen — und die schwaechste dieser drei ist die, die zaehlt. */ /* Der Rand eines gesperrten Feldes: 1.54 auf der Karte, also klar unter den 3.43 des normalen Randes — «weniger Kontrast als die normale» (Lorin). */ --rand-gesperrt: #d4d0c8; /* Das bedienbare Feld. Im hellen Modus dieselben Werte wie bisher: Lorins Vorgabe nennt dunkle Farben, und die gelten dort, wo sie gemeint sind. */ --feld-flaeche: #ffffff; --feld-rand: #8f8a80; --feld-text: #1e1d1a; --feld-platzhalter: #6b675f; --knopf-neben: #e5e2db; --knopf-neben-hover: #dbd6cc; --warnung: #8a5300; --warnung-flaeche: #fdf3e2; --fehler: #a12d21; --fehler-flaeche: #fbeceb; --erfolg: #1c6b3f; --erfolg-flaeche: #e8f4ec; /* Die Hinterlegungen im Versionsvergleich. Sie standen als rgba() mitten im Stylesheet und waeren bei einem Markenwechsel liegen geblieben. */ --plus-flaeche: rgba(28, 107, 63, .18); --minus-flaeche: rgba(161, 45, 33, .18); --geaendert-flaeche: rgba(138, 83, 0, .22); --radius: 10px; --radius-klein: 6px; --schatten: 0 1px 2px rgba(28, 27, 24, .06), 0 4px 12px rgba(28, 27, 24, .04); --seitenleiste: 15rem; /* Stand vorher nur als Ersatzwert hinter dem Komma und war damit nirgends definiert. Ein Ersatzwert, der die eigentliche Angabe ist, ist eine Angabe, die niemand findet — und die kein Projekt ueberschreiben kann. */ --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Kleinste Trefferflaeche fuer ein Bedienelement mit dem Finger. */ --griff: 2.75rem; } @media (prefers-color-scheme: dark) { :root { /* Die zwei Werte kommen von Lorin. Alles darunter ist daraus gerechnet; die Zahlen stehen im Kommentar ueber diesem Block. */ --grund: #111112; --flaeche: #18181A; --flaeche-2: #26262b; --linie: #28282C; --linie-stark: #55555f; --diagramm-linie: #82828f; --text: #ecebe8; --text-leise: #a3a09a; --akzent: #50C878; --akzent-dunkel: #7ce0a4; --akzent-leicht: #153224; --akzent-schrift: #111112; --fokus: #3c8c5a; --knopf-haupt: #50C878; --knopf-haupt-hover: #43b96b; --knopf-haupt-schrift: #14261c; /* 1.48 auf dem Grund, 1.39 auf der Karte, 1.18 auf dem Zeilenstreifen. #2b2b31 waere naeher an Lorins Vorlage gewesen, lag aber mit 1.07 auf --flaeche-2 (#26262b) — ein Knopf in einer ueberfahrenen Tabellenzeile waere dort verschwunden. */ /* 1.57 auf der Karte, gegen 2.41 beim normalen Rand. */ --rand-gesperrt: #3a3a42; /* Lorins Werte für ein bedienbares Feld. Gerechnet: Schrift #ffffff auf #202023 16.25 (min 4.5) ✓ Fläche #202023 auf der Karte 1.09 (min 1.08) ✓ knapp Rand #323239 auf der Karte 1.39 (min 3.0) ✗ bewusst Platzhalter #636365 auf #202023 2.71 (min 4.5) ✗ bewusst Die zwei Abweichungen stehen in der README, Punkt 9c. */ --feld-flaeche: #202023; --feld-rand: #323239; --feld-text: #ffffff; --feld-platzhalter: #636365; --knopf-neben: #323239; --knopf-neben-hover: #3c3c45; --warnung: #e0a458; --warnung-flaeche: #34281a; --fehler: #f08a7e; --fehler-flaeche: #3a2220; --erfolg: #7fd3a1; --erfolg-flaeche: #1b3126; /* Halbdurchsichtig und deshalb unveraendert: sie rechnen sich mit dem Untergrund mit. Die Werte ueber --flaeche stehen im Kommentar oben. */ --plus-flaeche: rgba(127, 211, 161, .22); --minus-flaeche: rgba(240, 138, 126, .22); --geaendert-flaeche: rgba(224, 164, 88, .22); --schatten: 0 1px 2px rgba(0, 0, 0, .4); } } /* WER MEHR KONTRAST BRAUCHT, BEKOMMT IHN. `--linie-stark` liegt im dunklen Modus mit 2.41 unter den 3.0 aus SC 1.4.11 — eine bewusste Abweichung (README, «Bewusste Abweichungen», Punkt 9a). Hier steht ihr Gegenstueck: Meldet das System «mehr Kontrast», gilt wieder #82828f mit 4.68 / 4.98 / 3.97. Diese Anfrage kommt von einer Einstellung des Betriebssystems (Windows: Kontrastdesigns, macOS: «Kontrast erhoehen») und nicht von einem Schalter im Admin. Genau deshalb ist sie hier der richtige Ort: Wer die Einstellung gesetzt hat, hat die Entscheidung schon getroffen, und zwar fuer alle Programme. Ein eigener Schalter waere eine zweite Stelle, an der dasselbe entschieden wird — und die Redaktion muesste ihn erst finden. Nur der dunkle Modus: Im hellen ist der Rand nicht abgesenkt. */ @media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root { --linie-stark: #82828f; } } /* Und der Rand des Nebenknopfs kommt zurueck — in BEIDEN Modi. Seit die Nebenknoepfe gefuellt und randlos sind, traegt ihre Flaeche allein, dass dort ein Bedienelement ist: 1.18 bis 1.48, nicht die 3.0 aus SC 1.4.11. Eine Flaeche, die 3.0 haelt, waere ein mittleres Grau und schwerer als der gruene Hauptknopf — die Gestaltung will das nicht, und Lorin hat es so entschieden. Wer dem System «mehr Kontrast» gesagt hat, hat etwas anderes entschieden. Dann steht der Rand wieder da: --linie-stark haelt hell 3.43 und dunkel 4.68 (dort greift der Block darueber). Die Fuellung bleibt — beides zusammen ist deutlicher als eines davon, und die Knoepfe springen nicht um. */ @media (prefers-contrast: more) { .knopf, .block__werkzeug { border-color: var(--linie-stark); } /* Der Hauptknopf behaelt seinen eigenen Rand: Seine Flaeche haelt 3.0 von selbst, und ein grauer Rand um Gruen waere hier nur Unruhe. */ .knopf--haupt { border-color: var(--knopf-haupt); } .knopf--haupt:hover { border-color: var(--knopf-haupt-hover); } .knopf--zweit { border-color: var(--akzent-dunkel); } .knopf--gefahr, .block__werkzeug--gefahr { border-color: var(--fehler); } .knopf--text { border-color: transparent; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.55; color: var(--text); background: var(--grund); } h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 1rem; } /* Links neutral dunkel und unterstrichen. Der Unterstrich ist das Kennzeichen, nicht die Farbe — ein Link, den nur ein Farbton von Text unterscheidet, ist fuer einen Teil der Leserinnen kein Link. Die Marke bleibt dem Zustand. */ a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--text); text-decoration-thickness: 2px; } /* DER FOKUSRING. Zwei Pixel und ein eigener, gedaempfter Gruenton — Lorins Befund zur ersten Fassung: «die kontrastreiche Outline noch zu kontrastreich, mache die subtiler». Vorher: 3px in --fokus, das im Dunkeln die Marke selbst war (#50C878, 8.34 auf der Karte) und im Hellen die gruene Schrift (#17663f, 6.98 auf Weiss). Damit sprang der Ring beim Durchtabben durch ein Formular wie eine Warnung an. Jetzt (gerechnet, hell / dunkel): auf --flaeche 3.74 / 4.30 vorher 6.98 / 8.34 auf --grund 3.40 / 4.58 auf --flaeche-2 3.55 / 3.65 auf --akzent-leicht 3.38 / 3.36 der knappste Fall Der Boden ist 3.0 aus SC 1.4.11, und darunter geht es nicht: Der Ring ist die einzige Markierung, auf die jemand angewiesen ist, der die Maus nicht benutzt. Die 3.36 auf der gruenen Flaeche des aktiven Navipunkts ist die engste Stelle — wer die Palette anfasst, prueft sie zuerst. Zwei Pixel und nicht einer: Ein 1px-Ring erfuellt die Mindestflaeche aus SC 2.4.13 nicht, und auf einem Bildschirm mit doppelter Pixeldichte ist er eine Haarlinie. Der Abstand von 2px bleibt: Ohne ihn verschmilzt der Ring mit dem Feldrand, und dann sieht man ihn nur noch an der Farbe. */ :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 3px; } /* Der Griff, mit dem admin.css an ein Symbol aus icon() kommt — die Klasse setzt Support\Icons. Die SVGs bringen width/height="1em" und fill="currentColor" schon als Attribute mit; hier steht nur, was ein Symbol im Textfluss braucht. Die Seitenleiste setzt ihre eigene Groesse, und zwar ueber `.nav-punkt svg` — als Element und nicht ueber diese Klasse, damit die Leiste nicht daran haengt, wie die Klasse heisst. */ .symbol { flex: none; vertical-align: -.15em; } /* Nur fuer Screenreader — Beschriftungen, die sichtbar redundant waeren. */ .nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sprung { position: absolute; left: -999px; top: .5rem; background: var(--flaeche); padding: .6rem 1rem; border-radius: var(--radius-klein); z-index: 100; } .sprung:focus { left: .5rem; } /* ---------------------------------------------------------------- Gerüst */ .huelle { display: flex; min-height: 100vh; } .seitenleiste { width: var(--seitenleiste); flex: 0 0 var(--seitenleiste); background: var(--flaeche); border-right: 1px solid var(--linie); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } /* Der Markenblock IST der Weg zur Uebersicht. Lorins Entscheidung: «da man auf das Logo klicken kann und auf die Übersicht kommt» — der Punkt «Übersicht» faellt dafuer aus der Liste. Drei Dinge muessen deshalb hier stehen und nicht nur im Template: 1. ER MUSS ALS LINK ZU ERKENNEN SEIN. Vorher war der Block eine Ueberschrift und sah auch danach aus. Das Kennzeichen ist der Unterstrich am Projektnamen — dieselbe Regel wie bei jedem anderen Link im Admin (siehe `a { text-decoration: underline }` oben). Verworfen: nur ein Hover-Effekt. Ein Link, den man erst beim Ueberfahren erkennt, ist mit dem Finger und mit der Tastatur kein Link. 2. AUF DER UEBERSICHT TRAEGT ER aria-current UND DIE AKTIVE FLAECHE. Sonst zeigt die Leiste auf dem Dashboard keinen aktiven Punkt — derselbe Fehler wie frueher beim Benutzerkreis, wo jemand sich fuer aus der Verwaltung herausgefallen hielt. 3. Die Beschriftung sagt, wohin er fuehrt. «PXL Demo AG» allein sagt es nicht; der Zusatz steht in einem .nur-sr HINTER dem sichtbaren Text, damit der sichtbare Text im zugaenglichen Namen enthalten bleibt (SC 2.5.3). Verworfen: aria-label — das haette den sichtbaren Text ersetzt. Die gruene Zeile «WEBSITE-VERWALTUNG» nimmt --akzent-dunkel (6.98 hell / 9.13 dunkel auf der Flaeche); #50C878 selbst haette als Schrift auf Weiss 2.13. Auf der aktiven Flaeche sind es 6.30 / 6.27. */ .seitenleiste__marke { display: block; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); font-weight: 600; font-size: .95rem; color: var(--text); text-decoration: none; } .seitenleiste__marke:hover { background: var(--flaeche-2); color: var(--text); } .seitenleiste__marke[aria-current="page"] { background: var(--akzent-leicht); } .seitenleiste__marke small { display: block; font-weight: 600; color: var(--akzent-dunkel); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; } /* Kein Unterstrich, und etwas groesser als die Zeile darueber (Lorins Aenderung). Damit ist der Markenblock die eine begruendete Ausnahme von der Hausregel «jeder Link ist unterstrichen»: Er ist kein Link IM Text, er ist das Logo — und ein Logo, das zur Startseite fuehrt, ist die aelteste Konvention des Web. Wer hier den Unterstrich wieder einsetzt, macht aus dem Logo eine Textstelle. Dass er anklickbar ist, tragen weiterhin zwei Zeichen: die Flaeche beim Ueberfahren und der Mauszeiger. Fuer einen Screenreader steht es im .nur-sr-Zusatz «– Zur Übersicht» ausgeschrieben — der ist deshalb nicht Zierde, sondern seit dieser Aenderung die einzige nicht-optische Auskunft darueber, wohin der Block fuehrt. */ .seitenleiste__marke-name { display: block; font-size: 1.05rem; line-height: 1.25; } .seitenleiste__marke[aria-current="page"] .seitenleiste__marke-name { color: var(--akzent-dunkel); } /* Die Punkte stehen enger als vorher (Lorins Entwurf) und jeder traegt seine eigene, abgerundete Flaeche. Der Innenabstand wandert deshalb von der Nav auf den Punkt: Laege er weiter auf der Nav, ginge die Flaeche von Rand zu Rand und waere keine Pille, sondern ein Balken. */ .seitenleiste__nav { flex: 1; overflow-y: auto; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .1rem; } .nav-gruppe { padding: .85rem .65rem .25rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); } .nav-punkt { display: flex; align-items: center; gap: .55rem; padding: .3rem .65rem; border-radius: var(--radius-klein); color: var(--text); text-decoration: none; font-size: .93rem; line-height: 1.35; } .nav-punkt:hover { background: var(--flaeche-2); color: var(--text); } /* Das Icon ist Beiwerk NEBEN einer Beschriftung, nicht ihr Ersatz: icon() liefert es mit aria-hidden, die Farbe kommt ueber currentColor mit, und die Groesse entscheidet die Leiste. Angesprochen als Element und nicht ueber eine Klasse — welche Klasse icon() setzt, ist Sache von icon(). */ .nav-punkt svg { width: 1.25em; height: 1.25em; flex: none; } /* Der aktive Zustand: abgerundete Flaeche, gruene Schrift, gruenes Icon (Lorins Entwurf). Er haengt NICHT an der Farbe allein — die Flaeche wechselt, die Schrift wird fett, und aria-current sagt es beim Vorlesen. Gemessen: --akzent-dunkel auf --akzent-leicht 6.30 hell / 6.27 dunkel. Der Hover traegt AUCH eine Flaeche, deshalb muessen die zwei sich mehr als in der Helligkeit unterscheiden: Hover ist neutral (--flaeche-2, Schrift bleibt --text), aktiv ist gruen (--akzent-leicht, Schrift --akzent-dunkel, fett). --akzent-leicht gegen --flaeche-2: 1.05 hell / 1.19 dunkel — als einziger Unterschied waere das zu wenig, mit Farbton, Schriftfarbe und Fettung zusammen ist es eindeutig. VORHER war das Kennzeichen ein 4-px-Randstreifen links in #50C878. Die Begruendung damals: #50C878 hat gegen Weiss nur 2.13 und darf nicht allein stehen. Sie gilt weiter — nur traegt jetzt die Flaeche die Aussage und #50C878 kommt als Schriftfarbe gar nicht mehr vor (dafuer gibt es --akzent-dunkel). Der Streifen faellt, weil er waagerecht — in der schmalen, rollenden Leiste — jedes Mal ein anderer Rand sein musste und beim naechsten Umbau in einem der zwei Zustaende vergessen wird. Die Pille sieht in beiden Richtungen gleich aus. Die Regel steht NACH :hover: beide haben dieselbe Gewichtung (Klasse + Attribut bzw. Klasse + Pseudoklasse), also entscheidet die Reihenfolge. Der aktive Punkt soll aktiv bleiben, wenn die Maus darueber liegt — «du bist hier» ist die wichtigere Auskunft. */ .nav-punkt[aria-current="page"] { background: var(--akzent-leicht); color: var(--akzent-dunkel); font-weight: 600; } /* Enger heisst nicht kleiner zum Antippen. Der Punkt ist jetzt rund 30 px hoch (0.93rem × 1.35 Zeilenhoehe + 2 × 0.3rem) — mit der Maus genug, mit dem Finger nicht. Am ZEIGEGERAET und nicht an der Fensterbreite: Ein Tablet im Querformat ist breit UND wird angetippt, und genau dort stand die Leiste bisher senkrecht mit Punkten unter 44 px. --griff sind die 2.75rem = 44 px, die im Haus schon fuer Blockwerkzeuge und Zeitspannen gelten. */ @media (pointer: coarse) { .seitenleiste__nav { gap: .2rem; } .nav-punkt { min-height: var(--griff); } } /* Konto und sein Menue stehen NEBENEINANDER, Name und Rolle untereinander. Vorher lag der Abmelden-Knopf als breite Flaeche unter dem Namen: Abmelden ist die seltenste Handlung im ganzen Admin und hatte die auffaelligste Flaeche in der Leiste. Jetzt liegt sie im Menue, einen Klick entfernt. */ .seitenleiste__fuss { border-top: 1px solid var(--linie); padding: .75rem 1rem; display: flex; align-items: center; gap: .25rem; } .seitenleiste__fuss .benutzer { flex: 1 1 auto; min-width: 0; } .benutzer { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); padding: .35rem; border-radius: var(--radius-klein); } .benutzer { text-decoration: none; } .benutzer:hover { background: var(--flaeche-2); } /* Der Benutzerkreis ist der Weg zum Profil, also ein Navigationspunkt wie die anderen — und muss deshalb dieselbe Zustandsmarkierung bekommen. Ohne sie stand jemand im Profil vor einer Leiste ohne aktiven Punkt und hielt sich fuer aus der Verwaltung herausgefallen. */ .benutzer[aria-current="page"] { background: var(--akzent-leicht); box-shadow: inset 3px 0 0 var(--akzent); } .benutzer[aria-current="page"] .benutzer__name { font-weight: 600; } .benutzer__kreis { width: 2rem; height: 2rem; border-radius: 50%; background: var(--akzent-leicht); color: var(--akzent-dunkel); display: grid; place-items: center; font-size: .78rem; font-weight: 600; flex: none; } /* Untereinander, und ein langer Name wird gekuerzt statt das Menue hinauszudruecken. min-width: 0 gehoert dazu — ohne das ignoriert ein Flex-Kind seine eigene Kuerzung und waechst trotzdem. */ .benutzer__text { display: flex; flex-direction: column; min-width: 0; } .benutzer__name { font-size: .88rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .benutzer__rolle { font-size: .74rem; color: var(--text-leise); } /* ---------------------------------------------------------------- Kontomenue Das Dreieck, das ein von sich aus mitbringt, muss weg: Der Traeger ist hier die Punktreihe. list-style UND ::-webkit-details-marker, weil die beiden Browserfamilien es verschieden loesen. */ .kontomenue { position: relative; flex: none; } /* KEIN display auf dem . Ein ist fuer Screenreader ein Knopf mit Auf-/Zu-Zustand — aber nur, solange sein display der Vorgabewert `list-item` bleibt. Mit `display: grid` verliert es diese Rolle: im Accessibility-Baum stand danach «generic "Menü zum Konto"» statt «button, collapsed». Nachgemessen mit read_page, nachdem ich genau das gebaut hatte. Deshalb wird hier nicht das summary zum Raster, sondern die Punktreihe absolut in seine Mitte gestellt. Dasselbe Ergebnis, ohne die Rolle zu opfern. */ .kontomenue__knopf { list-style: none; position: relative; width: 2rem; height: 2rem; border-radius: var(--radius-klein); cursor: pointer; color: var(--text-leise); } .kontomenue__knopf::-webkit-details-marker { display: none; } .kontomenue__knopf:hover { background: var(--flaeche-2); color: var(--text); } .kontomenue[open] .kontomenue__knopf { background: var(--flaeche-2); color: var(--text); } /* Drei Punkte aus Rand-Schatten statt aus einem Schriftzeichen: ein Glyph wie «⋮» faellt je nach Schrift anders aus und fehlt in manchen ganz. */ .kontomenue__punkte { position: absolute; top: 50%; left: 50%; margin: -1.5px 0 0 -1.5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } /* Nach OBEN, weil das Menue am unteren Rand der Leiste sitzt — nach unten waere es ausserhalb des Fensters. */ .kontomenue__tafel { position: absolute; bottom: calc(100% + .35rem); right: 0; min-width: 11rem; z-index: 30; display: flex; flex-direction: column; padding: .3rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .18); } .kontomenue__punkt { font: inherit; font-size: .88rem; text-align: left; padding: .45rem .55rem; border: 0; border-radius: var(--radius-klein); background: none; color: var(--text); text-decoration: none; cursor: pointer; width: 100%; } .kontomenue__punkt:hover { background: var(--flaeche-2); } .inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.75rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); flex-wrap: wrap; } .kopf h1 { margin: 0; } /* flex-wrap fehlte. Alle Kinder tragen white-space: nowrap, der Bereich konnte also nicht schmaler werden als seine Summe (im Editor gemessen: 448 px) — bei 390 px Fensterbreite scrollte die ganze Seite waagrecht, und «Vorschau» lag ausserhalb. R.2 verlangt, dass Lesen und kleine Korrekturen mobil gehen. */ .kopf__aktionen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; } /* Ein Satz, der zu einem Knopf in der Kopfzeile gehoert: eigene Zeile unter der Reihe, damit er beim Knopf steht und nicht in der Seitenspalte. */ .kopf__hinweis { flex-basis: 100%; margin: 0; text-align: right; max-width: 30rem; margin-left: auto; } .hauptteil { padding: 1.75rem; max-width: 68rem; width: 100%; } /* ---------------------------------------------------------------- Bausteine */ .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 1.25rem; } .karte__kopf { padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .karte__kopf h2 { margin: 0; } .karte__rumpf { padding: 1.25rem; } .karte__rumpf > :last-child { margin-bottom: 0; } /* ================================================================ Kopf und Weg Lorin hat einen Bildschirm entworfen und dazu gesagt, das uebrige UI wirke «als waeren nur ungestylte HTML Elemente aufeinander getuermt». Der Entwurf bringt vier Dinge, die genau das beheben, und sie stehen hier als Bausteine, weil sie danach auf jeden Bildschirm sollen: ein Kopf mit Zurueck-Knopf, ein Weg (Brotkrumen), Listen als aufklappbare Karten statt einer Tabelle, und eine Seitenspalte fuer Zahlen und Handlungen. */ .kopf__zeile { display: flex; align-items: center; gap: .75rem; min-width: 0; } /* Gefuellt und nicht nur umrandet (Lorins Sollbild): Auf der Flaeche der Kopfleiste war ein Kreis mit Haarlinie kaum zu sehen. Die Fuellung ist die zweite Flaeche — dieselbe, die jeden Hover im Admin traegt —, damit der Knopf ohne eigene Farbe auskommt und trotzdem als Flaeche liest. Rund, damit er nicht mit den rechteckigen Knoepfen rechts verwechselt wird: Er fuehrt weg von hier, die anderen tun etwas hier. */ .kopf__zurueck { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 50%; color: var(--text-leise); text-decoration: none; font-size: 1.05rem; line-height: 1; } .kopf__zurueck:hover { background: var(--linie); color: var(--text); border-color: var(--linie-stark); } /* Der Weg. Als