/* ============================================================ * SocialGain — app.css * Alle applicatie-stijlen. Geen preprocessors, geen frameworks. * ============================================================ */ /* DE BROWSER MOET WETEN WELKE WEERGAVE DRAAIT. Zonder color-scheme tekent hij checkboxes, selects, scrollbalken en de standaard knopachtergrond altijd LICHT — ook in donkere weergave. Gemeten in donkere weergave: .ql-emoji-btn zwart op #14141f (contrast 1.15) en .btn-danger-ghost op de UA-knopkleur #efefef (1.65). Beide krijgen hun kleur van de browser, niet van dit bestand, dus geen enkele CSS-regel hier repareerde dat. `light dark` volgt de systeemvoorkeur; de twee regels erna volgen de expliciete keuze uit assets/js/mode.js (), zodat "donker" op een licht systeem óók donkere besturingen geeft. */ :root { color-scheme: light dark; } html[data-mode="light"] { color-scheme: light; } html[data-mode="dark"] { color-scheme: dark; } /* ----- Design tokens ---------------------------------- */ :root { --c-bg: #f5f7fb; --c-surface: #ffffff; --c-border: #e4e7ef; --c-text: #1b1f2a; --c-muted: #6b7280; --c-primary: #2563eb; --c-primary-600: #1d4ed8; --c-primary-soft: #eef2ff; --c-success: #16a34a; --c-warning: #d97706; --c-error: #dc2626; --c-focus: #3b82f6; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --shadow-lg: 0 16px 40px rgba(16, 24, 40, .12); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ----- Reset & base ----------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; } a { color: var(--c-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 24px; margin: 0 0 8px; } h2 { font-size: 18px; margin: 0 0 8px; } .muted { color: var(--c-muted); } .hint { color: var(--c-muted); font-size: 13px; display: block; margin-top: 4px; } /* ----- Layout ----------------------------------------- */ .page { min-height: calc(100vh - 60px); padding: 24px 0; } .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* ----- Topbar / nav (authenticated pages) ------------- */ .impersonation-banner { background: #7c3aed; color: #fff; padding: 8px 20px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; position: sticky; top: 0; z-index: 30; } .impersonation-banner strong { font-weight: 600; } .btn-warning { background: #fff; color: #7c3aed; border: none; padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-warning:hover { background: #ede9fe; } .topbar { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 20; } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--c-text); text-decoration: none; font-weight: 600; } .brand:hover { text-decoration: none; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--c-primary); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .5px; } .brand-mark-lg { width: 48px; height: 48px; font-size: 18px; border-radius: 10px; } .topbar-nav { display: flex; gap: 4px; flex: 1; } .topbar-nav a { color: var(--c-text); padding: 8px 12px; border-radius: var(--r-sm); font-weight: 500; } .topbar-nav a:hover { background: var(--c-primary-soft); color: var(--c-primary-600); text-decoration: none; } .topbar-right { display: flex; align-items: center; gap: 12px; } .user-chip { color: var(--c-muted); font-size: 14px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inline-form { display: inline; margin: 0; padding: 0; } /* Kleurstip van een contentcategorie. `border` en niet alleen de vulkleur: een categorie die wit of bijna-wit kiest zou anders onzichtbaar zijn op de kaart, en dan lijkt er geen kleur te staan. */ .cat-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid var(--c-border, rgba(0,0,0,.2)); vertical-align: middle; margin-right: .35rem; } /* ----- Buttons ---------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: var(--r-md); font: inherit; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .btn-primary { background: var(--c-primary); color: #fff; } .btn-primary:hover { background: var(--c-primary-600); } .btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); } .btn-ghost:hover { background: var(--c-bg); } .btn-block { width: 100%; } /* ----- Forms ------------------------------------------ */ .field { display: block; margin-bottom: 16px; } .field-label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; color: var(--c-text); } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field input[type="datetime-local"], .field input[type="number"], .field input[type="url"], .field input[type="search"], .field input[type="time"], .field textarea, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--c-muted); cursor: pointer; } .checkbox input { width: 16px; height: 16px; } /* ----- Aanraakdoelen ---------------------------------- */ /* WCAG 2.2 AA, Target Size (Minimum): een aanwijsdoel is minstens 24x24 CSS px, of het label eromheen haalt die maat. Gemeten op 375px stond hier een bonte reeks onder die grens: tekstvelden en IS ZO BREED ALS ZIJN LANGSTE OPTIE, en niets dwingt hem binnen zijn ouder. Op /conversations stond één optie van een hele zin ("Nog geen sjablonen. Maak er een aan bij …"): de keuzelijst werd 426px en trok het DOCUMENT op een telefoon naar 467px (gemeten 21-09-2026, 320/375/390px, alle drie de site-thema's). `.field select` heeft `width: 100%` en had dit dus niet; een select buiten `.field` wel — en die view droeg `form-control`, een klasse die in deze codebase geen enkele regel heeft. Deze ene regel kan niets BREDER maken, alleen afkappen op de ouder; de browser kort de getoonde tekst dan zelf in. `.org-switcher select` (max 200px) blijft specifieker. */ select { max-width: 100%; } .checkbox { min-height: 24px; } /* EEN KNOP DIE ALS LINK OOGT IS NOG STEEDS EEN DOEL. `.linklike` heeft `padding: 0`, dus zijn hoogte is die van één tekstregel: 21px bij 14px tekst, gemeten op /campaigns/plan (22-09-2026) toen de knop "zonder taak" van het dode `btn-link` naar deze klasse ging. Een `