/* ============================================================================ SmudReplay.Web — Design Tokens (dark, aligned with Spark.Web) ---------------------------------------------------------------------------- Adopts the same --sk-* token namespace as TechBenchEco.Spark.Web so the two apps share a consistent visual identity. iolo red is retained as a status accent on a few brand surfaces but is no longer the dominant colour. ============================================================================ */ :root { /* ── Surface tiers ─────────────────────────────────────────────────────── */ --sk-bg-0: #0a0a0c; --sk-bg-1: #0f0f12; --sk-bg-2: #15151a; --sk-bg-3: #1c1c22; --sk-bg-4: #232329; --sk-bg-elevated: #1a1a20; /* ── Borders ──────────────────────────────────────────────────────────── */ --sk-border: rgba(255, 255, 255, 0.06); --sk-border-strong: rgba(255, 255, 255, 0.10); --sk-border-accent: rgba(79, 140, 255, 0.32); --sk-divider: #232329; /* ── Text ─────────────────────────────────────────────────────────────── */ --sk-text: #ececf1; --sk-text-soft: #c0c0c8; --sk-text-muted: #8a8a95; --sk-text-faint: #5a5a64; --sk-text-inverse: #0a0a0c; /* ── Accents (status colours) ─────────────────────────────────────────── */ --sk-accent: #4f8cff; --sk-accent-soft: rgba(79, 140, 255, 0.12); --sk-running: #4f8cff; --sk-success: #5ad6a8; --sk-error: #ff5d6c; --sk-warning: #f5b942; --sk-queued: #6e6e7a; --sk-skipped: #4a4a52; --sk-brand: #f0c040; /* Spark gold (was iolo-red brand) */ /* iolo red kept as a secondary brand for the dot in headers / status pills */ --iolo-red: #ff5d6c; --iolo-red-soft: rgba(255, 93, 108, 0.12); /* ── Spacing ──────────────────────────────────────────────────────────── */ --sk-space-1: 4px; --sk-space-2: 8px; --sk-space-3: 12px; --sk-space-4: 16px; --sk-space-5: 20px; --sk-space-6: 24px; /* ── Radii ────────────────────────────────────────────────────────────── */ --sk-radius-sm: 4px; --sk-radius: 6px; --sk-radius-md: 8px; --sk-radius-lg: 12px; /* ── Shadows ──────────────────────────────────────────────────────────── */ --sk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --sk-shadow: 0 4px 12px rgba(0, 0, 0, 0.40); --sk-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.50); /* ── Type ─────────────────────────────────────────────────────────────── */ --sk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sk-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; /* Font-size scale — defaults to "medium" tier; data-text-size overrides below switch tiers. See the Text-size scale block further down. */ --sk-fs-xs: 12px; --sk-fs-sm: 13px; --sk-fs-md: 14px; --sk-fs-base: 15px; --sk-fs-lg: 17px; --sk-fs-xl: 22px; --sk-fs-2xl: 30px; } /* ============================================================================ Text-size scale — S / M / L ---------------------------------------------------------------------------- Industry-aligned tiers (Notion, Slack, WCAG body baseline). Switch via the data-text-size attribute on : — compact dashboards (14px base) — default, comfortable (15px base) — accessibility / casual (17px base) The :root block above already defines the "medium" defaults; the rules below override them for the "small" and "large" tiers. ============================================================================ */ html[data-text-size="small"] { --sk-fs-xs: 11px; --sk-fs-sm: 12px; --sk-fs-md: 13px; --sk-fs-base: 14px; --sk-fs-lg: 16px; --sk-fs-xl: 20px; --sk-fs-2xl: 28px; } html[data-text-size="large"] { --sk-fs-xs: 13px; --sk-fs-sm: 14px; --sk-fs-md: 16px; --sk-fs-base: 17px; --sk-fs-lg: 19px; --sk-fs-xl: 24px; --sk-fs-2xl: 34px; } /* ============================================================================ Base ============================================================================ */ html, body { margin: 0; padding: 0; font-family: var(--sk-font-sans); font-size: var(--sk-fs-base); background: var(--sk-bg-0); color: var(--sk-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a, .btn-link { color: var(--sk-accent); text-decoration: none; transition: color 0.12s cubic-bezier(0.4, 0, 0.2, 1); } a:hover, .btn-link:hover { color: #7ea9ff; text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--sk-text); font-weight: 700; letter-spacing: -0.01em; } h1:focus { outline: none; } code, pre { font-family: var(--sk-font-mono); } .content { padding-top: 1.1rem; } /* ============================================================================ Bootstrap overrides — retone to dark / --sk-* tokens ============================================================================ */ .btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 2px var(--sk-accent-soft); outline: none; border-color: var(--sk-accent); } .btn-primary { color: var(--sk-text-inverse); background-color: var(--sk-accent); border-color: var(--sk-accent); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #6ba3ff; border-color: #6ba3ff; color: var(--sk-text-inverse); } .btn-outline-primary { color: var(--sk-accent); border-color: var(--sk-accent); } .btn-outline-primary:hover, .btn-outline-primary.active { background-color: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-text-inverse); } .btn-outline-secondary { color: var(--sk-text-soft); border-color: var(--sk-border-strong); background: transparent; } .btn-outline-secondary:hover { background: var(--sk-bg-3); color: var(--sk-text); border-color: var(--sk-border-strong); } .btn-secondary { background: var(--sk-bg-3); border-color: var(--sk-border-strong); color: var(--sk-text); } .btn-secondary:hover { background: var(--sk-bg-4); border-color: var(--sk-border-strong); color: var(--sk-text); } /* Re-tone Bootstrap primary contextual classes */ .bg-primary { background-color: var(--sk-accent) !important; } .text-primary { color: var(--sk-accent) !important; } .border-primary { border-color: var(--sk-accent) !important; } .badge.bg-primary { background-color: var(--sk-accent) !important; color: var(--sk-text-inverse) !important; } .text-muted { color: var(--sk-text-muted) !important; } /* Form validation tokens */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--sk-success); } .invalid { outline: 1px solid var(--sk-error); } .validation-message { color: var(--sk-error); } .blazor-error-boundary { background: var(--sk-error); padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--sk-radius); } .blazor-error-boundary::after { content: "An error has occurred."; } .darker-border-checkbox.form-check-input { border-color: var(--sk-border-strong); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--sk-text-muted); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Form controls — dark surfaces */ .form-control, .form-select { background-color: var(--sk-bg-2); border-color: var(--sk-border-strong); color: var(--sk-text); } .form-control:focus, .form-select:focus { background-color: var(--sk-bg-2); color: var(--sk-text); } .form-control::placeholder { color: var(--sk-text-faint); } /* Tables — light → dark borders & rows */ .table { --bs-table-border-color: var(--sk-border); --bs-table-color: var(--sk-text); --bs-table-bg: transparent; --bs-table-hover-color: var(--sk-text); --bs-table-hover-bg: var(--sk-bg-3); --bs-table-striped-color: var(--sk-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.02); color: var(--sk-text); } .table thead th { border-bottom: 2px solid var(--sk-border-strong); color: var(--sk-text-muted); background: transparent; } /* Cards — dark surface, subtle border */ .card { background-color: var(--sk-bg-2); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-md); box-shadow: none; color: var(--sk-text); } .card-header { background: var(--sk-bg-3); border-bottom: 1px solid var(--sk-border); color: var(--sk-text); } .card-body { color: var(--sk-text); } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sk-bg-4); border-radius: 5px; border: 2px solid var(--sk-bg-0); } ::-webkit-scrollbar-thumb:hover { background: #2e2e36; } /* ============================================================================ Responsive helpers — phone / tablet ============================================================================ */ img, svg { max-width: 100%; } @media (max-width: 720px) { h1 { font-size: 1.45rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } h4, h5, h6 { font-size: 1rem; } .content { padding-top: 0.75rem; } .modal-dialog { margin: 0.5rem; } .btn-toolbar, .btn-group { flex-wrap: wrap; gap: 0.4rem; } .container, .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; } } @media (max-width: 720px) and (hover: none) { input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input[type="tel"], textarea, select, .form-control, .form-select { font-size: 16px; } }