/** * TEAM BOCHUM – Theme (zentrale Farbkonstanten) * * EINZIGE STELLE MIT FARBWERTEN: der Block "PALETTE" unten. Alles andere (diese Datei, alle anderen * Stylesheets, Skripte, Seitenrahmen, Manifest, Wartungsseite) verweist nur auf Variablen. * Eine Farbe ändern = eine Zeile in der Palette ändern. Ein Test (tests/ThemeTest.php) prüft das dauerhaft. * * Aufbau: * 1. PALETTE rohe Farbwerte, jeder Wert genau einmal * 2. Rollen (hell) --color-*, --bg-*, --text-* verweisen auf die Palette, hell ist der Standard * 3. Rollen (dunkel) [data-theme="dark"] überschreibt nur Rollen, nie Werte * 4. Weitere Tokens Abstände, Typografie, Radien (keine Farben) * 5. Markentöne Primär- und Akzentfarbe: ein Grundwert, je Theme eine Helligkeitsverschiebung * * Basis: Schwarz und Weiß (wie die Teamkleidung), dazu Petrol als Primärfarbe und Mint als Akzent. Beide sind neutral benannt; * Gesamt- und Inhaltsadmin sowie die Kalenderfarben primary/accent leiten sich davon ab, es gibt keine feste Bindung an einen Farbton. * Abgeleitete Töne (Schatten, Linien, Verläufe) entstehen mit color-mix() aus Rollenfarben, nicht aus eigenen Werten. * * Außerhalb von CSS lesen diese Datei: PHP (Core/Theme.php: Meta-Farbe, Manifest), JavaScript (getComputedStyle) * und tools/make-icons.ps1 (App-Icons). Die Icons sind Bilder und müssen nach einer Änderung von --palette-black * neu erzeugt werden. */ /* ================================================================ 1. PALETTE */ :root { /* Dunkle Töne */ --palette-black: #04090f; --palette-ink: #050b12; --palette-ink-2: #0a1520; --palette-ink-3: #0f1c2a; --palette-pure-black: #000000; /* Helle Töne */ --palette-white: #f5f7f8; --palette-paper: #f3f6f7; --palette-paper-2: #e7edf0; --palette-pure-white: #ffffff; /* Text auf Hell und Dunkel */ --palette-text: #06121c; --palette-slate: #4a5d6b; --palette-mist: #9db0bd; --palette-ice: #eef3f6; --palette-fog: #c9d6de; --palette-fog-light: #dbe6ec; /* Markenfarben: je EIN Grundwert. Hell und Dunkel verschieben nur die Helligkeit (OKLCH, Prozentpunkte, + heller, - dunkler), 0 = Grundwert unverändert. Die Töne entstehen in Abschnitt 5, im Theme-Editor einstellbar. */ --palette-primary: #008080; /* Petrol: Aktionen (Knöpfe), Hervorhebungen */ --primary-shift-light: 0; --primary-shift-dark: 7; --primary-step: 8; /* Abstand der Varianten -light (Hover, Linien) und -dark (gedrückt) */ --palette-accent: #b4e0dc; /* Mint: Dekoration und Linien, in beiden Themes der Grundwert */ --accent-shift-light: -40; /* Akzent als Textfarbe (--color-accent-text) */ --accent-shift-dark: -25; /* Signalfarben */ --palette-green: #00c853; --palette-amber: #ffb300; --palette-red: #ef5350; /* Zusatzfarben für die Kader im Terminkalender (Primär, Akzent, Amber und Grün stehen oben) */ --palette-violet: #8f6bff; --palette-orange: #ff7a30; /* Diagramme: kräftiges Cyan (das Marken-Cyan ist für Flächen in Diagrammen zu blass) */ --palette-chart-cyan: #0e9fbf; /* Medaillen der Erfolge-Leiste im Beitrag */ --palette-gold: #e8b931; --palette-silver: #b8c2cc; --palette-bronze: #c27c4a; } /* ================================================================ 2. ROLLEN (hell, Standard) */ :root, [data-theme="light"] { /* auch für helle Ausschnitte in dunkler Seite (z. B. Vorschau hell/dunkel) */ /* Browser-eigene Teile (Scrollbars, Formularelemente) folgen dem gewählten Theme, nicht der Systemeinstellung */ color-scheme: light; /* Markenfarben */ --color-black: var(--palette-black); --color-white: var(--palette-white); /* Tönung der Dialoge (Farblinie, Schimmer); die Varianten setzen sie auf Erfolg, Warnung oder Fehler */ --dialog-tone: var(--color-primary); --tone: var(--color-primary); --select-icon: var(--text-secondary); /* Pfeil der Auswahllisten */ /* Medaillen (Erfolge-Leiste im Beitrag), in beiden Modi gleich */ --medal-gold: var(--palette-gold); --medal-silver: var(--palette-silver); --medal-bronze: var(--palette-bronze); --medal-tone: var(--medal-gold); /* Farbe einer Erfolge-Karte, gesetzt über .tb-podium__card--1 bis --3 */ --squad-tone: var(--color-primary); /* Farbe des Kaders in seinem Reiter (Linie oben, Kartenrand), gesetzt über .tb-squadtone-- */ /* Diagramme: Reihe 1 Markenfarbe, Reihe 2 Diagramm-Cyan (geprüft auf Farbsehschwäche, hell und dunkel) */ --chart-1: var(--color-primary); --chart-2: var(--palette-chart-cyan); --chart-grid: color-mix(in srgb, var(--text-primary) 12%, transparent); /* Rollenfarben im Verwaltungsbereich (Punkte an Kacheln und Legende), Schlüssel wie in Core\Auth\Authorizer */ --color-role-full-admin: var(--color-primary); --color-role-content-admin: var(--color-accent-text); --color-role-news-admin: var(--palette-orange); /* kräftig, in hell und dunkel sichtbar */ --color-role-calendar-admin: var(--palette-amber); --color-role-user-trainer-admin: var(--palette-green); --color-role-user-squad-admin: var(--palette-violet); --color-role-athlete: var(--palette-mist); /* Kalenderfarben der Kader (Terminkalender, Trainingsplanung), Auswahl je Kader in der Verwaltung (SquadAdminStore::COLORS) */ --color-squad-primary: var(--color-primary); --color-squad-accent: var(--color-accent-text); --color-squad-amber: var(--palette-amber); --color-squad-green: var(--palette-green); --color-squad-violet: var(--palette-violet); --color-squad-orange: var(--palette-orange); /* Primär- und Akzentfarbe: hier der Grundwert als Rückfall, die verschobenen Töne setzt Abschnitt 5 */ --primary-shift: var(--primary-shift-light); --accent-shift: var(--accent-shift-light); --color-primary: var(--palette-primary); --color-primary-light: var(--palette-primary); --color-primary-dark: var(--palette-primary); --color-on-primary: var(--palette-pure-white); --color-accent: var(--palette-accent); --color-accent-text: var(--palette-accent); --color-on-accent: var(--palette-text); /* Schrift auf Flächen in der Akzentfarbe (hell, in beiden Themes) */ /* Signalfarben */ --color-success: var(--palette-green); --color-warning: var(--palette-amber); --color-error: var(--palette-red); --color-info: var(--color-accent-text); --tint-warning: color-mix(in srgb, var(--color-warning) 14%, transparent); /* Hinweisfläche; dunkel neutral, sonst braun */ /* QR-Codes brauchen immer schwarz auf weiß, unabhängig vom Theme */ --color-qr-fg: var(--palette-pure-black); --color-qr-bg: var(--palette-pure-white); /* Oberflächen und Text */ --bg-primary: var(--palette-paper); --bg-secondary: var(--palette-paper-2); --bg-card: var(--palette-pure-white); --text-primary: var(--palette-text); --text-secondary: var(--palette-slate); --text-inverse: var(--palette-white); --border-color: color-mix(in srgb, var(--palette-text) 16%, transparent); /* Scrollbars: schmal, Schiene unsichtbar, Griff zurückhaltend, beim Überfahren kräftiger */ --scrollbar-thumb: color-mix(in srgb, var(--palette-text) 22%, transparent); --scrollbar-thumb-hover: color-mix(in srgb, var(--palette-text) 42%, transparent); /* Auf dunklen Flächen (Kopfzeile, Hero, Fußzeile, Toasts): in beiden Themes gleich */ --on-dark: var(--palette-white); --on-dark-muted: var(--palette-fog); --on-dark-lead: var(--palette-fog-light); --on-dark-line: color-mix(in srgb, var(--on-dark) 10%, transparent); --on-dark-line-strong: color-mix(in srgb, var(--on-dark) 30%, transparent); --on-dark-hover: color-mix(in srgb, var(--on-dark) 8%, transparent); /* Abdunklung über Fotos (Hero), Hintergrund hinter Dialogen */ --scrim-wide-start: color-mix(in srgb, var(--color-black) 35%, transparent); --scrim-wide-mid: color-mix(in srgb, var(--color-black) 5%, transparent); --scrim-wide-end: color-mix(in srgb, var(--color-black) 90%, transparent); --scrim-narrow-start: color-mix(in srgb, var(--color-black) 20%, transparent); --scrim-narrow-mid: color-mix(in srgb, var(--color-black) 55%, transparent); --scrim-narrow-end: color-mix(in srgb, var(--color-black) 92%, transparent); --backdrop: color-mix(in srgb, var(--palette-pure-black) 55%, transparent); /* Effekte */ --shadow-sm: 0 1px 3px color-mix(in srgb, var(--palette-text) 8%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--palette-text) 12%, transparent); --glow-primary: 0 0 20px color-mix(in srgb, var(--color-primary) 35%, transparent); --gradient-primary: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-accent) 100%); /* ============================================================ 4. WEITERE TOKENS (keine Farben) */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Abstand zwischen Kopfzeile und Seiteninhalt: auf allen Seiten gleich (öffentlich und Verwaltungsbereich), auf großen Bildschirmen etwas mehr */ --space-page-top: 1.75rem; --wk-cols: 6; /* Spalten des Wochenplans der Trainingsplanung (Zahl der Kader), setzt admin/training-week.js */ --ptr-top: 0px; /* Zum Aktualisieren ziehen: Unterkante des Kopfs, Zugweg und Füllstand (0 bis 1), setzt ui/pull-refresh.js */ --ptr-pull: 0px; --ptr-fill: 0; --font-family-base: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-family-heading: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-full: 9999px; --transition-base: 200ms ease-out; --touch-target-min: 48px; } /* ================================================================ 3. ROLLEN (dunkel) */ [data-theme="dark"] { color-scheme: dark; --scrollbar-thumb: color-mix(in srgb, var(--palette-white) 20%, transparent); --scrollbar-thumb-hover: color-mix(in srgb, var(--palette-white) 38%, transparent); --primary-shift: var(--primary-shift-dark); --accent-shift: var(--accent-shift-dark); --bg-primary: var(--palette-ink); --bg-secondary: var(--palette-ink-2); --bg-card: var(--palette-ink-3); --text-primary: var(--palette-ice); --text-secondary: var(--palette-mist); --text-inverse: var(--palette-black); --border-color: color-mix(in srgb, var(--palette-white) 14%, transparent); --tint-warning: color-mix(in srgb, var(--palette-white) 7%, transparent); /* Warnton über Tinte wirkt braun: neutrale Fläche, Warnfarbe nur als Linie */ --shadow-sm: 0 1px 3px color-mix(in srgb, var(--palette-pure-black) 30%, transparent); --shadow-md: 0 4px 12px color-mix(in srgb, var(--palette-pure-black) 40%, transparent); --glow-primary: 0 0 25px color-mix(in srgb, var(--color-primary) 40%, transparent); } /* ================================================================ 5. ABGELEITETE MARKENTÖNE */ /* Grundwert + Verschiebung des aktiven Themes (--primary-shift, --accent-shift aus Abschnitt 2 und 3), in OKLCH, damit gleiche Zahlen bei jedem Farbton gleich stark wirken. Browser ohne diese Syntax behalten die Grundwerte. */ @supports (color: oklch(from red l c h)) { :root { --color-primary: oklch(from var(--palette-primary) calc(l + var(--primary-shift) / 100) c h); --color-primary-light: oklch(from var(--palette-primary) calc(l + (var(--primary-shift) + var(--primary-step)) / 100) c h); --color-primary-dark: oklch(from var(--palette-primary) calc(l + (var(--primary-shift) - var(--primary-step)) / 100) c h); --color-accent-text: oklch(from var(--palette-accent) calc(l + var(--accent-shift) / 100) c h); } }