/* Breakingbits studio — gedeelde beheeromgeving van alle apps (laad na base.css). Werkschaal voor dagelijks gebruik op een desktop: 14px tekst, velden en knoppen van 32px, 1px-lijnen. Blauwe bovenbalk met menu's, lichte werkvlakken. Alles hangt onder body.studio; de publieke sites (die alleen tokens.css en base.css laden) veranderen niet. App-specifieke componenten staan in de CSS van de app zelf. */ /* ---------- Schaal en kleuren ---------- */ body.studio { --space-1: 4px; --space-2: 12px; --space-3: 20px; --space-4: 32px; --space-5: 48px; --border-thin: 1px; --border-heavy: 3px; --max: 1440px; --bar: 48px; --ctl: 32px; --line: #d3dcf3; --line-strong: #a9b7de; --muted: #56648c; --soft: #e3e9f7; --select: #fbe3f9; background: var(--paper); color: var(--surface-deep); font-size: 14px; line-height: 1.45; min-height: 100vh; } html:has(> body.studio) { background: var(--paper); } /* Ankers niet onder de vaste bovenbalk laten verdwijnen. */ body.studio [id] { scroll-margin-top: calc(var(--bar) + 12px); } body.studio p { max-width: 72em; } .ic { width: 16px; height: 16px; flex: none; } /* Typografie in werkschaal */ body.studio h1 { font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; } body.studio .display { font-size: 28px; } body.studio .h1 { font-size: 22px; } body.studio .h2 { font-size: 17px; } body.studio .h3 { font-size: 15px; line-height: 1.3; font-weight: 900; } body.studio .lead { font-size: 15px; } body.studio .small, body.studio .body-sm { font-size: 12.5px; line-height: 1.45; } body.studio .label, body.studio .mono { font-size: 11px; } body.studio .muted { opacity: 1; color: var(--muted); } body.studio .section-title { font-size: 15px; border-bottom-width: var(--border-heavy); } body.studio code { font-size: .92em; } /* Knoppen: mono-hoofdletters, 32px */ body.studio .button { font-size: 11.5px; line-height: 1; letter-spacing: .03em; padding: 0 12px; min-height: var(--ctl); gap: 6px; border-width: 1px; } /* Op de lichte werkvlakken is de standaardknop blauw (in base.css is hij wit, voor blauwe vlakken). */ body.studio .button { color: var(--panel); background: var(--on-panel); border-color: var(--on-panel); } body.studio .button--ghost { background: transparent; color: var(--on-panel); border-color: currentColor; } body.studio .button--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } body.studio .button--live { background: var(--live); color: var(--on-live); border-color: var(--live); } body.studio .button--danger { background: transparent; color: var(--danger); border-color: var(--danger); } body.studio .button:hover { text-decoration: none; filter: brightness(1.12); } body.studio .button--ghost:hover { filter: none; background: var(--soft); } body.studio .button--small { font-size: 10.5px; padding: 0 9px; min-height: 26px; } body.studio .button .ic { width: 14px; height: 14px; } body.studio .button--quiet { background: transparent; border-color: transparent; color: var(--muted); } body.studio .button--quiet:hover { background: var(--soft); color: var(--surface-deep); } body.studio .link { font-size: 11.5px; } /* Vlakken */ body.studio .panel { padding: 14px 16px; box-shadow: 0 0 0 1px var(--line); } body.studio .card { padding: 10px 12px; } body.studio .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); } body.studio .tag { font-size: 10.5px; line-height: 12px; padding: 2px 5px; } body.studio .notice { padding: 8px 12px; border-left-width: var(--border-heavy); font-size: 13px; } /* Formulieren */ body.studio .field { gap: 4px; } body.studio .field > label, body.studio .field > .field-label, body.studio fieldset legend { font-size: 11px; } body.studio .field .hint { font-size: 12px; color: var(--muted); opacity: 1; } body.studio .field input:not([type=checkbox]):not([type=radio]), body.studio .field textarea, body.studio .field select { font-size: 14px; min-height: var(--ctl); padding: 5px 9px; border: 1px solid var(--line-strong); } body.studio .field textarea { min-height: 72px; } body.studio .field textarea.code { font-size: 12.5px; min-height: 180px; } body.studio .field input:focus-visible, body.studio .field textarea:focus-visible, body.studio .field select:focus-visible, body.studio .input:focus-visible { outline: none; border-color: var(--on-panel); box-shadow: 0 0 0 2px var(--select); } body.studio .field input[type=color] { height: var(--ctl); width: 48px; } body.studio .input { font: inherit; font-size: 14px; min-height: var(--ctl); padding: 5px 9px; border: 1px solid var(--line-strong); background: #fff; color: var(--on-panel); border-radius: 0; } body.studio .check { font-size: 13.5px; gap: 8px; align-items: center; } body.studio .check input { width: 15px; height: 15px; margin: 0; } body.studio fieldset { padding: 10px 12px; border-color: var(--line); gap: 4px; } body.studio .form-grid { gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } body.studio .actions { gap: 6px; } /* Label links, veld rechts: rustige formulieren met veel velden. */ .form-rows { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 10px 20px; align-items: start; } .form-rows > .form-rows__label { padding-top: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } .form-rows > .form-rows__full { grid-column: 1 / -1; } @media (max-width: 700px) { .form-rows { grid-template-columns: 1fr; } .form-rows > .form-rows__label { padding-top: 0; } } /* Gesegmenteerde keuze (radio's als knoppen) */ .seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); background: #fff; } .seg label { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 12px; font-size: 13px; cursor: pointer; } .seg label + label { border-left: 1px solid var(--line-strong); } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label:has(input:checked) { background: var(--on-panel); color: var(--panel); font-weight: 700; } .seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; } /* Lijst met keuzes in kolommen */ .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 24px; } .opts .check { padding: 3px 0; } .opts code { margin-left: auto; color: var(--muted); font-size: 11px; } /* ---------- Bovenbalk ---------- */ .appbar { position: sticky; top: 0; z-index: 30; height: var(--bar); display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--surface); color: var(--ink); } .appbar__mark { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 900; font-size: 15px; white-space: nowrap; } .logo-square { display: inline-grid; place-content: center; width: 26px; height: 26px; background: var(--label); color: var(--surface); font: 800 12px/1 var(--font-mono); flex: none; } .appbar__nav { display: flex; align-items: center; gap: 2px; height: 100%; min-width: 0; } .appbar__nav > a, .appbar__nav > .menu > summary { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; color: inherit; text-decoration: none; font: 700 12.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; border-bottom: 3px solid transparent; border-top: 3px solid transparent; cursor: pointer; white-space: nowrap; } .appbar__nav > a[aria-current], .appbar__nav > .menu.is-active > summary { border-bottom-color: var(--label); } .appbar__nav > a:hover, .appbar__nav > .menu > summary:hover, .appbar__nav > .menu[open] > summary { background: rgb(255 255 255 / 9%); } .appbar__end { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 100%; } .appbar .button--accent { min-height: 30px; } .appbar .menu--tenant > summary, .appbar .menu--account > summary, .appbar .menu--apps > summary { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; font-weight: 700; font-size: 13px; white-space: nowrap; } .appbar .menu--tenant > summary:hover, .appbar .menu--account > summary:hover, .appbar .menu--apps > summary:hover, .appbar .menu[open] > summary { background: rgb(255 255 255 / 12%); } .appbar .menu--apps .ic { width: 20px; height: 20px; } .appbar__nav > .menu > summary > .ic:first-child { display: none; } @media (max-width: 860px) { .appbar .menu__label, .appbar__mark span:not(.logo-square) { display: none; } .appbar__nav > a, .appbar__nav > .menu > summary { padding: 0 8px; } } @media (max-width: 640px) { .appbar { gap: 6px; padding: 0 8px; } .appbar__label, .appbar__nav > .menu > summary > .ic:last-child { display: none; } .appbar__nav > .menu > summary > .ic:first-child { display: block; } .appbar__nav > a, .appbar__nav > .menu > summary { padding: 0 6px; font-size: 11.5px; } .appbar__end { gap: 2px; } .appbar .menu--tenant > summary .ic { display: none; } .menu__panel { max-width: calc(100vw - 16px); } } /* ---------- Uitklapmenu (details/summary) ---------- */ .menu { position: relative; height: 100%; display: flex; align-items: center; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary .ic:last-child { width: 14px; height: 14px; opacity: .8; } .menu__panel { position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px; z-index: 40; padding: 6px; background: var(--panel); color: var(--surface-deep); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(21 39 90 / 20%); text-transform: none; letter-spacing: 0; } .appbar .menu__panel { top: calc(100% - 2px); } .menu[data-align=end] .menu__panel { left: auto; right: 0; } .menu__panel a, .menu__panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; color: inherit; text-decoration: none; font: 500 13.5px/1.3 var(--font-sans); background: none; border: 0; cursor: pointer; text-align: left; } .menu__panel a:hover, .menu__panel button:hover { background: var(--soft); } .menu__panel a[aria-current] { background: var(--soft); font-weight: 700; } .menu__panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; } .menu__panel form { margin: 0; } .menu__head { margin: 0; padding: 6px 10px 8px; font-weight: 700; font-size: 13px; } .menu__meta { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 500; } .menu__head .menu__meta { margin: 0; } .brandmark { display: inline-grid; place-content: center; width: 22px; height: 22px; background: var(--surface); color: var(--ink); font: 800 9.5px/1 var(--font-mono); flex: none; } .appbar summary .brandmark { background: var(--ink); color: var(--surface); } .avatar { display: inline-grid; place-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--label); color: var(--surface); font: 800 11px/1 var(--font-sans); } /* App-wisselaar */ .menu--apps .menu__panel { width: 320px; } .apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .menu__panel .apps__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 10px; } .apps__icon { grid-row: 1 / 3; display: inline-grid; place-content: center; width: 36px; height: 36px; background: var(--surface); color: var(--ink); } .apps__icon .ic { width: 20px; height: 20px; } .apps__name { font-weight: 800; font-size: 13px; } .apps__desc { font-size: 11.5px; color: var(--muted); } .menu__panel .apps__item[aria-current] { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line-strong); } /* ---------- Pagina ---------- */ .studio-main { padding-block: 12px 48px; } .studio-main > .wrap { display: grid; gap: var(--space-2); } .studio-main--full { padding: 0; } .breadcrumbs { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .breadcrumbs .wrap { padding: 0; max-width: none; } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; } .breadcrumbs a { color: inherit; text-decoration: none; } .breadcrumbs a:hover { color: var(--surface-deep); text-decoration: underline; } /* Paginakop: één regel met titel, status en acties. */ .page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; min-height: 36px; } .page-head h1 { font-size: 20px; } .page-head > .stack-sm { gap: 0; } .page-head .label { font-size: 10.5px; color: var(--muted); } .page-head__intro { flex-basis: 100%; color: var(--muted); font-size: 13px; margin-top: -4px; } body.studio .label { color: var(--on-panel); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-items: start; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } /* Werkvlak met een breed hoofddeel en een smallere kolom ernaast. */ .split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: var(--space-2); align-items: start; } .grid-2 > *, .grid-3 > *, .split > * { min-width: 0; } @media (max-width: 1000px) { .grid-2, .split { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } } /* Leesbare breedte voor formulieren op brede schermen. */ .narrow { max-width: 860px; } /* Paneel met een kop (titel links, actie rechts) */ .panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -14px -16px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); } .panel__head h2, .panel__head h3 { font-size: 15px; font-weight: 900; } .panel__head > :last-child:not(:first-child) { margin-left: auto; } .panel--flush { padding: 0; } .panel--flush > .panel__head { margin: 0; } .panel__intro { color: var(--muted); font-size: 13px; } /* ---------- Tabellen ---------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data caption { text-align: left; font-weight: 900; font-size: 15px; padding-bottom: 6px; } table.data th, table.data td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.data th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom-color: var(--line-strong); white-space: nowrap; } table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; } table.data tbody tr:hover td { background: #f6f8fd; } table.data tr.is-selected td { background: var(--select); } .panel--flush table.data th:first-child, .panel--flush table.data td:first-child { padding-left: 16px; } .panel--flush table.data th:last-child, .panel--flush table.data td:last-child { padding-right: 16px; } .secret { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; } .secret code, .copy-value { font-family: var(--font-mono); font-size: 12px; background: var(--paper); padding: 6px 8px; border: 1px solid var(--line); overflow-wrap: anywhere; flex: 1 1 260px; min-width: 0; } dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 13px; } dl.facts dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; font-weight: 700; padding-top: 2px; color: var(--muted); } dl.facts dd { margin: 0; min-width: 0; } @media (max-width: 640px) { dl.facts { grid-template-columns: 1fr; } dl.facts dt { padding-top: 0; } } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 640px) { .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.studio .stat__value { font-size: 22px; } body.studio .stat__label { font-size: 10.5px; color: var(--muted); } body.studio .spark { height: 36px; } /* Spelers niet hoger dan een deel van het scherm (de video past zich in). */ body.studio .player { max-height: 52vh; } .status-big { display: flex; align-items: center; gap: var(--space-1) var(--space-2); flex-wrap: wrap; } .swatches { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .swatch-preview { padding: var(--space-2); display: grid; gap: 4px; border: 1px solid var(--line); } .login { min-height: 100vh; display: grid; place-content: center; padding: var(--space-2); background: var(--surface); } .login .panel { width: min(400px, 100vw - 32px); display: grid; gap: var(--space-2); padding: 24px; } body.studio .login h1 { font-size: 22px; } .or { text-align: center; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--muted); } /* ---------- Tabs ---------- Als links (