/* ============================================ CFO Dashboard — Tema (lyst og moerkt) Alle farver bor her. Resten af CSS'en bruger kun var(--...). Moerkt er standard. Lyst slaar til naar . ============================================ */ /* ============================================ Farverne registreres som rigtige farve-variabler. Uden det her bliver tekst og kanter haengende i den gamle farve, naar man skifter tema paa et element der har en CSS-overgang (fejl i Chrome, set paa version 152). Browsere der ikke kender @property springer blokken over. ============================================ */ @property --abyss { syntax: ''; inherits: true; initial-value: #091324; } @property --navy { syntax: ''; inherits: true; initial-value: #0E1A2B; } @property --ledger { syntax: ''; inherits: true; initial-value: #1C2A40; } @property --line { syntax: ''; inherits: true; initial-value: #1C2A40; } @property --vellum { syntax: ''; inherits: true; initial-value: #F4F1EA; } @property --brass { syntax: ''; inherits: true; initial-value: #E6C887; } @property --on-brass { syntax: ''; inherits: true; initial-value: #091324; } @property --signal-pos { syntax: ''; inherits: true; initial-value: #7FB89A; } @property --signal-neg { syntax: ''; inherits: true; initial-value: #D4756B; } @property --signal-warn { syntax: ''; inherits: true; initial-value: #C9A961; } @property --pos { syntax: ''; inherits: true; initial-value: #7FB89A; } @property --neg { syntax: ''; inherits: true; initial-value: #D4756B; } @property --warn { syntax: ''; inherits: true; initial-value: #C9A961; } @property --text-1 { syntax: ''; inherits: true; initial-value: #F4F1EA; } @property --text-2 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.72); } @property --text-3 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.50); } @property --text-4 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.32); } @property --border-1 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.12); } @property --border-2 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.06); } @property --chart-muted { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.14); } @property --tint-1 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.02); } @property --tint-2 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.03); } @property --tint-3 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.06); } @property --tint-4 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.08); } @property --tint-5 { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.18); } @property --pos-tint { syntax: ''; inherits: true; initial-value: rgba(127,184,154,0.10); } @property --pos-line { syntax: ''; inherits: true; initial-value: rgba(127,184,154,0.25); } @property --neg-tint { syntax: ''; inherits: true; initial-value: rgba(212,117,107,0.10); } @property --neg-fill { syntax: ''; inherits: true; initial-value: rgba(212,117,107,0.15); } @property --neg-line { syntax: ''; inherits: true; initial-value: rgba(212,117,107,0.20); } @property --warn-tint { syntax: ''; inherits: true; initial-value: rgba(201,169,97,0.10); } @property --warn-line { syntax: ''; inherits: true; initial-value: rgba(201,169,97,0.20); } @property --brass-06 { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.06); } @property --brass-08 { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.08); } @property --brass-10 { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.10); } @property --brass-20 { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.20); } @property --brass-25 { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.25); } @property --brass-30 { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.30); } @property --nav-bg { syntax: ''; inherits: true; initial-value: rgba(14,26,43,0.85); } @property --badge-ok-bg { syntax: ''; inherits: true; initial-value: rgba(127,184,154,0.16); } @property --badge-ok-fg { syntax: ''; inherits: true; initial-value: #7FB89A; } @property --badge-err-bg { syntax: ''; inherits: true; initial-value: rgba(212,117,107,0.16); } @property --badge-err-fg { syntax: ''; inherits: true; initial-value: #D4756B; } @property --badge-mute-bg { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.08); } @property --badge-mute-fg { syntax: ''; inherits: true; initial-value: rgba(244,241,234,0.50); } @property --info-tint { syntax: ''; inherits: true; initial-value: rgba(230,200,135,0.10); } @property --info-fg { syntax: ''; inherits: true; initial-value: #E6C887; } :root { /* Flader */ --abyss: #091324; /* dybeste flade: sidebar, alt-sektioner */ --navy: #0E1A2B; /* sidens baggrund */ --ledger: #1C2A40; /* kort og felter */ --line: #1C2A40; /* kantstreger der foelger kortfarven */ /* Tekst og accent */ --vellum: #F4F1EA; /* kraftig tekst, overskrifter, tal */ --brass: #E6C887; /* accentfarve */ --on-brass: #091324; /* tekst oven paa en brass- eller vellum-flade */ /* Signaler */ --signal-pos: #7FB89A; --signal-neg: #D4756B; --signal-warn:#C9A961; --pos: #7FB89A; /* samme som signal-*, brugt paa landing og login */ --neg: #D4756B; --warn: #C9A961; /* Tekstniveauer */ --text-1: #F4F1EA; --text-2: rgba(244,241,234,0.72); --text-3: rgba(244,241,234,0.50); --text-4: rgba(244,241,234,0.32); /* Kanter */ --border-1: rgba(244,241,234,0.12); --border-2: rgba(244,241,234,0.06); --chart-muted: rgba(244,241,234,0.14); /* budget-soejler i grafen */ /* Gennemsigtige lag: hover, striber, prikker */ --tint-1: rgba(244,241,234,0.02); --tint-2: rgba(244,241,234,0.03); --tint-3: rgba(244,241,234,0.06); --tint-4: rgba(244,241,234,0.08); --tint-5: rgba(244,241,234,0.18); /* Farvede lag til bokse og badges */ --pos-tint: rgba(127,184,154,0.10); --pos-line: rgba(127,184,154,0.25); --neg-tint: rgba(212,117,107,0.10); --neg-fill: rgba(212,117,107,0.15); --neg-line: rgba(212,117,107,0.20); --warn-tint: rgba(201,169,97,0.10); --warn-line: rgba(201,169,97,0.20); /* Brass-lag til landingssidens glimt og gradienter */ --brass-06: rgba(230,200,135,0.06); --brass-08: rgba(230,200,135,0.08); --brass-10: rgba(230,200,135,0.10); --brass-20: rgba(230,200,135,0.20); --brass-25: rgba(230,200,135,0.25); --brass-30: rgba(230,200,135,0.30); /* Skygger og den gennemsigtige topmenu */ --shadow-md: 0 12px 30px rgba(0,0,0,0.50); --shadow-lg: 0 24px 60px rgba(0,0,0,0.40); --nav-bg: rgba(14,26,43,0.85); /* Admin: badges og flash-beskeder */ --badge-ok-bg: rgba(127,184,154,0.16); --badge-ok-fg: #7FB89A; --badge-err-bg: rgba(212,117,107,0.16); --badge-err-fg: #D4756B; --badge-mute-bg: rgba(244,241,234,0.08); --badge-mute-fg: rgba(244,241,234,0.50); --info-tint: rgba(230,200,135,0.10); --info-fg: #E6C887; color-scheme: dark; } /* ============ LYST TEMA ============ */ :root[data-theme="light"] { --abyss: #EBE5D8; --navy: #F5F1E8; --ledger: #FFFFFF; --line: #E2DACB; --vellum: #10203A; --brass: #7E5F1A; --on-brass: #FBF9F4; --signal-pos: #38765A; --signal-neg: #B0463A; --signal-warn:#9A6F12; --pos: #38765A; --neg: #B0463A; --warn: #9A6F12; --text-1: #14203A; --text-2: rgba(16,32,58,0.74); --text-3: rgba(16,32,58,0.56); --text-4: rgba(16,32,58,0.45); --border-1: rgba(16,32,58,0.14); --border-2: rgba(16,32,58,0.08); --chart-muted: rgba(16,32,58,0.22); --tint-1: rgba(16,32,58,0.025); --tint-2: rgba(16,32,58,0.04); --tint-3: rgba(16,32,58,0.06); --tint-4: rgba(16,32,58,0.09); --tint-5: rgba(16,32,58,0.22); --pos-tint: rgba(56,118,90,0.12); --pos-line: rgba(56,118,90,0.30); --neg-tint: rgba(176,70,58,0.10); --neg-fill: rgba(176,70,58,0.18); --neg-line: rgba(176,70,58,0.26); --warn-tint: rgba(154,111,18,0.12); --warn-line: rgba(154,111,18,0.28); --brass-06: rgba(154,120,40,0.07); --brass-08: rgba(154,120,40,0.09); --brass-10: rgba(154,120,40,0.12); --brass-20: rgba(154,120,40,0.22); --brass-25: rgba(154,120,40,0.28); --brass-30: rgba(154,120,40,0.34); --shadow-md: 0 12px 30px rgba(16,32,58,0.14); --shadow-lg: 0 24px 60px rgba(16,32,58,0.12); --nav-bg: rgba(245,241,232,0.88); --badge-ok-bg: rgba(56,118,90,0.14); --badge-ok-fg: #2C6047; --badge-err-bg: rgba(176,70,58,0.13); --badge-err-fg: #9A3A2F; --badge-mute-bg: rgba(16,32,58,0.07); --badge-mute-fg: rgba(16,32,58,0.56); --info-tint: rgba(154,120,40,0.13); --info-fg: #6E5316; color-scheme: light; } /* ============ TEMA-KNAPPEN ============ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid var(--border-1); border-radius: 6px; color: var(--text-2); cursor: pointer; font-family: inherit; transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--brass); border-color: var(--brass); } .theme-toggle i { font-size: 17px; line-height: 1; } .theme-toggle .theme-icon-light { display: none; } .theme-toggle .theme-icon-dark { display: inline-block; } :root[data-theme="light"] .theme-toggle .theme-icon-light { display: inline-block; } :root[data-theme="light"] .theme-toggle .theme-icon-dark { display: none; } /* Mens temaet skifter slaar vi ALLE overgange fra i et oejeblik. Chrome (testet paa 152) opdaterer ikke en farve der baade er under overgang og hentet med var(). Uden det her bliver fx knapperne haengende i den gamle farve. Klassen fjernes igen efter et enkelt billede, saa hover-effekter virker som foer. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }