/* ============================================================ RMM REGIEKAMER — gedeeld thema (donker + licht) Huisstijl afgeleid van de lower thirds: navy #002855 · Focus-WTV blauw #007dd6 · groen #1DDB8B Thema kiezen: (zie rmm-theme.js) ============================================================ */ :root { --rmm-navy: #002855; --rmm-blue: #007dd6; --rmm-green: #1ddb8b; --bg: #06101c; --bg2: #0b1929; --bg3: #112338; --bg4: #172e48; --border: #1f3a58; --border2: #2b4d72; --text: #e7eef7; --text2: #9fb3c9; --text3: #6982a0; --accent: #1a8fe6; --accent2: #007dd6; --accent-bg: rgba(26,143,230,.14); --ok: #1ddb8b; --ok-bg: rgba(29,219,139,.12); --warn: #f5a524; --warn-bg: rgba(245,165,36,.13); --danger: #ef4d56; --danger-bg: rgba(239,77,86,.13); --pgm: #ef4d56; --pvw: #1ddb8b; --tab-bg: #002855; --tab-text: #ffffff; --shadow: 0 8px 28px rgba(0,0,0,.45); --radius: 6px; --mono: 'Cascadia Mono', Consolas, 'SF Mono', monospace; /* legacy aliassen voor bestaande pagina's */ --red: var(--danger); --green: #16a34a; --orange: #ea580c; --yellow: #ca8a04; --purple: #7c3aed; color-scheme: dark; } :root[data-theme="light"] { --bg: #eef3f8; --bg2: #ffffff; --bg3: #f2f6fa; --bg4: #e3ebf3; --border: #cfdbe7; --border2: #b4c6d8; --text: #0a1e33; --text2: #3c5570; --text3: #6a8098; --accent: #0068b8; --accent2: #005aa0; --accent-bg: rgba(0,104,184,.10); --ok: #0b8f5a; --ok-bg: rgba(11,143,90,.10); --warn: #a86500; --warn-bg: rgba(168,101,0,.10); --danger: #c42b35; --danger-bg: rgba(196,43,53,.09); --pgm: #c42b35; --pvw: #0b8f5a; --tab-bg: #002855; --tab-text: #ffffff; --shadow: 0 8px 24px rgba(10,30,51,.14); color-scheme: light; } /* ── Basis ─────────────────────────────────────────────────── */ .rmm *, .rmm *::before, .rmm *::after { box-sizing: border-box; } body.rmm { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 'Segoe UI', system-ui, -apple-system, sans-serif; } .rmm button, .rmm input, .rmm select, .rmm textarea { font: inherit; color: inherit; } .rmm ::selection { background: var(--accent-bg); } .rmm :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── Topbalk ───────────────────────────────────────────────── */ .rmm-top { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; background: var(--bg2); border-bottom: 1px solid var(--border); position: relative; z-index: 60; } /* Merk in de kop: geen blokjes, gewoon het beeldmerk, het woordmerk met zijn stipje, en daarachter waar je bent. */ .rmm-brand { --wm: 20px; /* maat van het woordmerk */ display: flex; align-items: baseline; gap: 9px; flex-shrink: 0; text-decoration: none; color: var(--text); } .rmm-brand .b-mark { display: block; } /* Het merk is even hoog als de kleine letters van "cadans" - de x-hoogte van Segoe UI ligt rond 0,5 em - en staat met zijn onderkant op dezelfde lijn. Daarom draagt het hier een eigen, bredere en zwaardere snede: de gewone verhoudingen van het beeldmerk worden op deze maat te dun om te lezen. */ .rmm-brand .b-mark svg { display: block; height: calc(var(--wm) * .52); width: auto; } .rmm-brand .b-mark svg .nu { fill: var(--accent); } .rmm-brand .wm { font-weight: 700; font-size: var(--wm); line-height: 1; letter-spacing: -.035em; color: var(--text); } .rmm-brand .wm .punt { color: var(--accent); font-style: normal; } .rmm-brand .sectie { font-size: 13px; font-weight: 500; color: var(--text3); } .rmm-brand .lok { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--accent); } .rmm-top .grow { flex: 1; } .rmm-clock { font: 700 20px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: .5px; } .rmm-clock-sub { font-size: 10px; color: var(--text3); text-align: right; } /* ── Knoppen ───────────────────────────────────────────────── */ .rbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s; } .rbtn:hover { border-color: var(--border2); background: var(--bg4); } .rbtn:active { transform: translateY(1px); } .rbtn:disabled { opacity: .45; cursor: not-allowed; } .rbtn.sm { padding: 3px 8px; font-size: 11px; } .rbtn.icon { padding: 5px 8px; } .rbtn.primary { background: var(--accent2); border-color: var(--accent2); color: #fff; } .rbtn.primary:hover { background: var(--accent); } .rbtn.go { background: var(--ok); border-color: var(--ok); color: #03281a; font-size: 15px; padding: 9px 22px; letter-spacing: .5px; } :root[data-theme="light"] .rbtn.go { color: #fff; } .rbtn.go:hover { filter: brightness(1.08); } .rbtn.danger { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .rbtn.ghost { background: transparent; } .rbtn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } /* ── Statuspillen (kop) ────────────────────────────────────── */ .pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg3); color: var(--text2); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; } .pill:hover { border-color: var(--border2); color: var(--text); } .pill b { color: var(--text); font-variant-numeric: tabular-nums; } .pill.bad { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); } .pill.bad b { color: var(--danger); } .pill.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); } .pill.good { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex-shrink: 0; } .dot.ok { background: var(--ok); } .dot.bad { background: var(--danger); animation: rmmPulse 1.2s infinite; } .dot.warn { background: var(--warn); } .dot.off { background: var(--text3); } @keyframes rmmPulse { 50% { opacity: .35; } } .pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 260px; z-index: 80; background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; display: none; color: var(--text); font-weight: 400; cursor: default; } .pop.open { display: block; } .pop-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 5px; font-size: 12px; } .pop-row:hover { background: var(--bg3); } .pop-row .sub { color: var(--text3); font-size: 11px; } .pop-title { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--text3); padding: 6px 8px 4px; } /* ── Panelen & sectiekoppen met "tab" ──────────────────────── */ .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; } .sect { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; background: var(--bg3); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text2); } .sect::before { content: ''; width: 4px; height: 14px; border-radius: 1px; background: var(--rmm-blue); box-shadow: 4px 0 0 var(--rmm-green); margin-right: 6px; } .sect .grow { flex: 1; } .sect.sticky { position: sticky; top: 0; z-index: 5; } /* ── Tabs ──────────────────────────────────────────────────── */ .tabs { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; } .tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-radius: 5px; border: 0; background: transparent; color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .tab:hover { color: var(--text); background: var(--bg3); } .tab.active { background: var(--bg4); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); } .tab .cnt { font-size: 10px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bg3); color: var(--text2); font-variant-numeric: tabular-nums; } .tab.active .cnt { background: var(--accent); color: #fff; } /* ── Chips ─────────────────────────────────────────────────── */ .chip { --c: var(--text3); display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; max-width: 100%; background: color-mix(in srgb, var(--c) 14%, transparent); color: color-mix(in srgb, var(--c) 78%, var(--text)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); } :root[data-theme="light"] .chip { color: color-mix(in srgb, var(--c) 45%, #0a1e33); background: color-mix(in srgb, var(--c) 11%, #fff); border-color: color-mix(in srgb, var(--c) 40%, transparent); } :root[data-theme="light"] .chip.solid { background: var(--c); color: #fff; } .chip .k { font-weight: 500; opacity: .7; } .chip.warn { --c: var(--warn); } .chip.bad { --c: var(--danger); } .chip.ok { --c: var(--ok); } .chip.info { --c: var(--accent); } .chip.solid { background: var(--c); color: #fff; border-color: transparent; } /* ── Formuliervelden ───────────────────────────────────────── */ .inp { height: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 12px; min-width: 0; } .inp:focus { outline: none; border-color: var(--accent); } textarea.inp { height: auto; padding: 6px 8px; resize: vertical; } select.inp { padding-right: 4px; cursor: pointer; } .inp.num { width: 70px; text-align: right; font-variant-numeric: tabular-nums; } /* ── Log ───────────────────────────────────────────────────── */ .log { font: 11px/1.6 var(--mono); padding: 6px 10px; overflow-y: auto; } .log .l { color: var(--text2); white-space: pre-wrap; word-break: break-word; } .log .l.ok { color: var(--ok); } .log .l.err { color: var(--danger); } .log .l .ts { color: var(--text3); } /* ── Diversen ──────────────────────────────────────────────── */ .muted { color: var(--text3); } .empty { padding: 28px 16px; text-align: center; color: var(--text3); } .spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: rmmSpin .6s linear infinite; vertical-align: middle; } @keyframes rmmSpin { to { transform: rotate(360deg); } } .kbd { font: 10px var(--mono); padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text2); } .scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } .theme-toggle { width: 30px; height: 28px; padding: 0; justify-content: center; font-size: 14px; } .toast-wrap { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .toast { background: var(--bg2); border: 1px solid var(--border2); border-left: 4px solid var(--accent); border-radius: 6px; padding: 9px 14px; box-shadow: var(--shadow); font-size: 12px; max-width: 360px; } .toast.err { border-left-color: var(--danger); } .toast.ok { border-left-color: var(--ok); }