/* ============================================================================ Menu sidebar variations ---------------------------------------------------------------------------- Two per-tenant sidebar skins, selected via the `data-menu-variant` attribute on . The choice is persisted as the reserved tenant-theme key `--menu-variant` (tinted-rail | dark-forest) and applied by wwwroot/js/theme.js (window.tenantTheme). The Admin > Theme page lets a tenant pick the variant. Colours are derived from the active tenant theme tokens (--sidebar, --sidebar-primary, --sidebar-foreground, ...), so each variant adapts to the tenant's brand instead of being hard-coded. Variant 2 - "Rail teinte" (tinted-rail) -> default (also the no-attribute fallback, so there is no flash before JS runs): brand-tinted flat rail, brand-coloured group labels, filled brand active pill. Variant 5 - "Foret sombre" (dark-forest) : inverted dark gradient rail with light text and a light active pill. Selectors target BlazorBlueprint's documented hooks (the `.bg-sidebar` rail, `[data-sidebar="group-label"]`, `[data-sidebar="menu-button"]`, `--sidebar-menu-button-active-*`). Scoped `:root[...]` prefixes out-specify the library's single-class rules. ============================================================================ */ /* --------------------------------------------------------------------------- Variant 2 - Tinted rail (default + no-attribute fallback) --------------------------------------------------------------------------- */ /* Filled brand "active" pill, replacing the soft --sidebar-accent default. These layout vars are not set by tenant themes, so there is no conflict. */ :root:not([data-menu-variant="dark-forest"]) { --sidebar-menu-button-active-bg: var(--sidebar-primary); --sidebar-menu-button-active-color: var(--sidebar-primary-foreground); --sidebar-menu-button-active-font-weight: 600; --sidebar-menu-button-active-shadow: 0 1px 2px color-mix(in oklab, var(--sidebar-primary) 32%, transparent); } /* Brand-tinted rail, clearly separated from the page content. Reads the tenant tokens (never overrides them here, so no var() feedback loop). */ :root:not([data-menu-variant="dark-forest"]) .bg-sidebar { background-color: color-mix(in oklab, var(--sidebar-primary) 8%, var(--sidebar)); } /* Brand-coloured, bolder section labels. */ :root:not([data-menu-variant="dark-forest"]) [data-sidebar="group-label"] { color: color-mix(in oklab, var(--sidebar-primary) 72%, var(--sidebar-foreground)); font-weight: 700; } /* Subtle brand tint on inactive item icons. */ :root:not([data-menu-variant="dark-forest"]) [data-sidebar="menu-button"]:not([aria-current="page"]) > svg { color: color-mix(in oklab, var(--sidebar-primary) 55%, var(--sidebar-foreground)); } /* --------------------------------------------------------------------------- Variant 5 - Dark forest --------------------------------------------------------------------------- */ /* Dark gradient rail derived from the tenant brand, plus inverted text/border tokens. IMPORTANT: --sidebar-primary is left untouched here because the gradient and the active-pill rule below read it; overriding it on this same element would feed back into those color-mix() calls (var() resolves lazily on the consuming element). */ :root[data-menu-variant="dark-forest"] .bg-sidebar { background-color: color-mix(in oklab, var(--sidebar-primary) 40%, #06120c); background-image: linear-gradient( 180deg, color-mix(in oklab, var(--sidebar-primary) 62%, #06120c) 0%, color-mix(in oklab, var(--sidebar-primary) 40%, #06120c) 100%); color: rgba(255, 255, 255, 0.84); --sidebar-foreground: rgba(255, 255, 255, 0.84); --foreground: rgba(255, 255, 255, 0.84); --muted-foreground: rgba(255, 255, 255, 0.52); --sidebar-border: rgba(255, 255, 255, 0.14); --sidebar-accent: rgba(255, 255, 255, 0.08); --sidebar-accent-foreground: #ffffff; } /* Dimmed section labels. */ :root[data-menu-variant="dark-forest"] [data-sidebar="group-label"] { color: rgba(255, 255, 255, 0.46); } /* Light active pill with dark brand text. */ :root[data-menu-variant="dark-forest"] [data-sidebar="menu-button"][data-active="true"] { background-color: #ffffff; color: color-mix(in oklab, var(--sidebar-primary) 72%, #06120c); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } /* Header brand chip (bg-primary) -> light chip with a dark brand glyph. */ :root[data-menu-variant="dark-forest"] .bg-sidebar .bg-primary { background-color: #ffffff; color: color-mix(in oklab, var(--sidebar-primary) 72%, #06120c); }