/* ============================================================================ 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; } } /* ============================================================================ Signature themes — chosen in Settings → Appearance, applied via data-theme on (see the window.smudTheme bootstrap in App.razor). ---------------------------------------------------------------------------- The same 10 signature themes used across the TechBench apps (Spark, QaToolKit, AppScanner, WebGuardrail). No data-theme = the dark :root default above. Each block re-declares the app's own --sk-* tokens AND the core Bootstrap --bs-* variables, so both custom and native Bootstrap surfaces re-theme together. Light-family themes also flip data-bs-theme to "light" (done in the bootstrap script) so Bootstrap's own components follow. The sidebar recolours with the theme too — its dark icon SVGs simply stop being inverted on light-family themes (keyed on data-bs-theme in NavMenu.razor.css) so they stay legible on the light rail. ============================================================================ */ /* ── Light — high-contrast white ───────────────────────────────────────── */ html[data-theme="light"] { --sk-bg-0: #f6f6f4; --sk-bg-1: #fbfbf9; --sk-bg-2: #ffffff; --sk-bg-3: #f0efea; --sk-bg-4: #e6e4dc; --sk-bg-elevated: #ffffff; --sk-border: #e4e2da; --sk-border-strong: #cfcdc4; --sk-divider: #e4e2da; --sk-border-accent: rgba(37,99,235,0.34); --sk-text: #1d1d1b; --sk-text-soft: #4a4944; --sk-text-muted: #6b6a64; --sk-text-faint: #9a988f; --sk-text-inverse: #ffffff; --sk-accent: #2563eb; --sk-accent-soft: rgba(37,99,235,0.10); --sk-running: #2563eb; --sk-success: #1a7f37; --sk-error: #b3261e; --sk-warning: #9a6700; --sk-brand: #2563eb; --bs-body-bg: #f6f6f4; --bs-body-bg-rgb: 246,246,244; --bs-body-color: #1d1d1b; --bs-body-color-rgb: 29,29,27; --bs-border-color: #e4e2da; --bs-emphasis-color: #000000; --bs-primary: #2563eb; --bs-primary-rgb: 37,99,235; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #f0efea; --bs-link-color: #2563eb; --bs-link-color-rgb: 37,99,235; --bs-link-hover-color: #1d4fd0; --bs-card-bg: #ffffff; --bs-card-color: #1d1d1b; } /* ── Midnight — deep indigo, violet accent ─────────────────────────────── */ html[data-theme="midnight"] { --sk-bg-0: #0b1020; --sk-bg-1: #0d1530; --sk-bg-2: #121a33; --sk-bg-3: #1a2547; --sk-bg-4: #1f2b50; --sk-bg-elevated: #22305a; --sk-border: #1f2b50; --sk-border-strong: #2a3a66; --sk-divider: #1f2b50; --sk-border-accent: rgba(139,123,255,0.34); --sk-text: #dfe6ff; --sk-text-soft: #b3bce6; --sk-text-muted: #9aa6d4; --sk-text-faint: #5f6aa0; --sk-text-inverse: #0b1020; --sk-accent: #8b7bff; --sk-accent-soft: rgba(139,123,255,0.14); --sk-running: #8b7bff; --sk-success: #5bd6a0; --sk-error: #ff7a90; --sk-warning: #e0b341; --sk-brand: #8b7bff; --bs-body-bg: #0b1020; --bs-body-bg-rgb: 11,16,32; --bs-body-color: #dfe6ff; --bs-body-color-rgb: 223,230,255; --bs-border-color: #2a3a66; --bs-emphasis-color: #ffffff; --bs-primary: #8b7bff; --bs-primary-rgb: 139,123,255; --bs-secondary-bg: #121a33; --bs-tertiary-bg: #1a2547; --bs-link-color: #9db4ff; --bs-link-color-rgb: 157,180,255; --bs-link-hover-color: #bccaff; --bs-card-bg: #121a33; --bs-card-color: #dfe6ff; } /* ── Pixel — cyberpunk neon (magenta + cyan), CRT scanlines ────────────── */ html[data-theme="pixel"] { --sk-bg-0: #0d0221; --sk-bg-1: #160a33; --sk-bg-2: #160a33; --sk-bg-3: #211347; --sk-bg-4: #2a1a52; --sk-bg-elevated: #2c1a5e; --sk-border: #34206a; --sk-border-strong: #4a2d8a; --sk-divider: #34206a; --sk-border-accent: rgba(255,42,109,0.34); --sk-text: #e8e0ff; --sk-text-soft: #b9a9e8; --sk-text-muted: #9b86d9; --sk-text-faint: #5f4b96; --sk-text-inverse: #0d0221; --sk-accent: #ff2a6d; --sk-accent-soft: rgba(255,42,109,0.14); --sk-running: #05d9e8; --sk-success: #05d9e8; --sk-error: #ff3864; --sk-warning: #f9f871; --sk-brand: #ff2a6d; --bs-body-bg: #0d0221; --bs-body-bg-rgb: 13,2,33; --bs-body-color: #e8e0ff; --bs-body-color-rgb: 232,224,255; --bs-border-color: #4a2d8a; --bs-emphasis-color: #ffffff; --bs-primary: #ff2a6d; --bs-primary-rgb: 255,42,109; --bs-secondary-bg: #160a33; --bs-tertiary-bg: #211347; --bs-link-color: #05d9e8; --bs-link-color-rgb: 5,217,232; --bs-link-hover-color: #5fe9f3; --bs-card-bg: #160a33; --bs-card-color: #e8e0ff; } html[data-theme="pixel"] body { font-family: "Press Start 2P", "Courier New", monospace; font-size: 11px; line-height: 1.85; letter-spacing: 0.2px; -webkit-font-smoothing: none; } html[data-theme="pixel"] * { border-radius: 0 !important; } html[data-theme="pixel"] .btn, html[data-theme="pixel"] .card { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55) !important; } html[data-theme="pixel"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px); } /* ── '90s — Windows 95 teal desktop, silver bevels, Comic Sans ─────────── */ html[data-theme="win9x"] { --sk-bg-0: #008080; --sk-bg-1: #c0c0c0; --sk-bg-2: #c0c0c0; --sk-bg-3: #bdbdbd; --sk-bg-4: #d0d0d0; --sk-bg-elevated: #c0c0c0; --sk-border: #808080; --sk-border-strong: #5a5a5a; --sk-divider: #808080; --sk-border-accent: rgba(0,0,128,0.34); --sk-text: #000000; --sk-text-soft: #2b2b2b; --sk-text-muted: #2b2b2b; --sk-text-faint: #555555; --sk-text-inverse: #ffffff; --sk-accent: #000080; --sk-accent-soft: rgba(0,0,128,0.12); --sk-running: #000080; --sk-success: #007000; --sk-error: #c00000; --sk-warning: #7a6a00; --sk-brand: #000080; --bs-body-bg: #008080; --bs-body-bg-rgb: 0,128,128; --bs-body-color: #000000; --bs-body-color-rgb: 0,0,0; --bs-border-color: #808080; --bs-emphasis-color: #000000; --bs-primary: #000080; --bs-primary-rgb: 0,0,128; --bs-secondary-bg: #c0c0c0; --bs-tertiary-bg: #bdbdbd; --bs-link-color: #0000ff; --bs-link-color-rgb: 0,0,255; --bs-link-hover-color: #0000cc; --bs-card-bg: #c0c0c0; --bs-card-color: #000000; } html[data-theme="win9x"] body { font-family: "Comic Sans MS", "Trebuchet MS", Tahoma, sans-serif; } html[data-theme="win9x"] * { border-radius: 0 !important; } html[data-theme="win9x"] .btn, html[data-theme="win9x"] .card { border: 2px outset #dfdfdf !important; box-shadow: none !important; } html[data-theme="win9x"] .btn:active { border-style: inset !important; } html[data-theme="win9x"] a { text-decoration: underline; } /* ── Y2K — late-90s gradient kitsch ─────────────────────────────────────── */ html[data-theme="y2k"] { --sk-bg-0: #6f93dd; --sk-bg-1: #eef3fb; --sk-bg-2: #eef3fb; --sk-bg-3: #dbe6f8; --sk-bg-4: #cddcf3; --sk-bg-elevated: #ffffff; --sk-border: #9fb6dd; --sk-border-strong: #5f7fb8; --sk-divider: #9fb6dd; --sk-border-accent: rgba(26,95,208,0.34); --sk-text: #0a1a3a; --sk-text-soft: #38486a; --sk-text-muted: #38486a; --sk-text-faint: #5a6a8a; --sk-text-inverse: #ffffff; --sk-accent: #1a5fd0; --sk-accent-soft: rgba(26,95,208,0.12); --sk-running: #1a5fd0; --sk-success: #1a7f37; --sk-error: #c0271e; --sk-warning: #8a5a00; --sk-brand: #1a5fd0; --bs-body-bg: #6f93dd; --bs-body-bg-rgb: 111,147,221; --bs-body-color: #0a1a3a; --bs-body-color-rgb: 10,26,58; --bs-border-color: #5f7fb8; --bs-emphasis-color: #06122b; --bs-primary: #1a5fd0; --bs-primary-rgb: 26,95,208; --bs-secondary-bg: #eef3fb; --bs-tertiary-bg: #dbe6f8; --bs-link-color: #1a5fd0; --bs-link-color-rgb: 26,95,208; --bs-link-hover-color: #1550b8; --bs-card-bg: #eef3fb; --bs-card-color: #0a1a3a; } html[data-theme="y2k"] body { background: linear-gradient(180deg, #8fb0ec 0%, #4f74c8 100%) fixed; } html[data-theme="y2k"] .btn-primary { background: linear-gradient(180deg, #5a9bf0, #0d52c0); border: 1px solid #0a3d92; } html[data-theme="y2k"] .card { background: linear-gradient(180deg, #ffffff, #e3edfa); border: 1px solid #9fb6dd; } /* ── Kenney — friendly game-dev UI: chunky, rounded, pressable ─────────── */ html[data-theme="kenney"] { --sk-bg-0: #dce7f5; --sk-bg-1: #eef3fb; --sk-bg-2: #ffffff; --sk-bg-3: #eaf1fb; --sk-bg-4: #dde8f8; --sk-bg-elevated: #ffffff; --sk-border: #b6c8e4; --sk-border-strong: #9bb2d8; --sk-divider: #d6e2f2; --sk-border-accent: rgba(61,169,252,0.34); --sk-text: #2b3a55; --sk-text-soft: #5b6b86; --sk-text-muted: #5b6b86; --sk-text-faint: #8a98b2; --sk-text-inverse: #ffffff; --sk-accent: #3da9fc; --sk-accent-soft: rgba(61,169,252,0.12); --sk-running: #3da9fc; --sk-success: #43b14a; --sk-error: #ff5c5c; --sk-warning: #ff9f1c; --sk-brand: #3da9fc; --bs-body-bg: #dce7f5; --bs-body-bg-rgb: 220,231,245; --bs-body-color: #2b3a55; --bs-body-color-rgb: 43,58,85; --bs-border-color: #b6c8e4; --bs-emphasis-color: #1f2c44; --bs-primary: #3da9fc; --bs-primary-rgb: 61,169,252; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #eaf1fb; --bs-link-color: #2b95e8; --bs-link-color-rgb: 43,149,232; --bs-link-hover-color: #1f7fd0; --bs-card-bg: #ffffff; --bs-card-color: #2b3a55; } html[data-theme="kenney"] body { font-family: "Nunito", "Segoe UI", system-ui, sans-serif; } html[data-theme="kenney"] .card { border: 2px solid #b6c8e4 !important; border-radius: 14px !important; box-shadow: 0 4px 0 #c2d2ec !important; } html[data-theme="kenney"] .btn { border-radius: 12px !important; font-weight: 700; box-shadow: 0 4px 0 #c2d2ec; } html[data-theme="kenney"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c2d2ec; } /* ── XP — Windows XP "Luna": charcoal chrome, glossy blue accent ───────── */ html[data-theme="xp"] { --sk-bg-0: #24272b; --sk-bg-1: #2b3035; --sk-bg-2: #34393f; --sk-bg-3: #3f454c; --sk-bg-4: #454c53; --sk-bg-elevated: #4a5159; --sk-border: #3f454c; --sk-border-strong: #4e555d; --sk-divider: #3f454c; --sk-border-accent: rgba(47,134,214,0.34); --sk-text: #f3f5f7; --sk-text-soft: #cbd0d5; --sk-text-muted: #aeb4bb; --sk-text-faint: #828a92; --sk-text-inverse: #24272b; --sk-accent: #2f86d6; --sk-accent-soft: rgba(47,134,214,0.14); --sk-running: #2f86d6; --sk-success: #36ab38; --sk-error: #dd2b2b; --sk-warning: #f2b50a; --sk-brand: #2f86d6; --bs-body-bg: #24272b; --bs-body-bg-rgb: 36,39,43; --bs-body-color: #f3f5f7; --bs-body-color-rgb: 243,245,247; --bs-border-color: #4e555d; --bs-emphasis-color: #ffffff; --bs-primary: #2f86d6; --bs-primary-rgb: 47,134,214; --bs-secondary-bg: #34393f; --bs-tertiary-bg: #3f454c; --bs-link-color: #6fb2ec; --bs-link-color-rgb: 111,178,236; --bs-link-hover-color: #92c6f2; --bs-card-bg: #34393f; --bs-card-color: #f3f5f7; } /* ── Real Defense — royal-blue brand on white (matches realdefen.se) ────── */ html[data-theme="realdefense"] { --sk-bg-0: #eef2f7; --sk-bg-1: #f4f7fb; --sk-bg-2: #ffffff; --sk-bg-3: #e3eaf3; --sk-bg-4: #d7e1ef; --sk-bg-elevated: #ffffff; --sk-border: #ccd7e6; --sk-border-strong: #b3c2d8; --sk-divider: #e1e8f1; --sk-border-accent: rgba(43,91,171,0.34); --sk-text: #0f2540; --sk-text-soft: #44566f; --sk-text-muted: #44566f; --sk-text-faint: #7c8aa0; --sk-text-inverse: #ffffff; --sk-accent: #2b5bab; --sk-accent-soft: rgba(43,91,171,0.12); --sk-running: #2b5bab; --sk-success: #1a7f37; --sk-error: #cd3432; --sk-warning: #9a6700; --sk-brand: #2b5bab; --bs-body-bg: #eef2f7; --bs-body-bg-rgb: 238,242,247; --bs-body-color: #0f2540; --bs-body-color-rgb: 15,37,64; --bs-border-color: #ccd7e6; --bs-emphasis-color: #08182c; --bs-primary: #2b5bab; --bs-primary-rgb: 43,91,171; --bs-secondary-bg: #f4f7fb; --bs-tertiary-bg: #e7eef7; --bs-link-color: #2b5bab; --bs-link-color-rgb: 43,91,171; --bs-link-hover-color: #21478a; --bs-card-bg: #ffffff; --bs-card-color: #0f2540; } /* ── iolo — clean white with iolo red (matches iolo.com) ───────────────── */ html[data-theme="iolo"] { --sk-bg-0: #f5f5f5; --sk-bg-1: #fafafa; --sk-bg-2: #ffffff; --sk-bg-3: #ececec; --sk-bg-4: #e2e2e2; --sk-bg-elevated: #ffffff; --sk-border: #dcdcdc; --sk-border-strong: #c8c8c8; --sk-divider: #ececec; --sk-border-accent: rgba(205,52,50,0.30); --sk-text: #1a1a1a; --sk-text-soft: #555555; --sk-text-muted: #555555; --sk-text-faint: #8a8a8a; --sk-text-inverse: #ffffff; --sk-accent: #cd3432; --sk-accent-soft: rgba(205,52,50,0.10); --sk-running: #cd3432; --sk-success: #1a7f37; --sk-error: #b3261e; --sk-warning: #9a6700; --sk-brand: #cd3432; --bs-body-bg: #f5f5f5; --bs-body-bg-rgb: 245,245,245; --bs-body-color: #1a1a1a; --bs-body-color-rgb: 26,26,26; --bs-border-color: #dcdcdc; --bs-emphasis-color: #000000; --bs-primary: #cd3432; --bs-primary-rgb: 205,52,50; --bs-secondary-bg: #fafafa; --bs-tertiary-bg: #f0f0f0; --bs-link-color: #cd3432; --bs-link-color-rgb: 205,52,50; --bs-link-hover-color: #a82a28; --bs-card-bg: #ffffff; --bs-card-color: #1a1a1a; } /* ============================================================================ Page-nav bar — global Back button + breadcrumb trail ---------------------------------------------------------------------------- Sits between the top search row and page content (see MainLayout). The Back button is the primary "back" affordance in the installed PWA, whose standalone window has no browser chrome. All colours use --sk-* tokens so the bar re-themes with the 10 signature themes automatically. A long trail scrolls horizontally rather than wrapping or pushing the layout wide. ============================================================================ */ .page-nav { display: flex; align-items: center; gap: var(--sk-space-3); min-height: 40px; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--sk-border); overflow-x: auto; scrollbar-width: none; /* Firefox — hide the horizontal scrollbar */ } .page-nav::-webkit-scrollbar { display: none; } /* Back button — ghost style; dims and drops interaction when there's no history. */ .page-nav-back { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 10px 3px 8px; font-size: var(--sk-fs-sm); font-weight: 600; color: var(--sk-text-soft); background: transparent; border: 1px solid var(--sk-border-strong); border-radius: var(--sk-radius); cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .page-nav-back:hover:not(:disabled) { background: var(--sk-bg-3); color: var(--sk-text); } .page-nav-back:disabled { opacity: 0.4; cursor: default; } .page-nav-back .bi { font-size: 1rem; line-height: 1; } /* Breadcrumb trail */ .page-nav-crumbs { min-width: 0; } .page-nav-crumbs ol { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; white-space: nowrap; font-size: var(--sk-fs-sm); } .page-nav-crumbs li { display: inline-flex; align-items: center; } .page-nav-crumbs li + li::before { content: "\203A"; /* › */ margin: 0 8px; color: var(--sk-text-faint); } .page-nav-crumbs a { color: var(--sk-text-muted); } .page-nav-crumbs a:hover { color: var(--sk-accent); } .page-nav-crumbs .current { color: var(--sk-text); font-weight: 600; } /* Narrow screens — collapse Back to an icon to save room. */ @media (max-width: 720px) { .page-nav-back-label { display: none; } .page-nav-back { padding: 3px 8px; } }