/* darkmux shared shell — design tokens + top-strip layout * * Pages mount at the top of . The shell * renders brand, tab nav, and a pill row (page-contributed). This file * is the source of truth for cross-page design tokens; page-specific * overrides set [data-page=""] on . * * Per #168. */ :root { /* Base palette — Flow page baseline (deep near-black) */ --bg: #0a0a0b; --bg-elev: #131316; --bg-elev2: #1c1c22; --border: #1f1f24; --border-hot:#2a8a96; --text: #e8e6e3; --muted: #8a8a92; --dim: #5a5a62; --accent: #6df1ff; --accent-dim:#2a8a96; --warn: #ffb86b; --good: #5af0a3; --bad: #ff6b85; /* tier colors */ --tier-operator: #6df1ff; --tier-frontier: #c084fc; --tier-local: #5af0a3; /* level colors */ --lvl-error: #ff6b85; --lvl-warn: #ffb86b; --lvl-info: #e8e6e3; --lvl-debug: #8a8a92; --lvl-trace: #5a5a62; } /* Lab page — lighter "lab paper" surface; the React-Flow canvas reads * better against a slightly elevated grey. */ html[data-page="lab"] { --bg: #181820; --bg-elev: #0a0a0d; --bg-elev2: #14141a; --border: #2a2a34; } /* ─── shell strip ─────────────────────────────────────────────────── */ dx-shell { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px; background: var(--bg-elev); border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 100; position: relative; font: 14px/1.5 'Inter', system-ui, -apple-system, sans-serif; color: var(--text); } dx-shell .dx-shell-brand { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-decoration: none; flex-shrink: 0; } dx-shell .dx-shell-brand .accent { color: var(--accent); } dx-shell .dx-shell-brand:hover { color: var(--text); } dx-shell .dx-shell-tabs { display: flex; gap: 4px; flex-shrink: 0; } dx-shell .dx-shell-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-radius: 4px; transition: color 0.12s, border-color 0.12s, background 0.12s; position: relative; } dx-shell .dx-shell-tab:hover { color: var(--accent); background: var(--bg-elev2); } dx-shell .dx-shell-tab[aria-current="page"] { color: var(--accent); background: var(--bg-elev2); border-color: var(--accent-dim); } dx-shell .dx-shell-tab[aria-current="page"]::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: var(--accent); border-radius: 1px; } dx-shell .dx-shell-pills { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ─── shared pill base (used by the store-status pill in ) — */ /* Existing per-page pills (conn-status, model-pill, sprint-progress) keep * their original classes; .dx-pill is the new shared shape. */ .dx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--border); color: var(--muted); background: transparent; cursor: pointer; user-select: none; font-family: inherit; transition: border-color 0.12s, color 0.12s; } .dx-pill:hover { border-color: var(--accent-dim); color: var(--accent); } .dx-pill:focus { outline: 1px solid var(--accent-dim); outline-offset: 1px; } /* ─── store-status pill — colored dot reflects substrate health */ .dx-store-pill .dx-store-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex-shrink: 0; } .dx-store-pill.good .dx-store-dot { background: var(--good); } .dx-store-pill.warn .dx-store-dot { background: var(--warn); } .dx-store-pill.bad .dx-store-dot { background: var(--bad); } .dx-store-pill.offline .dx-store-dot { background: var(--dim); } .dx-store-pill.good { color: var(--good); border-color: var(--good); } .dx-store-pill.warn { color: var(--warn); border-color: var(--warn); } .dx-store-pill.bad { color: var(--bad); border-color: var(--bad); } .dx-store-pill.offline { color: var(--muted); } .dx-store-pill .dx-store-label { font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; } /* ─── shared modal infrastructure (used by the store-status detail) */ .dx-modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .dx-modal { background: var(--bg-elev); border: 1px solid var(--border-hot); border-radius: 6px; padding: 24px 28px; max-width: 560px; width: 100%; position: relative; color: var(--text); font-size: 13px; line-height: 1.55; } .dx-modal h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .dx-modal-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; } .dx-modal-close:hover { color: var(--accent); } .dx-modal .dx-kv { display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 6px; margin: 0; } .dx-modal .dx-kv dt { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; } .dx-modal .dx-kv dd { margin: 0; word-break: break-all; } .dx-modal code { background: var(--bg-elev2); padding: 1px 5px; border-radius: 2px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .dx-modal .dx-warn { color: var(--warn); margin: 14px 0 0; } .dx-modal .dx-fail { color: var(--bad); margin: 14px 0 0; } .dx-modal .dx-hint { color: var(--muted); font-size: 12px; margin: 14px 0 0; } /* Page-level :root blocks in /flow/, /lab/, /topology/ currently * re-declare these same tokens (matching values). The duplication is * a known cleanup item — consolidating into this file is the next * pass once Step 2 stabilizes the consumers. Tracked under #168. */ /* ─── narrow viewport ─────────────────────────────────────────────── */ @media (max-width: 720px) { dx-shell { padding: 0 12px; gap: 8px; } dx-shell .dx-shell-brand { font-size: 11px; letter-spacing: 0.12em; } dx-shell .dx-shell-tab { padding: 6px 10px; font-size: 12px; } }