diff --git a/design/v1-operator-console.html b/design/v1-operator-console.html index d947527..36b9395 100644 --- a/design/v1-operator-console.html +++ b/design/v1-operator-console.html @@ -106,6 +106,54 @@ } .components-section { margin: 64px 0 96px; } .components-section h2 { font-size: 14px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; } + + /* Single source of truth for the host-row grid. The "last backup" + column was previously 1.1fr — too narrow for "backup running…" + to fit on one line. Bumped to 1.5fr; trimmed name to compensate. */ + .host-row { + display: grid; align-items: center; + grid-template-columns: 24px 1.4fr 0.95fr 1.5fr 0.75fr 0.7fr 0.7fr 1.1fr 92px; + padding: 11px 16px; font-size: 13px; + /* Reserve the 3px the row-accent will live in so degraded/failed + rows don't shift sideways relative to healthy ones. */ + border-left: 3px solid transparent; + } + .host-row.head { padding-top: 10px; padding-bottom: 10px; font-size: 11px; color: var(--ink-fade); text-transform: uppercase; letter-spacing: 0.08em; border-left-width: 3px; } + .host-row.degraded { border-left-color: color-mix(in oklch, var(--warn), transparent 50%); } + .host-row.failed { border-left-color: color-mix(in oklch, var(--bad), transparent 50%); } + .host-row.offline { border-left-color: color-mix(in oklch, var(--off), transparent 70%); } + + /* Empty state: full-bleed quiet panel inside the stage. */ + .empty-state { + text-align: center; padding: 88px 32px 96px; + border: 1px dashed var(--line); border-radius: 8px; + background: + radial-gradient(ellipse at top, color-mix(in oklch, var(--accent), transparent 95%), transparent 60%), + var(--panel); + } + .empty-state h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; } + .empty-state p { + color: var(--ink-mid); max-width: 520px; margin: 12px auto 0; + line-height: 1.65; font-size: 13px; text-wrap: pretty; + } + .empty-state .install-card { + max-width: 640px; margin: 28px auto 0; + text-align: left; background: var(--bg); + border: 1px solid var(--line-soft); border-radius: 6px; + overflow: hidden; + } + .empty-state .install-card-head { + font-size: 11px; color: var(--ink-fade); + padding: 10px 14px; border-bottom: 1px solid var(--line-soft); + display: flex; justify-content: space-between; align-items: center; + text-transform: uppercase; letter-spacing: 0.1em; + } + .empty-state .install-card pre { + margin: 0; padding: 14px; font-family: 'JetBrains Mono', monospace; + font-size: 12px; color: var(--ink-mid); line-height: 1.7; + white-space: pre-wrap; word-break: break-all; + } + .empty-state .install-card pre .var { color: var(--accent); }
@@ -218,7 +266,7 @@