/* ===================================================================== * Legacy-page wrap overlay * * Pages that haven't been fully rewritten (ops.html, setup.html, * model-hub.html, device-capture.html, dashboard-legacy.html) get the * canonical sidebar+topbar+canvas shell injected at the top of and * load this stylesheet to retone their existing `.card`/`.grid`/`.value`/etc * classes to design-system tokens. * * Pair with: * *
* *
*
…
*
… ORIGINAL
CONTENT …
*
*
* ===================================================================== */ body.obds-app { background: var(--obds-bg) !important; color: var(--obds-text) !important; padding: 0 !important; margin: 0 !important; } body.obds-app main { max-width: none !important; padding: 0 !important; margin: 0 !important; } /* The legacy pages tend to wrap everything in a .grid or single section right inside
. Push padding into that container instead. */ body.obds-app main > .grid, body.obds-app main > .shell, body.obds-app main > section, body.obds-app main > article { padding: 32px; } /* === Card system retone === */ body.obds-app .card, body.obds-app .stat-card, body.obds-app .panel, body.obds-app .module-card, body.obds-app .chart-box, body.obds-app .loop-card, body.obds-app .email-card, body.obds-app .autonomy-level, body.obds-app .endpoint, body.obds-app .session-health-card, body.obds-app .execution-box, body.obds-app .insight-box, body.obds-app .mini-row, body.obds-app .slo-box, body.obds-app .device-card, body.obds-app .device-meta-box, body.obds-app .timeline-item, body.obds-app .journal-entry, body.obds-app .item, body.obds-app .source, body.obds-app .stat, body.obds-app .deploy-card, body.obds-app .next-action, body.obds-app .secret-box { background: var(--obds-card) !important; /* Hairline border in both themes — see .obds-card comment in * design-system.css. White cards on cream pages were disappearing on * wide-gamut monitors. */ border: 1px solid var(--obds-border) !important; border-radius: var(--obds-radius-md) !important; box-shadow: var(--obds-shadow-soft) !important; color: var(--obds-text) !important; } body.obds-app .card .label, body.obds-app .card-label, body.obds-app .stat-card .label, body.obds-app .stat-label, body.obds-app .endpoint-name, body.obds-app h2, body.obds-app h3 { color: var(--obds-text-mute) !important; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; font-size: 11px; } body.obds-app .card h2, body.obds-app .card h3, body.obds-app .panel h2, body.obds-app .panel h3 { margin: 0 0 12px; } body.obds-app .card .value, body.obds-app .stat-card .value, body.obds-app .stat-value, body.obds-app .endpoint-state, body.obds-app .insight-value, body.obds-app .execution-value, body.obds-app .slo-value { color: var(--obds-text) !important; font-weight: 700; font-size: 28px; } body.obds-app .card .sub, body.obds-app .stat-card .sub, body.obds-app .stat-sub, body.obds-app .endpoint-detail, body.obds-app .meta, body.obds-app .desc, body.obds-app .device-meta-label { color: var(--obds-text-soft) !important; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; } /* === Status colours === */ body.obds-app .ok { color: var(--obds-accent) !important; } body.obds-app .warn { color: var(--obds-amber) !important; } body.obds-app .bad { color: #C8514F !important; } body.obds-app .muted { color: var(--obds-text-mute) !important; } /* Status pills */ body.obds-app .pill, body.obds-app .status, body.obds-app .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; background: var(--obds-card-soft) !important; color: var(--obds-text-soft) !important; border: 0 !important; } body.obds-app .pill.ok, body.obds-app .status.ok, body.obds-app .badge.ok, body.obds-app .status-completed, body.obds-app .status-success, body.obds-app .status-approved, body.obds-app .status-active, body.obds-app .badge-success { background: var(--obds-accent-pill) !important; color: var(--obds-accent-pill-fg) !important; } body.obds-app .pill.warn, body.obds-app .status.warn, body.obds-app .badge.warn, body.obds-app .status-pending, body.obds-app .status-training, body.obds-app .badge-partial { background: var(--obds-amber-pill) !important; color: var(--obds-amber-pill-fg) !important; } body.obds-app .pill.bad, body.obds-app .status.bad, body.obds-app .badge.bad, body.obds-app .status-failed, body.obds-app .status-rejected, body.obds-app .badge-failure { background: rgba(200, 81, 79, 0.16) !important; color: #C8514F !important; } /* Endpoint health border-left */ body.obds-app .endpoint.ok { border-left: 4px solid var(--obds-accent) !important; } body.obds-app .endpoint.degraded { border-left: 4px solid var(--obds-amber) !important; } body.obds-app .endpoint.down { border-left: 4px solid #C8514F !important; } /* Email account border-left */ body.obds-app .email-card.healthy { border-left: 4px solid var(--obds-accent) !important; } body.obds-app .email-card.degraded { border-left: 4px solid var(--obds-amber) !important; } body.obds-app .email-card.failing { border-left: 4px solid #C8514F !important; } /* === Forms / inputs === */ body.obds-app input[type="text"], body.obds-app input[type="search"], body.obds-app input[type="email"], body.obds-app input[type="password"], body.obds-app input[type="url"], body.obds-app input[type="number"], body.obds-app input[type="date"], body.obds-app textarea, body.obds-app select { background: var(--obds-card-soft) !important; color: var(--obds-text) !important; border: 1px solid transparent !important; border-radius: var(--obds-radius-sm) !important; padding: 8px 12px !important; font: inherit; font-size: 13px; } body.obds-app input:focus, body.obds-app textarea:focus, body.obds-app select:focus { outline: none; border-color: var(--obds-accent) !important; } /* === Buttons === */ body.obds-app button:not(.theme-toggle):not(.obds-btn-icon):not(.obds-btn) { background: var(--obds-card-soft) !important; color: var(--obds-text) !important; border: 0 !important; border-radius: var(--obds-radius-pill) !important; padding: 8px 16px !important; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: filter 0.15s ease, transform 0.12s ease; } body.obds-app button:not(.theme-toggle):not(.obds-btn-icon):not(.obds-btn):hover { filter: brightness(1.04); } body.obds-app button.primary, body.obds-app .btn.primary, body.obds-app button.btn-primary { background: var(--obds-accent) !important; color: var(--obds-accent-fg) !important; font-weight: 600; } body.obds-app button.danger { background: rgba(200, 81, 79, 0.14) !important; color: #C8514F !important; } body.obds-app button.success { background: var(--obds-accent-pill) !important; color: var(--obds-accent-pill-fg) !important; } /* === Tables === */ body.obds-app table { background: var(--obds-card) !important; border: 1px solid var(--obds-border) !important; border-radius: var(--obds-radius-md) !important; box-shadow: var(--obds-shadow-soft) !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; } body.obds-app table th { background: var(--obds-card-soft) !important; color: var(--obds-text-mute) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; padding: 10px 14px !important; text-align: left; border-bottom: 0 !important; } body.obds-app table td { border-top: 1px solid var(--obds-border) !important; padding: 10px 14px !important; color: var(--obds-text) !important; font-size: 13px; } /* === Anchors === * Legacy pages (model-hub, setup, dashboard-legacy etc.) ship inline * `a { color: #4fc3f7 }` rules that cascade onto our sidebar links. * Force the new shell elements back to design-system tokens. */ body.obds-app .obds-sidebar a, body.obds-app .obds-sidebar-link, body.obds-app .obds-brand, body.obds-app .obds-brand-name { color: var(--obds-text-soft) !important; } body.obds-app .obds-sidebar-link.is-active { color: var(--obds-accent) !important; } body.obds-app .obds-sidebar-link:hover { color: var(--obds-text) !important; } body.obds-app .obds-brand-name { color: var(--obds-text) !important; } body.obds-app .obds-topbar a:not(.obds-btn):not(.obds-btn-primary):not(.obds-btn-soft):not(.obds-btn-icon), body.obds-app .obds-canvas a:not(.obds-sidebar-link):not(.obds-brand):not(.obds-btn):not(.obds-btn-primary):not(.obds-btn-soft):not(.obds-btn-icon):not(.module-card) { color: var(--obds-accent) !important; } /* === Misc === */ body.obds-app .result { background: var(--obds-card-soft) !important; border: 0 !important; border-radius: var(--obds-radius-sm) !important; color: var(--obds-text) !important; padding: 12px !important; font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace; font-size: 12px; } body.obds-app .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } body.obds-app .filter-bar { background: var(--obds-card) !important; border: 1px solid var(--obds-border) !important; border-radius: var(--obds-radius-md) !important; box-shadow: var(--obds-shadow-soft) !important; padding: 12px 16px !important; } /* Prevent legacy navs / topbars from rendering inside the new shell. * The canonical sidebar+topbar now provide all navigation. */ body.obds-app > header, body.obds-app .app-shell > header, body.obds-app .header .top-nav, body.obds-app .header .nav, body.obds-app .app-shell > .header .top-nav, body.obds-app .app-shell > .header .nav, body.obds-app > .top-nav { display: none !important; } /* Restyle the legacy in-page page-title block (`.app-shell > .header` — * "Operations Dashboard" h1, "Open Brain" kicker, etc) so it merges * cleanly into the new canvas instead of looking like a second topbar. */ body.obds-app .app-shell > .header { padding: 24px 32px 16px !important; background: transparent !important; border: 0 !important; position: static !important; display: block !important; backdrop-filter: none !important; } body.obds-app .app-shell > .header h1 { font-size: 32px !important; font-weight: 700 !important; color: var(--obds-text) !important; margin: 4px 0 8px !important; } body.obds-app .app-shell > .header .brand-kicker, body.obds-app .app-shell > .header .kicker { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: var(--obds-text-mute) !important; } body.obds-app .app-shell > .header .sub, body.obds-app .app-shell > .header .desc { color: var(--obds-text-soft) !important; font-size: 14px !important; } /* Drop the outer .app-shell wrapper visual treatment since the new * .obds-canvas-body already provides the surrounding space + bg. */ body.obds-app .app-shell { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* Existing `pre.code` snippets used in setup/device-capture pages */ body.obds-app pre, body.obds-app pre.code, body.obds-app code { background: var(--obds-card-soft) !important; color: var(--obds-text) !important; border-radius: var(--obds-radius-sm) !important; padding: 14px !important; font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace; font-size: 12.5px; line-height: 1.55; overflow-x: auto; } body.obds-app code:not(pre code) { padding: 2px 6px !important; font-size: 12px; } /* Legacy device-capture deploy-grid + cards */ body.obds-app .deploy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } body.obds-app .deploy-grid > article { background: var(--obds-card) !important; border: 1px solid var(--obds-border) !important; border-radius: var(--obds-radius-md) !important; box-shadow: var(--obds-shadow-soft) !important; padding: 18px !important; color: var(--obds-text) !important; }