/** * shadcn-preview.css — proefstuk (PROMPT-shadcn-proefstuk.md) * * Doel: de shadcn-grammatica (rustige borders, consistente radius, ingetogen * schaduwen, duidelijke focus-ring) overnemen op het inlogscherm en de * Beheer-module, in ÓNS palet — steel #577C8E / #7A9EB1 + navy #2F4157. * Geen shadcn-default-zinc als accent, geen terracotta, geen teal. * * OPT-IN, STRIKT: elke regel hieronder is geprefixed met .shadcn-preview * (klasse op , gezet vóór de eerste paint door de inline-script in * index.html — via ?stijl=shadcn of de localStorage-spiegeling). * Zonder de klasse: dit blad heeft nul effect, ook al is het altijd gelinkt. * * SCOPE, STRIKT: alléén #login-shell en .bh-app. De Beheer-module rendert * zijn hele kolom+paneel zelf binnen .bh-app (renderBeheerShell() in app.js) * — dat is dus de enige plek waar Beheer-CSS thuishoort. De gedeelde chrome * (topbar, zijbalk, thema-toggle, launchpad) en ALLE andere modules staan * BUITEN deze twee containers en blijven zo automatisch pixel-onaangeroerd, * ook wanneer je in Beheer zit. * * EIGEN TOKENNAAMRUIMTE (--scp-*): nooit de globale theme.css-tokens * (--border/--radius/--card/--muted/--accent/...) hergebruiken of * herdefiniëren — die worden door vrijwel elke andere module gelezen; ze op * (of op een gedeelde ancestor) overschrijven zou dwars door de rest * van de app heen lekken. --scp-* bestaat uitsluitend binnen de twee * scope-roots hieronder, dus zelfs een toevallige naamsbotsing kan nooit * ergens anders doorwerken. * * !important: theme.css gebruikt dat op vrijwel elke kaart/rand/tabel-regel * (het is zelf al een override-laag over style.css heen — zie de kop van dat * bestand). Zonder !important zouden de helft van deze regels genegeerd * worden. Dezelfde, al bestaande, conventie — geen nieuwe gewoonte. * * box-sizing staat niet globaal in deze codebase — expliciet gezet voor alles * binnen de twee scope-roots, anders klopt geen breedte-som met padding+rand * erbij (en dat is precies wat ui-polish-gate meet). * * NIET aangeraakt: positie/transform van de zwevende login-labels (.lf-float * > label) en de thema-toggle-thumb (.tpill-thumb) — die mechanieken werken * al en staan in theme.css; hier komt alleen oppervlakte (kleur/rand/radius/ * schaduw) overheen. */ .shadcn-preview #login-shell, .shadcn-preview #login-shell *, .shadcn-preview .bh-app, .shadcn-preview .bh-app * { box-sizing: border-box; } /* ─── Tokens — licht (default) ────────────────────────────────────────── */ .shadcn-preview #login-shell, .shadcn-preview .bh-app { --scp-bg: #F6F7F8; --scp-card: #FFFFFF; --scp-card-2: #FAFAFA; --scp-border: #E4E7EB; --scp-border-strong: #D3D8DE; --scp-text: #2F4157; /* navy (canon) */ --scp-muted: #5B6B7A; /* ≥4.5:1 op --scp-card — steekproef in verify-script */ --scp-accent: #2F4157; /* navy — primaire actie, licht (≈10.4:1 met wit) */ --scp-accent-fg: #FFFFFF; --scp-accent-soft: rgba(87, 124, 142, .14); /* steel-tint, alleen als wash — nooit als tekstkleur-op-zichzelf */ --scp-steel: #577C8E; /* steel — randen/iconen/badge-tekst-op-tint */ --scp-radius: 0.5rem; --scp-radius-sm: 0.375rem; --scp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --scp-shadow: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06); --scp-danger: #C0453B; --scp-danger-soft: rgba(192, 69, 59, .10); --scp-success: #2F8F5B; --scp-success-soft: rgba(47, 143, 91, .12); /* 31 aug 2026 — "let op" is iets anders dan "er ging iets mis"; zie de Alert-regels verderop. Tekstwaarde op L=0.47 om dezelfde reden als in theme.css: L=0.577 haalt op een lichte tint maar 3.5-4.0:1. */ --scp-warning: oklch(0.577 0.144 70.08); --scp-warning-tekst: oklch(0.47 0.12 70.08); } /* ─── Tokens — donker (grey-thema) ─────────────────────────────────────── Zelfde specificiteit-truc als theme.css zelf (html[data-theme="grey"] wint bewust van :root/tenant-css) — hier één stap specifieker met de scope-klasse erbij, dus wint hij op zijn beurt weer van de lichte tokens hierboven wanneer data-theme=grey. */ html.shadcn-preview[data-theme="grey"] #login-shell, html.shadcn-preview[data-theme="grey"] .bh-app { --scp-bg: #17191C; --scp-card: #1F2225; --scp-card-2: #24282C; --scp-border: #2C3034; --scp-border-strong: #3A3F44; --scp-text: #E8EAED; --scp-muted: #9AA4AE; /* ≥4.5:1 op --scp-card — steekproef in verify-script */ --scp-accent: #7A9EB1; /* steel-licht — primaire actie, donker */ --scp-accent-fg: #14181B; /* donkere tekst óp het accent (wit zou <4.5:1 geven) */ --scp-accent-soft: rgba(122, 158, 177, .16); --scp-steel: #7A9EB1; --scp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --scp-shadow: 0 4px 14px rgba(0, 0, 0, .4); --scp-danger: #E07A70; --scp-danger-soft: rgba(224, 122, 112, .16); --scp-success: #5FB487; --scp-success-soft: rgba(95, 180, 135, .16); --scp-warning: oklch(0.704 0.15 70.08); --scp-warning-tekst: oklch(0.704 0.15 70.08); } /* ════════════════════════════════════════════════════════════════════════ INLOGSCHERM ════════════════════════════════════════════════════════════════════════ */ /* Eén egaal vlak: pagina = kaartkleur (Nick, 9 aug). */ .shadcn-preview #login-shell { background: var(--scp-card) !important; } .shadcn-preview .login-card { background: var(--scp-card) !important; border: none !important; border-radius: var(--scp-radius) !important; box-shadow: none !important; /* theme.css zet padding: 0 !important op de kale kaart (die is daar onzichtbaar, dus binnenruimte deed er niet toe). Hier IS de kaart zichtbaar: zonder dit raakt de ondertitel de rand en knipt de bovenrand het logo af (gemeten 9 aug, telefoon Nick). */ padding: 30px 26px !important; } @media (max-width: 480px) { .shadcn-preview .login-card { padding: 26px 20px !important; } } .shadcn-preview .login-card h1 { color: var(--scp-text) !important; } .shadcn-preview .login-card .sub { color: var(--scp-muted) !important; } .shadcn-preview .lf-field label, .shadcn-preview .lf-field > label { color: var(--scp-text) !important; } /* Alleen oppervlakte — positie/transform van de zwevende label blijft ongemoeid (werkt al via theme.css, zie bestandskop). */ .shadcn-preview .lf-input { background: var(--scp-card) !important; border: 1px solid var(--scp-border-strong) !important; border-radius: var(--scp-radius) !important; box-shadow: none !important; } .shadcn-preview .lf-input:focus-within { border-color: var(--scp-accent) !important; box-shadow: 0 0 0 2px var(--scp-card), 0 0 0 4px var(--scp-accent) !important; } /* Rustige rand ipv aanhoudend gekleurd — shadcn-grammatica: alleen focus krijgt nadruk, "gevuld maar niet actief" blijft neutraal. */ .shadcn-preview .lf-input.lf-float:has(input:not(:placeholder-shown)) { border-color: var(--scp-border-strong) !important; } .shadcn-preview .lf-input > svg { color: var(--scp-muted) !important; } .shadcn-preview .lf-input input { color: var(--scp-text) !important; } .shadcn-preview .lf-input .reveal:hover { color: var(--scp-accent) !important; } .shadcn-preview .lf-submit { background: var(--scp-accent) !important; color: var(--scp-accent-fg) !important; border-radius: var(--scp-radius) !important; box-shadow: none !important; } .shadcn-preview .lf-submit:hover { opacity: .92; } /* Meldingsvak = shadcn Alert. De VORM (grid, icoonkolom, linkse tekst, 16px icoon op de eerste regel) staat in theme.css bij #login-err.lf-error; hier ligt alleen het oppervlak, in de --scp-tokens. Twee sporen, dezelfde vorm: een verkeerd wachtwoord is destructive, een verlopen sessie is warning — die zin zegt juist dat er niets weg is, en rood spreekt hem tegen. De rand gaat van vol naar 30%: een volle rand om een getinte vlek leest als een waarschuw- ingsbord, en shadcn's Alert doet dat ook niet. */ .shadcn-preview .login-err, .shadcn-preview .lf-error { background: var(--scp-danger-soft) !important; color: var(--scp-danger) !important; border: 1px solid color-mix(in oklab, var(--scp-danger) 30%, transparent) !important; border-radius: var(--scp-radius) !important; } .shadcn-preview #login-err.lf-error[data-sessie-verlopen] { background: color-mix(in oklab, var(--scp-warning) 10%, transparent) !important; color: var(--scp-warning-tekst) !important; border-color: color-mix(in oklab, var(--scp-warning) 32%, transparent) !important; } /* Dicht = geen vak; anders zet !important hierboven een lege getinte balk neer tussen subtitel en formulier (theme.css lost dat op met :not(.is-open), en die regel heeft geen !important). */ .shadcn-preview #login-err:not(.is-open) { background: none !important; border-width: 0 !important; } .shadcn-preview .login-theme.tpill { border: 1px solid var(--scp-border-strong) !important; background: var(--scp-card) !important; box-shadow: var(--scp-shadow-sm) !important; } /* ════════════════════════════════════════════════════════════════════════ BEHEER-MODULE — alles binnen .bh-app (renderBeheerShell() in app.js) ════════════════════════════════════════════════════════════════════════ */ .shadcn-preview .bh-app, .shadcn-preview .bh-main { background: var(--scp-bg) !important; } .shadcn-preview .bh-nav { background: var(--scp-card-2) !important; border-right: 1px solid var(--scp-border) !important; } .shadcn-preview .bh-back { color: var(--scp-muted) !important; border-radius: var(--scp-radius-sm) !important; } .shadcn-preview .bh-back:hover { background: var(--scp-accent-soft) !important; color: var(--scp-text) !important; } .shadcn-preview .bh-brand { color: var(--scp-text) !important; } .shadcn-preview .bh-brand small { color: var(--scp-muted) !important; } .shadcn-preview .bh-nav-cap { color: var(--scp-muted) !important; } .shadcn-preview .bh-nav-item { color: var(--scp-text) !important; background: transparent !important; border-radius: var(--scp-radius-sm) !important; } .shadcn-preview .bh-nav-item:hover { background: var(--scp-accent-soft) !important; } .shadcn-preview .bh-nav-item.on { background: var(--scp-accent) !important; color: var(--scp-accent-fg) !important; } /* Kaarten: secties, module-tegels, cron-kaarten, de rollenmatrix-kaart. */ .shadcn-preview .beheer-section, .shadcn-preview .beheer-panel, .shadcn-preview .pmatrix-card, .shadcn-preview .mod-card, .shadcn-preview .cr-card { background: var(--scp-card) !important; border: 1px solid var(--scp-border) !important; border-radius: var(--scp-radius) !important; box-shadow: var(--scp-shadow-sm) !important; } .shadcn-preview .beheer-section-head { background: transparent !important; color: var(--scp-text) !important; border-bottom: 1px solid var(--scp-border) !important; font-weight: 650 !important; } .shadcn-preview .beheer-section-body { color: var(--scp-text) !important; } .shadcn-preview .field-hint, .shadcn-preview .beheer-empty, .shadcn-preview .pmatrix-note, .shadcn-preview .cr-doel, .shadcn-preview .cr-naam, .shadcn-preview .mod-card-hint, .shadcn-preview .bh-shell-hint, .shadcn-preview .cr-shell-hint { color: var(--scp-muted) !important; } .shadcn-preview .mod-card-head strong, .shadcn-preview .cr-title { color: var(--scp-text) !important; } /* Velden: bestaande .field-structuur (span vóór input, dus al "label boven veld") blijft — hier alleen kleur/gewicht, geen herordening. */ .shadcn-preview .field > span { color: var(--scp-text) !important; font-weight: 600 !important; } .shadcn-preview .bh-app input:not([type=checkbox]):not([type=radio]), .shadcn-preview .bh-app select, .shadcn-preview .bh-app textarea { background: var(--scp-card) !important; border: 1px solid var(--scp-border-strong) !important; border-radius: var(--scp-radius-sm) !important; color: var(--scp-text) !important; } .shadcn-preview .bh-app input:not([type=checkbox]):not([type=radio]):focus, .shadcn-preview .bh-app select:focus, .shadcn-preview .bh-app textarea:focus { border-color: var(--scp-accent) !important; box-shadow: 0 0 0 2px var(--scp-card), 0 0 0 4px var(--scp-accent) !important; outline: none !important; } .shadcn-preview .form-err { background: var(--scp-danger-soft) !important; color: var(--scp-danger) !important; border: 1px solid var(--scp-danger) !important; border-radius: var(--scp-radius-sm) !important; } /* Knoppen */ .shadcn-preview .bh-app .btn-primary { background: var(--scp-accent) !important; color: var(--scp-accent-fg) !important; border: 1px solid var(--scp-accent) !important; border-radius: var(--scp-radius-sm) !important; box-shadow: none !important; } .shadcn-preview .bh-app .btn-primary:hover { opacity: .92; } .shadcn-preview .bh-app .btn-ghost, .shadcn-preview .bh-app .btn-secondary, .shadcn-preview .bh-app .bl-btn-secondary, .shadcn-preview .bh-app .mod-card-lnk { background: var(--scp-card) !important; color: var(--scp-text) !important; border: 1px solid var(--scp-border-strong) !important; border-radius: var(--scp-radius-sm) !important; } .shadcn-preview .bh-app .btn-ghost:hover, .shadcn-preview .bh-app .btn-secondary:hover, .shadcn-preview .bh-app .bl-btn-secondary:hover, .shadcn-preview .bh-app .mod-card-lnk:hover { background: var(--scp-accent-soft) !important; } .shadcn-preview .bh-app .btn-danger { background: var(--scp-danger-soft) !important; color: var(--scp-danger) !important; border: 1px solid var(--scp-danger) !important; border-radius: var(--scp-radius-sm) !important; } .shadcn-preview .bh-app .btn-link { color: var(--scp-accent) !important; } /* Badges */ .shadcn-preview .beheer-badge { border-radius: 100px !important; border: 1px solid var(--scp-border-strong) !important; background: var(--scp-card-2) !important; color: var(--scp-muted) !important; } .shadcn-preview .beheer-badge.is-ok { background: var(--scp-success-soft) !important; color: var(--scp-success) !important; border-color: transparent !important; } .shadcn-preview .beheer-badge.is-beperkt, .shadcn-preview .beheer-badge.is-soon { background: var(--scp-accent-soft) !important; color: var(--scp-steel) !important; border-color: transparent !important; } .shadcn-preview .beheer-badge.is-danger { background: var(--scp-danger-soft) !important; color: var(--scp-danger) !important; border-color: transparent !important; } /* Tabellen (gebruikers-grid, rollenmatrix, seizoen/kortingen-tabellen) */ .shadcn-preview .bh-app table, .shadcn-preview .beheer-table, .shadcn-preview .pmatrix { border-color: var(--scp-border) !important; } .shadcn-preview .bh-app th, .shadcn-preview .beheer-table th, .shadcn-preview .pmatrix th { background: var(--scp-card-2) !important; color: var(--scp-muted) !important; border-bottom: 1px solid var(--scp-border) !important; } .shadcn-preview .bh-app td, .shadcn-preview .beheer-table td, .shadcn-preview .pmatrix td { color: var(--scp-text) !important; border-bottom: 1px solid var(--scp-border) !important; } .shadcn-preview .bh-app tbody tr:hover { background: var(--scp-accent-soft) !important; } /* Toggles (mod-toggle / gb-toggle) — alleen kleur van de bestaande track+thumb; de verborgen-checkbox + sibling-selector-mechaniek blijft precies zoals hij is. */ .shadcn-preview .mod-toggle-slider, .shadcn-preview .gb-toggle-slider { background: var(--scp-border-strong) !important; border: none !important; } .shadcn-preview .mod-toggle-chk:checked + .mod-toggle-slider, .shadcn-preview .mod-act-chk:checked + .mod-toggle-slider, .shadcn-preview .gb-actief-chk:checked + .gb-toggle-slider { background: var(--scp-accent) !important; } .shadcn-preview .mod-toggle-lbl, .shadcn-preview .gb-toggle-lbl { color: var(--scp-muted) !important; } .shadcn-preview .beheer-save-bar { background: var(--scp-card-2) !important; border-top: 1px solid var(--scp-border) !important; color: var(--scp-muted) !important; } .shadcn-preview .loading .spin { border-color: var(--scp-border-strong) !important; border-top-color: var(--scp-accent) !important; } /* Focus-zichtbaarheid — zelfde conventie als de rest van de app (CLAUDE.md a11y-regel: 2px accent, 2px offset), nu met het preview-eigen accent. */ .shadcn-preview #login-shell button:focus-visible, .shadcn-preview #login-shell a:focus-visible, .shadcn-preview .bh-app button:focus-visible, .shadcn-preview .bh-app a:focus-visible, .shadcn-preview .bh-app input:focus-visible, .shadcn-preview .bh-app select:focus-visible { outline: 2px solid var(--scp-accent) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { .shadcn-preview #login-shell *, .shadcn-preview .bh-app * { transition: none !important; } }