/* ============================================================ SwissKaraoke – Theme-System "Dark Stage" ------------------------------------------------------------ Standard-Theme ist DUNKEL. Die helle Variante wird über aktiviert (Toggle in der Navbar, Logik in assets/js/theme.js, gespeichert in localStorage). Aufbau: 1. Design-Tokens dunkel → :root 2. Design-Tokens hell → :root[data-theme="light"] 3. Bootstrap-Anbindung → :root (Token-basiert) 4. Legacy-Variablen-Mapping → :root (Token-basiert) Bestehende Styles nutzen weiter die Legacy-Namen; diese zeigen auf die Theme-Tokens und wechseln dadurch automatisch mit. ============================================================ */ :root { color-scheme: dark; /* Flaechen */ --surface-0: #141019; --surface-1: #1d1727; --surface-2: #272036; --card-surface: #231c30; --line: hsla(264 40% 80% / 0.14); /* Sektions-Baender (Hintergruende im Wechsel) */ --band-a: #211a2e; --band-b: #1d1727; --band-highlight: #241b36; /* Text */ --text-strong: #f7f5fb; --text-default: #e7e3f0; --text-muted: #a9a0c0; --heading: #d8c4f0; /* Akzent (CTA) */ --accent: #d4537e; --accent-hover: #e36b93; --accent-contrast: #ffffff; /* Aktive Menuepunkte: im Dark Mode heller als der Akzent */ --menu-active: #ef8fb1; /* Glas / Overlays */ --glass-bg: hsla(258 22% 10% / 0.72); --glass-line: hsla(0 0% 100% / 0.08); --hero-overlay: linear-gradient(to bottom, hsla(258 22% 8% / 0.30), hsla(258 22% 8% / 0.82)); --transparent-overlay: hsla(258 22% 10% / 0.80); /* Kreisrunde helle Unterlage fuer Illustrationen (PNGs mit dunklen Konturen, die fuer hellen Hintergrund gezeichnet wurden) */ --figure-bg: #f3eef9; --figure-size: clamp(160px, 25vw, 240px); /* Bootstrap RGB-Tripel (fuer .bg-body & Co.) */ --bs-body-bg-rgb: 20, 16, 25; --bs-body-color-rgb: 231, 227, 240; --bs-emphasis-color-rgb: 247, 245, 251; } :root[data-theme="light"] { color-scheme: light; --surface-0: #fbfafd; --surface-1: #f2eef8; --surface-2: #ffffff; --card-surface: #ffffff; --line: hsla(270 30% 25% / 0.14); --band-a: #efe9f6; --band-b: #f4f0f9; --band-highlight: #ece4f7; --text-strong: #231a31; --text-default: #322847; --text-muted: #645a78; --heading: #660066; --accent: #c13d6e; --accent-hover: #a93360; --accent-contrast: #ffffff; /* Im hellen Theme bleibt der Akzent fuer aktive Menuepunkte */ --menu-active: var(--accent); --glass-bg: hsla(0 0% 100% / 0.78); --glass-line: hsla(270 25% 30% / 0.12); --hero-overlay: linear-gradient(to bottom, hsla(258 22% 8% / 0.35), hsla(258 22% 8% / 0.72)); --transparent-overlay: hsla(0 0% 100% / 0.80); /* Im hellen Theme leicht abgesetzter Violett-Ton, damit die Kreisform erkennbar bleibt */ --figure-bg: #e9dff5; --bs-body-bg-rgb: 251, 250, 253; --bs-body-color-rgb: 50, 40, 71; --bs-emphasis-color-rgb: 35, 26, 49; } /* ------------------------------------------------------------ Bootstrap-Anbindung (Token-basiert, gilt fuer beide Themes) ------------------------------------------------------------ */ :root { --bs-body-bg: var(--surface-0); --bs-body-color: var(--text-default); --bs-emphasis-color: var(--text-strong); --bs-secondary-color: var(--text-muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-color: var(--text-muted); --bs-tertiary-bg: var(--surface-1); --bs-border-color: var(--line); --bs-heading-color: var(--text-strong); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover); } /* ------------------------------------------------------------ Masse und Legacy-Variablen (Mapping auf Theme-Tokens) ------------------------------------------------------------ */ :root { /* Masse */ --body-container-max-width: 1200px; --content-max-width: 1140px; --navigationContainer-min-height: 80px; --navigationContainer-Cookie-Consent-min-height: 160px; --navbar-font-size: 1.25rem; --border-radius-default: 14px; --default-text-rotate: 0deg; /* Schraegstellung im neuen Design deaktiviert */ --spike-width: 70px; --spike-height: 15px; --menu-link-underline-padding: 0; /* Legacy-Farbnamen */ --clr-light: var(--surface-2); --clr-pink: var(--band-b); --clr-light-pink: var(--accent); --clr-yellow: var(--band-a); --clr-dark: var(--text-muted); --clr-black: var(--text-default); --clr-white: #ffffff; --clr-violet: var(--heading); --clr-light-blue: var(--band-highlight); --clr-light-border: var(--band-a); --clr-yellow-border: var(--line); --clr-dark-border: var(--line); --clr-cultureselector-text: var(--text-strong); /* Layout-Flaechen */ --bg-all-content: var(--surface-0); --bg-body-container: var(--surface-1); --navigationContainer-bg: var(--glass-bg); --navigationContainer-bg-animation: hsla(0 0% 100% / 0.05); --bg-ribbon: var(--accent); --spike-color: var(--surface-0); --body-bg: var(--surface-0); --body-text: var(--text-default); /* Navigation */ --menu-link-color-default: var(--text-default); --menu-link-color-underline: var(--accent); --link-color-active: var(--menu-active); --toggle-icon-color: var(--text-muted); --logo-img-bg: #ffffff; /* Sektionen */ --sidemenu-bg: var(--text-default); --sidemenu-text: var(--surface-1); --section-bg: var(--surface-1); --section-text: var(--text-default); --section-headlinetext: var(--heading); --section-infotext: var(--text-muted); --section-contentborder: var(--surface-1); --section-button-text: var(--accent-contrast); /* Karten */ --card-bg: var(--card-surface); --card-bg-hover: var(--surface-2); --card-headlinetext: var(--heading); --card-headlinetext-hover: var(--heading); --card-infotext: var(--text-default); --card-infotext-hover: var(--text-default); /* Buttons (Legacy) */ --btn-bg: var(--accent); --btn-text: var(--accent-contrast); --clr-btn-text: var(--accent-contrast); --clr-btn-bg: var(--accent); --clr-btn-text-hover: var(--accent-contrast); --clr-btn-bg-hover: var(--accent-hover); } /* ------------------------------------------------------------ Theme-Toggle: im Dark-Mode Sonne anzeigen (= Wechselziel), im Light-Mode Mond. ------------------------------------------------------------ */ #theme-toggle-button .theme-icon-moon { display: none; } :root[data-theme="light"] #theme-toggle-button .theme-icon-moon { display: inline-block; } :root[data-theme="light"] #theme-toggle-button .theme-icon-sun { display: none; } /* ------------------------------------------------------------ Basiselemente ------------------------------------------------------------ */ figure { border-radius: var(--border-radius-default); padding: 0px; margin: auto; } figcaption { border-radius: var(--border-radius-default); color: var(--text-muted); font-style: italic; font-size: calc(0.8rem + 2px); padding: 2px; text-align: center; }