/* ===================================================================== GLASS-SKIN — herdefinieert de semantische tokenlaag (semantic.css) --------------------------------------------------------------------- Actief via data-skin="glass" op . Gebaseerd op de login-v2 look (pages/login-v2.css): getinte achtergrond met glow-blobs, translucente vlakken met backdrop-blur, grotere radii en diepere schaduwen. Performance-afspraken (les uit login-v2): - --surface-blur (volle blur) alleen op hoofdvlakken: navbar, sidebar, modal, chat-input — hooguit een handvol per pagina - --card-blur (lichtere blur) op herhaalde kaarten/tegels - glow-blobs zijn statisch (geen animatie) en zitten op één fixed pseudo-element achter de content Opt-out: data-surface="solid" op een container herpint de tokens naar solide waarden voor data-zware schermen (BI-dashboards). Gewone tabellen doen wél mee met glass; alleen expliciet gemarkeerde containers zijn solide. ===================================================================== */ [data-skin="glass"] { /* --- Oppervlakken --- */ --color-bg: #faf9fe; --color-surface: rgba(255, 255, 255, 0.45); /* Raised = zwevend boven content. Kleine dropdowns/popovers krijgen geen blur (performance), vandaar de hoge dekking; grote overlays (modal, side-panel) zetten er zelf --surface-blur bij. */ --color-surface-raised: rgba(255, 255, 255, 0.88); /* Subtiel vlak: laat de glow-blobs duidelijk doorschijnen (bento-tegels) */ --color-surface-subtle: rgba(255, 255, 255, 0.275); --color-surface-hover: rgba(255, 255, 255, 0.65); /* --- Randen & lijnen --- */ --color-border: rgba(255, 255, 255, 0.6); --color-border-hover: rgba(255, 255, 255, 0.85); /* Binnenlijn moet juist donkerder zijn dan het vlak, anders verdwijnt hij. */ --color-divider: rgba(0, 0, 0, 0.1); --surface-border: 1px solid rgba(255, 255, 255, 0.6); /* --- Materiaal --- */ --surface-blur: blur(22px) saturate(160%); --card-blur: blur(14px) saturate(140%); --elevation: 0 8px 28px rgba(31, 38, 135, 0.10); --elevation-raised: 0 16px 44px rgba(31, 38, 135, 0.16); --elevation-overlay: 0 24px 70px rgba(31, 38, 135, 0.18); --radius-card: 24px; --radius-control: 12px; --overlay-scrim: rgba(31, 30, 40, 0.45); /* --- Invoervelden: volledige rand + radius + translucente fill --- */ --input-bg: rgba(255, 255, 255, 0.45); --input-border: 1px solid rgba(255, 255, 255, 0.7); --input-border-bottom: 1px solid rgba(255, 255, 255, 0.7); --input-radius: 12px; /* --- Knoppen: getinte glass-fills (conform component-voorbeeld). Tekstkleuren zijn donkere tinten van de fill-kleur i.v.m. AA. --- */ --btn-secondary-bg: rgba(0, 157, 225, 0.16); --btn-secondary-border: rgba(0, 157, 225, 0.35); --btn-secondary-text: #006a9e; --btn-secondary-hover-bg: rgba(0, 157, 225, 0.28); --btn-secondary-hover-border: rgba(0, 157, 225, 0.5); --btn-approve-bg: rgba(47, 143, 91, 0.16); --btn-approve-border: rgba(47, 143, 91, 0.38); --btn-approve-text: #1e6b43; --btn-approve-hover-bg: var(--approve-color-dark); --btn-approve-hover-border: var(--approve-color-dark); --btn-approve-hover-text: #ffffff; --btn-danger-bg: rgba(229, 92, 106, 0.16); --btn-danger-border: rgba(229, 92, 106, 0.4); --btn-danger-text: #b3364a; --btn-danger-hover-bg: var(--danger-color-dark); --btn-danger-hover-border: var(--danger-color-dark); --btn-danger-hover-text: #ffffff; } /* Getinte pagina-achtergrond zit op ; body wordt doorzichtig zodat de fixed glow-blobs (body::before, z-index -1) zichtbaar blijven. */ [data-skin="glass"] { background-color: var(--color-bg); } [data-skin="glass"] body { background-color: transparent; } [data-skin="glass"] body::before { content: ""; position: fixed; inset: -10%; z-index: -1; background: radial-gradient(20% 24% at 18% 28%, rgba(148, 113, 223, 0.22), transparent 70%), radial-gradient(19% 22% at 82% 22%, rgba(0, 157, 225, 0.20), transparent 70%), radial-gradient(22% 26% at 70% 82%, rgba(196, 132, 255, 0.18), transparent 72%), radial-gradient(18% 22% at 28% 80%, rgba(0, 157, 225, 0.14), transparent 72%), radial-gradient(16% 20% at 50% 50%, rgba(255, 175, 219, 0.12), transparent 70%); filter: blur(36px) saturate(115%); pointer-events: none; } /* Het content-vlak (grid.css) is in flat opaak; onder glass moet het doorzichtig zijn zodat de blobs achter de kaarten doorschemeren. */ [data-skin="glass"] .content { background-color: transparent; } /* ===================================================================== DARK + GLASS — donkere translucente vlakken (zoals login-v2 dark) ===================================================================== */ [data-theme="dark"][data-skin="glass"] { --color-bg: #14131a; --color-surface: rgba(40, 40, 48, 0.55); --color-surface-raised: rgba(54, 54, 64, 0.94); --color-surface-subtle: rgba(40, 40, 48, 0.32); --color-surface-hover: rgba(255, 255, 255, 0.08); --color-border: rgba(255, 255, 255, 0.12); --color-border-hover: rgba(255, 255, 255, 0.24); --color-divider: rgba(255, 255, 255, 0.14); --surface-border: 1px solid rgba(255, 255, 255, 0.12); --elevation: 0 8px 28px rgba(0, 0, 0, 0.35); --elevation-raised: 0 16px 44px rgba(0, 0, 0, 0.45); --elevation-overlay: 0 24px 70px rgba(0, 0, 0, 0.55); --overlay-scrim: rgba(0, 0, 0, 0.6); --input-bg: rgba(255, 255, 255, 0.06); --input-border: 1px solid rgba(255, 255, 255, 0.14); --input-border-bottom: 1px solid rgba(255, 255, 255, 0.14); /* Getinte fills: hogere tint-opacity + lichte tekst voor AA op donker */ --btn-secondary-bg: rgba(0, 157, 225, 0.2); --btn-secondary-border: rgba(0, 157, 225, 0.45); --btn-secondary-text: #6fcdf3; --btn-secondary-hover-bg: rgba(0, 157, 225, 0.34); --btn-secondary-hover-border: rgba(0, 157, 225, 0.6); --btn-approve-bg: rgba(92, 201, 122, 0.16); --btn-approve-border: rgba(92, 201, 122, 0.4); --btn-approve-text: #8fdba6; --btn-approve-hover-bg: var(--approve-color-dark); --btn-approve-hover-border: var(--approve-color-dark); --btn-approve-hover-text: #0c2916; --btn-danger-bg: rgba(229, 92, 106, 0.18); --btn-danger-border: rgba(229, 92, 106, 0.45); --btn-danger-text: #f3a7b0; --btn-danger-hover-bg: var(--danger-color-dark); --btn-danger-hover-border: var(--danger-color-dark); --btn-danger-hover-text: #2b0a0f; } /* Dark-glass: blobs iets gedimd zodat tekstvlakken rustig blijven */ [data-theme="dark"][data-skin="glass"] body::before { opacity: 0.6; } /* ===================================================================== SOLID OPT-OUT — data-surface="solid" op een container herpint de surface-tokens naar solide waarden. Voor BI-dashboards en andere data-zware schermen waar translucentie leesbaarheid kost. Custom properties erven, dus dit werkt door op de hele subtree. ===================================================================== */ [data-surface="solid"] { --color-surface: var(--color-bg); --color-surface-raised: var(--color-bg); --color-surface-subtle: var(--color-bg); --color-surface-hover: var(--grey-lightest); --color-border: var(--grey-light); --color-border-hover: var(--grey-medium); --color-divider: var(--grey-light); --surface-border: 1px solid var(--grey-light); --surface-blur: none; --card-blur: none; --elevation: 0 1px 3px var(--shadow-color); --elevation-raised: 0 4px 12px var(--shadow-color); --radius-card: var(--border-radius-normal); --radius-control: var(--border-radius-small); --input-bg: var(--white); --input-border: none; --input-border-bottom: 1px solid var(--grey-light); --input-radius: 0; } /* In glass is --color-bg getint-maar-opaak; als solide surface binnen glass gebruiken we wit/donker uit de ruwe tokens voor maximale leesbaarheid. */ [data-skin="glass"] [data-surface="solid"] { --color-surface: var(--white); --color-surface-raised: var(--white); --color-surface-subtle: var(--white); }