/* ===================================================================== gemeinsam/oberflaeche/farben.css – das gemeinsame Farbschema aller Arbeitsblaetter, Bausteine und Uebersichtsseiten, hell und dunkel. Regel fuer alle Bausteine: KEINE festen Farbwerte (#fff, #0f4c3a, ...) mehr in den Bausteindateien, sondern immer var(--name) aus dieser Datei. Nur so wirkt der Dunkelmodus ueberall, und nur so passen Text und Hintergrund zueinander (frueher z. B. weisse Schrift auf hellem Grund, weil ein Hover-Hintergrund und eine Schriftfarbe aus verschiedenen Ecken kamen). Farben sind nach ROLLE benannt, nicht nach Farbton: "--papier" ist im Dunkelmodus dunkel. Paare, die immer zusammengehoeren (Hintergrund + Schrift darauf): --green / --auf-green Knoepfe, Akzentflaechen --leiste / --auf-leiste obere Werkzeugleiste, Tabellenkoepfe --hell / --auf-hell Hauptaktion in der Werkzeugleiste --papier / --ink Blatt, Karten, Eingabefelder Welches Schema gilt: - Standard: wie das Geraet eingestellt ist (prefers-color-scheme) - erzwingt eines davon - gesetzt von arbeitsblaetter/loader/laden.js aus localStorage "farbschema" (Umschalter im Schueler-Dashboard) bzw. fuer Tafelbilder immer "hell" - Ausdruck: immer hell (der Dunkelsatz gilt nur fuer @media screen) ===================================================================== */ :root{ color-scheme: light; /* ---- Grundflaechen ---- */ --grund:#eef0ec; /* Seite hinter dem Blatt */ --papier:#ffffff; /* Blatt, Karten, Eingabefelder, Fenster */ --flaeche:#f6f8f6; /* leicht abgesetzte Flaeche: Kopfleisten von Zellen, Seitenleisten */ --flaeche-2:#eef1ef; /* staerker abgesetzt: Abschnittskoepfe, Reiter */ --flaeche-3:#dde5e0; /* Hover auf Flaechen */ /* ---- Text und Linien ---- */ --ink:#23302a; /* Grundfarbe Text */ --muted:#6b6255; /* Nebentext, Fusszeile */ --leise:#9aa5b4; /* sehr leiser Text: Zeilennummern, Platzhalter */ --line:#dcd5c2; /* Rahmen, Trennlinien */ --line-2:#b9c7bf; /* kraeftigere Rahmen: schwebende Fenster */ /* ---- Akzent Gruen ---- */ --green:#0f4c3a; /* Akzent: Knoepfe, Ueberschriften, Rahmen */ --auf-green:#ffffff; /* Schrift auf --green */ --green-hover:#14563f; /* Knopf mit --green im Hover */ --green-l:#eaf3ec; /* helle Akzentflaeche (Aufgaben, Info, Hover) */ --green-rand:#9fc9ae; /* gruenliche Rahmen */ --green-mittel:#2f6b4f; /* Linien in Diagrammen, dezente Akzente */ --hell:#62c370; /* Aktionsfarbe (Hauptknopf, Fokus) */ --auf-hell:#08301f; /* Schrift auf --hell */ --hell-hover:#7ddc8c; /* ---- Werkzeugleiste und Tabellenkoepfe ---- */ --leiste:#0f4c3a; --auf-leiste:#ffffff; --leiste-leise:#cfe8d8; /* Nebentext in der Leiste */ --leiste-rand:#4e8a6d; --leiste-hover:#14563f; /* ---- Rueckmeldungen ---- */ --gut:#08301f; --gut-l:#d8f3df; --fehler:#a5301f; --fehler-l:#fdf2ef; --fehler-rand:#e0836f; --fehler-stark:#c0392b; --warn:#8a5a00; --warn-l:#fff6cc; --warn-rand:#e6a700; --info:#1e3a8a; --info-l:#eef4ff; --info-rand:#b9cdf0; --lila:#8a3ffc; --gold:#c9922b; --gold-l:#fff8ea; /* Tipp-Rahmen/-Flaeche */ --rot:#b06a4f; --rot-l:#fff6f2; /* Loesungsbloecke */ /* ---- Code ---- */ --code-grund:#fbfcfb; --code-rand:#f2f5f3; /* Zeilennummern-Spalte */ --code-zeile:rgba(47,107,79,.06); /* aktive Zeile */ --terminal:#1e1f22; --auf-terminal:#e3e3e3; /* in beiden Schemata dunkel */ /* Syntaxfarben (Python/HTML/SQL) - im CodeMirror-Buendel (codemirror6.html) durch diese Namen ersetzt, Hellwerte = CodeMirrors Standard */ --syn-schluessel:#770088; --syn-name:#0000ff; --syn-zahl:#116644; --syn-text:#aa1111; --syn-kommentar:#994400; --syn-typ:#008855; --syn-atom:#221199; --syn-meta:#225566; --syn-sonder:#ee4400; --syn-lokal:#3300aa; --syn-klasse:#116677; --syn-eigenschaft:#0000cc; --auswahl:#d7d4f0; /* markierter Text im Editor */ /* ---- Abbildungen im Blatt (
) ---- Eingebettete Grafiken sind meist schwarz auf durchsichtigem Grund gezeichnet - im Dunkelmodus bekommen sie deshalb einen hellen Untergrund (wie ein eingeklebtes Bild), im hellen Modus aendert sich nichts. */ --abbildung-grund:transparent; --abbildung-abstand:0; /* ---- Kurvenfarben (Grafikrechner) ---- */ --kurve-1:#0f4c3a; --kurve-2:#8a3e1c; --kurve-3:#1c4c8a; --kurve-4:#7a1c8a; --kurve-5:#8a7a1c; --kurve-6:#1c8a7a; --kurve-7:#8a1c3e; --kurve-8:#3e1c8a; /* ---- Handschrift-Felder (Canvas) ---- */ --raster:#ccdad2; /* Linien/Kaestchen im Schreibfeld */ --raster-rand:#e3e8e4; /* Blattrand beim Herauszoomen */ /* ---- Schatten ---- */ --schatten:rgba(20,25,40,.22); --schatten-leicht:rgba(20,25,40,.10); /* ---- Schrift (gehoert nicht zum Farbschema, steht aber seit jeher hier) ---- */ --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",Menlo,monospace; } /* Dunkelsatz - zweimal derselbe Inhalt: einmal fuer "wie das Geraet", einmal fuer die ausdrueckliche Wahl "dunkel". Nur fuer den Bildschirm. */ @media screen and (prefers-color-scheme: dark){ :root:not([data-farbschema="hell"]){ color-scheme: dark; --grund:#111513; --papier:#1a201d; --flaeche:#202723; --flaeche-2:#28302c; --flaeche-3:#34403a; --ink:#e2e8e4; --muted:#aaa598; --leise:#7c8984; --line:#3b453f; --line-2:#4d5c54; --green:#6fc79c; --auf-green:#0b1f16; --green-hover:#8ad6b0; --green-l:#1b3127; --green-rand:#2f5a45; --green-mittel:#5fb48a; --hell:#4fb35f; --auf-hell:#06190d; --hell-hover:#63c874; --leiste:#15352a; --auf-leiste:#e2efe8; --leiste-leise:#a9cdb9; --leiste-rand:#3d6b56; --leiste-hover:#1f4a3b; --gut:#b7ecc5; --gut-l:#1b3b27; --fehler:#ff8f7e; --fehler-l:#3a211d; --fehler-rand:#8a4a3e; --fehler-stark:#e0604f; --warn:#e8c46e; --warn-l:#3a3217; --warn-rand:#b08a2a; --info:#9fbcf7; --info-l:#1b2638; --info-rand:#34496e; --lila:#c39bff; --gold:#d9a441; --gold-l:#2f2818; --rot:#dd9376; --rot-l:#33231d; --code-grund:#1c2220; --code-rand:#222a26; --code-zeile:rgba(111,199,156,.08); --syn-schluessel:#d49cf5; --syn-name:#8cb8ff; --syn-zahl:#8fd9b0; --syn-text:#f29a8a; --syn-kommentar:#c9a15a; --syn-typ:#6fd3a6; --syn-atom:#b3a6ff; --syn-meta:#9ecbd6; --syn-sonder:#ffae6b; --syn-lokal:#c2b0ff; --syn-klasse:#7fd6d0; --syn-eigenschaft:#9ec3ff; --auswahl:#34485f; --raster:#34423b; --raster-rand:#2c3530; --abbildung-grund:#f2f3ef; --abbildung-abstand:6px; --kurve-1:#6fc79c; --kurve-2:#f0976b; --kurve-3:#7fa8f0; --kurve-4:#d58ae8; --kurve-5:#e2cf6a; --kurve-6:#5fd6c8; --kurve-7:#f07f9e; --kurve-8:#a99bf5; --schatten:rgba(0,0,0,.55); --schatten-leicht:rgba(0,0,0,.35); } } @media screen{ :root[data-farbschema="dunkel"]{ color-scheme: dark; --grund:#111513; --papier:#1a201d; --flaeche:#202723; --flaeche-2:#28302c; --flaeche-3:#34403a; --ink:#e2e8e4; --muted:#aaa598; --leise:#7c8984; --line:#3b453f; --line-2:#4d5c54; --green:#6fc79c; --auf-green:#0b1f16; --green-hover:#8ad6b0; --green-l:#1b3127; --green-rand:#2f5a45; --green-mittel:#5fb48a; --hell:#4fb35f; --auf-hell:#06190d; --hell-hover:#63c874; --leiste:#15352a; --auf-leiste:#e2efe8; --leiste-leise:#a9cdb9; --leiste-rand:#3d6b56; --leiste-hover:#1f4a3b; --gut:#b7ecc5; --gut-l:#1b3b27; --fehler:#ff8f7e; --fehler-l:#3a211d; --fehler-rand:#8a4a3e; --fehler-stark:#e0604f; --warn:#e8c46e; --warn-l:#3a3217; --warn-rand:#b08a2a; --info:#9fbcf7; --info-l:#1b2638; --info-rand:#34496e; --lila:#c39bff; --gold:#d9a441; --gold-l:#2f2818; --rot:#dd9376; --rot-l:#33231d; --code-grund:#1c2220; --code-rand:#222a26; --code-zeile:rgba(111,199,156,.08); --syn-schluessel:#d49cf5; --syn-name:#8cb8ff; --syn-zahl:#8fd9b0; --syn-text:#f29a8a; --syn-kommentar:#c9a15a; --syn-typ:#6fd3a6; --syn-atom:#b3a6ff; --syn-meta:#9ecbd6; --syn-sonder:#ffae6b; --syn-lokal:#c2b0ff; --syn-klasse:#7fd6d0; --syn-eigenschaft:#9ec3ff; --auswahl:#34485f; --raster:#34423b; --raster-rand:#2c3530; --abbildung-grund:#f2f3ef; --abbildung-abstand:6px; --kurve-1:#6fc79c; --kurve-2:#f0976b; --kurve-3:#7fa8f0; --kurve-4:#d58ae8; --kurve-5:#e2cf6a; --kurve-6:#5fd6c8; --kurve-7:#f07f9e; --kurve-8:#a99bf5; --schatten:rgba(0,0,0,.55); --schatten-leicht:rgba(0,0,0,.35); } }