/* ========================================================================== WSDB theme layer -------------------------------------------------------------------------- Loaded AFTER app.css so it wins on specificity ties. Drives light/dark theming from the `data-bs-theme` attribute on (same attribute Bootstrap 5.3 uses natively, so this stays forward-compatible if the compiled Bootstrap is ever upgraded). Also carries general UI polish. ========================================================================== */ :root { /* Light theme (default) */ --wsdb-bg: #eef1f6; --wsdb-surface: #ffffff; --wsdb-surface-2: #f6f8fb; --wsdb-header-bg: #1f2733; --wsdb-header-text: #f3f5f9; --wsdb-text: #1f2733; --wsdb-text-muted: #66707d; --wsdb-border: #e2e6ed; --wsdb-link: #1664d8; --wsdb-accent: #0d6efd; --wsdb-row-hover: #f1f5fb; --wsdb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06); --wsdb-input-bg: #ffffff; --wsdb-navbar-bg: #1f2733; --wsdb-th-bg: #e6eaf1; } [data-bs-theme="dark"] { --wsdb-bg: #0f1117; --wsdb-surface: #181b22; --wsdb-surface-2: #1f232c; --wsdb-header-bg: #1f232c; --wsdb-header-text: #e7eaf0; --wsdb-text: #dfe3ea; --wsdb-text-muted: #99a0ad; --wsdb-border: #2a2f3a; --wsdb-link: #6ea8ff; --wsdb-accent: #4d8dfd; --wsdb-row-hover: #21262f; --wsdb-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35); --wsdb-input-bg: #1f232c; --wsdb-navbar-bg: #14171d; --wsdb-th-bg: #2a2f3a; color-scheme: dark; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html { transition: background-color .2s ease; } body { background-color: var(--wsdb-bg) !important; color: var(--wsdb-text); transition: background-color .2s ease, color .2s ease; } main.py-4 { padding-top: 1.75rem !important; padding-bottom: 2.5rem !important; } a { color: var(--wsdb-link); } /* -------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------- */ .navbar.bg-dark { background-color: var(--wsdb-navbar-bg) !important; border-bottom: 1px solid rgba(255, 255, 255, .06); backdrop-filter: saturate(140%); } .navbar .navbar-brand { font-weight: 700; letter-spacing: .2px; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .72); border-radius: 8px; padding-left: .7rem; padding-right: .7rem; transition: color .15s ease, background-color .15s ease; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: #fff; background-color: rgba(255, 255, 255, .08); } /* -------------------------------------------------------------------------- Theme toggle button -------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: .35rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .theme-toggle:hover { background-color: rgba(255, 255, 255, .12); color: #fff; } .theme-toggle:active { transform: scale(.92); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background-color: var(--wsdb-surface); color: var(--wsdb-text); border: 1px solid var(--wsdb-border); border-radius: 14px; box-shadow: var(--wsdb-shadow); overflow: hidden; } /* The app frequently renders a standalone .card-header above a .card; keep them visually connected and rounded. */ .card-header { background-color: var(--wsdb-surface); color: var(--wsdb-text); border-bottom: 1px solid var(--wsdb-border); font-weight: 600; } .card-header.bg-dark { background-color: var(--wsdb-header-bg) !important; color: var(--wsdb-header-text) !important; border: 1px solid var(--wsdb-border); border-bottom: none; border-radius: 14px 14px 0 0; padding: .85rem 1.1rem; font-size: 1.05rem; letter-spacing: .2px; } /* When a dark header is immediately followed by a card, square the seam. */ .card-header.bg-dark + .card { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } .card-body { background-color: var(--wsdb-surface); color: var(--wsdb-text); } /* -------------------------------------------------------------------------- Tables (Bootstrap + DataTables) -------------------------------------------------------------------------- */ .table { --bs-table-bg: transparent; color: var(--wsdb-text); border-color: var(--wsdb-border); } .table > :not(caption) > * > * { background-color: transparent; color: var(--wsdb-text); border-bottom-color: var(--wsdb-border); } .table thead th { color: var(--wsdb-text-muted); text-transform: uppercase; font-size: .74rem; letter-spacing: .6px; font-weight: 700; border-bottom: 2px solid var(--wsdb-border); background-color: var(--wsdb-surface-2); } .table.table-hover > tbody > tr:hover > * { background-color: var(--wsdb-row-hover); color: var(--wsdb-text); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--wsdb-surface-2); color: var(--wsdb-text); } /* DataTables chrome (search box, info, pagination) loaded from CDN */ .dataTables_wrapper { color: var(--wsdb-text); padding-top: .25rem; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--wsdb-text-muted) !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background-color: var(--wsdb-input-bg); color: var(--wsdb-text); border: 1px solid var(--wsdb-border); border-radius: 8px; padding: .3rem .55rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--wsdb-text) !important; border-radius: 8px !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--wsdb-accent) !important; border-color: var(--wsdb-accent) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--wsdb-row-hover) !important; border-color: var(--wsdb-border) !important; color: var(--wsdb-text) !important; } [data-bs-theme="dark"] table.dataTable tbody tr { background-color: transparent; } /* Legacy inline-styled cells in the player/report cards. These use inline `style="background-color:..."`, which beats the stylesheet, so the themed light text became unreadable on them in dark mode. Override with !important so the header tint follows the theme and highlight cells keep dark text. */ [style*="background-color:lightgray"] { background-color: var(--wsdb-th-bg) !important; color: var(--wsdb-text) !important; } [style*="background-color:#7ee28f"], [style*="background-color:lightgreen"], [style*="background-color:yellow"] { color: #14181f !important; } [style*="background-color:red"] { color: #ffffff !important; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-control, .form-select { background-color: var(--wsdb-input-bg); color: var(--wsdb-text); border: 1px solid var(--wsdb-border); border-radius: 9px; } .form-control:focus, .form-select:focus { background-color: var(--wsdb-input-bg); color: var(--wsdb-text); border-color: var(--wsdb-accent); box-shadow: 0 0 0 .2rem rgba(77, 141, 253, .25); } .form-control::placeholder { color: var(--wsdb-text-muted); opacity: .8; } label, .form-label, .col-form-label { color: var(--wsdb-text); } /* -------------------------------------------------------------------------- Buttons (general polish) -------------------------------------------------------------------------- */ .btn { border-radius: 9px; font-weight: 600; } .btn-sm { border-radius: 7px; } /* -------------------------------------------------------------------------- Dropdowns -------------------------------------------------------------------------- */ .dropdown-menu { background-color: var(--wsdb-surface); border: 1px solid var(--wsdb-border); box-shadow: var(--wsdb-shadow); border-radius: 12px; } .dropdown-item { color: var(--wsdb-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--wsdb-row-hover); color: var(--wsdb-text); } /* -------------------------------------------------------------------------- Modals & alerts -------------------------------------------------------------------------- */ .modal-content { background-color: var(--wsdb-surface); color: var(--wsdb-text); border: 1px solid var(--wsdb-border); border-radius: 14px; } .modal-header, .modal-footer { border-color: var(--wsdb-border); } .modal-header.bg-dark { background-color: var(--wsdb-header-bg) !important; color: var(--wsdb-header-text) !important; } .btn-close { filter: var(--wsdb-btn-close-filter, none); } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .alert { border-radius: 12px; } /* -------------------------------------------------------------------------- Chat widget (was hardcoded light in the layout) -------------------------------------------------------------------------- */ .open-button { background-color: var(--wsdb-accent) !important; border-radius: 50%; height: 50px; box-shadow: var(--wsdb-shadow); opacity: .9; } .chat-popup { border: 1px solid var(--wsdb-border) !important; border-radius: 14px; overflow: hidden; box-shadow: var(--wsdb-shadow); } .form-container { background-color: var(--wsdb-surface) !important; color: var(--wsdb-text); } .form-container textarea { background: var(--wsdb-surface-2) !important; color: var(--wsdb-text); border-radius: 10px !important; } .form-container textarea:focus { background-color: var(--wsdb-input-bg) !important; } /* -------------------------------------------------------------------------- Misc utility harmonisation -------------------------------------------------------------------------- */ .text-muted { color: var(--wsdb-text-muted) !important; } hr { border-color: var(--wsdb-border); }