/* * ================================================================ * farben.css – Zentrale Farbdefinitionen * Familie Vögele | Grav CMS Theme * * Einbinden in base.html.twig: * * * Verwendung in Templates: * color: var(--color-text-primary); * background: var(--color-nav-bg); * * Struktur: * 1. Globale Basis-Farben (Nav, Text, Hintergrund, Border) * 2. Dark-Mode Overrides * 3. Gold-Palette (Primärfarbe der Seite) * 4. Home-Farbthemen (data-color-theme auf ) * 5. Semantische Aliase (sprechende Namen für häufige Muster) * ================================================================ */ /* ================================================================ 1. GLOBALE BASIS-FARBEN (Light Mode) ================================================================ */ :root { /* --- Navigation --- */ --color-nav-bg: #1a1a1a; --color-nav-bg-transparent: rgba(20,20,20,0.93); --color-nav-link: #ffffff; --color-nav-link-hover: rgba(255,255,255,0.75); --color-nav-border: rgba(255,255,255,0.12); /* --- Seiten-Hintergrund --- */ --color-page-bg: #ffffff; --color-page-bg-warm: #f5efe6; /* warmer Seitenhintergrund, Kacheln/Split */ --color-page-bg-neutral: #f0f0ee; /* neutraler Seitenhintergrund */ --color-page-bg-section: #f8f4ef; /* Sections, highlighted-Partial */ /* --- Text --- */ --color-text-primary: #222222; --color-text-primary-warm: #2a1f0e; /* Warmton, auf goldenem Hintergrund */ --color-text-secondary: #555550; --color-text-muted: #888880; --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255,255,255,0.65); /* --- Border / Trennlinien --- */ --color-border-light: #e0d8cc; --color-border-default: #cccccc; --color-border-strong: #999990; --color-border-dark: #4a3015; /* auf dunklem Hintergrund */ /* --- Overlays & Modals --- */ --color-overlay-light: rgba(60,30,0,0.12); --color-overlay-medium: rgba(60,30,0,0.28); --color-overlay-dark: rgba(0,0,0,0.55); --color-modal-bg: rgba(0,0,0,0.92); --color-modal-border: rgba(255,255,255,0.15); /* --- Lightbox / Galerie --- */ --color-lightbox-bg: rgba(0,0,0,0.92); --color-lightbox-controls: rgba(255,255,255,0.85); --color-lightbox-thumb-active: rgba(255,255,255,0.9); /* --- Schatten --- */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.15); --shadow-md: 0 6px 18px rgba(0,0,0,0.22); --shadow-lg: 0 10px 30px rgba(0,0,0,0.30); --shadow-avatar: 0 6px 18px rgba(0,0,0,0.25); /* --- Abstände (Breakout-Helper) --- */ /* Für den 100vw-Breakout-Trick aus home.html.twig */ --breakout-left: -50vw; --breakout-right: -50vw; } /* ================================================================ 2. DARK MODE OVERRIDES Grav setzt .dark auf oder ================================================================ */ body.dark, html.dark { /* --- Seiten-Hintergrund --- */ --color-page-bg: #121212; --color-page-bg-warm: #2a1f0e; --color-page-bg-neutral: #1a1a18; --color-page-bg-section: #1e1a14; /* --- Text --- */ --color-text-primary: #e8e0d0; --color-text-primary-warm: #e8dcc8; --color-text-secondary: #aaa090; --color-text-muted: #6a6050; /* --- Border --- */ --color-border-light: #3a3028; --color-border-default: #4a4038; --color-border-strong: #6a5a48; /* --- Overlays --- */ --color-overlay-light: rgba(0,0,0,0.35); --color-overlay-medium: rgba(0,0,0,0.55); /* --- Schatten (dunkler Modus braucht stärkere Schatten) --- */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow-md: 0 6px 18px rgba(0,0,0,0.55); --shadow-lg: 0 10px 30px rgba(0,0,0,0.65); } /* ================================================================ 3. GOLD-PALETTE Primärfarbe der Seite – verwendet in Buttons, Akzenten, Timeline-Punkten, Borders, Avatar-Ring usw. ================================================================ */ :root { --gold-50: #fdf5e8; /* sehr heller Goldton, Hoverstate */ --gold-100: #f5e4c0; --gold-200: #e8c878; --gold-400: #c8922a; /* Hauptfarbe Button-Gradient oben */ --gold-500: #b8863b; /* Hauptfarbe Button-Gradient unten */ --gold-600: #9a6810; /* Hover, Akzent */ --gold-700: #8B5E2A; /* Border */ --gold-800: #7a4e08; /* Dunkelster Akzent */ --gold-900: #4a3015; /* Dark-Mode Hintergrund */ /* Dark-Mode Gold-Töne (aufgehellt für Lesbarkeit) */ --gold-dark-400: #6f4c22; --gold-dark-500: #4a3015; --gold-dark-600: #876033; --gold-dark-border: #8a6438; } /* ================================================================ 4. HOME-FARBTHEMEN Gesetzt als data-color-theme="..." auf . Werden von home.html.twig und allen Komponenten genutzt, die var(--theme-*) verwenden. ================================================================ */ /* Gold (Standard – entspricht :root oben) */ :root, body[data-color-theme="gold"] { --theme-primary: #c8922a; --theme-primary-end: #9a6810; --theme-border: #7a4e08; --theme-overlay: rgba(80,45,0,0.32); --theme-split-bg: #f5efe6; --theme-split-accent: #e8d5b0; --theme-split-stripe: #c8922a; --theme-kacheln-bg: #f5efe6; --theme-kacheln-head: #7a4e08; --theme-dark-bg: #2a1f0e; --theme-dark-split: #1e1508; --theme-dark-accent: #6f4c22; --theme-dark-stripe: #b8863b; --theme-dark-border: #8a6438; } body[data-color-theme="blau"] { --theme-primary: #2a72c8; --theme-primary-end: #1050a0; --theme-border: #0a3878; --theme-overlay: rgba(0,30,90,0.32); --theme-split-bg: #e8f0fa; --theme-split-accent: #b5cef4; --theme-split-stripe: #2a72c8; --theme-kacheln-bg: #e8f0fa; --theme-kacheln-head: #0a3878; --theme-dark-bg: #0a1428; --theme-dark-split: #060e1c; --theme-dark-accent: #1a4a8a; --theme-dark-stripe: #4a92e8; --theme-dark-border: #3a6ab8; } body[data-color-theme="gruen"] { --theme-primary: #2a8a2a; --theme-primary-end: #186018; --theme-border: #0a4a0a; --theme-overlay: rgba(0,50,0,0.30); --theme-split-bg: #e8f5e8; --theme-split-accent: #b0ddb0; --theme-split-stripe: #2a8a2a; --theme-kacheln-bg: #e8f5e8; --theme-kacheln-head: #0a4a0a; --theme-dark-bg: #0a1e0a; --theme-dark-split: #061406; --theme-dark-accent: #1a5a1a; --theme-dark-stripe: #4ab84a; --theme-dark-border: #3a8a3a; } body[data-color-theme="terra"] { --theme-primary: #c04818; --theme-primary-end: #8a2a08; --theme-border: #6a1a02; --theme-overlay: rgba(90,20,0,0.32); --theme-split-bg: #f7eeea; --theme-split-accent: #f0c8b0; --theme-split-stripe: #c04818; --theme-kacheln-bg: #f7eeea; --theme-kacheln-head: #6a1a02; --theme-dark-bg: #280a04; --theme-dark-split: #1c0602; --theme-dark-accent: #7a2a10; --theme-dark-stripe: #e06838; --theme-dark-border: #a84828; } body[data-color-theme="lila"] { --theme-primary: #7030c0; --theme-primary-end: #4a1090; --theme-border: #340870; --theme-overlay: rgba(40,0,90,0.32); --theme-split-bg: #f0eaf8; --theme-split-accent: #d0b8f0; --theme-split-stripe: #7030c0; --theme-kacheln-bg: #f0eaf8; --theme-kacheln-head: #340870; --theme-dark-bg: #180828; --theme-dark-split: #10041c; --theme-dark-accent: #4a1880; --theme-dark-stripe: #9050d8; --theme-dark-border: #6838b0; } body[data-color-theme="grau"] { --theme-primary: #505050; --theme-primary-end: #303030; --theme-border: #181818; --theme-overlay: rgba(0,0,0,0.38); --theme-split-bg: #f0f0ee; --theme-split-accent: #d0d0cc; --theme-split-stripe: #505050; --theme-kacheln-bg: #f0f0ee; --theme-kacheln-head: #181818; --theme-dark-bg: #141414; --theme-dark-split: #0c0c0c; --theme-dark-accent: #383838; --theme-dark-stripe: #787878; --theme-dark-border: #585858; } /* ================================================================ 5. SEMANTISCHE ALIASE Sprechende Abkürzungen für häufig verwendete Kombinationen. In Templates direkt als var(--btn-primary-bg) usw. nutzbar. ================================================================ */ :root { /* --- Primär-Button (gold, überall gleich) --- */ --btn-primary-bg: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-500) 100%); --btn-primary-border: var(--gold-700); --btn-primary-color: #ffffff; --btn-primary-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3); /* --- Avatar / floating icons --- */ --avatar-border: #ffffff; --avatar-shadow: var(--shadow-avatar); /* --- Floating Menüs (Avatar-Dropdown, Layout-Panel) --- */ --menu-bg: rgba(20,20,20,0.93); --menu-color: #ffffff; --menu-border-radius: 12px; --menu-shadow: 0 10px 25px rgba(0,0,0,0.30); --menu-item-hover: rgba(255,255,255,0.10); --menu-divider: rgba(255,255,255,0.20); /* --- Karten / Leaflet Marker --- */ --color-marker-primary: #e05a2b; /* Terra-Orange, Reisekarte */ --color-marker-highlight: #c8922a; /* Gold, ausgewählter Marker */ /* --- Timeline --- */ --color-timeline-dot: var(--gold-400); --color-timeline-line: var(--gold-200); --color-timeline-dot-dark: var(--gold-dark-600); } /* ================================================================ VERWENDUNGSBEISPIELE (als Kommentar, nicht aktiv) In home.html.twig