/* ========================================================================== DIE PRODUKTTRENNUNG IN DER DEV-KONSOLE -------------------------------------------------------------------------- Aus diesem Quelltext entstehen zwei Produkte: 2Rap (Sicherheitsdienste) und 2Cube (Familien und Gruppen). Die Konsole arbeitet immer an genau einem davon. Diese Datei macht sichtbar, an welchem. WAS SIE NICHT IST: die Farbwelt von 2Cube. Die steht in public/2cube.css und faerbt ueber :root[data-produkt="ordnung"] die ganze ANWENDUNG um. Hier geht es um etwas anderes: Wer auf 2rap.ch sitzt und in der Konsole an 2Cube arbeitet, arbeitet an einem anderen Produkt - er behauptet nicht, diese Installation sei ein anderes. Darum ein eigenes Attribut (data-dev-produkt am , data-dks-produkt an den Elementen) und darum faerbt hier nichts ausserhalb der Konsole. -------------------------------------------------------------------------- WARUM FARBE HIER NICHTS TRAEGT - mit der Zahl, die es beweist. Die beiden Produktfarben sind Violett (2Rap) und Bernstein (2Cube). Ihre relative Luminanz ist fast identisch: nachgerechnet 1,01:1 im Hellmodus und 1,07:1 im Dunkelmodus ZUEINANDER. Wer Farben nicht oder schlecht unterscheidet, sieht zwei gleich helle Flecken. Rund jeder zwoelfte Mann ist davon betroffen. Also traegt die Farbe hier NIE die Aussage. Sie ist die dritte Bestaetigung von etwas, das schon zweimal dasteht: 1. DAS WORT. "2Rap", "2Cube", "Nicht zugeordnet" - an jeder Marke, in jeder Ueberschrift, auf jedem Knopf, der etwas Unwiderrufliches tut. Ohne dieses Stylesheet ist die ganze Trennung immer noch lesbar. 2. DAS MUSTER. Das Band ueber der Kopfzeile ist bei 2Rap eine ruhige Flaeche und bei 2Cube ein Streifenmuster. Ein Muster ueberlebt Farbenblindheit und Graustufen. 3. Die Farbe. -------------------------------------------------------------------------- ALLE KONTRASTE NACHGERECHNET, nicht geschaetzt. WCAG 2.1, relative Luminanz L = 0,2126R + 0,7152G + 0,0722B (linearisiert), K = (L_hell + 0,05) / (L_dunkel + 0,05). Gerechnet gegen ALLE VIER Welten, in denen die Konsole stehen kann - 2Rap hell und dunkel, 2Cube hell und dunkel -, und dort gegen beide Flaechen, auf denen sie liegt: --surface-1 (Panel) und --surface-2 (Kopfzeile, Leiste, Griff). Der Grund fuer die vier: Die Konsole zeigt IMMER beide Produktfarben gleichzeitig (der Schalter hat zwei Seiten), und sie steht in der Farbwelt, die die Anwendung gerade traegt. Eine Tinte, die nur in ihrem eigenen Haus lesbar ist, waere im anderen unlesbar. Tinte 2Rap hell #6d28d9 2Rap-hell 6,52 / 6,67 · 2Cube-hell 6,20 / 6,48 Tinte 2Rap dunkel #c4b5fd 2Rap-dunkel 9,65 / 8,80 · 2Cube-dunkel 9,36 / 8,43 Tinte 2Cube hell #7b500e 2Rap-hell 6,43 / 6,58 · 2Cube-hell 6,12 / 6,39 Tinte 2Cube dunkel #e6c072 2Rap-dunkel 10,30 / 9,39 · 2Cube-dunkel 10,00 / 9,00 Der knappste Wert des ganzen Satzes ist 6,12:1 (Bernstein auf dem hellsten Sand von 2Cube). Verlangt sind 4,5:1 fuer Text - eingehalten in allen 16 Paarungen, in beiden Farbwelten. Die gefuellten Flaechen (der markierte Schalter, das Band) und die Schrift darauf, ebenfalls gerechnet: weiss auf #6d28d9 7,10 #14181a auf #c4b5fd 9,68 weiss auf #7b500e 7,01 #140f06 auf #e6c072 11,04 Flaeche #6d28d9 gegen Kopfzeile 6,67 (2Rap) / 6,48 (2Cube) Flaeche #7b500e gegen Kopfzeile 6,58 (2Rap) / 6,39 (2Cube) Flaeche #c4b5fd gegen Kopfzeile 8,80 (2Rap) / 8,43 (2Cube) Flaeche #e6c072 gegen Kopfzeile 9,39 (2Rap) / 9,00 (2Cube) Damit liegt auch die Umrandung des Schalters weit ueber den 3:1, die WCAG 1.4.11 fuer die Grenze eines Bedienelements verlangt. WOHER DIE VIER FARBEN KOMMEN: Es sind keine neuen Werte. #6d28d9/#c4b5fd sind --accent-fg aus styles.css, #7b500e/#e6c072 sind --accent-fg aus 2cube.css. Jedes Produkt traegt hier also die Farbe, die es als Anwendung ohnehin traegt - und keine, die erst noch geprueft werden muesste. -------------------------------------------------------------------------- DER DUNKELMODUS haengt am selben Attribut wie im ganzen Haus (:root[data-theme="dark"], gesetzt von app.js). Die zusaetzliche Abfrage ueber prefers-color-scheme ist die Absicherung fuer den Augenblick vor dem ersten applyTheme() und fuer statische Seiten - sie greift nur, wenn niemand ausdruecklich "hell" gewaehlt hat. Dieselbe Bauart wie in 2cube.css. ========================================================================== */ :root { --dp-wacht: #6d28d9; --dp-wacht-schrift: #ffffff; --dp-ordnung: #7b500e; --dp-ordnung-schrift: #ffffff; } :root[data-theme="dark"] { --dp-wacht: #c4b5fd; --dp-wacht-schrift: #14181a; --dp-ordnung: #e6c072; --dp-ordnung-schrift: #140f06; } @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dp-wacht: #c4b5fd; --dp-wacht-schrift: #14181a; --dp-ordnung: #e6c072; --dp-ordnung-schrift: #140f06; } } /* Ein Element sagt mit data-dks-produkt, welches Produkt es meint; diese zwei Regeln uebersetzen das in "seine" Farbe. Alles Weitere rechnet nur noch mit --dp-farbe und --dp-schrift und muss die Produkte nicht mehr kennen. */ [data-dks-produkt="wacht"] { --dp-farbe: var(--dp-wacht); --dp-schrift: var(--dp-wacht-schrift); } [data-dks-produkt="ordnung"] { --dp-farbe: var(--dp-ordnung); --dp-schrift: var(--dp-ordnung-schrift); } /* "Noch keinem Produkt zugeordnet" ist ausdruecklich KEINE dritte Farbe. Es ist das Fehlen einer Zuordnung, und ein eigener Farbton daran saehe aus wie ein drittes Produkt. Die gedaempfte Schrift des Hauses sagt genau das Richtige: da steht etwas, das noch nicht entschieden ist. */ [data-dks-produkt="ohne"] { --dp-farbe: var(--text-muted); --dp-schrift: var(--surface-2); } /* ------------------------------------------------------------- Das Band Der Streifen ueber der Kopfzeile. Er traegt kein Wort - er ist das Merkmal, das man aus dem Augenwinkel bemerkt, ohne hinzusehen. Genau dafuer ist er da, und genau darum ist er 8px hoch und laeuft ueber die ganze Breite: Peripheres Sehen loest keine Schrift auf, aber sehr wohl eine Flaeche. 2Rap ruhig, 2Cube gestreift. Das Muster ist die Haelfte der Aussage, nicht die Verzierung - siehe die Begruendung im Kopf dieser Datei. */ .dks-band { flex: none; height: 8px; background: var(--dp-farbe, var(--border-strong)); } .dks-band[data-dks-produkt="ordnung"] { background: repeating-linear-gradient( -45deg, var(--dp-farbe) 0 6px, var(--surface-2) 6px 12px ); } /* --------------------------------------------------------- Der Schalter Zwei echte Funkknoepfe. Der markierte traegt die volle Flaeche seines Produkts, der andere steht als Umriss daneben - beide Namen sind immer lesbar. Ein Umschalter haette nur einen Zustand gezeigt und den zweiten raten lassen. Die Kaestchen selbst werden versteckt, aber NICHT mit display:none: Ein so verstecktes Eingabefeld ist fuer die Tastatur und fuer eine Sprachausgabe nicht mehr da. appearance:none laesst es an seinem Platz und bedienbar. */ .dks-produkt { display: flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-sunken); } .dks-produkt-wahl { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; } .dks-produkt-wahl input { appearance: none; -webkit-appearance: none; width: 9px; height: 9px; margin: 0; border: 1px solid currentColor; border-radius: 2px; background: transparent; } /* Das gefuellte Kaestchen ist das vierte Merkmal neben Wort, Flaeche und Band - und das einzige, das auch in Graustufen eindeutig bleibt: gefuellt gegen leer, unabhaengig von jeder Farbe. */ .dks-produkt-wahl input:checked { background: currentColor; } /* Jede der beiden Beschriftungen traegt ihr eigenes data-dks-produkt und damit ihre eigene Farbe. AUSDRUECKLICH nicht ueber :nth-child geloest: Das waere eine stille Abhaengigkeit von der Reihenfolge der Tabelle PRODUKTE in devkonsole-schale.js - wer dort ein drittes Produkt an die erste Stelle setzt, faerbte hier zwei falsch, und keine Pruefung saehe es. */ .dks-produkt-wahl:has(input:checked) { background: var(--dp-farbe); color: var(--dp-schrift); } .dks-produkt-wahl:hover { color: var(--text-primary); } .dks-produkt-wahl:has(input:checked):hover { color: var(--dp-schrift); } .dks-produkt-wahl:has(input:focus-visible) { outline: 2px solid var(--accent-fg); outline-offset: 1px; } /* ---------------------------------------------------- Der Griff, zugeklappt Wer die Konsole aufklappen will, soll vorher wissen, was ihn erwartet. Der Name steht senkrecht unter dem Wort "Konsole", in der Farbe des Produkts. */ .dks-griff-produkt { writing-mode: vertical-rl; text-orientation: mixed; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--dp-farbe, var(--text-secondary)); user-select: none; } /* ------------------------------------------------------------- Die Marken Das Wort an einer einzelnen Zeile. Umriss statt Fuellung: Eine Liste aus dreissig gefuellten Chips ist ein Teppich, in dem die Titel untergehen - und die Titel sind das, was gelesen werden muss. */ .dk-produkt-marke, .di-produkt-marke { display: inline-block; padding: 0 5px; border: 1px solid var(--dp-farbe); border-radius: 5px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; color: var(--dp-farbe); white-space: nowrap; } /* Ohne Zuordnung: gestrichelt. Das dritte Merkmal neben dem Wort und der gedaempften Farbe - eine offene Linie fuer eine offene Frage. */ .dk-produkt-marke[data-dks-produkt="ohne"], .di-produkt-marke[data-dks-produkt="ohne"] { border-style: dashed; } /* --------------------------------------------- Die Zuordnung nachholen Die zwei Knoepfe an einem Wunsch ohne Produkt. Sie stehen an der Stelle, an der sonst das Auswahlkaestchen sitzt - dort, wo die Frage entsteht ("warum kann ich den nicht ankreuzen"), steht auch die Antwort. */ .dk-produkt-wahl { display: inline-flex; gap: 3px; } .dk-produkt-knopf { padding: 1px 6px; border: 1px solid var(--dp-farbe); border-radius: 5px; background: transparent; color: var(--dp-farbe); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; } .dk-produkt-knopf:hover { background: var(--dp-farbe); color: var(--dp-schrift); } .dk-produkt-knopf:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 1px; } .dk-produkt-knopf[disabled] { opacity: .5; cursor: default; } /* ------------------------------------------- Abschnitt "Nicht zugeordnet" Er faellt auf, ohne zu schreien: eine gestrichelte Umrandung in derselben gedaempften Farbe wie die Marken darin. Was hier steht, wartet auf eine Entscheidung eines Menschen - kein Fehler, aber auch nichts, was von selbst weggeht. */ .dk-buch-ohne { padding: 8px; border: 1px dashed var(--text-muted); border-radius: 8px; } .dk-buch-ohne[hidden] { display: none; } /* --------------------------------------------- Die Ueberschriften und Knoepfe Ueberschriften bekommen einen senkrechten Balken in der Produktfarbe. Das Wort steht ohnehin dabei ("Mein Wunschbuch: 2Rap"); der Balken ist das Merkmal fuer den Blick, der nur ueberfliegt. */ .dk-buch h3[data-dks-produkt], .dk-paket h3[data-dks-produkt], .di-fach h3[data-dks-produkt], .di-fach h4[data-dks-produkt] { border-left: 3px solid var(--dp-farbe); padding-left: 6px; } /* Die zwei Knoepfe, die etwas Unwiderrufliches tun, tragen die volle Flaeche ihres Produkts. Sie sind die letzte Stelle vor dem Abschicken - und der einzige Ort in dieser Datei, an dem Farbe laut sein darf. */ .dk-paket-bauen[data-dks-produkt], .di-produkt-knopf[data-dks-produkt] { background: var(--dp-farbe); border: 1px solid var(--dp-farbe); color: var(--dp-schrift); font-weight: 700; } .dk-paket-bauen[data-dks-produkt]:hover, .di-produkt-knopf[data-dks-produkt]:hover { filter: brightness(1.08); } /* -------------------------------------------------------- Ruhe vor Bewegung Kein Uebergang auf Farbwechseln: Der Produktwechsel SOLL hart sein. Ein weiches Ueberblenden liesse ihn wie eine Verzierung aussehen; er ist eine Zaesur. */ @media (prefers-reduced-motion: reduce) { .dks-band, .dks-produkt-wahl { transition: none; } }