/* Design-Tokens, übernommen aus sv49-admin.de (static/admin/css/tokens.css * und die semantischen Farben aus farbschema.css). Die einzige Stelle mit * rohen Farbwerten; app.css benutzt nur die --svb-color-* und --svb-ok/... * Ebene. Dunkelmodus folgt der Systemvorgabe (es gibt keinen Umschalter). */ :root { /* ---------- Palette: Graustufen ---------- */ --svb-palette-white: #ffffff; --svb-palette-gray-25: #fafafa; --svb-palette-gray-50: #f5f5f5; --svb-palette-gray-100: #ebebeb; --svb-palette-gray-200: #dcdcdc; --svb-palette-gray-300: #c4c4c4; --svb-palette-gray-400: #9b9b9b; --svb-palette-gray-500: #767676; /* >= 4,5:1 gegen Weiss */ --svb-palette-gray-600: #5a5a5a; --svb-palette-gray-700: #3d3d3d; --svb-palette-gray-750: #2e2e2e; --svb-palette-gray-800: #232323; --svb-palette-gray-850: #1c1c1c; --svb-palette-gray-900: #141414; --svb-palette-gray-950: #0d0d0d; /* Fuer den Dark Mode: Toene, die es im Hellen nicht gibt. * #191919 als Grund statt #121212 - reines Schwarz erzeugt bei hellem Text * Halation (Nachleuchten an den Buchstabenkanten). */ --svb-palette-gray-d-line: #6e6e6e; /* ~3:1 gegen den dunklen Grund */ --svb-palette-gray-d-text: #ededed; --svb-palette-gray-d-muted: #a3a3a3; --svb-palette-gray-d-subtle: #7a7a7a; --svb-palette-gray-d-accent: #d4d4d4; /* ---------- Palette: Statusfarben ---------- * Die einzigen Buntfarben im System. Leicht entsaettigt gegenueber den * frueheren Werten: auf grauem Grund ohne Konkurrenz durch Django-Blau * wirken gesaettigte Toene lauter, als die Meldung schwer ist. */ --svb-palette-green: #2f6f3e; --svb-palette-green-dark: #6fbc84; --svb-palette-green-bg: #e9f2ea; --svb-palette-green-bg-dark: #1a2c1f; --svb-palette-amber: #8a5a10; --svb-palette-amber-dark: #d9a544; --svb-palette-amber-bg: #f7efdc; --svb-palette-amber-bg-dark: #332a13; --svb-palette-red: #a3261e; --svb-palette-red-hover: #821e17; --svb-palette-red-dark: #ef9a92; --svb-palette-red-flaeche-dark: #7a2019; /* Loeschen-Button im Dark Mode */ --svb-palette-red-bg: #f7e7e5; --svb-palette-red-bg-dark: #331917; /* ---------- Farben: Text ---------- */ --svb-color-text: var(--svb-palette-gray-900); --svb-color-text-muted: var(--svb-palette-gray-500); --svb-color-text-subtle: var(--svb-palette-gray-400); --svb-color-text-inverse: var(--svb-palette-gray-50); /* ---------- Farben: Flaechen ---------- */ --svb-color-surface: var(--svb-palette-white); /* Module, Karten */ --svb-color-surface-sunken: var(--svb-palette-gray-50); /* Seitengrund */ --svb-color-surface-alt: var(--svb-palette-gray-25); /* gestreifte Zeile */ --svb-color-surface-raised: var(--svb-palette-gray-100);/* Tabellenkopf, Filter */ --svb-color-surface-inverse: var(--svb-palette-gray-900); /* Kopfzeile */ --svb-color-surface-inverse-soft: var(--svb-palette-gray-700); /* ---------- Farben: Linien ---------- */ --svb-color-border: var(--svb-palette-gray-300); --svb-color-border-soft: var(--svb-palette-gray-200); --svb-color-border-strong: var(--svb-palette-gray-900); /* ---------- Farben: Akzent ---------- * Der Akzent ist Schwarz. Kein Blau, kein Tuerkis - die Statusfarben sind * dadurch die einzigen Buntfarben und werden wieder zum Signal. */ --svb-color-accent: var(--svb-palette-gray-900); --svb-color-accent-hover: var(--svb-palette-gray-700); --svb-color-accent-bg: var(--svb-palette-gray-100); --svb-color-accent-on: var(--svb-palette-white); /* ---------- Schrift ---------- * Keine Webfonts: kein zusaetzlicher Request, keine Abhaengigkeit von einem * fremden Host, kein Flackern beim Laden. */ --svb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --svb-font-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --svb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --svb-weight-normal: 400; --svb-weight-medium: 500; --svb-weight-semibold: 600; --svb-weight-bold: 700; /* Die Stufen tragen *Rollen*, nicht Groessen. Eine neue Regel sucht sich * ihre Stufe ueber die Rolle des Elements, nie ueber den Pixelwert - sonst * waechst neben der Skala eine zweite, unausgesprochene Ordnung heran. * * 2xs Versalzeilen: Modulkopf, Tabellenkopf, Filtertitel, Chips, * Beschriftungen in den TOP-Karten * xs Hilfetexte, Brotkrumen, Fussnoten, Vorschauzeilen * sm Beschriftung und Formularzeile, Tabellen, Buttons, Tooltip * base Fliesstext, der Wert im Eingabefeld, Zwischenueberschrift h3 * lg Abschnittstitel in Handbuch und Hilfe * xl Seitentitel, Site-Name * 2xl Anmeldung, Handbuch-Titel * * Der Wert im Feld steht damit *eine* Stufe ueber seiner Beschriftung: das * Eingegebene ist der Inhalt der Seite, das Etikett davor nur sein Name. */ --svb-size-2xs: 0.6875rem; /* 11px */ --svb-size-xs: 0.75rem; /* 12px */ --svb-size-sm: 0.8125rem; /* 13px */ --svb-size-base: 0.875rem; /* 14px */ /* 16px steht ausserhalb der Staffelung: es ist die *Lesegroesse* der * Fliesstextseiten (Handbuch, Hilfe-Modal) und die Groesse einzelner * Glyphen (die beiden Weg-Kreuze), keine Textstufe des Admin. Die * Formularfelder trug es bis zum 01.09.2026 - siehe komponenten.css. */ --svb-size-md: 1rem; /* 16px */ --svb-size-lg: 1.125rem; /* 18px */ --svb-size-xl: 1.375rem; /* 22px */ --svb-size-2xl: 1.75rem; /* 28px */ --svb-leading-tight: 1.25; --svb-leading-normal: 1.45; --svb-leading-relaxed: 1.6; --svb-tracking-tight: -0.01em; --svb-tracking-wide: 0.03em; --svb-tracking-wider: 0.06em; /* ---------- Abstaende (4px-Raster) ---------- */ /* Breite der Beschriftungsspalte im Formular. Django 5 hatte dafuer feste * 160px; Django 6 kennt die Spalte nicht mehr, siehe komponenten.css. */ --svb-formular-label-breite: 10rem; --svb-space-1: 0.25rem; --svb-space-2: 0.5rem; --svb-space-3: 0.75rem; --svb-space-4: 1rem; --svb-space-5: 1.25rem; --svb-space-6: 1.5rem; --svb-space-8: 2rem; --svb-space-10: 2.5rem; --svb-space-12: 3rem; /* ---------- Rahmen und Radien ---------- * Ein Brett besteht aus Quadraten: die Radien sind so klein wie moeglich, * ohne dass Kanten schartig wirken. */ --svb-border-hairline: 1px; --svb-border-strong: 1.5px; /* Unterlinie von Titeln und Tabellenkoepfen */ --svb-border-marke: 3px; /* Markierungsbalken links */ --svb-radius-sm: 0; --svb-radius-md: 2px; --svb-radius-lg: 3px; /* ---------- Schatten ---------- * Nur fuer Schwebendes. Flaechen werden ueber Linien abgegrenzt: auf * monochromem Grund ist ein grauer Schatten kaum von einer grauen Flaeche * zu unterscheiden. */ --svb-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.35); /* ---------- Ebenen ---------- */ --svb-z-sticky: 40; --svb-z-overlay: 1000; --svb-z-modal: 1100; /* Ueber dem Modal: auch darin stehen Elemente mit Tooltip. */ --svb-z-tooltip: 1200; } /* ---------- Semantische Farben (aus farbschema.css) ---------- */ :root { --svb-ok: var(--svb-palette-green); --svb-warn: var(--svb-palette-amber); --svb-error: var(--svb-palette-red); --svb-muted: var(--svb-color-text-muted); --svb-warn-bg: var(--svb-palette-amber-bg); --svb-ok-bg: var(--svb-palette-green-bg); --svb-error-bg: var(--svb-palette-red-bg); /* Knopfflächen wie Djangos --button-bg / --delete-button-bg in sv49 */ --svb-button-bg: var(--svb-palette-gray-700); --svb-button-hover-bg: var(--svb-palette-gray-600); --svb-delete-bg: var(--svb-palette-red); --svb-delete-hover-bg: var(--svb-palette-red-hover); } /* ---------- Dark Mode ---------- * Nur die semantische Ebene wird umbelegt; die Palette bleibt. */ @media (prefers-color-scheme: dark) { :root { --svb-color-text: var(--svb-palette-gray-d-text); --svb-color-text-muted: var(--svb-palette-gray-d-muted); --svb-color-text-subtle: var(--svb-palette-gray-d-subtle); --svb-color-text-inverse: var(--svb-palette-gray-d-text); --svb-color-surface: var(--svb-palette-gray-850); --svb-color-surface-sunken: var(--svb-palette-gray-900); --svb-color-surface-alt: var(--svb-palette-gray-800); --svb-color-surface-raised: var(--svb-palette-gray-750); --svb-color-surface-inverse: var(--svb-palette-gray-950); --svb-color-surface-inverse-soft: var(--svb-palette-gray-700); --svb-color-border: var(--svb-palette-gray-d-line); --svb-color-border-soft: var(--svb-palette-gray-700); --svb-color-border-strong: var(--svb-palette-gray-d-text); --svb-color-accent: var(--svb-palette-gray-d-accent); --svb-color-accent-hover: var(--svb-palette-gray-d-text); --svb-color-accent-bg: var(--svb-palette-gray-750); --svb-color-accent-on: var(--svb-palette-gray-900); --svb-ok: var(--svb-palette-green-dark); --svb-warn: var(--svb-palette-amber-dark); --svb-error: var(--svb-palette-red-dark); --svb-warn-bg: var(--svb-palette-amber-bg-dark); --svb-ok-bg: var(--svb-palette-green-bg-dark); --svb-error-bg: var(--svb-palette-red-bg-dark); --svb-delete-bg: var(--svb-palette-red-flaeche-dark); --svb-delete-hover-bg: var(--svb-palette-red); color-scheme: dark; } }