/* ============================================================================ glass-active.css — Liquid frosted-glass AKTIV-tilstand (alle 4 produkter) ---------------------------------------------------------------------------- Erstatter den flade accent-fyld ("valget er bare blåt") med et NEUTRALT, afrundet liquid-frosted-glass-lag der ligger OVENPÅ valget — som et hævet hvidt glas-pille (iOS 26 / macOS Tahoe "Liquid Glass" segment-valg). Designprincipper (research af Apples Liquid Glass / WWDC25 + HIG): - INGEN farvet tint: Apple reserverer tint til primære handlinger. Et valgt segment/fane holdes NEUTRALT — aflæses via frost + lys-kant + skygge + form. - Concentriske, afrundede hjørner (ikke firkanter). - Specular highlight + lens-edge der bryder lyset. - Glas hører til navigationslaget (faner, chips, pickers) — IKKE indholdskort. - Theme-aware: tekst flipper korrekt i light/dark på tværs af alle 4 produkter. DÆKKER (udfyldte "vælg-én"-selektorer på tværs af app/Canvas/Planner/HRM). DÆKKER IKKE bevidst: semantiske farve-tilstande (Planner grøn/rød tilgænge- lighed, amber favorit), on/off-toggles, farve-swatches, border/underline-only — der bærer farven betydning og må ikke neutraliseres. Loades SIDST (efter rude-skin.css) så !important vinder over de flade regler. Finjustér looket via tokens herunder. ============================================================================ */ :root { --ga-radius: 12px; /* afrundede hjørner på det aktive glas */ --ga-blur: 16px; /* frost-styrke (backdrop-blur) — Tahoe-agtig dybde */ --ga-fill-1: .58; /* hvid-fyld i glassets top (mest lys) */ --ga-fill-2: .34; /* hvid-fyld i glassets bund */ --ga-sheen: .62; /* top-venstre lens-highlight (Liquid Glass) */ --ga-rim: .80; /* lyse kant-rim der bryder lyset */ /* theme-robust neutral tekst: --color-text-1 flipper i app/planner/hrm, --text-1 flipper i canvas (hvor --color-text-1 er undefined). Rækkefølgen er kritisk: app-dark har et IKKE-flippende --text-1 (#0E1320), så --color-text-1 SKAL stå først. */ --ga-ink: var(--color-text-1, var(--text-1, #0E1320)); } /* ---- Den delte selektor-liste (udfyldte "vælg-én"-valg) ------------------ */ /* app/alle: sidebar-nav + periode + filter-chips + mode + lokation */ .nav-btn.active, .nav-btn[aria-current="page"], .pln-nav-btn.active, .pln-nav-btn--active, .pln-nav-btn[aria-current="page"], .pln-diff-tab--active, .hrm-nav-btn.active, .hrm-nav-btn--active, .hrm-nav-btn[aria-current="page"], .tb-period.seg button.on, .w-filter-chip.active, .w-filter-chip[aria-pressed="true"], .mode-btn.active, .phb-ptab.active, .fmlv5-chip.active, #global-loc-filter button.loc-on, /* Canvas: segmenter / view / viewport / rail / chips / folders / pickers */ .seg.active, .cv-vm-btn.is-active, .vp-btn.active, .rail-item.active, .chip.active, .folder-item.active, .alc-tab.active, .theme-tab.active, .settings-nav-item.active, .ds-tt.active, .ds-item.active, .loc-picker.is-active, .emp-picker-item.is-active, .pp-btn[aria-pressed="true"], /* Canvas: inspector + bulk pill-rækker */ .insp-section .pill-btn.active, .cc-pillrow button.active, .bulk-pillrow button.active, .ebar-overflow-menu button.is-active, /* Canvas: formel-editor faner/tags/pills */ .qm-period-btn.active, .std-tag.active, .fml-usedby.active, .ds-ftab.on, .ds-icpick.on, /* HRM: filter-chips */ .hrm-filter-chip.is-active { /* Neutralt glas (ingen farve): 1) koncentreret top-venstre lens-sheen (lyset der rammer glasset) 2) tynd diagonal højlys-stribe = den "våde" refleks 3) hvid frost-krop, lysest i toppen */ background: radial-gradient(135% 100% at 14% -10%, rgba(255,255,255,var(--ga-sheen)), rgba(255,255,255,0) 50%), linear-gradient(125deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 24%), linear-gradient(135deg, rgba(255,255,255,var(--ga-fill-1)), rgba(255,255,255,var(--ga-fill-2))) !important; /* GPU/BATTERI-FIX (review): backdrop-filter er FLYTTET til kun den store chrome nedenfor. Det er GPU-dyrt og var før på HVER aktiv chip/pille/segment — på Canvas-inspector kunne 20-30 blur-lag være aktive samtidig = selv-påført GPU-dræn. Små elementer aflæses fint via gradient + rim + skygge (frosten er alligevel knap synlig på en lille pille). */ /* Afrundede hjørner — ikke firkanter */ border-radius: var(--ga-radius) !important; /* Kanten tegnes som inset rim-lys (ingen border-bredde → intet layout-hop). 1) blød hævet skygge (glasset "svæver" — iOS-segment-pille) 2) lys lens-edge hele vejen rundt 3) skarp top-specular */ border-color: rgba(255,255,255,.65) !important; box-shadow: 0 6px 16px -8px rgba(16,24,48,.22), 0 1px 2px rgba(16,24,48,.08), inset 0 0 0 1px rgba(255,255,255,calc(var(--ga-rim) * .7)), inset 0 1px 0 rgba(255,255,255,var(--ga-rim)) !important; /* Neutral, kraftig, theme-aware tekst (ingen accent) */ color: var(--ga-ink) !important; font-weight: 700 !important; transition: background .18s ease, box-shadow .18s ease, border-color .18s ease !important; } /* ---- Ægte frost (backdrop-filter) KUN på den store, sjældne chrome ---------- Disse er 1-4 ad gangen + store nok til at frosten ses. Resten (dense Canvas- pills/chips) får IKKE backdrop-filter → ingen 20-30 samtidige GPU-blur-lag. */ .nav-btn.active, .nav-btn[aria-current="page"], .pln-nav-btn.active, .pln-nav-btn--active, .hrm-nav-btn.active, .hrm-nav-btn--active, .tb-period.seg button.on, .mode-btn.active, #global-loc-filter button.loc-on { -webkit-backdrop-filter: blur(var(--ga-blur)) saturate(180%) brightness(1.05) !important; backdrop-filter: blur(var(--ga-blur)) saturate(180%) brightness(1.05) !important; } /* ---- Ikon + label i ALLE dækkede valg er også neutrale (ingen accent) ---- Apples regel: tint kun til primære handlinger. KIRURGISK: kun DIREKTE børn (label/ikon) + kendte ikon-wrapperes SVG — så nestede farvede badges / status-dots / swatches inde i en aktiv række IKKE bliver neutraliseret (ville ellers vaske semantisk farve ud). */ :is( .nav-btn.active, .nav-btn[aria-current="page"], .pln-nav-btn.active, .pln-nav-btn--active, .hrm-nav-btn.active, .hrm-nav-btn--active, .pln-diff-tab--active, .tb-period.seg button.on, .w-filter-chip.active, .w-filter-chip[aria-pressed="true"], .mode-btn.active, .phb-ptab.active, .fmlv5-chip.active, #global-loc-filter button.loc-on, .seg.active, .cv-vm-btn.is-active, .vp-btn.active, .rail-item.active, .chip.active, .folder-item.active, .alc-tab.active, .theme-tab.active, .settings-nav-item.active, .ds-tt.active, .ds-item.active, .loc-picker.is-active, .emp-picker-item.is-active, .pp-btn[aria-pressed="true"], .insp-section .pill-btn.active, .cc-pillrow button.active, .bulk-pillrow button.active, .ebar-overflow-menu button.is-active, .wpm-fam-tabs .pill-btn.active, .qm-period-btn.active, .std-tag.active, .fml-usedby.active, .ds-ftab.on, .ds-icpick.on, .hrm-filter-chip.is-active ) > :is(.ic, svg, span, .nav-item-icon, .nav-item-label), :is( .nav-btn.active, .pln-nav-btn.active, .pln-nav-btn--active, .hrm-nav-btn.active, .hrm-nav-btn--active, .w-filter-chip.active, .mode-btn.active, .phb-ptab.active ) :is(.nav-item-icon, .ic) svg { color: var(--ga-ink) !important; fill: currentColor !important; } /* ---- Dark mode: neutralt glas = svag hvid translucens på mørk flade ------- Tekst flipper automatisk via --ga-ink (--color-text-1/--text-1). */ [data-theme="dark"] :is( .nav-btn.active, .nav-btn[aria-current="page"], .pln-nav-btn.active, .pln-nav-btn--active, .pln-nav-btn[aria-current="page"], .pln-diff-tab--active, .hrm-nav-btn.active, .hrm-nav-btn--active, .hrm-nav-btn[aria-current="page"], .tb-period.seg button.on, .w-filter-chip.active, .w-filter-chip[aria-pressed="true"], .mode-btn.active, .phb-ptab.active, .fmlv5-chip.active, #global-loc-filter button.loc-on, .seg.active, .cv-vm-btn.is-active, .vp-btn.active, .rail-item.active, .chip.active, .folder-item.active, .alc-tab.active, .theme-tab.active, .settings-nav-item.active, .ds-tt.active, .ds-item.active, .loc-picker.is-active, .emp-picker-item.is-active, .pp-btn[aria-pressed="true"], .insp-section .pill-btn.active, .cc-pillrow button.active, .bulk-pillrow button.active, .ebar-overflow-menu button.is-active, .wpm-fam-tabs .pill-btn.active, .qm-period-btn.active, .std-tag.active, .fml-usedby.active, .ds-ftab.on, .ds-icpick.on, .hrm-filter-chip.is-active ) { background: radial-gradient(135% 100% at 14% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 48%), linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important; border-color: rgba(255,255,255,.20) !important; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.26) !important; } /* ---- Tilgængelighed: respektér reduced-motion ---------------------------- */ @media (prefers-reduced-motion: reduce) { .nav-btn.active, .w-filter-chip.active, .mode-btn.active, .seg.active, .chip.active, .tb-period.seg button.on, #global-loc-filter button.loc-on { transition: none !important; } }