/* ============================================================ W6 - Web | Design-Tokens (Farben, Radien, Breiten, Abstaende) ------------------------------------------------------------ EINE Quelle fuer das Aussehen ALLER Seiten - SPA (index.html) wie MVC-Seiten (Views/...). Vorher liefen zwei Farbwelten nebeneinander: style.css (SPA) Rot #c30b0c, Flaechen #f6f6f7/#ebebee site.css (MVC) Rot #b10f0f, Flaechen #f8fafc/#e5e7eb dazu Inseln in dataflow/maps/filterconfig (drei Gruentoene, drei Rottoene, Radien von 8 bis 24px). Massgeblich ist jetzt die SPA-Palette - sie deckt die meisten Seiten ab. REGEL: Neue Farben, Radien und Breiten NUR hier eintragen und ueberall per var(--...) benutzen. Harte #-Werte in den Seiten-Stylesheets sind der Weg zurueck ins Durcheinander. Einbinden VOR allen anderen Stylesheets: ============================================================ */ :root { /* --- Marke ------------------------------------------------ */ --rot: #c30b0c; --rot-dunkel: #9c0809; --rot-hell: #fceaea; --rot-rand: #f5d4d4; /* --- Flaechen und Linien ---------------------------------- */ --flaeche: #f6f6f7; --karte: #ffffff; --rand: #ebebee; --rand-stark: #e1e1e6; --rand-zart: #f1f1f4; --eingabe: #ffffff; --hover: #f4f4f6; --einlage: #f1f1f4; --tabellen-kopf: #fafafb; --zeile-hover: #fcf8f8; /* --- Text ------------------------------------------------- */ --text: #1a1a1e; --text-mittel: #55555c; --text-grau: #8c8c94; --text-blass: #c2c2c8; /* --- Status ----------------------------------------------- */ /* Erfolg */ --gruen: #1d8a4b; --gruen-hell: #f3faf5; --gruen-rand: #cdead6; --gruen-flaeche: #d9f2e1; /* Warnung */ --warn: #92400e; --warn-hell: #fef3c7; --warn-rand: #fde68a; /* Fehler - bewusst das Markenrot statt eines vierten Rottons */ --fehler: var(--rot); --fehler-hell: var(--rot-hell); --fehler-rand: var(--rot-rand); /* Hinweis */ --info: #0b7285; --info-hell: #e0f2fe; --info-rand: #bae6fd; /* --- Schatten --------------------------------------------- */ --schatten-klein: 0 1px 2px rgba(20, 20, 25, .05); --schatten: 0 1px 2px rgba(20, 20, 25, .05), 0 6px 18px rgba(20, 20, 25, .05); --schatten-gross: 0 12px 30px rgba(20, 20, 25, .10); /* --- Radien ----------------------------------------------- Skala statt Zufall: vorher lagen 8/9/10/11/12/13/14/15/16/24 nebeneinander. --radius ist der Kartenwert der SPA. */ --radius-s: 8px; --radius-m: 10px; --radius: 14px; --radius-l: 18px; --radius-rund: 999px; /* --- Breiten ---------------------------------------------- Vier Stufen statt 420/430/760/980/1280/1300. */ --breite-inhalt: 1280px; /* breite Seiten: Startseite, Karten, Listen */ --breite-text: 980px; /* Lesetext: Hilfe */ --breite-schmal: 760px; /* Formulare/Konfiguration */ --breite-dialog: 430px; /* Anmeldung, kleine Dialoge */ /* --- Abstaende -------------------------------------------- */ --abstand-xs: 4px; --abstand-s: 8px; --abstand-m: 12px; --abstand-l: 16px; --abstand-xl: 24px; --abstand-xxl: 32px; /* --- Schrift ---------------------------------------------- EIN Stack. "Inter" stand zwar in site/login/kopfzeile, wurde aber nirgends geladen (kein @font-face, kein Webfont-Link) - es fiel ohnehin auf system-ui zurueck. */ --schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* --- Kopf- und Fusszeile ---------------------------------- Die rote Leiste oben und unten rahmt jede Seite. Der Verlauf ist unten gespiegelt, damit die dunkle Kante jeweils zur Seitenmitte zeigt. Beides MUSS ueber diese Tokens laufen: Vorher trug die Kopfzeile einen Verlauf, die MVC-Fusszeile den gespiegelten und die SPA-Fusszeile gar keinen (einfarbig) - beim Wechsel von der Startseite in ein Modul wechselte damit sichtbar das Rot am unteren Rand. */ --verlauf-kopf: linear-gradient(135deg, var(--rot) 0%, var(--rot-dunkel) 100%); --verlauf-fuss: linear-gradient(135deg, var(--rot-dunkel) 0%, var(--rot) 100%); /* Text auf der roten Leiste - leicht gedaempft, nicht reinweiss. */ --auf-rot: rgba(255, 255, 255, 0.78); /* --- Sonstiges -------------------------------------------- */ --fokus: 0 0 0 3px rgba(195, 11, 12, .22); --uebergang: 180ms ease; /* --- Aliasse fuer die alten englischen Namen --------------- site.css/login.css/kopfzeile.css benutzen an vielen Stellen var(--brand), var(--surface) usw. Statt hunderte Fundstellen umzubenennen, zeigen die alten Namen hier auf die neuen - ein Wert, zwei Schreibweisen. Fuer NEUEN Code die deutschen Namen benutzen; die Aliasse sind nur der Uebergang. */ --brand: var(--rot); --brand-dark: var(--rot-dunkel); --brand-light: var(--rot-dunkel); --bg-top: var(--flaeche); --bg-bottom: var(--flaeche); --surface: var(--karte); --surface-solid: var(--karte); --surface-soft: var(--einlage); --border: var(--rand); --border-strong: var(--rand-stark); --text-soft: var(--text-mittel); --text-faint: var(--text-grau); --shadow-sm: var(--schatten-klein); --shadow-md: var(--schatten); --shadow-lg: var(--schatten-gross); --radius-sm: var(--radius-s); --radius-md: var(--radius); --radius-lg: var(--radius-l); --transition: var(--uebergang); } /* ============================================================ Dunkles Farbschema - app.js setzt data-thema="dunkel" auf . Nur die Werte, die sich aendern; Radien/Breiten/Abstaende und die Aliasse gelten unveraendert weiter. ============================================================ */ :root[data-thema="dunkel"] { --rot-hell: #3a1617; --rot-rand: #5a2222; --flaeche: #131316; --karte: #1e1e23; --rand: #2b2b32; --rand-stark: #383840; --rand-zart: #26262c; --eingabe: #26262c; --hover: #2a2a31; --einlage: #2e2e35; --tabellen-kopf: #232329; --zeile-hover: #29242a; --text: #e8e8ec; --text-mittel: #b8b8c1; --text-grau: #8f8f99; --text-blass: #5b5b64; --gruen-hell: #16241b; --gruen-rand: #245c39; --gruen-flaeche: #1c3627; --warn-hell: #2e2412; --warn-rand: #5c4a1e; --info-hell: #12262e; --info-rand: #1f4a58; --schatten-klein: 0 1px 2px rgba(0, 0, 0, .3); --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3); --schatten-gross: 0 12px 30px rgba(0, 0, 0, .45); }