/* odrac admin UI stylesheet. * * Served at /static/admin.css. Linked from every HTML page so the CSP can * use a strict style-src 'self' (no 'unsafe-inline'). When you need a tiny * one-off rule, prefer adding a utility class here over an inline style * attribute — those are blocked by CSP. * * Layout: * 1. Design tokens (CSS custom properties) * 2. Reset & base * 3. Layout (header, nav, main container) * 4. Scope badge + impersonation banner * 5. Typography & breadcrumbs * 6. Tables (legacy + .data-table polish + .table-wrap + toolbar) * 7. Badges * 8. Forms (native control restyles — see also section 10 `.card-block`) * 9. Buttons (.btn family + legacy button.link) * 10. Flashes, cards, sections, empty-state * 11. Auth pages * 12. Utility classes * 13. Responsive (@media) */ /* ---------- 1. Design tokens ---------- */ :root { /* Dark theme is the default. To honor OS preference + explicit toggle: * - default :root → dark * - `@media (prefers-color-scheme: light)` → light, unless user * forced `data-theme="dark"` * - `:root[data-theme="light"]` → forced light regardless of OS * * The server emits `data-theme="light"` or `data-theme="dark"` on * when the operator picks an explicit preference from /me; no * cookie means no attribute, so OS preference wins. No client-side * FOUC because the attribute is set at render time, not by JS. * * color-scheme hints to the browser so native form controls, * scrollbars, and the document background follow the theme. */ color-scheme: dark; /* Surfaces */ --bg: #1a1a1a; --surface: #222; --surface-2: #2a2a2a; --surface-3: #333; --border: #2a2a2a; --border-strong: #444; /* Text */ --text: #e0e0e0; --text-muted: #a8a8a8; /* >= 4.5:1 on --bg, WCAG AA */ --text-dim: #888; --heading: #cfc; --heading-2: #bdc; /* Accents */ --accent: #5d9; --accent-hover: #7fc; --accent-bg: #28704a; --accent-bg-hover: #327d56; /* Status colors */ --danger: #c55; --danger-bg: #a44; --danger-text: #fca5a5; --danger-text-strong: #fcc; /* hover lift on danger text links */ --danger-surface: #3a1d1d; --danger-border: #8a3333; --warn: #fde68a; --warn-surface: #3a2f1a; --warn-border: #6e5d3d; --ok: #bfd; --ok-surface: #1d3a25; --ok-border: #3d6e4c; --info-surface: #2a3a55; --info-text: #cde; --info-border: #3d5680; /* Hover / row tints — derived from --accent + neutral white, so when we * eventually flip to a light theme these can be re-defined once and every * "translucent hover" surface follows. Until then they unify the .08/.10/.12 * magic-number scatter that grew across the file. */ --surface-hover: rgba(93, 221, 153, .08); --surface-hover-strong: rgba(93, 221, 153, .12); --surface-row-alt: rgba(255, 255, 255, .02); --surface-row-hover: rgba(93, 221, 153, .06); --border-subtle: rgba(255, 255, 255, .04); /* Banner colours — used by the impersonation banner. Lower-saturation than * the prior #5a2222 so it insists rather than yells. */ --banner-danger-bg: #4a1f1f; --banner-danger-text: #fcc; --banner-danger-text-strong: #fff; --banner-danger-border: #8a3333; /* Scope-tenant badge palette (kept distinct from --ok-* so the badge family * doesn't blur into the same green as success states). */ --scope-tenant-bg: #2a4a30; --scope-tenant-text: #cfe2cd; --scope-tenant-border: #3d6e4c; --scope-tenant-hover-bg: #3a5e40; /* OIDC sign-in button — neutral blue-grey distinct from the green accent so * it reads as an alternative login path rather than a primary action. */ --oidc-bg: #334455; --oidc-bg-hover: #445566; /* Danger-zone border (the destructive-actions group on detail pages). */ --danger-zone-border: #5a2828; /* On-accent text — kept as a token so we can flip it for a future light * theme that uses a darker accent. */ --on-accent: #fff; /* Popup elevation (power menu, column popover) + auth-card lift. One token * so any future overlay/modal can share the same depth cue. */ --shadow-popup: 0 4px 12px rgba(0, 0, 0, .25); /* Radii */ --radius: 6px; --radius-sm: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Spacing scale */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* Type scale — four sizes only, semantic names. .875rem matches the * common 14px reference and reads better in tight chrome (table cells, * helper text) than the prior .85rem; --text-lg lifts to 1.25rem so * page titles read as titles. The prior --font-size-md (1.05rem) was * sub-perceptual from --text-base and is folded away. */ --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.25rem; /* Containers — the shell (sidebar + main) caps at --shell-max-width * and centres horizontally on the viewport so 4K monitors don't leave * the content pinned to the left third. The header above the shell * uses the same cap on its inner content so the logo/user-block * align with the sidebar and main column below. The shell width sits * generously above the sum of sidebar (220px) + gap (1.5rem) + main * (≈100rem readable) so wide tables (audit, access matrix) still get * their pixels. * * Individual primitives still cap themselves when there's a * readability reason (.card-block caps form lines at 80rem); tables, * matrices, grids, and the stat strip use the full main column. * * The `wide: true` flag on layout() is now informational only — kept * as a parameter so existing call sites don't break. */ --shell-max-width: 120rem; } /* Light theme — values swapped per token; structure preserved so every * component, badge, banner, and surface picks up the new palette without * any markup changes. The accent darkens from mint to forest so it * contrasts on white at WCAG AA. Two blocks below: an `@media` for * auto-pickup when no override is set, and an explicit `[data-theme]` * for forced selection. The values match between the two — keep them * in sync. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; /* Surfaces */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --surface-3: #e3e7ec; --border: #d6dade; --border-strong: #b8bec5; /* Text */ --text: #1a1d22; --text-muted: #5a6068; --text-dim: #82888f; --heading: #144d2b; --heading-2: #1f6038; /* Accents */ --accent: #1a7048; --accent-hover: #14572f; --accent-bg: #1a7048; --accent-bg-hover: #14572f; /* Status colors */ --danger: #b02a2a; --danger-bg: #a82323; --danger-text: #8b1a1a; --danger-text-strong: #6b0e0e; --danger-surface: #fbeaea; --danger-border: #d09595; --warn: #8a5a00; --warn-surface: #fff7e0; --warn-border: #c8a868; --ok: #1f6e30; --ok-surface: #e3f3e3; --ok-border: #9ec99e; --info-surface: #e1edf8; --info-text: #0d4d80; --info-border: #98c0e2; /* Hover / row tints */ --surface-hover: rgba(26, 112, 72, .08); --surface-hover-strong: rgba(26, 112, 72, .14); --surface-row-alt: rgba(0, 0, 0, .025); --surface-row-hover: rgba(26, 112, 72, .06); --border-subtle: rgba(0, 0, 0, .06); /* Banner + scope */ --banner-danger-bg: #fbeaea; --banner-danger-text: #8b1a1a; --banner-danger-text-strong: #5a0e0e; --banner-danger-border: #d09595; --scope-tenant-bg: #d2e9d6; --scope-tenant-text: #144d2b; --scope-tenant-border: #88b890; --scope-tenant-hover-bg: #b6dab9; /* OIDC button */ --oidc-bg: #e8eef5; --oidc-bg-hover: #d6dfeb; --danger-zone-border: #d09595; /* On-accent text stays white (accent is a dark green on light). */ --on-accent: #ffffff; /* Popup elevation — softer shadow on a light surface. */ --shadow-popup: 0 4px 12px rgba(0, 0, 0, .12); } } /* Forced light — wins regardless of OS preference. Duplicate of the * @media block above; keep them in sync when iterating on values. */ :root[data-theme="light"] { color-scheme: light; --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --surface-3: #e3e7ec; --border: #d6dade; --border-strong: #b8bec5; --text: #1a1d22; --text-muted: #5a6068; --text-dim: #82888f; --heading: #144d2b; --heading-2: #1f6038; --accent: #1a7048; --accent-hover: #14572f; --accent-bg: #1a7048; --accent-bg-hover: #14572f; --danger: #b02a2a; --danger-bg: #a82323; --danger-text: #8b1a1a; --danger-text-strong: #6b0e0e; --danger-surface: #fbeaea; --danger-border: #d09595; --warn: #8a5a00; --warn-surface: #fff7e0; --warn-border: #c8a868; --ok: #1f6e30; --ok-surface: #e3f3e3; --ok-border: #9ec99e; --info-surface: #e1edf8; --info-text: #0d4d80; --info-border: #98c0e2; --surface-hover: rgba(26, 112, 72, .08); --surface-hover-strong: rgba(26, 112, 72, .14); --surface-row-alt: rgba(0, 0, 0, .025); --surface-row-hover: rgba(26, 112, 72, .06); --border-subtle: rgba(0, 0, 0, .06); --banner-danger-bg: #fbeaea; --banner-danger-text: #8b1a1a; --banner-danger-text-strong: #5a0e0e; --banner-danger-border: #d09595; --scope-tenant-bg: #d2e9d6; --scope-tenant-text: #144d2b; --scope-tenant-border: #88b890; --scope-tenant-hover-bg: #b6dab9; --oidc-bg: #e8eef5; --oidc-bg-hover: #d6dfeb; --danger-zone-border: #d09595; --on-accent: #ffffff; --shadow-popup: 0 4px 12px rgba(0, 0, 0, .12); } /* ---------- 2. Reset & base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.4; } a { color: var(--accent); } /* Global focus indicator — WCAG 2.4.7. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 3. Layout ---------- */ /* Header is the slim top strip — logo, hamburger (mobile), scope badge, * user block. Primary navigation lives in the sidebar (`.sidebar`) below * the header on desktop; on mobile it collapses into a hamburger-toggled * overlay. * * The background spans the full viewport so it reads as a single bar * across the top; the inner `.header-inner` flex row caps at the shell * width and centres so the logo lines up with the sidebar below on * ultrawide / 4K displays. */ header { background: var(--surface); border-bottom: 1px solid var(--surface-3); } .header-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: var(--shell-max-width); margin: 0 auto; padding: .75rem var(--space-6); } header h1 { font-size: 1.1rem; font-weight: 600; } header h1 a { color: var(--text); text-decoration: none; } .user { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; } .user code { background: var(--surface-3); padding: .1rem .4rem; border-radius: var(--radius-sm); color: var(--heading-2); } /* Header search box. Visible to admins only (renderHeaderSearch gates * by role) and sits between the scope badge and the user block; on * mobile it falls below them via the flex-wrap on `header`. The `/` * keyboard shortcut (search.js) focuses this input. * * The box is narrow by default to leave room for the scope badge and * user block; on hover/focus it widens so longer queries are readable. */ .header-search { display: flex; align-items: center; } .header-search input { width: 18rem; max-width: 100%; padding: .3rem .55rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-pill); font: inherit; font-size: var(--text-sm); } .header-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Hamburger toggle — visible only ≤960px (see responsive block at end). * Native