/* ================================================================== DigitalWerk — Erscheinungsbilder (Themes). Jedes Theme ist eine Klasse auf und definiert denselben Satz an Design-Tokens (--dw-…). Die Bestands-Styles (app.css, Scoped-CSS der Layout-Komponenten) verwenden ausschließlich diese Tokens; die Bootstrap-5.3-Komponenten werden über ihre Komponenten-Variablen (--bs-…) auf die Tokens gemappt statt Klassen hart zu überschreiben. Themes: .theme-werkbank hell & ruhig (Standard, auch für anonyme Seiten) .theme-signal Baustellen-Charakter (gelber Akzent, eckig) .theme-fokus dezent & kompakt (Haarlinien statt Schatten) .theme-fokus-dunkel wie Fokus, dunkel (setzt zusätzlich data-bs-theme="dark" auf , siehe App.razor) ================================================================== */ /* ------------------------------------------------------------------ 1) Token-Definitionen pro Theme ------------------------------------------------------------------ */ .theme-werkbank { --dw-bg: #F5F6F8; --dw-card: #FFFFFF; --dw-line: #E6E8EC; --dw-ink: #23262B; --dw-muted: #6B7280; --dw-accent: #2457A6; --dw-accent-ink: #FFFFFF; --dw-accent-hover: #1D4787; --dw-sidebar: #FFFFFF; --dw-sidebar-ink: #3A3F46; --dw-topbar: #FFFFFF; --dw-radius: 11px; --dw-shadow: 0 1px 3px rgba(30, 41, 59, .08); --dw-star: #E8A413; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #166534; --dw-ok-bg: #DCF2E3; --dw-warn: #B45309; --dw-warn-bg: #FDEBD0; --dw-err: #B91C1C; --dw-err-bg: #FBDDDD; --dw-mut-bg: #EDEEF1; --dw-info: #1B4F8A; --dw-info-bg: #D7E6F7; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 12%, transparent); --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: none; /* Daten-Farben für Diagramme (farbfehlsicher: Blau/Grün/Orange klar unterscheidbar auch bei Rot-Grün-Schwäche). Diagramm-TEXT trägt immer Ink/Muted-Tokens, niemals die Serienfarben. */ --dw-viz-1: #2457A6; --dw-viz-2: #0c7a55; --dw-viz-3: #eda100; --dw-viz-track: #E6E8EC; --dw-viz-grid: #F0F1F4; /* Logo "Poststapel" — dunkle Balken für die helle Sidebar. */ --dw-logo-bar1: #1C4585; --dw-logo-bar2: #2457A6; --dw-logo-mail: #F5A800; --dw-logo-fold: #1C1E20; } .theme-signal { --dw-bg: #F3F1EC; --dw-card: #FFFFFF; --dw-line: #DCD9D2; --dw-ink: #1C1E20; --dw-muted: #63666A; --dw-accent: #F5A800; --dw-accent-ink: #1C1E20; --dw-accent-hover: #DD9700; --dw-sidebar: #24272B; --dw-sidebar-ink: #D8DADD; --dw-topbar: #FFFFFF; --dw-radius: 3px; --dw-shadow: none; --dw-star: #F5A800; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: "Bahnschrift", "Segoe UI", Arial, sans-serif; --dw-ok: #1F6B33; --dw-ok-bg: #DEEFDD; --dw-warn: #C2410C; --dw-warn-bg: #FBE3D4; --dw-err: #B02418; --dw-err-bg: #F8DBD6; --dw-mut-bg: #ECEAE4; --dw-info: #1D5C9E; --dw-info-bg: #DBE7F3; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 16%, transparent); --dw-nav-active-ink: #FFFFFF; --dw-nav-active-bar: none; /* Daten-Farben für Diagramme — siehe Kommentar im Theme "Werkbank". */ --dw-viz-1: #2457A6; --dw-viz-2: #0c7a55; --dw-viz-3: #eda100; --dw-viz-track: #DCD9D2; --dw-viz-grid: #EAE8E2; /* Logo "Poststapel" — helle Balken für die Anthrazit-Sidebar. */ --dw-logo-bar1: #4A6E9E; --dw-logo-bar2: #5B8FD6; --dw-logo-mail: #F5A800; --dw-logo-fold: #14181C; } .theme-fokus { --dw-bg: #FBFCFC; --dw-card: #FFFFFF; --dw-line: #E1E7E7; --dw-ink: #1F2A2E; --dw-muted: #647377; --dw-accent: #146B62; --dw-accent-ink: #FFFFFF; --dw-accent-hover: #0F544D; --dw-sidebar: #F4F7F7; --dw-sidebar-ink: #3C4A4E; --dw-topbar: #FBFCFC; --dw-radius: 7px; --dw-shadow: none; --dw-star: #C99014; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #14634C; --dw-ok-bg: #E0F0EA; --dw-warn: #A2560E; --dw-warn-bg: #F6E8D7; --dw-err: #A32020; --dw-err-bg: #F5DEDE; --dw-mut-bg: #EDF1F1; --dw-info: #1F5D8A; --dw-info-bg: #DEEAF2; --dw-nav-active-bg: transparent; --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: inset 3px 0 0 0 var(--dw-accent); /* Daten-Farben für Diagramme — siehe Kommentar im Theme "Werkbank". */ --dw-viz-1: #2457A6; --dw-viz-2: #0c7a55; --dw-viz-3: #eda100; --dw-viz-track: #E1E7E7; --dw-viz-grid: #EEF2F2; /* Logo "Poststapel" — dunkle Balken für die helle Sidebar. */ --dw-logo-bar1: #1C4585; --dw-logo-bar2: #2457A6; --dw-logo-mail: #F5A800; --dw-logo-fold: #1C1E20; } .theme-fokus-dunkel { --dw-bg: #111517; --dw-card: #1A2122; --dw-line: #26302F; --dw-ink: #DCE3E3; --dw-muted: #8FA0A0; --dw-accent: #2BA193; --dw-accent-ink: #0D1413; --dw-accent-hover: #35B5A6; --dw-sidebar: #161B1C; --dw-sidebar-ink: #9FB0B0; --dw-topbar: #161B1C; --dw-radius: 7px; --dw-shadow: none; --dw-star: #D8A83B; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #5FC29B; --dw-ok-bg: #173229; --dw-warn: #E3A05F; --dw-warn-bg: #38281A; --dw-err: #E37E72; --dw-err-bg: #3A211E; --dw-mut-bg: #232B2C; --dw-info: #7FB4DC; --dw-info-bg: #1C2A36; --dw-nav-active-bg: transparent; --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: inset 3px 0 0 0 var(--dw-accent); /* Daten-Farben für Diagramme — dunkle Varianten mit ausreichend Kontrast auf dunkler Kartenfläche; Diagramm-Text trägt immer Ink/Muted-Tokens. */ --dw-viz-1: #3987e5; --dw-viz-2: #12805a; --dw-viz-3: #c98500; --dw-viz-track: #26302F; --dw-viz-grid: #1F2829; /* Logo "Poststapel" — helle Balken für die dunkle Sidebar. */ --dw-logo-bar1: #4A6E9E; --dw-logo-bar2: #5B8FD6; --dw-logo-mail: #F5A800; --dw-logo-fold: #14181C; } /* ================================================================== FARBWELTEN — kräftigere Erscheinungsbilder aus abgestimmten Paaren. Welche Farbe des Paares FLÄCHE und welche AKZENT wird, folgt aus gemessenem WCAG-Kontrast, nicht aus Geschmack. Die Messwerte stehen je Theme im Kommentar (Verhältnis, Schwelle 4.5:1 für Fließtext, 3:1 für große Flächen und Bedienelemente). Zwei Dinge bleiben in ALLEN Themes gleich, mit Absicht: • Die Diagramm-Farben (--dw-viz-*). Sie sind auf Farbfehlsichtigkeit ausgelegt — das ist eine Zugänglichkeits-Eigenschaft und keine Geschmacksfrage, die pro Theme variieren dürfte. • Die Bedeutungsfarben (ok/warn/err) bleiben Grün/Orange/Rot. Eine Fehlermeldung muss überall als Fehlermeldung lesbar sein. ================================================================== */ /* Signalblau — Signal Blue #0057FF auf Porcelain #F8F7F4. Blau auf Porzellan 5,1:1 (Fließtext ✓), Weiß auf Blau 5,5:1 (Knöpfe ✓). */ .theme-signalblau { --dw-bg: #F8F7F4; --dw-card: #FFFFFF; --dw-line: #E4E2DD; --dw-ink: #1A1D24; --dw-muted: #666B75; --dw-accent: #0057FF; --dw-accent-ink: #FFFFFF; --dw-accent-hover: #0046CC; --dw-sidebar: #FFFFFF; --dw-sidebar-ink: #3A3F46; --dw-topbar: #FFFFFF; --dw-radius: 11px; --dw-shadow: 0 1px 3px rgba(15, 23, 42, .08); --dw-star: #E8A413; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #166534; --dw-ok-bg: #DCF2E3; --dw-warn: #B45309; --dw-warn-bg: #FDEBD0; --dw-err: #B91C1C; --dw-err-bg: #FBDDDD; --dw-mut-bg: #EEEDE9; --dw-info: #1B4F8A; --dw-info-bg: #D9E4FB; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 10%, transparent); --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: none; --dw-viz-1: #2457A6; --dw-viz-2: #0c7a55; --dw-viz-3: #eda100; --dw-viz-track: #E4E2DD; --dw-viz-grid: #F0EFEB; --dw-logo-bar1: #0043C4; --dw-logo-bar2: #0057FF; --dw-logo-mail: #F5A800; --dw-logo-fold: #1A1D24; } /* Champagner — Emerald Ink #064E3B auf Champagne #F8E7C9. Das kontraststärkste Paar der Sammlung: Smaragd auf Champagner 8,0:1, Weiß auf Smaragd 9,7:1. Warm und ruhig für lange Lesestrecken. */ .theme-champagner { --dw-bg: #F8E7C9; --dw-card: #FFFDF8; --dw-line: #E6D5B8; --dw-ink: #1E2A24; --dw-muted: #5F6B62; --dw-accent: #064E3B; --dw-accent-ink: #FFFFFF; --dw-accent-hover: #0A6B51; --dw-sidebar: #FFFDF8; --dw-sidebar-ink: #3A4741; --dw-topbar: #FFFDF8; --dw-radius: 9px; --dw-shadow: 0 1px 3px rgba(30, 42, 36, .07); --dw-star: #C9861A; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #14634C; --dw-ok-bg: #DEEFE6; --dw-warn: #A2560E; --dw-warn-bg: #F6E6D2; --dw-err: #A32020; --dw-err-bg: #F5DEDC; --dw-mut-bg: #F1E2C6; --dw-info: #1F5D8A; --dw-info-bg: #DEE9F2; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 10%, transparent); --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: inset 3px 0 0 0 var(--dw-accent); --dw-viz-1: #2457A6; --dw-viz-2: #0c7a55; --dw-viz-3: #eda100; --dw-viz-track: #E6D5B8; --dw-viz-grid: #F0E3CC; --dw-logo-bar1: #04382B; --dw-logo-bar2: #064E3B; --dw-logo-mail: #C9861A; --dw-logo-fold: #1E2A24; } /* Aprikose — Ultra Violet #6A00F4 mit Soft Apricot #FFD6A5. Violett auf Aprikose 5,3:1, Weiß auf Violett 7,2:1. Aprikose ist als ganzflächiger Seitenhintergrund zu satt — sie trägt deshalb die Seitenleiste, die Fläche bekommt einen hellen Aprikose-Ton. */ .theme-aprikose { --dw-bg: #FFF6EC; --dw-card: #FFFFFF; --dw-line: #F2DEC6; --dw-ink: #241A2E; --dw-muted: #6B6076; --dw-accent: #6A00F4; --dw-accent-ink: #FFFFFF; --dw-accent-hover: #5600C4; --dw-sidebar: #FFD6A5; --dw-sidebar-ink: #4A3520; --dw-topbar: #FFFFFF; --dw-radius: 14px; --dw-shadow: 0 1px 3px rgba(36, 26, 46, .08); --dw-star: #D08A00; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #166534; --dw-ok-bg: #DEF0E4; --dw-warn: #A2560E; --dw-warn-bg: #FBE7D0; --dw-err: #B02418; --dw-err-bg: #F8DEDA; --dw-mut-bg: #FBEEDF; --dw-info: #4B2C9E; --dw-info-bg: #E7DEFB; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 14%, transparent); --dw-nav-active-ink: #2E1352; --dw-nav-active-bar: none; --dw-viz-1: #2457A6; --dw-viz-2: #0c7a55; --dw-viz-3: #eda100; --dw-viz-track: #F2DEC6; --dw-viz-grid: #FAEEE0; --dw-logo-bar1: #4E00B4; --dw-logo-bar2: #6A00F4; --dw-logo-mail: #FFB65C; --dw-logo-fold: #241A2E; } /* Iris (dunkel) — Butter Yellow #FFF275 auf Royal Iris #3A0CA3. Butter auf Iris 10,3:1. Butter trägt NIEMALS weiße Schrift (1,2:1) — auf dem Akzent steht deshalb dunkle Schrift (18,2:1). Die Fläche ist ein abgedunkeltes Iris; das reine #3A0CA3 wäre über Stunden zu satt. */ .theme-iris { --dw-bg: #180A38; --dw-card: #241060; --dw-line: #3A2178; --dw-ink: #EDE9F7; --dw-muted: #A79BC8; --dw-accent: #FFF275; --dw-accent-ink: #23200A; --dw-accent-hover: #FFF9A8; --dw-sidebar: #14082F; --dw-sidebar-ink: #B9AEDA; --dw-topbar: #14082F; --dw-radius: 10px; --dw-shadow: none; --dw-star: #FFF275; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #5FC29B; --dw-ok-bg: #17322B; --dw-warn: #E3A05F; --dw-warn-bg: #382A1A; --dw-err: #E37E72; --dw-err-bg: #3A2130; --dw-mut-bg: #2E1868; --dw-info: #9FB4F0; --dw-info-bg: #221A4A; --dw-nav-active-bg: color-mix(in srgb, #3A0CA3 60%, transparent); --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: inset 3px 0 0 0 var(--dw-accent); --dw-viz-1: #3987e5; --dw-viz-2: #12805a; --dw-viz-3: #c98500; --dw-viz-track: #3A2178; --dw-viz-grid: #241060; --dw-logo-bar1: #7B5BD6; --dw-logo-bar2: #9B82E8; --dw-logo-mail: #FFF275; --dw-logo-fold: #180A38; } /* Graphit (dunkel) — Lime Spark #B6FF2E auf Graphite #23262F. Lime auf Graphit 12,5:1. Auch hier: dunkle Schrift auf dem Akzent (17,3:1), niemals weiße (1,2:1). Kleiner Radius, technischer Charakter. */ .theme-graphit { --dw-bg: #191B22; --dw-card: #23262F; --dw-line: #333744; --dw-ink: #E7E9EF; --dw-muted: #9AA0B0; --dw-accent: #B6FF2E; --dw-accent-ink: #16200A; --dw-accent-hover: #C9FF5E; --dw-sidebar: #1E212A; --dw-sidebar-ink: #A9AFC0; --dw-topbar: #1E212A; --dw-radius: 5px; --dw-shadow: none; --dw-star: #E8C33B; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: "Bahnschrift", "Segoe UI", Arial, sans-serif; --dw-ok: #7BD66A; --dw-ok-bg: #1D2A1A; --dw-warn: #E3A05F; --dw-warn-bg: #33291C; --dw-err: #E37E72; --dw-err-bg: #33211F; --dw-mut-bg: #2B2F3A; --dw-info: #7FB4DC; --dw-info-bg: #1E2833; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 16%, transparent); --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: inset 3px 0 0 0 var(--dw-accent); --dw-viz-1: #3987e5; --dw-viz-2: #12805a; --dw-viz-3: #c98500; --dw-viz-track: #333744; --dw-viz-grid: #23262F; --dw-logo-bar1: #6E7A8F; --dw-logo-bar2: #97A3B8; --dw-logo-mail: #B6FF2E; --dw-logo-fold: #191B22; } /* Drachenfrucht (dunkel) — Dragonfruit #FF4696 auf Night Violet #1E1033. Drachenfrucht auf Nachtviolett 5,6:1. ACHTUNG: Weiß auf Drachenfrucht erreicht nur 3,2:1 und reißt damit für Fließtext — auf dem Akzent steht deshalb dunkle Schrift (6,6:1). */ .theme-drachenfrucht { --dw-bg: #1E1033; --dw-card: #2A1846; --dw-line: #3D2560; --dw-ink: #EFE7F5; --dw-muted: #A797BC; --dw-accent: #FF4696; --dw-accent-ink: #2A0A19; --dw-accent-hover: #FF6BAB; --dw-sidebar: #170C28; --dw-sidebar-ink: #B9A8CC; --dw-topbar: #170C28; --dw-radius: 12px; --dw-shadow: none; --dw-star: #E8B23B; --dw-font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --dw-display-font: var(--dw-font); --dw-ok: #5FC29B; --dw-ok-bg: #16322A; --dw-warn: #E3A05F; --dw-warn-bg: #382718; --dw-err: #E8867E; --dw-err-bg: #3B1E2C; --dw-mut-bg: #33204F; --dw-info: #9FB4F0; --dw-info-bg: #23204A; --dw-nav-active-bg: color-mix(in srgb, var(--dw-accent) 18%, transparent); --dw-nav-active-ink: var(--dw-accent); --dw-nav-active-bar: inset 3px 0 0 0 var(--dw-accent); --dw-viz-1: #3987e5; --dw-viz-2: #12805a; --dw-viz-3: #c98500; --dw-viz-track: #3D2560; --dw-viz-grid: #2A1846; --dw-logo-bar1: #8A5BB8; --dw-logo-bar2: #B27AD6; --dw-logo-mail: #FF4696; --dw-logo-fold: #1E1033; } /* ------------------------------------------------------------------ 2) Bootstrap-5.3-Mapping (für alle Themes identisch — die Farben kommen aus den Tokens, die pro Theme variieren). ------------------------------------------------------------------ */ body[class*="theme-"] { --bs-body-bg: var(--dw-bg); --bs-body-color: var(--dw-ink); --bs-body-font-family: var(--dw-font); --bs-emphasis-color: var(--dw-ink); --bs-heading-color: var(--dw-ink); --bs-secondary-color: var(--dw-muted); --bs-tertiary-color: var(--dw-muted); --bs-secondary-bg: var(--dw-mut-bg); --bs-tertiary-bg: var(--dw-mut-bg); --bs-border-color: var(--dw-line); --bs-border-radius: var(--dw-radius); --bs-border-radius-sm: calc(var(--dw-radius) * 0.7); --bs-border-radius-lg: calc(var(--dw-radius) * 1.2); --bs-link-color: var(--dw-accent); --bs-link-hover-color: var(--dw-accent-hover); --bs-focus-ring-color: color-mix(in srgb, var(--dw-accent) 35%, transparent); } /* Buttons — Primär-Aktionen in der Akzentfarbe des Themes. */ body[class*="theme-"] .btn-primary { --bs-btn-color: var(--dw-accent-ink); --bs-btn-bg: var(--dw-accent); --bs-btn-border-color: var(--dw-accent); --bs-btn-hover-color: var(--dw-accent-ink); --bs-btn-hover-bg: var(--dw-accent-hover); --bs-btn-hover-border-color: var(--dw-accent-hover); --bs-btn-active-color: var(--dw-accent-ink); --bs-btn-active-bg: var(--dw-accent-hover); --bs-btn-active-border-color: var(--dw-accent-hover); --bs-btn-disabled-color: var(--dw-accent-ink); --bs-btn-disabled-bg: var(--dw-accent); --bs-btn-disabled-border-color: var(--dw-accent); --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--dw-accent) 40%, transparent); } body[class*="theme-"] .btn-outline-primary { --bs-btn-color: var(--dw-accent); --bs-btn-border-color: var(--dw-accent); --bs-btn-hover-color: var(--dw-accent-ink); --bs-btn-hover-bg: var(--dw-accent); --bs-btn-hover-border-color: var(--dw-accent); --bs-btn-active-color: var(--dw-accent-ink); --bs-btn-active-bg: var(--dw-accent); --bs-btn-active-border-color: var(--dw-accent); --bs-btn-disabled-color: var(--dw-muted); --bs-btn-disabled-border-color: var(--dw-line); --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--dw-accent) 40%, transparent); } body[class*="theme-"] .btn-outline-secondary { --bs-btn-color: var(--dw-muted); --bs-btn-border-color: var(--dw-line); --bs-btn-hover-color: var(--dw-ink); --bs-btn-hover-bg: var(--dw-mut-bg); --bs-btn-hover-border-color: var(--dw-line); --bs-btn-active-color: var(--dw-ink); --bs-btn-active-bg: var(--dw-mut-bg); --bs-btn-active-border-color: var(--dw-line); --bs-btn-disabled-color: var(--dw-muted); --bs-btn-disabled-border-color: var(--dw-line); --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--dw-accent) 25%, transparent); } /* Karten — Fläche, Linien, Radius und (nur Werkbank) weicher Schatten. */ body[class*="theme-"] .card { --bs-card-bg: var(--dw-card); --bs-card-color: var(--dw-ink); --bs-card-border-color: var(--dw-line); --bs-card-border-radius: var(--dw-radius); --bs-card-inner-border-radius: calc(var(--dw-radius) - 1px); --bs-card-cap-bg: color-mix(in srgb, var(--dw-card) 60%, var(--dw-bg)); box-shadow: var(--dw-shadow); } /* Formulare — Fläche/Linie aus den Tokens, Fokus in der Akzentfarbe. */ body[class*="theme-"] .form-control, body[class*="theme-"] .form-select { background-color: var(--dw-card); border-color: var(--dw-line); color: var(--dw-ink); } body[class*="theme-"] .form-control:focus, body[class*="theme-"] .form-select:focus { background-color: var(--dw-card); border-color: var(--dw-accent); color: var(--dw-ink); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--dw-accent) 25%, transparent); } body[class*="theme-"] .form-control::placeholder { color: color-mix(in srgb, var(--dw-muted) 80%, transparent); } body[class*="theme-"] .form-check-input:checked { background-color: var(--dw-accent); border-color: var(--dw-accent); } /* Alerts — Statusfarben des Themes (Bedeutung bleibt überall gleich). */ body[class*="theme-"] .alert-success { --bs-alert-color: var(--dw-ok); --bs-alert-bg: var(--dw-ok-bg); --bs-alert-border-color: color-mix(in srgb, var(--dw-ok) 30%, var(--dw-ok-bg)); --bs-alert-link-color: var(--dw-ok); } body[class*="theme-"] .alert-danger { --bs-alert-color: var(--dw-err); --bs-alert-bg: var(--dw-err-bg); --bs-alert-border-color: color-mix(in srgb, var(--dw-err) 30%, var(--dw-err-bg)); --bs-alert-link-color: var(--dw-err); } body[class*="theme-"] .alert-warning { --bs-alert-color: var(--dw-warn); --bs-alert-bg: var(--dw-warn-bg); --bs-alert-border-color: color-mix(in srgb, var(--dw-warn) 30%, var(--dw-warn-bg)); --bs-alert-link-color: var(--dw-warn); } /* Modale Dialoge. */ body[class*="theme-"] .modal { --bs-modal-bg: var(--dw-card); --bs-modal-color: var(--dw-ink); --bs-modal-border-color: var(--dw-line); --bs-modal-border-radius: var(--dw-radius); --bs-modal-header-border-color: var(--dw-line); --bs-modal-footer-border-color: var(--dw-line); } /* Tabellen. */ body[class*="theme-"] .table { --bs-table-color: var(--dw-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--dw-line); --bs-table-striped-color: var(--dw-ink); --bs-table-striped-bg: color-mix(in srgb, var(--dw-mut-bg) 55%, transparent); --bs-table-hover-color: var(--dw-ink); --bs-table-hover-bg: color-mix(in srgb, var(--dw-mut-bg) 80%, transparent); } /* Seitennummerierung. */ body[class*="theme-"] .pagination { --bs-pagination-color: var(--dw-accent); --bs-pagination-bg: var(--dw-card); --bs-pagination-border-color: var(--dw-line); --bs-pagination-border-radius: var(--dw-radius); --bs-pagination-hover-color: var(--dw-accent-hover); --bs-pagination-hover-bg: var(--dw-mut-bg); --bs-pagination-hover-border-color: var(--dw-line); --bs-pagination-focus-color: var(--dw-accent-hover); --bs-pagination-focus-bg: var(--dw-mut-bg); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--dw-accent) 25%, transparent); --bs-pagination-active-color: var(--dw-accent-ink); --bs-pagination-active-bg: var(--dw-accent); --bs-pagination-active-border-color: var(--dw-accent); --bs-pagination-disabled-color: var(--dw-muted); --bs-pagination-disabled-bg: var(--dw-card); --bs-pagination-disabled-border-color: var(--dw-line); } /* Fortschrittsbalken (Standard-Füllung = Akzent; bg-success/bg-warning auf den Balken selbst werden unten über die Utility-Overrides gefärbt). */ body[class*="theme-"] .progress { --bs-progress-bg: var(--dw-mut-bg); --bs-progress-bar-bg: var(--dw-accent); --bs-progress-bar-color: var(--dw-accent-ink); --bs-progress-border-radius: var(--dw-radius); } /* Semantische Utilities — damit „grün/orange/rot“ in jedem Theme aus den Status-Tokens kommt (u. a. Dashboard-Kennzahlen und Fortschrittsbalken). !important ist nötig, weil die Bootstrap-Utilities selbst !important setzen. */ body[class*="theme-"] .text-success { color: var(--dw-ok) !important; } body[class*="theme-"] .text-warning { color: var(--dw-warn) !important; } body[class*="theme-"] .text-danger { color: var(--dw-err) !important; } body[class*="theme-"] .bg-success { background-color: var(--dw-ok) !important; } body[class*="theme-"] .bg-warning { background-color: var(--dw-warn) !important; } body[class*="theme-"] .bg-danger { background-color: var(--dw-err) !important; } body[class*="theme-"] .text-bg-warning { color: var(--dw-warn) !important; background-color: var(--dw-warn-bg) !important; } /* ------------------------------------------------------------------ 3) Theme-Eigenheiten ------------------------------------------------------------------ */ /* Signal: Display-Schrift für Überschriften, Brand und Kennzahlen; Brand und Seitentitel uppercase mit Letter-Spacing. */ .theme-signal h1, .theme-signal h2, .theme-signal h3, .theme-signal .display-5, .theme-signal .fs-2 { font-family: var(--dw-display-font); } .theme-signal h1 { text-transform: uppercase; letter-spacing: 0.05em; } .theme-signal .sidebar .navbar-brand { font-family: var(--dw-display-font); text-transform: uppercase; letter-spacing: 0.08em; } /* Signal: Kennzahl-Kacheln mit kräftigem Akzentbalken oben. */ .theme-signal .dw-kpi-card { border-top: 3px solid var(--dw-accent); } /* Signal: eckige Badges (2px) — auch gegen die rounded-pill-Utility, die selbst !important setzt. */ .theme-signal .badge, .theme-signal .status-new, .theme-signal .status-classified, .theme-signal .status-filed, .theme-signal .status-review, .theme-signal .status-failed { border-radius: 2px; } .theme-signal .rounded-pill { border-radius: 2px !important; } /* Fokus (hell & dunkel): minimal kompaktere Grundschrift im Content-Bereich. */ .theme-fokus .content, .theme-fokus-dunkel .content { font-size: 0.92rem; }