/* theme-switcher.css — segmented pill control for the unified theme switcher. Pairs with theme-init.js + theme-switcher.js. Theme-aware via CSS vars that the DaisyUI ndt-dark / ndt-light themes already define. */ /* Smooth theme-change transition. * * Only active for ~200ms while .theme-transitioning is on (added by * theme-switcher.js immediately before the data-theme attribute flips, and * removed via setTimeout). This guarantees: * - First paint never animates (theme-init.js doesn't set this class) * - Hover / focus / interactive transitions on individual elements are * unaffected (the class is only present for ~200ms during the swap) * - Users with prefers-reduced-motion get an instant snap (the JS skips * adding the class for them) * * Uses :where() for zero specificity, so any author rule wins. */ :where(html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after) { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, fill 180ms ease, stroke 180ms ease, box-shadow 180ms ease; } .ndt-theme-switch { display: inline-flex; align-items: center; gap: 0; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); font-family: inherit; line-height: 1; } .ndt-theme-switch button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; margin: 0; padding: 0; width: 32px; height: 32px; border-radius: 999px; cursor: pointer; color: color-mix(in srgb, currentColor 60%, transparent); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease; font-family: inherit; font-size: inherit; } .ndt-theme-switch button:hover { color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); } .ndt-theme-switch button:active { transform: scale(0.96); } .ndt-theme-switch button.is-active { background: var(--color-primary, #1a62ff); color: var(--color-primary-content, #fff); } .ndt-theme-switch button.is-active:hover { background: var(--color-primary, #1a62ff); } .ndt-theme-switch button:focus-visible { outline: 2px solid var(--color-primary, #1a62ff); outline-offset: 2px; } .ndt-theme-switch svg { width: 16px; height: 16px; display: block; } @media (prefers-reduced-motion: reduce) { .ndt-theme-switch button { transition: none; } .ndt-theme-switch button:active { transform: none; } } /* Compact variant — for crowded toolbars */ .ndt-theme-switch.is-compact button { width: 26px; height: 26px; } .ndt-theme-switch.is-compact svg { width: 14px; height: 14px; } /* SPA floating-pill variant — fixed top-right. Sits decoupled from the React tree, so SPA chunk-hash changes don't affect us. Glassy translucent backdrop adapts to whatever route the user lands on (dashboard, login, settings, etc). z-index needs to be well above admin-gated launcher pills (z-index 2147483600) and the mandatory-courses banner (z-index 2147483640), so we sit at +1 above the highest of those. Modal dialogs use even higher values and still cover the FAB when open. */ .ndt-theme-switch.theme-fab { position: fixed; top: 12px; right: 14px; z-index: 2147483641; background: color-mix(in srgb, var(--color-base-100, #0b1220) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: color-mix(in srgb, var(--color-base-content, #fff) 12%, transparent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } /* When the admin/super_admin mandatory-courses banner is present (#ndt-courses-banner — fixed top, height 44px), push the FAB below it so it isn't visually obscured. :has() support is ≥95% across modern browsers; older browsers fall back to the default top:12px, so worst case the FAB sits behind the banner (same as before). */ body:has(#ndt-courses-banner) .ndt-theme-switch.theme-fab { top: 56px; } /* Hide on small viewports to avoid overlapping the SPA's own header on mobile — switcher remains accessible via the existing pages. */ @media (max-width: 480px) { .ndt-theme-switch.theme-fab { display: none; } }