/* ============================================================================= surplus-theme.css — MiceTravelers visual theme A styling LAYER on top of the existing MDB5 / Bootstrap markup. It does not change any HTML structure or JS; it only restyles via the classes already in use. Loaded LAST in so it wins over mdb.min.css. Palette + tokens are the "surplus" / "surplusdark" daisyUI themes (oklch), fonts are Bricolage Grotesque + IBM Plex Sans/Mono. ============================================================================= */ /* ---- Theme tokens --------------------------------------------------------- */ :root, [data-theme="surplus"] { color-scheme: light; --color-base-100: oklch(98.5% .002 75); --color-base-200: oklch(95.5% .004 75); --color-base-300: oklch(91% .006 75); --color-base-content: oklch(25% .012 50); --color-primary: oklch(54% .21 27); --color-primary-content: oklch(98% .005 27); --color-secondary: oklch(35% .015 50); --color-secondary-content: oklch(97% .004 75); --color-accent: oklch(76% .16 75); --color-accent-content: oklch(25% .05 75); --color-neutral: oklch(28% .012 50); --color-neutral-content: oklch(95% .004 75); --color-info: oklch(62% .12 240); --color-info-content: oklch(98% .01 240); --color-success: oklch(60% .13 155); --color-success-content: oklch(98% .01 155); --color-warning: oklch(78% .15 80); --color-warning-content: oklch(28% .05 80); --color-error: oklch(56% .2 27); --color-error-content: oklch(98% .01 27); --radius-field: .25rem; --radius-box: .375rem; --border: 1px; --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif; --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; } [data-theme="surplusdark"] { color-scheme: dark; --color-base-100: oklch(22% .01 50); --color-base-200: oklch(19% .009 50); --color-base-300: oklch(26% .011 50); --color-base-content: oklch(92% .006 75); --color-primary: oklch(62% .2 27); --color-primary-content: oklch(98% .005 27); --color-secondary: oklch(80% .01 75); --color-secondary-content: oklch(20% .01 50); --color-accent: oklch(78% .15 75); --color-accent-content: oklch(24% .05 75); --color-neutral: oklch(28% .012 50); --color-neutral-content: oklch(94% .004 75); --color-info: oklch(68% .12 240); --color-info-content: oklch(18% .02 240); --color-success: oklch(68% .13 155); --color-success-content: oklch(18% .02 155); --color-warning: oklch(80% .15 80); --color-warning-content: oklch(24% .05 80); --color-error: oklch(64% .2 27); --color-error-content: oklch(98% .01 27); } /* ---- Base ----------------------------------------------------------------- */ html, body { background-color: var(--color-base-200) !important; color: var(--color-base-content) !important; font-family: var(--font-sans) !important; } h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title, .display-1, .display-2, .display-3, .h1, .h2, .h3 { font-family: var(--font-display) !important; letter-spacing: -.01em; } .text-muted { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important; } a { color: var(--color-primary); } a:hover { color: color-mix(in oklab, var(--color-primary) 80%, #000); } code, kbd, samp, pre, .font-mono { font-family: var(--font-mono) !important; } /* ---- Navbar --------------------------------------------------------------- */ .navbar.bg-light, .navbar.navbar-light { background-color: var(--color-base-100) !important; border-bottom: var(--border) solid var(--color-base-300); box-shadow: none !important; } .navbar .navbar-brand { color: var(--color-base-content) !important; font-weight: 600; } .navbar .nav-link { color: color-mix(in oklab, var(--color-base-content) 70%, transparent) !important; font-weight: 500; } .navbar .nav-link:hover { color: var(--color-base-content) !important; } .navbar .nav-link.active { color: var(--color-primary) !important; } /* ---- Cards ---------------------------------------------------------------- */ .card { background-color: var(--color-base-100) !important; color: var(--color-base-content) !important; border: var(--border) solid var(--color-base-300) !important; border-radius: var(--radius-box) !important; box-shadow: 0 1px 2px rgba(0,0,0,.04) !important; } .card.shadow-2-strong, .card.shadow-lg, .shadow-2xl { box-shadow: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.08) !important; } /* ---- Buttons -------------------------------------------------------------- */ .btn { border-radius: var(--radius-field) !important; font-weight: 600; } .btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-primary-content) !important; } .btn-primary:hover, .btn-primary:focus { background-color: color-mix(in oklab, var(--color-primary) 90%, #000) !important; border-color: color-mix(in oklab, var(--color-primary) 90%, #000) !important; } .btn-secondary { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--color-secondary-content) !important; } .btn-outline-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background: transparent !important; } .btn-outline-primary:hover { background-color: var(--color-primary) !important; color: var(--color-primary-content) !important; } /* ---- Alerts --------------------------------------------------------------- */ .alert { border-radius: var(--radius-box) !important; border: var(--border) solid transparent; } .alert-success { background-color: color-mix(in oklab, var(--color-success) 14%, var(--color-base-100)) !important; border-color: var(--color-success) !important; color: var(--color-base-content) !important; } .alert-danger, .alert-error { background-color: color-mix(in oklab, var(--color-error) 12%, var(--color-base-100)) !important; border-color: var(--color-error) !important; color: var(--color-base-content) !important; } .alert-info { background-color: color-mix(in oklab, var(--color-info) 12%, var(--color-base-100)) !important; border-color: var(--color-info) !important; color: var(--color-base-content) !important; } .alert-warning { background-color: color-mix(in oklab, var(--color-warning) 16%, var(--color-base-100)) !important; border-color: var(--color-warning) !important; color: var(--color-base-content) !important; } /* ---- Tables (rankings, dashboard) ----------------------------------------- */ .table { /* Drive Bootstrap's AND MDB's table colour system from the theme tokens. These per-row/striped/hover variables default to near-black text, which is unreadable on the dark theme — so map them all to base-content. */ --bs-table-color: var(--color-base-content); --bs-table-bg: transparent; --bs-table-color-type: var(--color-base-content); --bs-table-bg-type: transparent; --bs-table-striped-color: var(--color-base-content); --bs-table-striped-bg: color-mix(in oklab, var(--color-base-content) 5%, transparent); --bs-table-hover-color: var(--color-base-content); --bs-table-hover-bg: color-mix(in oklab, var(--color-base-content) 9%, transparent); --bs-table-active-color: var(--color-base-content); --bs-emphasis-color: var(--color-base-content); --mdb-table-color: var(--color-base-content); --mdb-table-striped-color: var(--color-base-content); --mdb-table-striped-bg: color-mix(in oklab, var(--color-base-content) 5%, transparent); --mdb-table-hover-color: var(--color-base-content); --mdb-table-hover-bg: color-mix(in oklab, var(--color-base-content) 9%, transparent); --mdb-emphasis-color: var(--color-base-content); color: var(--color-base-content) !important; border-radius: var(--radius-box); } /* Safety net: force cell text to the theme colour regardless of MDB state vars. */ .table > :not(caption) > * > * { color: var(--color-base-content) !important; } /* Table header — matches the reference's Tabulator/daisyUI header: base-200 band, muted mono uppercase, 2px base-300 underline. */ .table > thead th, .table > thead td { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important; background-color: var(--color-base-200) !important; font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem !important; font-weight: 600 !important; border-bottom: 2px solid var(--color-base-300) !important; } .table td, .table th { border-color: color-mix(in oklab, var(--color-base-300) 70%, transparent) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent) !important; color: var(--color-base-content) !important; } .table-hover > tbody > tr:hover > * { background-color: color-mix(in oklab, var(--color-base-content) 9%, transparent) !important; color: var(--color-base-content) !important; } .table-primary, .table-primary > td, .table-primary > th { background-color: color-mix(in oklab, var(--color-primary) 16%, var(--color-base-100)) !important; color: var(--color-base-content) !important; } /* ---- Tabs (MDB .nav-tabs styled like the reference's `tabs tabs-border`) --- */ .nav-tabs { border-bottom: var(--border) solid var(--color-base-300) !important; gap: .25rem; } .nav-tabs .nav-link { color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; background: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: var(--radius-field) var(--radius-field) 0 0 !important; margin-bottom: -1px; font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem !important; font-weight: 600; transition: color .2s, border-color .2s; } .nav-tabs .nav-link:hover { color: var(--color-base-content) !important; border-bottom-color: color-mix(in oklab, var(--color-base-content) 25%, transparent) !important; background: transparent !important; } .nav-tabs .nav-link.active { color: var(--color-base-content) !important; background: transparent !important; border-bottom: 3px solid var(--color-primary) !important; } /* ---- Pills (segmented toggle, e.g. Login / Register) ---------------------- */ .nav-pills { background-color: var(--color-base-200) !important; border: var(--border) solid var(--color-base-300); border-radius: var(--radius-box); padding: .25rem; gap: .25rem; } .nav-pills .nav-link { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important; background: transparent !important; border-radius: var(--radius-field) !important; font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem !important; font-weight: 600; transition: color .2s, background-color .2s; } .nav-pills .nav-link:hover { color: var(--color-base-content) !important; } .nav-pills .nav-link.active { background-color: var(--color-base-100) !important; color: var(--color-primary) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* ---- Forms ---------------------------------------------------------------- */ .form-control, .form-select, textarea.form-control { background-color: var(--color-base-100) !important; color: var(--color-base-content) !important; border: var(--border) solid var(--color-base-300) !important; border-radius: var(--radius-field) !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 30%, transparent) !important; } .form-label { color: color-mix(in oklab, var(--color-base-content) 80%, transparent) !important; font-weight: 500; } .form-text { color: color-mix(in oklab, var(--color-base-content) 55%, transparent) !important; font-family: var(--font-mono); font-size: .72rem; } ::placeholder { color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; } /* ---- Badges --------------------------------------------------------------- */ .badge { border-radius: var(--radius-field) !important; } .badge.bg-primary, .badge.badge-primary { background-color: var(--color-primary) !important; color: var(--color-primary-content) !important; } .badge.bg-success { background-color: var(--color-success) !important; color: var(--color-success-content) !important; } .badge.bg-warning { background-color: var(--color-warning) !important; color: var(--color-warning-content) !important; } .badge.bg-info { background-color: var(--color-info) !important; color: var(--color-info-content) !important; } /* ---- Dropdowns / dividers / footer ---------------------------------------- */ .dropdown-menu { background-color: var(--color-base-100) !important; border: var(--border) solid var(--color-base-300) !important; border-radius: var(--radius-box) !important; } .dropdown-item { color: var(--color-base-content) !important; } .dropdown-item:hover { background-color: var(--color-base-200) !important; } .border-top { border-top: var(--border) solid var(--color-base-300) !important; } footer.text-muted, footer { color: color-mix(in oklab, var(--color-base-content) 60%, transparent) !important; } /* ---- Card header / footer (e.g. "Top Distance Travelers") ----------------- */ .card-header { background-color: var(--color-base-200) !important; color: var(--color-base-content) !important; border-bottom: var(--border) solid var(--color-base-300) !important; font-family: var(--font-display) !important; font-weight: 600 !important; border-top-left-radius: var(--radius-box) !important; border-top-right-radius: var(--radius-box) !important; } .card-header .text-muted, .card-header small { color: color-mix(in oklab, var(--color-base-content) 55%, transparent) !important; } .card-footer { background-color: var(--color-base-200) !important; color: var(--color-base-content) !important; border-top: var(--border) solid var(--color-base-300) !important; } /* ---- Modals --------------------------------------------------------------- */ .modal-content { background-color: var(--color-base-100) !important; color: var(--color-base-content) !important; border: var(--border) solid var(--color-base-300) !important; border-radius: var(--radius-box) !important; } .modal-header, .modal-footer { border-color: var(--color-base-300) !important; } .modal-title { color: var(--color-base-content) !important; font-family: var(--font-display) !important; } /* The close "X" is a dark SVG — invert it on the dark theme so it stays visible. */ [data-theme="surplusdark"] .btn-close { filter: invert(1) grayscale(100%) brightness(1.8) !important; } /* ---- Form checks / radios / inputs ---------------------------------------- */ .form-check-input { background-color: var(--color-base-100) !important; border: var(--border) solid var(--color-base-300) !important; } .form-check-input:checked { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .form-check-label { color: var(--color-base-content) !important; } .input-group-text { background-color: var(--color-base-200) !important; color: var(--color-base-content) !important; border: var(--border) solid var(--color-base-300) !important; } /* ---- Outline / secondary buttons ------------------------------------------ */ .btn-outline-secondary { color: var(--color-base-content) !important; border-color: var(--color-base-300) !important; background: transparent !important; } .btn-outline-secondary:hover { background-color: var(--color-base-200) !important; color: var(--color-base-content) !important; border-color: var(--color-base-content) !important; } /* ---- Bootstrap/MDB colour utilities mapped to theme tokens ---------------- */ .text-primary { color: var(--color-primary) !important; } .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-danger { color: var(--color-error) !important; } .text-info { color: var(--color-info) !important; } .bg-primary { background-color: var(--color-primary) !important; color: var(--color-primary-content) !important; } .spinner-border { color: var(--color-primary); } /* ---- Dashboard-specific overrides (dashboard.css hardcodes light colours) -- */ .stat-card { background-color: var(--color-base-100) !important; border: var(--border) solid var(--color-base-300) !important; } .user-avatar { background-color: var(--color-primary) !important; color: var(--color-primary-content) !important; } .mouse-path-visual { background-color: var(--color-base-100) !important; border: var(--border) solid var(--color-base-300) !important; } /* ---- jQuery-UI datepicker popup ------------------------------------------- */ .ui-datepicker, .ui-widget.ui-widget-content { background: var(--color-base-100) !important; color: var(--color-base-content) !important; border: var(--border) solid var(--color-base-300) !important; border-radius: var(--radius-box) !important; font-family: var(--font-sans) !important; } .ui-datepicker .ui-datepicker-header { background: var(--color-base-200) !important; color: var(--color-base-content) !important; border: none !important; } .ui-datepicker .ui-datepicker-title { color: var(--color-base-content) !important; font-family: var(--font-display) !important; } .ui-datepicker th { color: color-mix(in oklab, var(--color-base-content) 55%, transparent) !important; font-family: var(--font-mono) !important; } .ui-datepicker td a, .ui-datepicker td span { color: var(--color-base-content) !important; background: transparent !important; border: none !important; } .ui-datepicker td a.ui-state-hover, .ui-datepicker td a:hover { background: var(--color-base-200) !important; border-radius: var(--radius-field) !important; } .ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-highlight { background: var(--color-primary) !important; color: var(--color-primary-content) !important; border-radius: var(--radius-field) !important; } .ui-datepicker .ui-icon { filter: none; } [data-theme="surplusdark"] .ui-datepicker .ui-icon { filter: invert(1) brightness(1.6); } /* ---- Right-side navbar controls (theme / account / logout) ---------------- */ /* Always pinned to the right and always visible (outside the collapsible menu). */ .navbar-controls { display: flex !important; flex-direction: row; align-items: center; gap: .5rem; list-style: none; margin: 0 0 0 auto !important; /* push to the far right */ padding: 0; } .navbar-controls .nav-item { display: flex; align-items: center; } .navbar-controls .navbar-text { padding-block: 0; white-space: nowrap; } .navbar-controls .nav-link { padding-block: .25rem; } /* ---- Theme toggle button -------------------------------------------------- */ .theme-toggle { background: transparent; border: var(--border) solid var(--color-base-300); color: var(--color-base-content); border-radius: var(--radius-field); width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, border-color .2s; } .theme-toggle:hover { background-color: var(--color-base-200); border-color: var(--color-primary); } .theme-toggle .icon-dark { display: none; } [data-theme="surplusdark"] .theme-toggle .icon-dark { display: inline; } [data-theme="surplusdark"] .theme-toggle .icon-light { display: none; }