/* Honey Mustard theme tokens + dark mode. Loaded by both base.html (main app) and base_login.html (auth pages). Dark mode is driven by data-bs-theme="dark" on (Bootstrap 5.3+). */ :root { --hm-accent: #FFB52E; --hm-accent-hover: #E69500; --hm-accent-rgb: 255, 181, 46; --hm-page-bg: #f8f9fa; --hm-surface: #ffffff; --hm-surface-2: #f1f3f5; --hm-text: #333333; --hm-text-muted: #555555; --hm-border: #e3e3e3; --hm-radius: 12px; --hm-card-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Auth page background gradient */ --hm-bg-from: #FFF3C4; --hm-bg-to: #FFD36E; /* Login brand panel */ --hm-brand-from: #FFF3C4; --hm-brand-mid: #FFB52E; --hm-brand-to: #E69500; --hm-brand-text: #5e4109; --hm-brand-text-muted: #7a5b12; --hm-badge-bg: rgba(255, 255, 255, 0.25); /* Navbar hamburger (rendered as a mask, tinted with --hm-text) */ --hm-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } [data-bs-theme="dark"] { --hm-accent: #FFC04D; --hm-accent-hover: #FFD27A; --hm-accent-rgb: 255, 192, 77; --hm-page-bg: #17140f; --hm-surface: #221d16; --hm-surface-2: #2b251c; --hm-text: #ece6da; --hm-text-muted: #b3aa98; --hm-border: #38322a; --hm-card-shadow: 0 15px 30px rgba(0, 0, 0, 0.45); --hm-bg-from: #1d1812; --hm-bg-to: #0f0d0a; --hm-brand-from: #241d12; --hm-brand-mid: #5a4310; --hm-brand-to: #2e2207; --hm-brand-text: #f3e9d2; --hm-brand-text-muted: #cbb98f; --hm-badge-bg: rgba(255, 255, 255, 0.10); /* Bootstrap 5.3 dark surfaces, tuned warm (not blue-gray) */ --bs-body-bg: #17140f; --bs-body-color: #ece6da; --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(236, 230, 218, 0.70); --bs-secondary-bg: #221d16; --bs-tertiary-bg: #2b251c; --bs-border-color: #38322a; --bs-card-bg: #221d16; --bs-card-cap-bg: rgba(255, 181, 46, 0.10); --bs-link-color: #FFC65A; --bs-link-color-rgb: 255, 198, 90; --bs-link-hover-color: #FFD98A; --bs-link-hover-color-rgb: 255, 217, 138; } body { transition: background-color 0.25s ease, color 0.25s ease; } /* Theme toggle button - fixed-size circular icon button */ .hm-theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--hm-text-muted); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color 0.2s, background-color 0.2s; } .hm-theme-toggle:hover { color: var(--hm-accent); background: rgba(var(--hm-accent-rgb), 0.12); } .hm-theme-toggle--fixed { position: fixed; top: 16px; right: 18px; z-index: 1080; color: var(--hm-text); background: rgba(127, 127, 127, 0.10); } /* Theme-aware navbar hamburger (always tinted with the text color) */ .navbar-toggler-icon { background-image: none; background-color: var(--hm-text); -webkit-mask: var(--hm-burger) center / 100% 100% no-repeat; mask: var(--hm-burger) center / 100% 100% no-repeat; } /* ---- Dark-mode fixes for fixed-color Bootstrap utilities ---- These let pages that use bg-white / bg-light / text-dark / table-light adapt to dark mode without per-page edits. */ [data-bs-theme="dark"] .bg-white { background-color: var(--hm-surface) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--hm-surface-2) !important; } [data-bs-theme="dark"] .text-dark { color: var(--hm-text) !important; } [data-bs-theme="dark"] .text-black { color: var(--hm-text) !important; } [data-bs-theme="dark"] .table-light { --bs-table-bg: #2b251c; --bs-table-color: var(--hm-text); --bs-table-border-color: var(--hm-border); } [data-bs-theme="dark"] .sortable-header a:hover { background-color: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .alert-hm { background: #3a1d20; border-color: #5c2b30; color: #f3b9bd; }