/* ===================================================================== werkzeuge/writer/eigen/colors.css ------------------------------------------------------------------ Farbvariablen des LabWriter fuer die eigene, mitgelieferte Farbquelle. Im laufenden lab kommen die Werte aus css/colors.css; damit der Werkzeugordner aber auch ohne die Plattform startet, steht hier derselbe Satz - nur die, den LabWriter wirklich braucht (app.css + basis.css, nachgezaelt - keine weiteren). Wertewoerterbuch (hell / dunkel) wie in der Plattform: --bd-color Seitenhintergrund --ct-color Karten, Panels --div-color innere Flaeche --blk-color Text --bt-color Button, Akzent --link-color Links --grey600-color Sekundaertext --lab-border 1px-Linien Prinzip: Hell = Schulgruen, Dunkel = Orange-Akzent (AGENTS.md 5.1). Der Modus wird per JS auf gesetzt (eigen/geraet.js); faellt JS aus, gilt der helle Modus. Pflege: Aendert sich ein Wert in lab/css/colors.css, muss er hier nachgezogen werden. Das Skript .zcode/tmp/writer-eigen/colors-diff.php sagt Bescheid, welche Variablen auseinandergelaufen sind. ===================================================================== */ :root { color-scheme: light; /* --- Flaechen --- */ --bd-color: #F4F6F5; /* Seitenhintergrund (kuehles Hellgrau) */ --ct-color: #FFFFFF; /* Karten, Panels */ --div-color: #FFFFFF; /* innere Flaechen */ --blk-color: #1A1C1A; /* Text (AAA auf Weiss) */ /* --- Primaer / Buttons (Schul-Grün) --- */ --bt-color: #2E7D32; /* Green 800 - gedeckt und ernst */ --bt-h-color: #1B5E20; /* Green 900 - Hover */ --bt-f-color: #FFFFFF; --link-color: #2E7D32; /* 5.1:1 auf Weiss (WCAG AA) */ --link-h-color: #1B5E20; /* --- Gruene Tonleiter (nur die Toene, die der Writer braucht) --- */ --green50-color: #E8F5E9; --green100-color: #C8E6C9; --green200-color: #A5D6A7; --green300-color: #81C784; --green500-color: #4CAF50; --green700-color: #388E3C; /* --- Graustufen --- */ --grey50-color: #FAFAFA; --grey100-color: #F5F5F5; --grey200-color: #EEEEEE; --grey300-color: #E0E0E0; --grey400-color: #BDBDBD; --grey600-color: #5F6763; /* Sekundaertext (4.9:1 auf Weiss) */ --alt-div-color: #F5F5F5; --alt-div-hover-color: #EEEEEE; /* --- Semantik --- */ --red600-color: #C62828; --blue600-color: #1565C0; /* --- lab-spezifisch --- */ --lab-border-color: #E2E6E3; /* 1px-Linien */ --lab-border: 1px solid var(--lab-border-color); --lab-ring: rgba(46, 125, 50, 0.40); /* Fokusring */ --lab-shadow-1: 0 1px 2px rgba(16, 24, 20, 0.06), 0 1px 3px rgba(16, 24, 20, 0.04); --lab-shadow-2: 0 10px 26px rgba(16, 24, 20, 0.10); --lab-toolbar-bg: rgba(255, 255, 255, 0.86); /* klebrige Werkzeugleiste */ --lab-leiste-color: #1A1C1A; /* dunkle Band-Leiste (Tabs) */ --lab-leiste-text: #FFFFFF; /* Text auf der dunklen Leiste */ --lab-sprite-color: #2E7D32; /* Markierungsfarbe der Seiten */ /* Plaketten und Meldungen (von app.css benutzt) */ --lab-aktiv-bg: #E8F5E9; --lab-aktiv-fg: #1B5E20; --lab-aktiv-bd: #A5D6A7; --lab-beta-bg: #FFF7E0; --lab-beta-fg: #7A5200; --lab-beta-bd: #FFE082; --lab-geplant-bg: #F1F3F2; --lab-geplant-fg: #5F6763; --lab-geplant-bd: #E2E6E3; --lab-fehler-fg: #B3261E; /* Papier der Textverarbeitung: bleibt in beiden Modi weiss (Papier ist Papier - Druck und Export duerfen nicht vom Bildschirmmodus abhaengen, sonst wird der Text unlesbar). */ --lab-tv-blatt: #FFFFFF; --lab-tv-blatt-text: #1A1C1A; --lab-tv-blatt-linie: #C4CBC7; --lab-tv-blatt-flaeche: #F1F3F2; --lab-tv-blatt-link: #1565C0; --lab-tv-blatt-akzent: #2E7D32; --lab-tv-blatt-akzent-zart: #EDF3EE; /* Schriften */ --lab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --lab-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; --lab-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; } /* ===================================================================== DUNKELMODUS - Akzent wird Orange, Flaechen werden Material Dark. Wird von eigen/geraet.js auf gesetzt. ===================================================================== */ html[data-theme="dark"] { color-scheme: dark; /* --- Flaechen --- */ --bd-color: #121413; --ct-color: #1C1F1E; --div-color: #232726; --blk-color: #E7EAE8; /* --- Primaer / Buttons (Orange) --- */ --bt-color: #FF9800; --bt-h-color: #FFB74D; --bt-f-color: #14100A; --link-color: #FFB74D; /* 10:1 auf dunklem Grund */ --link-h-color: #FFCC80; /* --- Gruene Namen bleiben erhalten, werden aber warm gedeckt --- */ --green50-color: #2A2118; --green100-color: #34281A; --green200-color: #46331E; --green300-color: #FFB74D; --green500-color: #FF9800; --green700-color: #FB8C00; /* --- Graustufen invertiert --- */ --grey50-color: #191C1B; --grey100-color: #1C1F1E; --grey200-color: #2A2E2D; --grey300-color: #3A3F3E; --grey400-color: #7B8380; --grey600-color: #B4BBB8; /* Sekundaertext auf Dunkel */ --alt-div-color: #232726; --alt-div-hover-color: #2C3130; /* --- Semantik --- */ --red600-color: #EF5350; --blue600-color: #64B5F6; /* --- lab-spezifisch --- */ --lab-border-color: #333938; --lab-ring: rgba(255, 152, 0, 0.45); --lab-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --lab-shadow-2: 0 12px 30px rgba(0, 0, 0, 0.45); --lab-toolbar-bg: rgba(18, 20, 19, 0.86); --lab-leiste-color: #232726; --lab-leiste-text: #E7EAE8; --lab-sprite-color: #FF9800; --lab-aktiv-bg: #1E2A1F; --lab-aktiv-fg: #A5D6A7; --lab-aktiv-bd: #2E7D32; --lab-beta-bg: #2C2416; --lab-beta-fg: #FFD54F; --lab-beta-bd: #7A5200; --lab-geplant-bg: #232726; --lab-geplant-fg: #B4BBB8; --lab-geplant-bd: #333938; --lab-fehler-fg: #F2B8B5; /* Papier bleibt weiss (Werte wie im Hellmodus, siehe oben). */ --lab-tv-blatt: #FFFFFF; --lab-tv-blatt-text: #1A1C1A; --lab-tv-blatt-linie: #C4CBC7; --lab-tv-blatt-flaeche: #F1F3F2; --lab-tv-blatt-link: #1565C0; --lab-tv-blatt-akzent: #2E7D32; --lab-tv-blatt-akzent-zart: #EDF3EE; }