. * * See ../SCHEMA.md §1.4 and §1.6. */ /* ── page shell ────────────────────────────────────────────────────────────── */ .nb-app { max-width: var(--nb-content-max); margin: var(--nb-space-5) auto var(--nb-space-7); padding: 0 var(--nb-space-4); color: var(--nb-ink); font-family: var(--nb-font); font-size: var(--nb-text-base); line-height: var(--nb-leading); } .nb-app *, .nb-app *::before, .nb-app *::after { box-sizing: border-box; } /* Body background is the page's, not a component's, but every surface sets the same two properties * and three of them got the font stack subtly different, so it is offered here as an opt-in class on * rather than left to be retyped a fifth time. */ .nb-body { margin: 0; background: var(--nb-canvas); color: var(--nb-ink); font-family: var(--nb-font); font-size: var(--nb-text-base); line-height: var(--nb-leading); } .nb-app h2 { font-size: var(--nb-text-lg); font-weight: 700; margin: var(--nb-space-5) 0 var(--nb-space-3); } .nb-app h3 { font-size: var(--nb-text-base); font-weight: 700; margin: var(--nb-space-4) 0 var(--nb-space-2); } .nb-app h2:first-child, .nb-app h3:first-child { margin-top: 0; } .nb-app a { color: var(--nb-brand-dark); } .nb-app code, .nb-app pre { font-family: var(--nb-font-mono); font-size: 0.92em; } .nb-app pre { background: var(--nb-surface-sunken); border: 1px solid var(--nb-line); border-radius: var(--nb-radius-sm); padding: var(--nb-space-3); overflow-x: auto; } /* A section heading with a trailing rule and optional right-hand controls. Replaces `.section-head` * (hub) and `.section-heading` (OnOffboarder), which differed only in name. */ .nb-section-head { display: flex; align-items: baseline; gap: var(--nb-space-3); margin: var(--nb-space-5) 0 var(--nb-space-3); } .nb-section-head > :first-child { margin: 0; font-size: var(--nb-text-lg); font-weight: 700; } .nb-section-head::after { content: ''; flex: 1; border-bottom: 1px solid var(--nb-line); /* Sits on the text baseline rather than centred: a rule level with the middle of the text reads as a strikethrough at small sizes. */ transform: translateY(-0.25em); } /* ── nb-btn ──────────────────────────────────────────────────────────────────── * * Replaces: .btn .ghost-btn .approve-btn .reject-btn .defer-btn .ack-btn .cancel-task-btn * .form-submit-btn .ent-save-btn .clear-all-btn .manual-add-btn .run-delete-btn * .offboard-start-btn (13 definitions, 4 real shapes) * * Variants, not classes per action. `.approve-btn` and `.reject-btn` are not two components; they * are one component with a meaning, and encoding the meaning as `data-variant` is what stops the * fourteenth action button from inventing a fourteenth class. * * The default variant is a bordered neutral button, which is what the great majority of these * actually were. `primary` is violet-filled and there SHOULD be at most one per view; violet is * reserved (tokens.css) and its job on a page is "the action this page is for". */ .nb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2); padding: 6px 14px; border-radius: var(--nb-radius-sm); border: 1px solid var(--nb-line-strong); background: var(--nb-surface); color: var(--nb-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: var(--nb-leading); white-space: nowrap; text-decoration: none; cursor: pointer; } .nb-btn:hover:not(:disabled) { background: var(--nb-surface-sunken); border-color: var(--nb-ink-muted); } .nb-btn[data-variant='primary'] { background: var(--nb-brand); border-color: var(--nb-brand); color: var(--nb-ink-inverse); } .nb-btn[data-variant='primary']:hover:not(:disabled) { background: var(--nb-brand-dark); border-color: var(--nb-brand-dark); } /* Destructive. Outlined rather than filled, deliberately: a solid red button is the most visually * salient thing on a page, which draws the click it is warning about. The estate's destructive * actions (delete a run, purge a folder, push a policy) should look deliberate to reach, not * inviting. Filling it also loses the disabled state's meaning. */ .nb-btn[data-variant='danger'] { border-color: var(--nb-danger); color: var(--nb-danger); } .nb-btn[data-variant='danger']:hover:not(:disabled) { background: var(--nb-danger-wash); border-color: var(--nb-danger); } .nb-btn[data-variant='ghost'] { border-color: transparent; background: transparent; color: var(--nb-brand-dark); } .nb-btn[data-variant='ghost']:hover:not(:disabled) { background: var(--nb-brand-wash); border-color: transparent; } .nb-btn[data-size='sm'] { padding: 3px 9px; font-size: var(--nb-text-sm); } .nb-btn:disabled, .nb-btn[aria-disabled='true'] { opacity: 0.55; cursor: default; } .nb-btn[hidden] { display: none; } .nb-btn-row { display: flex; gap: var(--nb-space-2); flex-wrap: wrap; align-items: center; } /* ── nb-chip ────────────────────────────────────────────────────────────────── * * Replaces: .chip (hub) .chip (Client Truth) .badge .badge-approved .badge-cancelled * .badge-complete .badge-deferred .badge-emergency .badge-failed .badge-in * .badge-partial .badge-pending .badge-rejected .service-chip .pending-tag * .dot-acknowledged .dot-cancelled .dot-deferred .dot-failed .dot-in .dot-pending * .dot-success .lane-never_verified .lane-stale .lane-verified_in_sla * (24 definitions, 1 component) * * A chip is a small immutable fact: a status, a role, a source, a staleness. Never a control. If it * is clickable it is an nb-btn[data-size=sm] or an nb-entity. * * `data-kind` carries meaning, and the eleven OnOffboarder badge states map onto six kinds. That * collapse is the point; it also fixes a real problem, which is that `.badge-emergency` and * `.badge-failed` currently look different from each other for no reason a reader could name. * * MUST carry the state as TEXT, not only as colour. `.dot-*` was colour-only, which is unreadable * for roughly 1 in 12 men and invisible in a greyscale screenshot pasted into Slack, which is how * most of these get discussed. */ .nb-chip { display: inline-flex; align-items: center; gap: var(--nb-space-1); padding: 2px 9px; border-radius: var(--nb-radius-pill); border: 1px solid var(--nb-line); background: var(--nb-surface-sunken); color: var(--nb-ink-muted); font-size: var(--nb-text-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: baseline; } .nb-chip[data-kind='ok'] { border-color: var(--nb-ok); background: var(--nb-ok-wash); color: var(--nb-ok); } .nb-chip[data-kind='warn'] { border-color: var(--nb-warn); background: var(--nb-warn-wash); color: var(--nb-warn); } .nb-chip[data-kind='danger'] { border-color: var(--nb-danger); background: var(--nb-danger-wash); color: var(--nb-danger); } .nb-chip[data-kind='info'] { border-color: var(--nb-info); background: var(--nb-info-wash); color: var(--nb-info); } .nb-chip[data-kind='pending'] { border-color: var(--nb-pending); background: var(--nb-pending-wash); color: var(--nb-pending); } /* Explicitly inert: cancelled, superseded, not-applicable. Distinct from `neutral`, which means "a * fact with no valence". Replaces `.rule-inert` and `.suppressed`. */ .nb-chip[data-kind='muted'] { border-style: dashed; background: transparent; color: var(--nb-ink-muted); } /* An optional leading bullet, inheriting the chip's own colour. * * Added during the hub migration: both the hub and Managed Bookmarks build a chip with a status bullet * and each had its own `.chip .dot` rule. Styling it from a host stylesheet would mean writing * `.nb-chip .dot`, which conformance test C-2 forbids (correctly), since the dot is part of what a * chip IS rather than something a page decorates one with. * * `currentColor`, so it tracks `data-kind` with no per-kind rules. That is the whole reason it works * as a shared component: seven kinds, one declaration. */ .nb-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .nb-chip[hidden] { display: none; } /* ── nb-stat ────────────────────────────────────────────────────────────────── * * Replaces: .tile .tile-source .kpi-row (hub) .stat .stats (Client Truth) * * A number, its label, and (required) where it came from. The source line is not decoration: * `.tile-source` exists in the hub because a metric with no attribution is a number nobody can * check, and `.source-error` exists because a metric whose upstream failed must say so rather than * render a stale value or a zero. * * A zero and a failure look identical in a big bold numeral. That is the failure mode this * component is shaped around, and it is why `data-state="error"` replaces the value rather than * tinting it. */ .nb-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--nb-space-3); margin-bottom: var(--nb-space-4); } .nb-stat { background: var(--nb-surface); border: 1px solid var(--nb-line); border-radius: var(--nb-radius-md); padding: var(--nb-space-4); display: flex; flex-direction: column; gap: var(--nb-space-1); } .nb-stat-label { font-size: var(--nb-text-sm); font-weight: 600; color: var(--nb-ink-muted); } .nb-stat-value { font-size: var(--nb-text-2xl); font-weight: 800; line-height: 1.15; /* Tabular figures so a column of stats does not shimmy as values change width on refresh. */ font-variant-numeric: tabular-nums; } .nb-stat-source { font-size: var(--nb-text-xs); color: var(--nb-ink-muted); } .nb-stat[data-state='error'] { border-color: var(--nb-danger); } .nb-stat[data-state='error'] .nb-stat-value { font-size: var(--nb-text-lg); color: var(--nb-danger); } .nb-stat[data-state='stale'] { border-color: var(--nb-warn); } /* Held back while the hub's idle lock is engaged, and while a value is unknown. Not a zero. See * the component note above. */ .nb-stat[data-state='hidden'] .nb-stat-value { color: var(--nb-ink-muted); } /* ── nb-panel ───────────────────────────────────────────────────────────────── * * Replaces: .panel .policy .policy-head .policy-body .ent-card .run-card .folder-head * .folder-body .figures .rule .rule-head .pending-item .attention-list */ .nb-panel { background: var(--nb-surface); border: 1px solid var(--nb-line); border-radius: var(--nb-radius-md); margin-bottom: var(--nb-space-4); overflow: hidden; /* so a child's corner cannot escape the rounded border */ } .nb-panel-head { display: flex; align-items: center; gap: var(--nb-space-3); padding: var(--nb-space-3) var(--nb-space-4); border-bottom: 1px solid var(--nb-line); background: var(--nb-surface-sunken); font-weight: 700; } .nb-panel-head > .nb-spacer { margin-left: auto; } .nb-panel-body { padding: var(--nb-space-4); } .nb-panel-body > :last-child { margin-bottom: 0; } /* A panel with no head, padded directly. * * For server-rendered pages where wrapping every section's contents in a second element is pure * markup tax. SpendTracker's Jinja templates are `

…

…` * and gain nothing from an inner div. The JS-driven surfaces build panels with heads and bodies and * should keep doing so. * * Deliberately a variant here rather than each template growing its own padded wrapper class, which * is how a fifth `.panel` definition gets written. */ .nb-panel[data-pad] { padding: var(--nb-space-4); } .nb-panel[data-pad] > :last-child { margin-bottom: 0; } /* A panel whose head is a summary/details disclosure. The bookmarks tree and the OnOffboarder's run * list both built this; neither could reuse the other's. */ .nb-panel > details > summary { cursor: pointer; list-style: none; } .nb-panel > details > summary::-webkit-details-marker { display: none; } .nb-panel[data-kind='danger'] { border-color: var(--nb-danger); } .nb-panel[data-kind='warn'] { border-color: var(--nb-warn); } /* ── nb-banner ──────────────────────────────────────────────────────────────── * * Replaces: .banner .notice .error-msg .form-error .source-error .err .warning .impact .lede * * Something the operator needs to read BEFORE the content below it. Top of `.nb-app`, above the * stats. A left border rather than a full tint, so a page with two banners does not become two * slabs of colour. * * MUST NOT be used for a transient success toast. There are none in the estate and adding them * would be adding a way to miss a confirmation by looking away. */ .nb-banner { display: flex; align-items: flex-start; gap: var(--nb-space-3); padding: var(--nb-space-3) var(--nb-space-4); margin-bottom: var(--nb-space-4); border: 1px solid var(--nb-line); border-left: 3px solid var(--nb-ink-muted); border-radius: var(--nb-radius-sm); background: var(--nb-surface); } .nb-banner-body { flex: 1; min-width: 0; } .nb-banner-title { font-weight: 700; } .nb-banner-body > p { margin: var(--nb-space-1) 0 0; } .nb-banner[data-kind='ok'] { border-left-color: var(--nb-ok); background: var(--nb-ok-wash); } .nb-banner[data-kind='warn'] { border-left-color: var(--nb-warn); background: var(--nb-warn-wash); } .nb-banner[data-kind='danger'] { border-left-color: var(--nb-danger); background: var(--nb-danger-wash); } .nb-banner[data-kind='info'] { border-left-color: var(--nb-info); background: var(--nb-info-wash); } .nb-banner[hidden] { display: none; } /* ── nb-table ───────────────────────────────────────────────────────────────── * * Replaces: bare table/th/td rules in all four surfaces, .tablewrap .diff-row .audit-row * .suppressed-row .attn * * `.nb-table-wrap` is not optional. Every one of these tables overflows on a laptop at some column * count, and an overflowing table without a scroll container pushes the whole page sideways, * including the header bar. */ .nb-table-wrap { overflow-x: auto; /* Contains the sticky header below: position: sticky resolves against the nearest scrolling ancestor, which must be this element and not the viewport. */ position: relative; } .nb-app table, .nb-table { width: 100%; border-collapse: collapse; font-size: 13px; } .nb-app th, .nb-table th { text-align: left; font-weight: 600; color: var(--nb-ink-muted); background: var(--nb-surface-sunken); padding: var(--nb-space-2) var(--nb-space-3); border-bottom: 1px solid var(--nb-line-strong); position: sticky; top: 0; /* Under the header bar (z-index 30) and under nb-dialog. A sticky table header that slides over the app bar is the single most common version of this bug. */ z-index: 2; } .nb-app td, .nb-table td { padding: var(--nb-space-2) var(--nb-space-3); border-bottom: 1px solid var(--nb-line); vertical-align: top; } .nb-app tbody tr:hover td, .nb-table tbody tr:hover td { background: var(--nb-surface-sunken); } /* Numbers right-aligned and tabular. Both Client Truth and SpendTracker discovered this * independently; the estate now gets it by default. */ .nb-num, .nb-app th.nb-num { text-align: right; font-variant-numeric: tabular-nums; } .nb-figure { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .nb-detail { color: var(--nb-ink-muted); font-size: var(--nb-text-sm); } /* Row states. Wash fills, so the state survives a greyscale screenshot only if the row ALSO carries * an nb-chip, which the schema requires. These are reinforcement, not the signal. */ .nb-app tr[data-state='warn'] > td, .nb-table tr[data-state='warn'] > td { background: var(--nb-warn-wash); } .nb-app tr[data-state='danger'] > td, .nb-table tr[data-state='danger'] > td { background: var(--nb-danger-wash); } .nb-app tr[data-state='ok'] > td, .nb-table tr[data-state='ok'] > td { background: var(--nb-ok-wash); } /* Suppressed / superseded: legible but visibly set aside. Replaces `.suppressed-row`. */ .nb-app tr[data-state='muted'] > td, .nb-table tr[data-state='muted'] > td { color: var(--nb-ink-muted); text-decoration: line-through; text-decoration-color: var(--nb-line-strong); } /* ── nb-dialog ──────────────────────────────────────────────────────────────── * * Replaces: .dlg .dlg-bar .dlg-error * * Built on the native