/* ========================================================= PAROCHOS VCR – darkmode.css Applied when: [data-theme="dark"] on Toggled by: darkmode.js ←→ MainLayout.razor ========================================================= */ /* ── Global transitions ─────────────────────────────────── */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow; transition-duration: 0.22s; transition-timing-function: ease; } /* ── Base ────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f1117; color: #e2e8f0; } /* ── Blazor error UI ─────────────────────────────────────── */ [data-theme="dark"] #blazor-error-ui { background: #2d1515; color: #fca5a5; border-top: 1px solid rgba(239, 68, 68, 0.25); } /* ── Dialog class helpers ────────────────────────────────── */ [data-theme="dark"] .dlg-section { background: #252838 !important; border-color: rgba(255,255,255,0.08) !important; color: #e2e8f0 !important; } [data-theme="dark"] .dlg-section-title { color: var(--rz-primary) !important; } [data-theme="dark"] .dlg-toggle { background: #1e2130 !important; border-color: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .dlg-toggle:hover { background: #252838 !important; border-color: rgba(255,255,255,0.18) !important; } [data-theme="dark"] .dlg-toggle.active { background: rgba(99,102,241,0.14) !important; border-color: var(--rz-primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; } [data-theme="dark"] .dlg-toggle-icon { color: #64748b !important; } [data-theme="dark"] .dlg-toggle.active .dlg-toggle-icon { color: var(--rz-primary) !important; } [data-theme="dark"] .dlg-flag { background: #1e2130 !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .dlg-flag:hover { background: #252838 !important; border-color: rgba(255,255,255,0.16) !important; } [data-theme="dark"] .dlg-color-row { background: #1e2130 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="dark"] .dlg-preview { background: #1e2130 !important; border-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .dlg-preview-eyebrow { color: #64748b !important; } [data-theme="dark"] .dlg-footer { border-top-color: rgba(255,255,255,0.07) !important; } /* ── Color swatches ─────────────────────────────────────── */ [data-theme="dark"] .color-swatch, [data-theme="dark"] .color-swatch--lg { border-color: rgba(255,255,255,0.15) !important; } /* ── Detail row ─────────────────────────────────────────── */ [data-theme="dark"] .detail-row { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .detail-row-value--mono { background: #252838 !important; color: #e2e8f0 !important; } /* ── Department code badge ──────────────────────────────── */ [data-theme="dark"] .dept-code { background: rgba(99,102,241,0.14) !important; color: var(--rz-primary) !important; } /* ── Stat / dashboard cards ─────────────────────────────── */ [data-theme="dark"] .stat-card { background: #1a1d27 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .dashboard-card { background: #1a1d27 !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .dashboard-catalog-row:hover { background: #252838 !important; } [data-theme="dark"] .printer-row--locked { background: rgba(245,158,11,0.10) !important; } /* ── Tab elements ───────────────────────────────────────── */ [data-theme="dark"] .tab-card { background: #1a1d27 !important; border-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; } [data-theme="dark"] .tab-divider { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .rz-dialog-titlebar { border-bottom-color: rgba(255,255,255,0.08) !important; background: #1e2130 !important; } /* ── Client rows ────────────────────────────────────────── */ [data-theme="dark"] .client-row-name:hover { background: rgba(99,102,241,0.12) !important; color: var(--rz-primary) !important; } [data-theme="dark"] .client-row-secondary { color: #64748b !important; } /* ── Misc page elements ─────────────────────────────────── */ [data-theme="dark"] .details-section { border-top-color: var(--rz-primary) !important; } [data-theme="dark"] .device-tabs .rz-tabview-nav { border-bottom-color: rgba(255,255,255,0.09) !important; } [data-theme="dark"] .app-card-interactive:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .supervisor-avatar { border-color: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .rz-datatable .rz-datatable-thead > tr > th { color: rgba(255,255,255,0.50) !important; background: #1e2130 !important; } [data-theme="dark"] .sidebar-section-label { color: #475569 !important; } [data-theme="dark"] .sidebar-version, [data-theme="dark"] .sidebar-copyright { color: #334155 !important; } [data-theme="dark"] .sidebar-footer { border-top-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] .sidebar-logo { border-bottom-color: rgba(255,255,255,0.07) !important; } /* ═══════════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON ───────────────────────────────────────────────────────── The button now uses Radzen's Icon= param which renders a .rzi element — no custom spans, no inline-style conflict. .dm-toggle-btn--sun → shown when dark mode is active .dm-toggle-btn--moon → shown when dark mode is off ═══════════════════════════════════════════════════════════ */ /* Sun icon: amber glow in dark mode */ .dm-toggle-btn--sun .rzi, .dm-toggle-btn--sun .rz-button-icon { color: #fbbf24 !important; } /* Subtle rotation animation on the sun */ .dm-toggle-btn--sun .rzi { display: inline-block; transform: rotate(20deg); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* Moon icon: visible on light header */ .dm-toggle-btn--moon .rzi, .dm-toggle-btn--moon .rz-button-icon { color: rgba(0, 0, 0, 0.58) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* Moon on dark header (before Blazor re-renders) */ [data-theme="dark"] .dm-toggle-btn--moon .rzi, [data-theme="dark"] .dm-toggle-btn--moon .rz-button-icon { color: rgba(255, 255, 255, 0.75) !important; } /* ── Smooth page background transition ────────────────────── */ html { transition: background-color 0.22s ease; } [data-theme="dark"] html, [data-theme="dark"] body { color-scheme: dark; } [data-theme="light"] html, [data-theme="light"] body { color-scheme: light; }