/* Theme font: KLab = Sora, KEO = Poppins. data-theme is on so this applies before any other CSS. */ :root[data-theme="k-labs"] { --font-family: 'Sora', sans-serif; --theme-accent-brand: hsl(23, 90%, 54%); --theme-primary: hsl(0, 0%, 0%); --theme-background: hsl(0, 0%, 100%); --theme-foreground: hsl(0, 0%, 0%); --theme-navbar-bg: rgba(255, 255, 255, 0.7); --theme-sidebar-bg: rgba(255, 255, 255, 0.98); --theme-button-primary: hsl(23, 90%, 54%); --theme-logout-bg: transparent; } :root[data-theme="k-labs"] body { font-family: 'Sora', sans-serif !important; } :root[data-theme="keo-legacy"] { --font-family: 'Poppins', sans-serif; --theme-accent-brand: hsl(210, 80%, 15%); --theme-primary: hsl(210, 80%, 15%); --theme-background: hsl(0, 0%, 100%); --theme-foreground: hsl(210, 80%, 15%); --theme-navbar-bg: rgb(9, 31, 52); --theme-sidebar-bg: white; --theme-button-primary: hsl(210, 80%, 15%); --theme-logout-bg: red; } :root[data-theme="keo-legacy"] body { font-family: 'Poppins', sans-serif !important; } .theme-navbar[data-theme="k-labs"] { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.2); } .theme-navbar[data-theme="keo-legacy"] { background-color: rgb(9, 31, 52) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-button-primary[data-theme="k-labs"] { background-color: var(--theme-button-primary); color: white; border: none; } .theme-button-primary[data-theme="keo-legacy"] { background-color: var(--theme-button-primary); color: white; border: 2px transparent solid; } .theme-logout-button[data-theme="keo-legacy"] { background: red !important; color: white !important; border-radius: 20px !important; padding: 8px 16px !important; } /* Loading colors for keo-legacy theme */ [data-theme="keo-legacy"] { --loader-color: hsl(210, 80%, 15%) !important; --mantine-color-orange-filled: hsl(210, 80%, 15%) !important; --mantine-color-orange-6: hsl(210, 80%, 15%) !important; --mantine-color-orange-7: hsl(210, 80%, 20%) !important; --mantine-primary-color-filled: hsl(210, 80%, 15%) !important; } /* Only apply to loading overlay SVGs, not all SVGs */ [data-theme="keo-legacy"] .custom-loading-overlay svg, [data-theme="keo-legacy"] .custom-loading-overlay-container svg, [data-theme="keo-legacy"] .custom-loading-overlay svg *, [data-theme="keo-legacy"] .custom-loading-overlay-container svg * { color: hsl(210, 80%, 15%) !important; fill: hsl(210, 80%, 15%) !important; stroke: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .mantine-Loader-root, [data-theme="keo-legacy"] [class*="mantine-Loader"] { color: hsl(210, 80%, 15%) !important; --loader-color: hsl(210, 80%, 15%) !important; --mantine-color-orange-filled: hsl(210, 80%, 15%) !important; } /* Only Mantine Loader SVGs, not chart SVGs */ [data-theme="keo-legacy"] .mantine-Loader-root svg, [data-theme="keo-legacy"] [class*="mantine-Loader"] svg { color: hsl(210, 80%, 15%) !important; fill: hsl(210, 80%, 15%) !important; stroke: hsl(210, 80%, 15%) !important; } /* Sidebar loading spinner for keo-legacy */ [data-theme="keo-legacy"] .sidebar__nav-link--loading::after { border-color: hsl(210, 80%, 15%) !important; border-top-color: transparent !important; } /* Pagination active state for keo-legacy */ [data-theme="keo-legacy"] .custom-pagination .mantine-Pagination-control[data-active] { background-color: hsl(210, 80%, 15%) !important; color: white !important; } /* Button accent-brand variant for keo-legacy - use red for primary actions */ [data-theme="keo-legacy"] .custom-button-accent-brand, [data-theme="keo-legacy"] button.custom-button-accent-brand, [data-theme="keo-legacy"] a.custom-button-accent-brand { background-color: #dc3545 !important; color: white !important; } [data-theme="keo-legacy"] .custom-button-accent-brand:hover:not(:disabled) { background-color: #c82333 !important; opacity: 1 !important; } /* Button accent-brand-outline variant for keo-legacy */ [data-theme="keo-legacy"] .custom-button-accent-brand-outline, [data-theme="keo-legacy"] button.custom-button-accent-brand-outline, [data-theme="keo-legacy"] a.custom-button-accent-brand-outline { border: 1px solid #dc3545 !important; background-color: transparent !important; color: #dc3545 !important; } [data-theme="keo-legacy"] .custom-button-accent-brand-outline:hover:not(:disabled) { background-color: rgba(220, 53, 69, 0.1) !important; } /* Select dropdown items for keo-legacy */ [data-theme="keo-legacy"] .mantine-Select-item[data-selected], [data-theme="keo-legacy"] .mantine-Select-item[data-hovered] { background-color: hsla(210, 80%, 15%, 0.1) !important; color: hsl(210, 80%, 15%) !important; } /* MultiSelect values for keo-legacy */ [data-theme="keo-legacy"] .mantine-MultiSelect-value { background-color: hsla(210, 80%, 15%, 0.1) !important; color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .mantine-MultiSelect-valueRemove { color: hsl(210, 80%, 15%) !important; } /* Slider for keo-legacy */ [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-bar { background-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-thumb { background-color: hsl(210, 80%, 15%) !important; } /* Switch for keo-legacy */ [data-theme="keo-legacy"] .custom-switch-brand[data-checked="true"] .mantine-Switch-track, [data-theme="keo-legacy"] .custom-switch-brand input[type="checkbox"]:checked ~ .mantine-Switch-track { background-color: hsl(210, 80%, 15%) !important; } /* Radio buttons for keo-legacy */ [data-theme="keo-legacy"] .custom-radio-group input[type="radio"], [data-theme="keo-legacy"] .custom-radio-group input[type="radio"]:checked { border-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-radio-group svg { fill: hsl(210, 80%, 15%) !important; stroke: hsl(210, 80%, 15%) !important; color: hsl(210, 80%, 15%) !important; } /* Checkbox for keo-legacy */ [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input { border-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input:checked { background-color: hsl(210, 80%, 15%) !important; border-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-icon svg { fill: white !important; } /* Links in data entry table for keo-legacy */ [data-theme="keo-legacy"] .data-entry-files-table__link, [data-theme="keo-legacy"] .data-entry-files-table__link:hover, [data-theme="keo-legacy"] .data-entry-files-table__link i { color: hsl(210, 80%, 15%) !important; } /* Burger button color for keo-legacy - white on dark blue navbar */ [data-theme="keo-legacy"] .header__burger-btn, [data-theme="keo-legacy"] .header__burger-btn .mantine-Burger-root, [data-theme="keo-legacy"] #sidebar-toggle-burger { color: white !important; } [data-theme="keo-legacy"] .mantine-Burger-burger, [data-theme="keo-legacy"] .mantine-Burger-burger::before, [data-theme="keo-legacy"] .mantine-Burger-burger::after { background-color: white !important; } /* Hover states for burger in keo-legacy */ [data-theme="keo-legacy"] #sidebar-toggle:hover { background-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="keo-legacy"] #sidebar-toggle:active { background-color: rgba(255, 255, 255, 0.15) !important; }