/* ═══════════════════════════════════════════════════════════════════════════ WMSOnline Theme System Supports: light (default), dark, surprise Applied via: ═══════════════════════════════════════════════════════════════════════════ */ /* ── LIGHT MODE (default) ── */ [data-theme="light"], :root { --bg-body: #f8f9fa; --bg-surface: #ffffff; --bg-surface-2: #f1f3f5; --bg-nav: #ffffff; --bg-footer: #ffffff; --bg-card: #ffffff; --bg-table-head: #212529; --bg-input: #ffffff; --bg-hover: #f8f9fa; --text-primary: #212529; --text-secondary: #6c757d; --text-nav: #212529; --text-muted: #6c757d; --border-color: #dee2e6; --shadow: rgba(0,0,0,.08); --accent: #0d6efd; --accent-subtle: rgba(13,110,253,.08); } /* ── DARK MODE ── */ [data-theme="dark"] { --bg-body: #0a0f1a; --bg-surface: #111827; --bg-surface-2: #1a2235; --bg-nav: #111827; --bg-footer: #111827; --bg-card: #111827; --bg-table-head: #0d1520; --bg-input: #1a2235; --bg-hover: #1e2d45; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-nav: #e2e8f0; --text-muted: #64748b; --border-color: rgba(255,255,255,.1); --shadow: rgba(0,0,0,.4); --accent: #3b82f6; --accent-subtle: rgba(59,130,246,.12); } /* ── Apply CSS vars to Bootstrap components ── */ body { background-color: var(--bg-body) !important; color: var(--text-primary) !important; transition: background-color .3s, color .3s; } /* Navbar */ .navbar { background-color: var(--bg-nav) !important; border-color: var(--border-color) !important; box-shadow: 0 2px 8px var(--shadow) !important; } .navbar-brand, .nav-link, .navbar-text { color: var(--text-nav) !important; } .nav-link:hover { color: var(--accent) !important; } /* Cards */ .card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .card-header, .card-footer { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* Tables */ .table { color: var(--text-primary) !important; } .table-dark { background-color: var(--bg-table-head) !important; } .table-hover tbody tr:hover { background-color: var(--bg-hover) !important; } .table-light { background-color: var(--bg-surface-2) !important; color: var(--text-primary) !important; } .table td, .table th { border-color: var(--border-color) !important; } /* Bootstrap 5 uses --bs-table-bg on each cell — must override these or cells stay white */ [data-theme="dark"] .table, [data-theme="surprise"] .table { --bs-table-bg: var(--bg-card); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: var(--bg-surface-2); --bs-table-striped-color: var(--text-primary); --bs-table-hover-bg: var(--bg-hover); --bs-table-hover-color: var(--text-primary); --bs-table-active-bg: var(--bg-hover); --bs-table-active-color: var(--text-primary); } /* thead.table-light in dark/surprise mode */ [data-theme="dark"] .table-light, [data-theme="surprise"] .table-light { --bs-table-bg: var(--bg-surface-2); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); color: var(--text-primary) !important; } /* Sticky table headers */ [data-theme="dark"] .sticky-top, [data-theme="surprise"] .sticky-top { background-color: var(--bg-surface-2) !important; } /* Forms */ .form-control, .form-select { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .form-control:focus, .form-select:focus { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 .2rem var(--accent-subtle) !important; } .form-control::placeholder { color: var(--text-muted) !important; } .form-text { color: var(--text-muted) !important; } .form-label { color: var(--text-primary) !important; } .input-group-text { background-color: var(--bg-surface-2) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } /* Dropdowns */ .dropdown-menu { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; box-shadow: 0 4px 20px var(--shadow) !important; } .dropdown-item { color: var(--text-primary) !important; } .dropdown-item:hover { background-color: var(--bg-hover) !important; } .dropdown-divider { border-color: var(--border-color) !important; } /* Modals */ .modal-content { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .modal-header, .modal-footer { border-color: var(--border-color) !important; } /* Alerts */ .alert { border-color: var(--border-color) !important; } /* Badges & misc */ .text-muted { color: var(--text-muted) !important; } .text-dark { color: var(--text-primary) !important; } .bg-white { background-color: var(--bg-surface) !important; } .bg-light { background-color: var(--bg-surface-2) !important; } .border { border-color: var(--border-color) !important; } .border-bottom { border-color: var(--border-color) !important; } /* Footer */ .footer { background-color: var(--bg-footer) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; } /* List groups */ .list-group-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .list-group-item:hover { background-color: var(--bg-hover) !important; } /* Nav tabs */ .nav-tabs { border-color: var(--border-color) !important; } .nav-tabs .nav-link { color: var(--text-secondary) !important; } .nav-tabs .nav-link.active { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } /* Pagination */ .page-link { background-color: var(--bg-surface) !important; border-color: var(--border-color) !important; color: var(--accent) !important; } /* Scrollbar (dark mode) */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-body); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); } /* ── SURPRISE MODE — vars injected by JS, structure here ── */ [data-theme="surprise"] { --bg-body: var(--s-bg-body, #1a0a2e); --bg-surface: var(--s-bg-surface, #2d1b4e); --bg-surface-2: var(--s-bg-surface-2, #3d2a5e); --bg-nav: var(--s-bg-nav, #0f0520); --bg-footer: var(--s-bg-footer, #0f0520); --bg-card: var(--s-bg-card, #2d1b4e); --bg-table-head: var(--s-bg-table-head, #1a0a2e); --bg-input: var(--s-bg-input, #3d2a5e); --bg-hover: var(--s-bg-hover, #4d3a6e); --text-primary: var(--s-text-primary, #f0e6ff); --text-secondary: var(--s-text-secondary, #c4a8e8); --text-nav: var(--s-text-nav, #f0e6ff); --text-muted: var(--s-text-muted, #9b7fc7); --border-color: var(--s-border, rgba(200,150,255,.2)); --shadow: var(--s-shadow, rgba(100,0,200,.3)); --accent: var(--s-accent, #c084fc); --accent-subtle: var(--s-accent-subtle, rgba(192,132,252,.15)); } /* Surprise mode font injection */ [data-theme="surprise"] body { font-family: var(--s-font, inherit) !important; } [data-theme="surprise"] .navbar-brand { font-family: var(--s-display-font, inherit) !important; } /* Theme toggle button — always visible in nav */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border-color); border-radius: 20px; color: var(--text-secondary); padding: .25rem .75rem; font-size: .8rem; cursor: pointer; transition: all .2s; white-space: nowrap; } .theme-toggle-btn:hover { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); } /* Surprise loading overlay */ #surpriseLoader { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: white; font-family: 'Segoe UI', sans-serif; } #surpriseLoader.show { display: flex; } #surpriseLoader .loader-text { font-size: 1.1rem; opacity: .8; } #surpriseLoader .spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,.2); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; } @@keyframes spin { to { transform: rotate(360deg); } }