/* ========================================================= PAROCHOS VCR – Radzen overrides (global, not scoped — applies to all Radzen elements) ========================================================= */ /* ── Buttons: no uppercase ── */ .rz-button { text-transform: none !important; } /* ── Header: force white background (LIGHT) ───────────────── MainLayout_razor.css is SCOPED (Blazor CSS isolation), so its .rz-header rules don't reach the Radzen component. We override here (global) with higher specificity. ────────────────────────────────────────────────────────── */ .rz-layout > .rz-header, .rz-header { background-color: #ffffff !important; background: #ffffff !important; color: #1a1a2e !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } /* Icon buttons inside header */ .rz-header .rz-button, .rz-header .rz-sidebar-toggle { color: rgba(0, 0, 0, 0.6) !important; background: transparent !important; box-shadow: none !important; transition: background 0.15s ease, color 0.15s ease !important; } .rz-header .rz-button:hover, .rz-header .rz-sidebar-toggle:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(0, 0, 0, 0.85) !important; } /* Page title text in header */ .rz-header .rz-text { color: #1a1a2e !important; } /* ── Sidebar ──────────────────────────────────────────────── */ .rz-sidebar { border-right: 1px solid rgba(0, 0, 0, 0.06) !important; transition: background 0.25s ease, border-color 0.25s ease !important; } /* ── Dialog ───────────────────────────────────────────────── */ .rz-dialog-wrapper .rz-dialog { border-radius: 12px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; transition: background 0.25s ease, color 0.25s ease !important; } .rz-dialog-wrapper .rz-dialog-title { font-weight: 600 !important; font-size: 1rem !important; color: #1a1a2e !important; } /* ── DataGrid ─────────────────────────────────────────────── */ .rz-data-grid .rz-grid-table th { font-weight: 600 !important; font-size: 0.75rem !important; letter-spacing: 0.02em !important; color: rgba(0, 0, 0, 0.55) !important; background: var(--rz-base-50, #fafafa) !important; } /* ── Badges / Status chips ─────────────────────────────────── */ .rz-badge { border-radius: 20px !important; font-weight: 500 !important; } /* ── Notifications ─────────────────────────────────────────── */ .rz-notification { border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; } /* ── Form Fields ────────────────────────────────────────────── */ .rz-form-field .rz-textbox, .rz-form-field .rz-numeric, .rz-form-field .rz-textarea, .rz-form-field .rz-dropdown { border-radius: 8px !important; } /* ── Dialog section cards ───────────────────────────────────── */ :root { --rz-grid-cell-border: 1px solid rgba(0, 0, 0, 0.1); } .dlg-section { padding: 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--rz-border-radius, 8px); } /* ── Panel Menu (Sidebar nav) ───────────────────────────────── */ .rz-panel-menu .rz-navigation-item-text { font-size: 0.875rem !important; font-weight: 500 !important; } .rz-panel-menu .rz-navigation-item.selected > .rz-navigation-item-content, .rz-panel-menu .rz-navigation-item.active > .rz-navigation-item-content { border-radius: 8px !important; } /* ── Stat card warning border (pending invitations) ── */ .stat-card--warn-border { border-color: var(--rz-warning) !important; } /* ═══════════════════════════════════════════════════════════ DARK MODE OVERRIDES Selector: [data-theme="dark"] set on by darkmode.js ═══════════════════════════════════════════════════════════ */ /* ── Radzen CSS Variable Overrides ─────────────────────────── */ [data-theme="dark"] { /* Page & surface backgrounds */ --rz-body-background-color: #0f1117; --rz-base-background-color: #1a1d27; --rz-base-50: #1e2130; --rz-base-100: #252838; --rz-base-200: #2d3148; --rz-base-300: rgba(255, 255, 255, 0.09); --rz-base-400: rgba(255, 255, 255, 0.16); --rz-base-500: rgba(255, 255, 255, 0.24); /* Text */ --rz-text-color: #e2e8f0; --rz-text-secondary-color: #94a3b8; --rz-text-tertiary-color: #64748b; --rz-text-disabled-color: #475569; /* Primary accent – keep hue, adjust lighter tints */ --rz-primary-lighter: rgba(99, 102, 241, 0.14); --rz-primary-light: rgba(99, 102, 241, 0.28); /* Semantic color lighter variants (tinted backgrounds) */ --rz-success-lighter: rgba( 34, 197, 94, 0.13); --rz-danger-lighter: rgba(239, 68, 68, 0.13); --rz-warning-lighter: rgba(245, 158, 11, 0.13); --rz-info-lighter: rgba( 14, 165, 233, 0.13); /* Grid cell border */ --rz-grid-cell-border: 1px solid rgba(255, 255, 255, 0.07); /* Link */ --rz-link-color: #818cf8; --rz-link-hover-color: #a5b4fc; } /* ── Header (dark) ──────────────────────────────────────────── */ [data-theme="dark"] .rz-layout > .rz-header, [data-theme="dark"] .rz-header { background-color: #1a1d27 !important; background: #1a1d27 !important; color: #e2e8f0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .rz-header .rz-button, [data-theme="dark"] .rz-header .rz-sidebar-toggle { color: rgba(255, 255, 255, 0.65) !important; background: transparent !important; } [data-theme="dark"] .rz-header .rz-button:hover, [data-theme="dark"] .rz-header .rz-sidebar-toggle:hover { background: rgba(255, 255, 255, 0.07) !important; color: rgba(255, 255, 255, 0.95) !important; } [data-theme="dark"] .rz-header .rz-text { color: #e2e8f0 !important; } /* ── Sidebar (dark) ─────────────────────────────────────────── */ [data-theme="dark"] .rz-sidebar { background: #1a1d27 !important; border-right: 1px solid rgba(255, 255, 255, 0.07) !important; } /* ── Body / Page background ─────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f1117; color: #e2e8f0; } [data-theme="dark"] .rz-body { background: #0f1117 !important; } /* ── Cards ──────────────────────────────────────────────────── */ [data-theme="dark"] .rz-card { background: var(--rz-base-background-color) !important; border-color: rgba(255, 255, 255, 0.07) !important; color: #e2e8f0 !important; } /* ── Dialog (dark) ──────────────────────────────────────────── */ [data-theme="dark"] .rz-dialog-wrapper .rz-dialog { background: #1e2130 !important; color: #e2e8f0 !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important; } [data-theme="dark"] .rz-dialog-wrapper .rz-dialog-title { color: #e2e8f0 !important; } [data-theme="dark"] .rz-dialog-wrapper .rz-dialog-titlebar { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: #1e2130 !important; } [data-theme="dark"] .rz-dialog-wrapper .rz-dialog-content { background: #1e2130 !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-overlay-backdrop { background: rgba(0, 0, 0, 0.65) !important; } /* ── DataGrid (dark) ────────────────────────────────────────── */ [data-theme="dark"] .rz-data-grid .rz-grid-table th { color: rgba(255, 255, 255, 0.50) !important; background: #1e2130 !important; border-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .rz-data-grid, [data-theme="dark"] .rz-data-grid .rz-grid-table { background: #1a1d27 !important; border-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .rz-data-grid .rz-data-row td { border-color: rgba(255, 255, 255, 0.05) !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-data-grid .rz-data-row:hover td { background: #252838 !important; } [data-theme="dark"] .rz-data-grid .rz-data-row.rz-state-selected td { background: rgba(99, 102, 241, 0.18) !important; } [data-theme="dark"] .rz-data-grid-header, [data-theme="dark"] .rz-data-grid-footer { background: #1e2130 !important; border-color: rgba(255, 255, 255, 0.07) !important; color: #94a3b8 !important; } /* ── Panel Menu / Sidebar Nav (dark) ────────────────────────── */ [data-theme="dark"] .rz-panel-menu .rz-panel-menu-item-wrapper:hover { background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .rz-panel-menu .rz-state-active > .rz-panel-menu-item-wrapper { background: rgba(99, 102, 241, 0.14) !important; } [data-theme="dark"] .rz-panel-menu .rz-navigation-item-text { color: #cbd5e1 !important; } [data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-text { color: var(--rz-primary) !important; } /* ── Dropdowns / Selects (dark) ─────────────────────────────── */ [data-theme="dark"] .rz-dropdown, [data-theme="dark"] .rz-dropdown-panel { background: #252838 !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item { color: #e2e8f0 !important; } [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item:hover, [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight { background: rgba(99, 102, 241, 0.14) !important; color: var(--rz-primary) !important; } /* ── Form Inputs (dark) ─────────────────────────────────────── */ [data-theme="dark"] .rz-textbox, [data-theme="dark"] .rz-inputtext, [data-theme="dark"] .rz-textarea, [data-theme="dark"] .rz-numeric input, [data-theme="dark"] input.rz-inputtext, [data-theme="dark"] textarea.rz-inputtextarea { background: #252838 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e2e8f0 !important; } [data-theme="dark"] .rz-textbox::placeholder, [data-theme="dark"] .rz-inputtext::placeholder, [data-theme="dark"] input.rz-inputtext::placeholder { color: #64748b !important; } [data-theme="dark"] .rz-textbox:focus, [data-theme="dark"] .rz-inputtext:focus, [data-theme="dark"] input.rz-inputtext:focus { border-color: var(--rz-primary) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } /* ── Tabs (dark) ────────────────────────────────────────────── */ [data-theme="dark"] .rz-tabview-nav { border-bottom-color: rgba(255, 255, 255, 0.09) !important; background: transparent !important; } [data-theme="dark"] .rz-tabview-nav li .rz-tabview-nav-link { color: #94a3b8 !important; } [data-theme="dark"] .rz-tabview-nav li.rz-state-active .rz-tabview-nav-link { color: var(--rz-primary) !important; border-bottom-color: var(--rz-primary) !important; background: transparent !important; } [data-theme="dark"] .rz-tabview-panels { background: transparent !important; } /* ── Checkboxes & Switches (dark) ───────────────────────────── */ [data-theme="dark"] .rz-checkbox .rz-checkbox-box { background: #252838 !important; border-color: rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] .rz-switch-body { background: #2d3148 !important; } /* ── Notifications / Toast (dark) ───────────────────────────── */ [data-theme="dark"] .rz-notification { background: #1e2130 !important; color: #e2e8f0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important; } /* ── Tooltip (dark) ─────────────────────────────────────────── */ [data-theme="dark"] .rz-tooltip { background: #2d3148 !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } /* ── Context menu (dark) ────────────────────────────────────── */ [data-theme="dark"] .rz-contextmenu, [data-theme="dark"] .rz-menu .rz-menu-list { background: #1e2130 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; } /* ── Splitter (dark) ────────────────────────────────────────── */ [data-theme="dark"] .rz-splitter-bar { background: rgba(255, 255, 255, 0.08) !important; } /* ── dlg-section cards (dark) ───────────────────────────────── */ [data-theme="dark"] .dlg-section { background: #252838 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } /* ── Scrollbars (dark) ──────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15) !important; } [data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03) !important; } /* ── DatePicker calendar button (dark) ────────────────────────── Actual Radzen HTML: class="rz-button rz-button-icon-only rz-variant-flat rz-base rz-shade-default" Radzen Material sets background on .rz-variant-flat.rz-base → white box in dark mode. ────────────────────────────────────────────────────────────── */ [data-theme="dark"] .rz-button.rz-variant-flat.rz-base, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base.rz-shade-default, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base.rz-button-icon-only { background-color: #252838 !important; background: #252838 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; box-shadow: none !important; } [data-theme="dark"] .rz-button.rz-variant-flat.rz-base:hover, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base.rz-shade-default:hover { background-color: #2d3148 !important; background: #2d3148 !important; color: #38bdf8 !important; } [data-theme="dark"] .rz-button.rz-variant-flat.rz-base .rzi, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base .material-icons { color: #94a3b8 !important; } [data-theme="dark"] .rz-button.rz-variant-flat.rz-base:hover .rzi, [data-theme="dark"] .rz-button.rz-variant-flat.rz-base:hover .material-icons { color: #38bdf8 !important; }