/* * Theme overrides — the single place to customize the look of the Radzen theme. * * The active Radzen theme stylesheet (default.css / dark.css) is injected by the * RadzenTheme component at the HeadOutlet position, i.e. AFTER this file in the * cascade. The doubled :root:root selector below out-specifies the theme's own * :root declarations so these overrides always win, in both light and dark. * * Rules: * - Override --rz-* variables here instead of hardcoding colors in site.css * or in inline styles, so both themes stay consistent. * - Keep this file small; per-component tweaks belong in scoped .razor.css. */ :root:root { /* Softer, more modern corner rounding on inputs/buttons/cards. */ --rz-border-radius: 8px; /* Modern, highly readable UI font (loaded in App.razor). Replaces the theme's Source Sans Pro. Comfortaa stays reserved for branding accents. */ --rz-text-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* The Radzen theme defaults to 0.875rem (14px) body text, which reads small. 15px on desktop, and 16px on touch devices below — where it also stops iOS Safari from auto-zooming focused inputs (they inherit this size). */ --rz-body-font-size: 0.9375rem; } /* Larger touch screens deserve larger text. */ @media (max-width: 899.98px) { :root:root { --rz-body-font-size: 1rem; } } /* * Base document styles. The Radzen theme only styles its own .rz-* components * (its body rule is just `margin:0`), so plain HTML text would render browser- * default black even on the dark theme. Inherit theme colors here — plain * inheritance, no !important — so any element can still opt out locally. * (Replaces a removed site.css rule that forced --rz-text-color onto every * div/span/p/label with !important, which broke all colored surfaces.) */ body { background-color: var(--rz-body-background-color); color: var(--rz-text-color); font-family: var(--rz-text-font-family, sans-serif); } html { scrollbar-gutter: stable; } body.no-scroll { padding-right: 0 !important; } /* Theme-specific overrides. dark.css/default.css set --rz-theme-name on :root, but a class hook is simpler: RadzenTheme marks with no class, so we key off the variables themselves where possible. Add [data-theme] hooks here if a token ever needs different values per theme. */ /* * App header navigation contrast. * * The header paints itself with an environment colour (teal on Development, red on Production, * etc.) and sets a matching foreground through rz-color-on-*. Radzen's menu and link components * ignore that inherited colour and paint from theme tokens instead - a mid-blue tuned for the * body background, which on a saturated header bar reads as low-contrast blue-on-teal. * * Re-pointing the tokens at currentColor makes the nav adopt whatever foreground the environment * colour asked for, so it stays legible on every environment and in both themes. * * Two things make this safe: * - Scoped to .app-header, so the values are inherited by its subtree and beat the theme's :root * declarations on proximity - no !important and no specificity fight, regardless of the fact * that the theme stylesheet is injected after this file. * - Only the *top-level* tokens are touched. Dropdown panels render on the normal surface colour * and read from --rz-menu-item-*, which is deliberately left alone. */ .app-header { /* Idle items sit slightly back so hover and the current page still stand out now that everything shares one hue. An unsupported color-mix degrades to the plain inherited colour, which is still perfectly readable. */ --rz-menu-top-item-color: color-mix(in srgb, currentColor 80%, transparent); --rz-menu-top-item-icon-color: color-mix(in srgb, currentColor 80%, transparent); --rz-menu-top-item-hover-color: currentColor; --rz-menu-top-item-icon-hover-color: currentColor; --rz-menu-top-item-selected-color: currentColor; --rz-link-color: color-mix(in srgb, currentColor 80%, transparent); --rz-link-hover-color: currentColor; } /* The drawer header carries the same environment colour, so it needs the same treatment. */ .app-drawer-header { --rz-link-color: currentColor; --rz-link-hover-color: currentColor; }