/* ═══════════════════════════════════════════════════════════════════════════ bos-ui.css — het gedeelde designsysteem van Brand OS ─────────────────────────────────────────────────────────────────────────── WAAROM DIT BESTAAT Zes frontends hadden zeven eigen paletten, vijf varianten van esc(), drie toasts en 58 paneelvarianten in één bestand. Eén breekpunt aanpassen kostte zeven edits. Alles hieronder staat één keer. REGELS 1. Elke marge en padding komt uit --bos-s1..--bos-s7. Geen losse px-waarden. 2. Vier tekstmaten. Meer niet. 3. Statuskleuren (groen/amber/rood) betekenen goed/let-op/fout en worden nooit hergebruikt als "reeks 4". Ze komen altijd met een woord erbij. 4. Alles krijgt het voorvoegsel bos-, zodat de oude CSS kan blijven staan tot alle schermen om zijn. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --bos-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --bos-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; /* Licht — overgenomen uit het bestaande thema, ongewijzigd. */ --bos-bg:#f4f5f8; --bos-surface:#ffffff; --bos-surface2:#f6f7fa; --bos-surface3:#edeff4; --bos-ink:#161822; --bos-muted:#5a6072; --bos-faint:#8b91a2; --bos-line:rgba(15,18,30,.09); --bos-line2:rgba(15,18,30,.17); --bos-a1:#5f61de; --bos-a2:#199f97; --bos-a-soft:rgba(95,97,222,.11); --bos-green:#1e9e68; --bos-green-soft:rgba(30,158,104,.12); --bos-amber:#c07f14; --bos-amber-soft:rgba(192,127,20,.12); --bos-red:#d94f4f; --bos-red-soft:rgba(217,79,79,.10); --bos-sky:#2f8fd1; /* Spacing. Zeven stappen, en de vuistregel: binnen een component --bos-s2/--bos-s3, tussen componenten --bos-s4/--bos-s5, tussen secties --bos-s6. */ --bos-s1:4px; --bos-s2:8px; --bos-s3:12px; --bos-s4:16px; --bos-s5:24px; --bos-s6:32px; --bos-s7:48px; --bos-r:10px; --bos-r-sm:7px; --bos-r-lg:14px; --bos-shadow:0 1px 2px rgba(15,18,30,.04),0 8px 24px rgba(15,18,30,.06); --bos-focus:0 0 0 3px var(--bos-a-soft); } /* Donker is een eigen set stappen, geen automatische omkering: een omgekeerd licht palet levert grijs op dat te licht is en accenten die gaan gloeien. */ html[data-theme="dark"]{ --bos-bg:#0b0c10; --bos-surface:#121319; --bos-surface2:#171922; --bos-surface3:#1d2029; --bos-ink:#eef0f6; --bos-muted:#9aa1b4; --bos-faint:#5c6377; --bos-line:rgba(255,255,255,.07); --bos-line2:rgba(255,255,255,.14); --bos-a1:#8b8cf5; --bos-a2:#4bc7c0; --bos-a-soft:rgba(139,140,245,.15); --bos-green:#3ecf8e; --bos-green-soft:rgba(62,207,142,.14); --bos-amber:#f0b254; --bos-amber-soft:rgba(240,178,84,.14); --bos-red:#f0787a; --bos-red-soft:rgba(240,120,122,.13); --bos-sky:#63b3ea; --bos-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); } /* color-scheme is geen variabele maar een echte eigenschap, en die hoort dus binnen .bos-root te blijven. Op zou hij de zes bestaande schermen raken die dit bestand meeladen — nu toevallig met dezelfde waarde, maar dat is geen garantie maar een samenloop. */ .bos-root{color-scheme:light} html[data-theme="dark"] .bos-root{color-scheme:dark} /* ── De reset staat binnen .bos-root, en dat is geen netheid ────────────── Dit blok stond hier eerst kaal: `*`, `body`, `a`. Zes bestaande schermen laden dit bestand nu ook, en `body{font:15px/1.6}` erft door naar alles wat eronder hangt. Gemeten op het dashboard: 132 van de 147 zichtbare elementen verschoven van regelhoogte, 40 werden een punt groter. De afspraak was dat er niets zichtbaar mocht veranderen. Een pagina die het designsysteem WEL wil, zet class="bos-root" op de body. Doet ze dat niet, dan raakt dit bestand haar niet aan. Zo kan de oude CSS blijven staan tot alle schermen om zijn — precies wat regel 4 hierboven belooft, nu ook voor de opmaak en niet alleen voor de klassenamen. */ .bos-root{ background:var(--bos-bg);color:var(--bos-ink);font:15px/1.6 var(--bos-ui); -webkit-font-smoothing:antialiased;min-height:100%; } .bos-root *{box-sizing:border-box;margin:0;padding:0} .bos-root a{color:inherit;text-decoration:none} .bos-root :focus-visible{outline:none;box-shadow:var(--bos-focus);border-radius:var(--bos-r-sm)} /* ── Typografie: vier maten ───────────────────────────────────────────────── */ .bos-h1{font-size:29px;line-height:1.15;letter-spacing:-.03em;font-weight:640} .bos-h2{font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:620} .bos-t{font-size:15px} .bos-s{font-size:13px;color:var(--bos-faint)} .bos-lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bos-faint);font-weight:600} .bos-mono{font-family:var(--bos-mono);font-size:12px} .bos-num{font-variant-numeric:tabular-nums} .bos-lead{color:var(--bos-faint);font-size:14px;margin-bottom:var(--bos-s4)} /* ── Layout ───────────────────────────────────────────────────────────────── */ .bos-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh} .bos-main{padding:var(--bos-s6) var(--bos-s7);max-width:1280px} .bos-split{display:grid;grid-template-columns:1fr 320px;gap:var(--bos-s5);align-items:start} .bos-split-wide{display:grid;grid-template-columns:1fr 348px;height:100vh;overflow:hidden} .bos-split-wide>:first-child{padding:var(--bos-s5) var(--bos-s6);overflow:auto} .bos-hd{display:flex;align-items:flex-start;gap:var(--bos-s3);margin:var(--bos-s3) 0 var(--bos-s5)} .bos-hd .bos-grow{margin-left:auto} .bos-sec{margin-bottom:var(--bos-s6)} .bos-row{display:flex;align-items:center;gap:var(--bos-s2)} .bos-grow{margin-left:auto} /* ── Rail ─────────────────────────────────────────────────────────────────── */ .bos-rail{background:var(--bos-surface);border-right:1px solid var(--bos-line);padding:var(--bos-s5) 14px;overflow:auto} .bos-brand{display:flex;gap:10px;align-items:center;margin-bottom:var(--bos-s5);padding:0 6px} .bos-brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(120deg,var(--bos-a1),#3f7fd6 45%,var(--bos-a2));flex:none} .bos-brand b{font-size:15px;letter-spacing:-.02em;display:block} .bos-brand small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bos-faint)} .bos-grp{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bos-faint);padding:18px 6px 7px;font-weight:600} .bos-nav{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--bos-r-sm);color:var(--bos-muted);font-size:14px;cursor:pointer} .bos-nav:hover{background:var(--bos-surface2);color:var(--bos-ink)} .bos-nav.on{background:var(--bos-a-soft);color:var(--bos-a1);font-weight:600} .bos-nav .ic{width:16px;height:16px;border:1.5px solid currentColor;border-radius:4px;opacity:.45;flex:none} .bos-nav .cnt{margin-left:auto;font-size:12px;background:var(--bos-surface3);border-radius:20px;padding:0 7px;color:var(--bos-muted);font-variant-numeric:tabular-nums} .bos-nav.on .cnt{background:var(--bos-a-soft);color:var(--bos-a1)} /* ── Knoppen. Drie niveaus, en dat is het maximum: meer niveaus betekent dat niemand meer ziet welke knop de bedoeling is. ───────────────────────── */ .bos-btn{background:var(--bos-surface);border:1px solid var(--bos-line2);border-radius:var(--bos-r-sm); padding:8px 14px;font:500 14px var(--bos-ui);color:var(--bos-ink);cursor:pointer;white-space:nowrap} .bos-btn:hover{background:var(--bos-surface2)} .bos-btn.p{background:var(--bos-a1);border-color:var(--bos-a1);color:#fff;font-weight:600} .bos-btn.p:hover{filter:brightness(1.08)} .bos-btn.q{border-color:transparent;background:none;color:var(--bos-faint)} .bos-btn.q:hover{color:var(--bos-ink);background:var(--bos-surface2)} .bos-btn.danger{color:var(--bos-red);border-color:var(--bos-red-soft)} .bos-btn.sm{padding:5px 10px;font-size:13px} .bos-btn.full{width:100%;padding:11px;font-size:15px} .bos-btn[disabled]{opacity:.45;cursor:not-allowed} /* ── Formulier ────────────────────────────────────────────────────────────── */ .bos-fld{margin-bottom:var(--bos-s3)} .bos-fld>label{display:block;margin-bottom:4px} .bos-in,.bos-ta,.bos-sel{width:100%;border:1px solid var(--bos-line2);background:var(--bos-surface); border-radius:var(--bos-r-sm);padding:8px 11px;font:15px/1.5 var(--bos-ui);color:var(--bos-ink)} .bos-ta{resize:vertical;min-height:64px} .bos-in::placeholder,.bos-ta::placeholder{color:var(--bos-faint)} /* ── Tag ──────────────────────────────────────────────────────────────────── */ .bos-tag{font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:20px; background:var(--bos-surface3);color:var(--bos-muted);white-space:nowrap} .bos-tag.wait{background:var(--bos-amber-soft);color:var(--bos-amber)} .bos-tag.ok{background:var(--bos-green-soft);color:var(--bos-green)} .bos-tag.bad{background:var(--bos-red-soft);color:var(--bos-red)} /* ── Card ─────────────────────────────────────────────────────────────────── */ .bos-card{background:var(--bos-surface);border:1px solid var(--bos-line);border-radius:var(--bos-r);overflow:hidden} .bos-card>header{padding:12px var(--bos-s4);border-bottom:1px solid var(--bos-line);display:flex;align-items:baseline;gap:var(--bos-s2)} .bos-card>header h3{font-size:15px;font-weight:620;letter-spacing:-.01em} .bos-card>header .n{font-size:13px;color:var(--bos-faint)} .bos-card>.b{padding:var(--bos-s4)} .bos-card>footer{padding:11px var(--bos-s4);border-top:1px solid var(--bos-line);background:var(--bos-surface2);display:flex;gap:var(--bos-s2);align-items:center} /* ── Steps: waar sta je in het proces. Vervangt "welk blok is nu belangrijk". */ .bos-steps{display:flex;align-items:center;gap:var(--bos-s3);margin-bottom:var(--bos-s6);color:var(--bos-faint);font-size:13.5px} .bos-steps i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bos-line2); display:grid;place-items:center;font-style:normal;font-size:12px;flex:none;font-weight:600} .bos-steps .bar{flex:1;height:1px;background:var(--bos-line);min-width:12px} .bos-steps .done{color:var(--bos-muted)} .bos-steps .done i{background:var(--bos-green);border-color:var(--bos-green);color:#fff} .bos-steps .now{color:var(--bos-ink);font-weight:600} .bos-steps .now i{background:var(--bos-a1);border-color:var(--bos-a1);color:#fff} /* ── Gate: de enige primaire actie van het scherm, altijd rechts, altijd met wat het kost erbij. ──────────────────────────────────────────────── */ .bos-gate{background:var(--bos-surface);border:1px solid var(--bos-line);border-radius:var(--bos-r-lg); padding:22px;box-shadow:var(--bos-shadow);position:sticky;top:var(--bos-s5)} .bos-gate h3{font-size:20px;letter-spacing:-.02em;margin:8px 0 4px;font-weight:640} .bos-gate p{color:var(--bos-muted);font-size:14px;margin-bottom:18px} .bos-gate .fine{color:var(--bos-faint);font-size:13px;margin-top:11px;text-align:center;line-height:1.45} /* ── Key/value ────────────────────────────────────────────────────────────── */ .bos-kv{display:grid;gap:10px} .bos-kv>div{display:flex;justify-content:space-between;gap:var(--bos-s3);font-size:14px} .bos-kv .k{color:var(--bos-faint);flex:none} .bos-kv .v{text-align:right;font-variant-numeric:tabular-nums} .bos-kv.bordered{border-top:1px solid var(--bos-line);padding-top:var(--bos-s4);margin-top:var(--bos-s5)} /* ── Stat: één getal met context. Een getal met een label is geen grafiek en hoort er ook geen te worden. ─────────────────────────────────────────── */ .bos-stats{display:grid;grid-template-columns:repeat(var(--bos-cols,4),1fr);gap:1px;background:var(--bos-line); border:1px solid var(--bos-line);border-radius:var(--bos-r);overflow:hidden} .bos-stat{background:var(--bos-surface);padding:14px var(--bos-s4)} .bos-stat .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bos-faint);font-weight:600} .bos-stat .v{font-size:24px;font-weight:640;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums} .bos-stat .v.good{color:var(--bos-green)} .bos-stat .v.bad{color:var(--bos-red)} .bos-stat .m{font-size:13px;color:var(--bos-muted);margin-top:1px} /* ── Filterbar: altijd zichtbaar, één rij. Verstopte filters zijn geen filters. */ .bos-filters{display:flex;gap:var(--bos-s2);align-items:center;margin-bottom:var(--bos-s4);flex-wrap:wrap} .bos-chip{border:1px solid var(--bos-line2);background:var(--bos-surface);border-radius:20px; padding:5px 12px;font-size:13.5px;color:var(--bos-muted);cursor:pointer;white-space:nowrap} .bos-chip:hover{border-color:var(--bos-ink)} .bos-chip.on{background:var(--bos-ink);border-color:var(--bos-ink);color:var(--bos-surface);font-weight:600} .bos-search{flex:1;min-width:180px;border:1px solid var(--bos-line2);background:var(--bos-surface); border-radius:var(--bos-r-sm);padding:7px 12px;font:15px var(--bos-ui);color:var(--bos-ink)} .bos-search::placeholder{color:var(--bos-faint)} /* ── Assetcard: vaste anatomie. Geen knoppen op de kaart — selectie is de kaart zelf, de actie staat in de gate. Dat scheelde 21 knoppen. ─────── */ .bos-assets{display:grid;grid-template-columns:repeat(var(--bos-cols,4),1fr);gap:var(--bos-s4)} .bos-asset{background:var(--bos-surface);border:1px solid var(--bos-line);border-radius:var(--bos-r); overflow:hidden;cursor:pointer;transition:box-shadow .12s,border-color .12s} .bos-asset:hover{border-color:var(--bos-line2)} .bos-asset.sel{border-color:var(--bos-a1);box-shadow:0 0 0 2px var(--bos-a-soft)} .bos-asset .im{height:158px;background:var(--bos-surface3);display:grid;place-items:center; color:var(--bos-faint);font-size:12.5px;position:relative;background-size:cover;background-position:center} .bos-asset .chk{position:absolute;top:8px;left:8px;width:19px;height:19px;border-radius:5px; border:1.5px solid var(--bos-line2);background:rgba(255,255,255,.92)} .bos-asset.sel .chk{background:var(--bos-a1);border-color:var(--bos-a1)} .bos-asset .st{position:absolute;top:8px;right:8px;font-size:11px;font-weight:600;padding:2px 7px; border-radius:20px;background:rgba(255,255,255,.94);color:var(--bos-muted)} .bos-asset .st.live{color:var(--bos-green)} .bos-asset .st.win{background:var(--bos-green);color:#fff} .bos-asset .b{padding:10px 12px} .bos-asset .t{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bos-asset .s{font-size:12.5px;color:var(--bos-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bos-asset .f{display:flex;gap:10px;font-size:12.5px;color:var(--bos-muted);margin-top:7px;font-variant-numeric:tabular-nums} .bos-asset .f b{font-weight:600;color:var(--bos-ink)} .bos-asset .f .none{color:var(--bos-faint)} /* ── Flag: staat bij het ding waar het over gaat, niet bovenaan de pagina. Een waarschuwing los van zijn onderwerp is ruis. ──────────────────────── */ .bos-flag{border-radius:var(--bos-r-sm);padding:9px 12px;font-size:13.5px;display:flex;gap:10px;align-items:center} .bos-flag.bad{background:var(--bos-red-soft);color:var(--bos-red)} .bos-flag.wait{background:var(--bos-amber-soft);color:var(--bos-amber)} .bos-flag.ok{background:var(--bos-green-soft);color:var(--bos-green)} .bos-flag button,.bos-flag a{margin-left:auto;background:none;border:0;color:inherit; font:600 13.5px var(--bos-ui);cursor:pointer;text-decoration:underline;white-space:nowrap} /* ── Lege staat: wat het is, waarom het leeg is, en de knop die het vult. ─── */ .bos-empty{border:1px dashed var(--bos-line2);border-radius:var(--bos-r);padding:var(--bos-s6);text-align:center;background:var(--bos-surface2)} .bos-empty h3{font-size:16px;font-weight:620;margin-bottom:4px} .bos-empty p{color:var(--bos-faint);font-size:14px;max-width:42ch;margin:0 auto var(--bos-s4)} /* ── Skeleton: de vorm van wat er komt, zodat het scherm niet verspringt. ─── */ .bos-sk{background:linear-gradient(90deg,var(--bos-surface3) 25%,var(--bos-surface2) 50%,var(--bos-surface3) 75%); background-size:200% 100%;animation:bos-sh 1.3s ease-in-out infinite;border-radius:var(--bos-r-sm)} @keyframes bos-sh{0%{background-position:200% 0}100%{background-position:-200% 0}} .bos-sk.line{height:13px;margin-bottom:8px} .bos-sk.tile{height:158px;border-radius:var(--bos-r) var(--bos-r) 0 0} /* ── Toast ────────────────────────────────────────────────────────────────── */ .bos-toasts{position:fixed;right:var(--bos-s5);bottom:var(--bos-s5);display:grid;gap:var(--bos-s2);z-index:60} .bos-toast{background:var(--bos-ink);color:var(--bos-bg);border-radius:var(--bos-r-sm);padding:11px 14px; font-size:14px;box-shadow:var(--bos-shadow);display:flex;gap:var(--bos-s3);align-items:center;max-width:380px} .bos-toast.bad{background:var(--bos-red);color:#fff} .bos-toast button{background:none;border:0;color:inherit;font:600 13.5px var(--bos-ui); text-decoration:underline;cursor:pointer;margin-left:auto;white-space:nowrap} /* ── Sheet: zijpaneel voor detail. Een modal is alleen voor iets onomkeerbaars. */ .bos-sheet-bg{position:fixed;inset:0;background:rgba(15,18,30,.34);z-index:50} .bos-sheet{position:fixed;top:0;right:0;bottom:0;width:min(520px,92vw);background:var(--bos-surface); border-left:1px solid var(--bos-line);z-index:51;display:flex;flex-direction:column} .bos-sheet>header{padding:var(--bos-s4) var(--bos-s5);border-bottom:1px solid var(--bos-line);display:flex;align-items:center;gap:var(--bos-s3)} .bos-sheet>.b{padding:var(--bos-s5);overflow:auto;flex:1} /* ── Details: alleen voor wat je bijna nooit nodig hebt, en de samenvatting zegt WAT erin zit — niet enkel een pijltje. ──────────────────────────── */ .bos-det{border:1px solid var(--bos-line);border-radius:var(--bos-r-sm);background:var(--bos-surface)} .bos-det>summary{padding:10px var(--bos-s3);cursor:pointer;font-size:14px;color:var(--bos-muted);list-style:none;display:flex;gap:var(--bos-s2);align-items:center} .bos-det>summary::-webkit-details-marker{display:none} .bos-det>summary::before{content:"▸";color:var(--bos-faint);font-size:11px} .bos-det[open]>summary::before{content:"▾"} .bos-det>summary:hover{color:var(--bos-ink)} .bos-det>.b{padding:0 var(--bos-s3) var(--bos-s3);font-size:14px;color:var(--bos-muted)} /* ── Tabel ────────────────────────────────────────────────────────────────── */ .bos-tbl{width:100%;border-collapse:collapse;font-size:14px} .bos-tbl th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--bos-faint);font-weight:600;padding:9px var(--bos-s4);border-bottom:1px solid var(--bos-line)} .bos-tbl td{padding:11px var(--bos-s4);border-bottom:1px solid var(--bos-line)} .bos-tbl tr:last-child td{border-bottom:0} .bos-tbl td.num{text-align:right;font-variant-numeric:tabular-nums} .bos-tbl .k{color:var(--bos-faint);width:110px} .bos-tbl .act{text-align:right;width:90px} .bos-tbl .act button{background:none;border:0;color:var(--bos-a1);font:600 13.5px var(--bos-ui);cursor:pointer;opacity:0} .bos-tbl tr:hover .act button{opacity:1} /* In donker is het accent lichter dan het oppervlak. Witte tekst op een lichte paarse knop haalt het contrast niet; donkere inkt erop wel. */ html[data-theme="dark"] .bos-btn.p{color:#0b0c10} html[data-theme="dark"] .bos-asset .chk{background:rgba(20,22,30,.9)} /* De neutrale statuspil krijgt in donker een donkere achtergrond. NIET .win: die is groen omdat groen hier iets betekent (goed / winnaar), en deze regel won op specificiteit -- (0,3,1) tegen (0,3,0) -- waardoor het groen in donker verdween en er een neutrale chip overbleef. De badge bleef leesbaar, dus je ziet het niet als een fout; je ziet alleen het signaal niet meer. */ html[data-theme="dark"] .bos-asset .st:not(.win){background:rgba(20,22,30,.92)}