/* ============================================================ AWO Intranet — Design Tokens (Single Source of Truth) ------------------------------------------------------------ Kanonische CSS-Custom-Properties für das Frontend-Design-System. Geladen NACH global.css (siehe get_gulp_sources()), damit diese Tokens die Legacy-:root-Werte gewinnen. Die Mandanten-Runtime- Injektion (get_mandant_variable) läuft weiterhin danach und überschreibt --clr-mandant/--bg-light/--br/--border pro Mandant. ADDITIV: führt neue, semantische Token-Namen ein. Bestehender Code (Alt-Namen wie --br, --ff-primary, --fs-*) bleibt unberührt. Referenz + Live-Vorschau: docs/frontend/styleguide.html ============================================================ */ :root { /* Native UI (Scrollbars, Formularelemente) folgt dem Theme. */ color-scheme: light; /* --- Brand & Aktionen --- Primär = MANDANTENFARBE aus der DB (--clr-mandant, injiziert von get_mandant_variable()); Fallback = AWO-Ennepe-Ruhr-Rot #BD2D21. Hover/Active leiten sich ab und folgen automatisch der jeweiligen Mandantenfarbe (Rot bei AWO, Blau bei aqa gGmbH …). */ --color-primary: var(--clr-mandant, #BD2D21); --color-brand: var(--color-primary); --color-primary-hover: color-mix(in srgb, var(--color-primary) 87%, #000); --color-primary-active: color-mix(in srgb, var(--color-primary) 74%, #000); --color-on-primary: #FFFFFF; /* Per-Mandant-Akzent: nutzt die Runtime-Mandantfarbe, fällt auf Brand zurück */ --color-accent: var(--clr-mandant, var(--color-primary)); /* Links: Markenrot + Unterstrich (klickbar = Unterstrich, nicht nur Farbe). Bewusst getrennt von --color-info (Blau, nur für Status-Hinweise). */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-active); /* --- AWO-Ennepe-Ruhr Sekundärfarben (aus dem Werte-Banner) --- */ --color-green: #75B835; /* Gleichheit */ --color-gold: #FABA1C; /* Akzent / Highlight */ --color-orange: #EE7001; /* Toleranz */ --color-bluegrey:#94A6B0; /* Freiheit / neutraler Akzent */ /* --- Semantisch --- Danger = FESTES Fehler-Rot, MANDANTUNABHÄNGIG (universelles Alarmsignal). Bei AWO (rotes Brand) fällt es mit Primary zusammen -> Unterscheidung über die DARSTELLUNG (Primary gefüllt, Destruktiv Outline + Icon, solide nur im Bestätigen-Dialog). Bei blau-basierten Mandanten (aqa) bleibt Danger rot. Success/Warning nutzen die AWO-Sekundärfarben. */ --color-danger: #BD2D21; --color-danger-hover: color-mix(in srgb, var(--color-danger) 87%, #000); --color-success: var(--color-green); --color-warning: var(--color-orange); --color-info: #1C7ED6; /* funktional; AWO-CD enthält kein Blau */ --color-news: #7048E8; /* News-Akzent (Lila) — eigener Feed-Inhaltstyp, außerhalb der AWO-CD */ --color-teal: #0CA678; /* Ticket/Support-Akzent (Petrol) — funktional, außerhalb der AWO-CD */ /* --- Neutrals / Flächen --- */ --color-heading: #111111; --color-text: #1A1A1A; --color-text-muted: #6B6B6B; --color-bg: #FFFFFF; --color-surface: #F6F6F7; --color-surface-2: #EDEDEF; --color-border: #E2E2E5; --color-border-strong: #CFCFD4; /* --- Typografie --- */ --font-display: "FagoNo", "PT Sans", system-ui, sans-serif; --font-body: "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --leading-tight: 1.15; --leading-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* --- Spacing (4px-Basis) --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* --- Radien --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* --- Schatten --- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.14); /* --- Alert-/Hinweis-Tönungen (theme-abhängig, siehe Dark-Block) --- Text dunkelt auf hellem Grund ab (lesbar), im Dark-Mode hellt er auf. */ --alert-info-fg: color-mix(in srgb, var(--color-info) 78%, #000); --alert-info-bg: color-mix(in srgb, var(--color-info) 12%, var(--color-bg)); --alert-info-border: color-mix(in srgb, var(--color-info) 35%, transparent); --alert-danger-fg: color-mix(in srgb, var(--color-danger) 80%, #000); --alert-danger-bg: color-mix(in srgb, var(--color-danger) 10%, var(--color-bg)); --alert-danger-border: color-mix(in srgb, var(--color-danger) 32%, transparent); --alert-success-fg: color-mix(in srgb, var(--color-success) 62%, #000); --alert-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--color-bg)); --alert-success-border: color-mix(in srgb, var(--color-success) 35%, transparent); --alert-warning-fg: color-mix(in srgb, var(--color-warning) 58%, #000); --alert-warning-bg: color-mix(in srgb, var(--color-warning) 16%, var(--color-bg)); --alert-warning-border: color-mix(in srgb, var(--color-warning) 42%, transparent); /* --- Overlay / Scrim --- Zum sauberen Abdunkeln von Hintergrundbildern, mehrere Stufen. Theme-unabhängig (dunkler Schleier wirkt in Light & Dark). */ --scrim-0: rgba(0,0,0,0); --scrim-1: rgba(0,0,0,.20); --scrim-2: rgba(0,0,0,.35); --scrim-3: rgba(0,0,0,.50); --scrim-4: rgba(0,0,0,.65); --scrim-5: rgba(0,0,0,.80); /* --- Fokus (folgt der Mandantenfarbe) --- */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); /* --- Scrollbar (dezent, theme-aware) --- Thumb folgt dem Theme, Track transparent. Ersetzt die früher fest hellen Werte (#e0e0e0/#fff bzw. --bg-light) in global.css, die im Dark-Mode als helle/weiße Leiste sichtbar blieben. */ --scrollbar-thumb: rgba(0, 0, 0, .28); } /* ============================================================ Dark — spiegelt das bestehende html[data-theme="dark"]-Schema ============================================================ */ html[data-theme="dark"] { color-scheme: dark; /* native Scrollbars/Controls dunkel */ --color-heading: #FFFFFF; --color-text: #E6E6E6; --color-text-muted: #A2A2A8; --color-bg: #1C1C1E; --color-surface: #262629; --color-surface-2: #303034; --color-border: #3A3A3F; --color-border-strong: #4B4B52; --color-news: #9775FA; /* Lila im Dark-Mode aufgehellt für Kontrast */ --color-teal: #20C997; /* Petrol im Dark-Mode aufgehellt für Kontrast */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 14px 36px rgba(0,0,0,.6); /* Alerts im Dark-Mode: heller Text, kräftigerer Grund/Rahmen */ --alert-info-fg: color-mix(in srgb, var(--color-info) 42%, #fff); --alert-info-bg: color-mix(in srgb, var(--color-info) 22%, var(--color-bg)); --alert-info-border: color-mix(in srgb, var(--color-info) 48%, transparent); --alert-danger-fg: color-mix(in srgb, var(--color-danger) 48%, #fff); --alert-danger-bg: color-mix(in srgb, var(--color-danger) 24%, var(--color-bg)); --alert-danger-border: color-mix(in srgb, var(--color-danger) 52%, transparent); --alert-success-fg: color-mix(in srgb, var(--color-success) 46%, #fff); --alert-success-bg: color-mix(in srgb, var(--color-success) 22%, var(--color-bg)); --alert-success-border: color-mix(in srgb, var(--color-success) 48%, transparent); --alert-warning-fg: color-mix(in srgb, var(--color-warning) 50%, #fff); --alert-warning-bg: color-mix(in srgb, var(--color-warning) 26%, var(--color-bg)); --alert-warning-border: color-mix(in srgb, var(--color-warning) 52%, transparent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 48%, transparent); /* Scrollbar-Thumb im Dark-Mode aufgehellt (heller Pill auf dunklem Grund) */ --scrollbar-thumb: rgba(255, 255, 255, .30); } /* ============================================================ Seiten-Hintergrundbild (theme-abhängig, dezent) ------------------------------------------------------------ Getragen vom
-Element: es füllt den Content-Bereich (min-height:100vh), während der im Float-Layout kollabiert. Das Bild liegt unter einem halbtransparenten Veil aus der Theme-Fläche -> es scheint dezent durch, Inhalt (opake Karten) bleibt lesbar; die Nav-Sidebar bleibt clean. tokens.css lädt NACH global.css, daher gewinnt diese main-Regel ohne !important — global.css bleibt unangetastet. (Spezial-Seiten wie .ticketdashboard main überschreiben bewusst weiter.) Bilder versioniert in module/intranet/assets/images/. ============================================================ */ :root { --page-bg-image: url(/module/intranet/assets/images/background-light-v2.webp); --page-bg-veil: rgba(249,249,249,.55); } html[data-theme="dark"] { --page-bg-image: url(/module/intranet/assets/images/background-dark.webp); --page-bg-veil: rgba(28,28,30,.5); } main { background: linear-gradient(var(--page-bg-veil), var(--page-bg-veil)), var(--page-bg-image) center center / cover fixed no-repeat; }