/* App CSS — loads AFTER bootstrap.min.css + MudBlazor + vahary.css, so its --bs-* overrides win. All colours come from the Vahary tokens in vahary.css (--v-*); no raw brand hex here (one documented exception: the .btn-primary AA fix below). The Bootstrap→token bridge (bottom) makes the raw-Bootstrap pages render dark + on-brand, ending the "light slabs on a dark shell" split (UI-Uptime-001) until they port to MudBlazor. */ html, body { font-family: var(--v-font-body); } a, .btn-link { color: var(--v-color-text-link); } /* Primary buttons (login audit W0-U1). This rule used to pin raw #5B21B6/#FFFFFF, as a deliberate, documented exception to the tokens-only rule above, because the token pair could not carry a label: Uptime is dark-only, and --v-color-interactive-accent (#8B5CF6) under --v-color-text-on-accent (#181E24) computed 3.97:1, below AA. That exception named its own exit condition — "the AA-safe on-accent pair belongs in the token layer — package-side workstream". Backlog #20 is that workstream: the dark accent is now #A78BFA (prim.violet-lift), so the token pair measures 6.17:1 base, 10.89:1 hover and active. The exception is therefore retired and the button goes back to tokens, which is also what keeps it in step with the rest of the estate. Still set via --bs-btn-* so hover/active/disabled derive from the accent ramp instead of Bootstrap's stock blue. */ .btn-primary { --bs-btn-color: var(--v-color-text-on-accent); --bs-btn-bg: var(--v-color-interactive-accent); --bs-btn-border-color: var(--v-color-interactive-accent); --bs-btn-hover-color: var(--v-color-text-on-accent); --bs-btn-hover-bg: var(--v-color-interactive-accent-hover); --bs-btn-hover-border-color: var(--v-color-interactive-accent-hover); --bs-btn-active-color: var(--v-color-text-on-accent); --bs-btn-active-bg: var(--v-color-interactive-accent-active); --bs-btn-active-border-color: var(--v-color-interactive-accent-active); --bs-btn-disabled-color: var(--v-color-text-on-accent); --bs-btn-disabled-bg: var(--v-color-interactive-accent); --bs-btn-disabled-border-color: var(--v-color-interactive-accent); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--v-color-border-focus); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--v-color-status-healthy); } .invalid { outline: 1px solid var(--v-color-status-fault); } .validation-message { color: var(--v-color-status-fault); } .blazor-error-boundary { background: var(--v-color-status-fault); padding: 1rem 1rem 1rem 1rem; color: var(--v-color-status-fault-on); } .blazor-error-boundary::after { content: "An error has occurred." } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ---- Uptime (MudBlazor) utilities ---- */ .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .stat-card { border: 1px solid var(--v-color-border-hairline); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--v-shadow-overlay); border-color: var(--v-color-interactive-accent); } /* ============================================================================ Bootstrap → Vahary token bridge. Uptime is NOC dark-only (). Point Bootstrap's theme variables at the tokens so the raw-Bootstrap pages match the MudBlazor shell instead of rendering as light slabs. Full port to Mud components is the follow-up (UI-Uptime-001); this ends the visual split now. ========================================================================== */ [data-bs-theme="dark"] { --bs-body-bg: var(--v-color-surface-base); --bs-body-color: var(--v-color-text-primary); --bs-emphasis-color: var(--v-color-text-primary); --bs-secondary-color: var(--v-color-text-secondary); --bs-secondary-bg: var(--v-color-surface-raised); --bs-tertiary-bg: var(--v-color-surface-sunken); --bs-border-color: var(--v-color-border-hairline); --bs-link-color: var(--v-color-text-link); --bs-link-hover-color: var(--v-color-text-link); /* cards + tables (the "white slabs") */ --bs-card-bg: var(--v-color-surface-raised); --bs-card-border-color: var(--v-color-border-hairline); --bs-card-cap-bg: var(--v-color-surface-sunken); --bs-table-color: var(--v-color-text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--v-color-border-hairline); --bs-table-striped-bg: var(--v-color-surface-raised); --bs-table-hover-bg: var(--v-color-surface-sunken); /* alert / subtle emphasis surfaces → canonical status wash + on-text (fixes the pink banners) */ --bs-success-text-emphasis: var(--v-color-status-healthy-on); --bs-success-bg-subtle: var(--v-color-status-healthy-subtle); --bs-success-border-subtle: var(--v-color-status-healthy-subtle); --bs-warning-text-emphasis: var(--v-color-status-attention-on); --bs-warning-bg-subtle: var(--v-color-status-attention-subtle); --bs-warning-border-subtle: var(--v-color-status-attention-subtle); --bs-danger-text-emphasis: var(--v-color-status-fault-on); --bs-danger-bg-subtle: var(--v-color-status-fault-subtle); --bs-danger-border-subtle: var(--v-color-status-fault-subtle); --bs-info-text-emphasis: var(--v-color-status-info-on); --bs-info-bg-subtle: var(--v-color-status-info-subtle); --bs-info-border-subtle: var(--v-color-status-info-subtle); --bs-secondary-text-emphasis: var(--v-color-status-neutral-on); --bs-secondary-bg-subtle: var(--v-color-status-neutral-subtle); } /* Status badges/pills: the canonical colour+text pattern (wash bg + on-text), AA by construction — replaces white-on-saturated-fill, which failed contrast (UI-Uptime-005). Icons/labels carry severity alongside colour. */ [data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .bg-success { background-color: var(--v-color-status-healthy-subtle) !important; color: var(--v-color-status-healthy-on) !important; } [data-bs-theme="dark"] .badge.bg-warning, [data-bs-theme="dark"] .bg-warning { background-color: var(--v-color-status-attention-subtle) !important; color: var(--v-color-status-attention-on) !important; } [data-bs-theme="dark"] .badge.bg-danger, [data-bs-theme="dark"] .bg-danger { background-color: var(--v-color-status-fault-subtle) !important; color: var(--v-color-status-fault-on) !important; } [data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .bg-info { background-color: var(--v-color-status-info-subtle) !important; color: var(--v-color-status-info-on) !important; } [data-bs-theme="dark"] .badge.bg-secondary, [data-bs-theme="dark"] .bg-secondary { background-color: var(--v-color-status-neutral-subtle) !important; color: var(--v-color-status-neutral-on) !important; } /* UI-Uptime-003: flapping alarms get a DISTINCT violet pill (not the severity red/amber/cyan or the status green) + a gentle pulse that reads as "oscillating / unstable". */ .badge-flapping { background-color: var(--v-color-interactive-accent); color: var(--v-color-text-on-accent); animation: uptime-flap 1.3s ease-in-out infinite; } @keyframes uptime-flap { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .badge-flapping { animation: none; } } /* ============================================================================= Branded boot state (theme Wave 2) ----------------------------------------------------------------------------- Painted from the static HTML in App.razor before any script runs, removed by the afterServerStarted initializer. Literal fallbacks throughout: this element can paint before vahary.css has applied on a cold cache, and a boot mark that depends on the stylesheet it is covering for would defeat itself. Uptime pins data-v-theme="dark" (a NOC runs dark), so Night is the only ground this needs. ============================================================================= */ #vahary-boot { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--v-color-surface-base, #12161A); opacity: 1; transition: opacity 0.25s ease; } .vahary-boot__mark { width: 44px; height: 44px; color: var(--v-color-text-muted, #8B949C); animation: vahary-boot-pulse 1.6s ease-in-out infinite; } .vahary-boot__label { font-family: var(--v-font-body, 'Work Sans'), system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-color-text-muted, #8B949C); } #vahary-boot.vahary-boot--done { opacity: 0; pointer-events: none; } @keyframes vahary-boot-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vahary-boot__mark { animation: none; opacity: 1; } #vahary-boot { transition: none; } }