/* ============================================================ Aidithi Theme Tokens Single source of truth for site colors (light / dark). Architecture: - Light theme lives in :root. - Dark theme overrides live in [data-theme="dark"]. - The active theme is chosen by the data-theme attribute on , set by the no-flash inline script (initial paint) and theme.js (toggle + live system follow). To theme any current or future page, consume these tokens with var(--token) instead of hardcoded hex values. Do NOT hardcode colors. ============================================================ */ /* ---- Light theme (default) ---- */ :root { color-scheme: light; /* Core palette */ --bg-main: #F5F3EF; /* Linen */ --bg-surface: #FFFFFF; /* Pure White */ --text-primary: #1C1A17; /* Deep Espresso */ --text-secondary: #68625B; /* Muted Taupe */ --accent-primary: #3F6212; /* Forest Sage */ --accent-secondary: #B19886; /* Warm Oak */ /* Supporting tokens */ --border: #ECECEC; --surface-hover: #F8F4EF; --accent-soft: rgba(63, 98, 18, .10); --accent-contrast: #FFFFFF; --on-accent: var(--accent-contrast); /* alias: text/icon on the accent */ --shadow: rgba(0, 0, 0, .08); /* Accent depth (hovers / gradients) */ --accent-strong: #31500E; --accent-primary-rgb: 63, 98, 18; /* Extra surface / border levels */ --bg-inset: #EFEDE8; --border-strong: #D8D8D8; /* Semantic status (keep their meaning; theme-tuned) */ --success: #178352; --success-soft: rgba(23, 131, 82, .12); --warning: #A66300; --warning-soft: #FFF0E3; --danger: #DC3545; --danger-soft: rgba(220, 53, 69, .12); --info: #0284C7; --info-soft: #E0F2FE; --pink: #ce8c2d; --pink-soft: #bd9f6f; --text-on-status: #FFFFFF; /* white text on solid status fills, both themes */ } /* ---- Dark theme ---- */ :root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; /* Core palette */ --bg-main: #1A101A; /* Charcoal */ --bg-surface: #231F20; /* Dark Slate */ --text-primary: #F5F3EF; /* Off-White */ --text-secondary: #78716C; /* Soft Stone */ --accent-primary: #C4AE98; /* Nordic Oak */ --accent-secondary: #C4AE98; /* Pale Sand */ /* Supporting tokens */ --border: #3A3438; --surface-hover: #2C2529; --accent-soft: rgba(196, 174, 152, .14); --accent-contrast: #1A101A; --shadow: rgba(0, 0, 0, .45); /* Accent depth (hovers / gradients) */ --accent-strong: #D8C4B0; --accent-primary-rgb: 196, 174, 152; /* Extra surface / border levels */ --bg-inset: #1F1B1C; --border-strong: #4A4348; /* Semantic status (keep their meaning; theme-tuned) */ --success: #3DBE86; --success-soft: rgba(61, 190, 134, .16); --warning: #F4C542; --warning-soft: rgba(244, 197, 66, .16); --danger: #F16B77; --danger-soft: rgba(241, 107, 119, .16); --info: #4DB4E8; --info-soft: rgba(2, 132, 199, .18); --pink: #CE8C2D; --pink-soft: rgba(52, 135, 37, .16); } /* ---- Base mappings ---- */ body { background: var(--bg-main); color: var(--text-primary); } /* Smooth theme switching for the common surfaces */ body, .sidebar, .topbar, .queue-container, .queue-card, .empty-state, .dropdown-menu { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* ============================================================ Bootstrap 5.1 theming bridge Bootstrap 5.1 has no data-bs-theme, so its components keep their built-in colors (blue btn-primary, white cards, etc.). We remap them to our tokens here. Everything is token-driven, so it flips automatically under [data-theme="dark"] — no separate dark rules needed. Loads AFTER bootstrap.min.css in every layout. ============================================================ */ /* ---- Buttons ---- Bootstrap 5.1 buttons set colors directly (the --bs-btn-* variables are 5.2+), so we override the real properties. !important keeps our theme ahead of Bootstrap's own :hover/:active selectors. */ .btn-primary { background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: var(--on-accent) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:disabled, .btn-primary.disabled { background-color: var(--accent-strong) !important; border-color: var(--accent-strong) !important; color: var(--on-accent) !important; } .btn-primary:disabled, .btn-primary.disabled { background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; } .btn-secondary { background-color: var(--accent-secondary) !important; border-color: var(--accent-secondary) !important; color: var(--on-accent) !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active { background-color: var(--accent-secondary) !important; border-color: var(--accent-secondary) !important; color: var(--on-accent) !important; filter: brightness(0.94); } .btn-outline-primary { color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; background-color: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active { color: var(--on-accent) !important; background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; } .btn-success { background-color: var(--success) !important; border-color: var(--success) !important; color: var(--text-on-status) !important; } .btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; color: var(--text-on-status) !important; } .btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: var(--text-on-status) !important; } .btn-info { background-color: var(--info) !important; border-color: var(--info) !important; color: var(--text-on-status) !important; } .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-success:active, .btn-danger:active, .btn-warning:active, .btn-info:active, .btn-success:focus, .btn-danger:focus, .btn-warning:focus, .btn-info:focus { color: var(--text-on-status) !important; filter: brightness(0.94); } .btn-light { background-color: var(--bg-surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .btn-light:hover, .btn-light:focus, .btn-light:active { background-color: var(--surface-hover) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .btn-link { color: var(--accent-primary) !important; } .btn-link:hover { color: var(--accent-strong) !important; } /* ---- Surfaces ---- */ .card, .modal-content, .list-group-item, .offcanvas, .accordion-item, .accordion-button { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } .dropdown-menu { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-hover); color: var(--accent-primary); } .dropdown-item.active, .dropdown-item:active { background-color: var(--accent-primary); color: var(--on-accent); } .dropdown-header { color: var(--text-secondary); } .card-header, .card-footer, .modal-header, .modal-footer { background-color: var(--bg-surface); border-color: var(--border); } /* ---- Forms ---- */ .form-control, .form-select, .input-group-text { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } .form-control::placeholder { color: var(--text-secondary); opacity: 1; } .form-control:focus, .form-select:focus { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--accent-primary); box-shadow: 0 0 0 0.25rem var(--accent-soft); } .form-control:disabled, .form-control[readonly] { background-color: var(--bg-inset); color: var(--text-secondary); } .form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } .form-check-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 0.25rem var(--accent-soft); } /* ---- Tables ---- */ .table { color: var(--text-primary); border-color: var(--border); } .table > :not(caption) > * > * { border-bottom-color: var(--border); color: var(--text-primary); } .table > thead { color: var(--text-secondary); } /* 5.1 striped/hover use an accent-bg box-shadow trick; set cells directly */ .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--surface-hover); color: var(--text-primary); } .table-hover > tbody > tr:hover > * { background-color: var(--surface-hover); color: var(--text-primary); } /* ---- Nav / tabs / pagination ---- */ .nav-tabs { border-color: var(--border); } .nav-tabs .nav-link { color: var(--text-secondary); } .nav-tabs .nav-link.active { color: var(--accent-primary); background-color: var(--bg-surface); border-color: var(--border) var(--border) var(--bg-surface); } .page-link { color: var(--accent-primary); background-color: var(--bg-surface); border-color: var(--border); } .page-link:hover { color: var(--accent-strong); background-color: var(--surface-hover); border-color: var(--border); } .page-item.active .page-link { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--on-accent); } .page-item.disabled .page-link { background-color: var(--bg-surface); border-color: var(--border); color: var(--text-secondary); } /* ---- Badges ---- */ .badge.bg-primary, .badge.text-bg-primary { background-color: var(--accent-primary) !important; color: var(--on-accent) !important; } .badge.bg-success, .badge.text-bg-success { background-color: var(--success) !important; color: var(--text-on-status) !important; } .badge.bg-danger, .badge.text-bg-danger { background-color: var(--danger) !important; color: var(--text-on-status) !important; } .badge.bg-warning, .badge.text-bg-warning { background-color: var(--warning) !important; color: var(--text-on-status) !important; } .badge.bg-info, .badge.text-bg-info { background-color: var(--info) !important; color: var(--text-on-status) !important; } /* ---- Utilities (Bootstrap sets these with !important) ---- */ .bg-white, .bg-light { background-color: var(--bg-surface) !important; } .text-muted { color: var(--text-secondary) !important; } .text-dark { color: var(--text-primary) !important; } .text-primary { color: var(--accent-primary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-warning { color: var(--warning) !important; } .text-info { color: var(--info) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; } .dropdown-divider, hr { border-color: var(--border); color: var(--border); } .modal-backdrop { background-color: #000; }