/* iotta Operator UI — a single dependency-free stylesheet. Light/dark aware via color-scheme; all accents derive from a couple of variables. No framework. Theme is driven by [data-theme] on ; defaults to system preference. */ :root { color-scheme: light dark; --accent: #3b82f6; --danger: #dc2626; --success: #16a34a; /* Surfaces + text are defined per-theme (below) rather than left to the UA's Canvas colours, so dark mode is a soft slate instead of harsh pure black. */ --bg: #fcfcfd; --fg: #1d2025; --panel: #f3f4f6; --line: #1d202522; --soft: #1d20250c; } @media (prefers-color-scheme: dark) { :root { --bg: #1b1e23; --fg: #ccd2d9; --panel: #24282f; --line: #ffffff26; --soft: #ffffff12; } } /* Explicit theme choices win over the system preference — declared after the @media block so source order resolves the tie. */ [data-theme="light"] { color-scheme: light; --bg: #fcfcfd; --fg: #1d2025; --panel: #f3f4f6; --line: #1d202522; --soft: #1d20250c; } [data-theme="dark"] { color-scheme: dark; --bg: #1b1e23; --fg: #ccd2d9; --panel: #24282f; --line: #ffffff26; --soft: #ffffff12; } * { box-sizing: border-box; } body { font: 15px/1.5 system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); } header { padding: .8rem 1.5rem; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; /* Keep the admin-token field + theme/locale toggles reachable on long pages. */ position: sticky; top: 0; z-index: 5; background: var(--bg); } h1 { font-size: 1.2rem; margin: 0; } .muted { opacity: .6; } .token { margin-left: auto; display: flex; gap: .4rem; align-items: center; } #status { font-size: .85rem; } #theme-toggle { font-size: 1.1rem; padding: .2rem .4rem; line-height: 1; } #theme-toggle:hover { background: var(--soft); border-color: var(--line); } #locale-toggle { font-size: .8rem; padding: .25rem .5rem; font-weight: 600; letter-spacing: .02em; } #locale-toggle:hover { background: var(--soft); border-color: var(--line); } input, select, textarea, button { font: inherit; } input, select, textarea { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: inherit; accent-color: var(--accent); } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } textarea { width: 100%; font-family: ui-monospace, monospace; resize: vertical; } button { padding: .35rem .8rem; cursor: pointer; border: 1px solid var(--line); border-radius: .4rem; background: var(--soft); color: inherit; } button:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } button:active { transform: translateY(1px); } button.primary { background: var(--accent); color: white; border-color: var(--accent); } button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); } button.danger { color: var(--danger); border-color: var(--danger); } button.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } /* Smooth interactions + a clear keyboard-focus ring (accessibility). */ a, button, input, select, textarea, nav a { transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.icon { border: none; background: none; font-size: 1rem; cursor: pointer; color: inherit; display: inline-flex; align-items: center; } button.icon svg { display: block; } /* ── layout ──────────────────────────────────────────────────────────────── */ .layout { display: flex; min-height: calc(100vh - 3.5rem); } nav { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .75rem; border-right: 1px solid var(--line); min-width: 9rem; } nav a { text-decoration: none; color: inherit; padding: .4rem .7rem; border-radius: .4rem; } nav a:hover { background: var(--soft); } nav a.active { background: var(--accent); color: white; } main { flex: 1; padding: 1.5rem; max-width: 70rem; } /* ── view scaffolding ────────────────────────────────────────────────────── */ .view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .view-head h2, .view-head h3 { margin: 0; } .view-head p { margin: .2rem 0 0; max-width: 70ch; } .toolbar { display: flex; gap: .5rem; flex-wrap: wrap; } .reg-block { margin-bottom: 2rem; } /* ── cards (overview) ────────────────────────────────────────────────────── */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .card { border: 1px solid var(--line); border-radius: .6rem; padding: 1rem; background: var(--panel); box-shadow: 0 1px 2px #0000000d; } .card h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .5rem; opacity: .7; } .card .big { font-size: 1.7rem; font-weight: 600; } /* ── tables ──────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); } th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; background: var(--soft); } tbody tr { transition: background-color .1s ease; } tbody tr:hover { background: var(--soft); } tbody tr:last-child td { border-bottom: none; } td code, code.hash { font-family: ui-monospace, monospace; font-size: .85em; } .row-actions { display: flex; gap: .4rem; flex-wrap: wrap; } .badge { display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 1rem; border: 1px solid var(--line); margin-right: .3rem; } .badge.active { border-color: var(--accent); color: var(--accent); } .badge.staged { opacity: .8; } .badge.danger { border-color: var(--danger); color: var(--danger); } .badge.ok { border-color: var(--success); color: var(--success); } .badge.warn { border-color: var(--danger); color: var(--danger); } .badge.info { border-color: var(--success); color: var(--success); opacity: .85; } .score-pass { color: var(--success); } .score-fail { color: var(--danger); } /* ── flash ───────────────────────────────────────────────────────────────── */ .flash { padding: .6rem .9rem; border-radius: .5rem; margin-bottom: 1rem; } .flash.ok { background: color-mix(in srgb, var(--accent) 15%, transparent); } .flash.error { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } /* ── forms / modal ───────────────────────────────────────────────────────── */ .stack { display: flex; flex-direction: column; gap: .8rem; } .field { display: flex; flex-direction: column; gap: .25rem; } .field span { font-size: .8rem; opacity: .8; } .field small { font-size: .72rem; } .field small.setting-key { font-family: ui-monospace, monospace; opacity: .5; } .field-hint { font-size: .72rem; opacity: .65; margin-top: .1rem; } .group-head { margin: .6rem 0 .2rem; font-size: .9rem; opacity: .85; } /* Form controls size to their content, not the full container width — a select or short input stretched edge-to-edge hurts legibility. Textareas stay full-width (set on the element) since they need the room. */ .field input, .field select { align-self: flex-start; width: 100%; max-width: 24rem; } .field select { max-width: 16rem; } /* The Settings editor is a readable column so its descriptions wrap comfortably. */ .settings-editor { max-width: 42rem; } .settings-editor .field input { max-width: 20rem; } .settings-editor .field select { max-width: 13rem; } /* Status chip — live/state feedback that must read as distinct from static prose (a coloured dot + chrome), not like another paragraph. */ .statusline { display: inline-flex; align-items: center; gap: .45rem; margin: .2rem 0 .6rem; padding: .35rem .7rem; border-radius: .5rem; background: var(--panel); border: 1px solid var(--line); font-size: .82rem; } .statusline::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: #9aa0a6; } .statusline.is-active::before { background: var(--success); } .modal-overlay { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 10; } .modal { background: var(--panel); border: 1px solid var(--line); border-radius: .6rem; max-width: min(56rem, 96vw); max-height: 90vh; overflow: auto; padding: 1.2rem; min-width: min(30rem, 92vw); box-shadow: 0 12px 40px #00000038; } .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; } .modal-head h3 { margin: 0; } pre.scroll { background: var(--soft); padding: .8rem; border-radius: .5rem; overflow: auto; max-height: 50vh; white-space: pre-wrap; word-break: break-word; } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .board-picker { display: flex; gap: .5rem; margin-bottom: 1.5rem; } /* ── demo placeholder ────────────────────────────────────────────────────── */ .demo-banner { font-size: .82rem; opacity: .7; border: 1px dashed var(--line); border-radius: .5rem; padding: .45rem .8rem; margin-bottom: .8rem; } .demo-section { opacity: .55; pointer-events: none; user-select: none; } /* ── traces ──────────────────────────────────────────────────────────────── */ .trace-detail .turn { border: 1px solid var(--line); border-radius: .5rem; margin: .6rem 0; padding: .4rem .8rem; } .trace-detail summary { cursor: pointer; font-weight: 600; } .turn-body { padding: .6rem 0 .2rem; } .turn-part { margin-bottom: .7rem; } .turn-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-bottom: .2rem; } .turn-part p { margin: 0; }