/* ──────────────────────────────────────────────────────────────────────────── * Theme system on CSS variables. * Activated by [data-theme="dark"] on (set in header.php anti-FOUC script). * Light theme is default (no attribute needed). * * Variable conventions: * --bg-* — backgrounds (body, elevated, input, hover, striped) * --text-* — text colors * --border-* — borders * --link-* — links * --alert-* — Bootstrap alert-* color variants (used as indicators in tables) * --btn-* — colored buttons * --shadow-* — drop shadows * ────────────────────────────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg-body: #ffffff; --bg-elevated: #ffffff; /* card, navbar, modal */ --bg-input: #ffffff; --bg-hover: #f1f3f5; --bg-striped: rgba(0, 0, 0, 0.035); --bg-muted: #f8f9fa; /* bg-light replacement */ --bg-footer: #f5f5f5; --bg-code: #f8f9fa; /* Text */ --text-primary: #212529; --text-secondary: #495057; --text-muted: #6c757d; --text-inverse: #ffffff; /* text on colored alerts/buttons */ /* Borders */ --border: #dee2e6; --border-light: #e9ecef; --border-strong: #adb5bd; /* Links */ --link: #0d6efd; --link-hover: #0a58ca; --link-visited:#6f42c1; /* Shadow */ --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); /* Alert colors — Bootstrap 4 defaults (used heavily as table-cell indicators) */ --alert-success-bg: #d4edda; --alert-success-text: #155724; --alert-success-border: #c3e6cb; --alert-danger-bg: #f8d7da; --alert-danger-text: #721c24; --alert-danger-border: #f5c6cb; --alert-warning-bg: #fff3cd; --alert-warning-text: #856404; --alert-warning-border: #ffeeba; --alert-info-bg: #d1ecf1; --alert-info-text: #0c5460; --alert-info-border: #bee5eb; --alert-primary-bg: #cce5ff; --alert-primary-text: #004085; --alert-primary-border: #b8daff; --alert-secondary-bg: #e2e3e5; --alert-secondary-text: #383d41; --alert-secondary-border:#d6d8db; --alert-dark-bg: #d6d8d9; --alert-dark-text: #1b1e21; --alert-dark-border: #c6c8ca; /* Buttons — only overrides for dark theme; light uses Bootstrap defaults */ --btn-primary-bg: #0d6efd; --btn-primary-text: #ffffff; /* DataTables */ --dt-input-bg: var(--bg-input); --dt-input-text: var(--text-primary); --dt-paginate-bg: transparent; --dt-paginate-text: var(--link); --dt-sort-icon: rgba(0, 0, 0, .35); } /* ─── Dark theme overrides ──────────────────────────────────────────────── */ [data-theme="dark"] { --bg-body: #1c1c20; --bg-elevated: #26262c; --bg-input: #32323a; --bg-hover: #3a3a42; --bg-striped: rgba(255, 255, 255, 0.035); --bg-muted: #2e2e34; --bg-footer: #1f1f23; --bg-code: #14141a; --text-primary: #e8e8ec; --text-secondary: #b8b8bd; --text-muted: #8a8a92; --text-inverse: #ffffff; --border: #3d3d46; --border-light: #34343c; --border-strong: #5a5a64; --link: #6ea8fe; --link-hover: #9ec5fe; --link-visited:#b196e8; --shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .35); --shadow: 0 .5rem 1rem rgba(0, 0, 0, .55); /* Muted, low-saturation alert variants — readable on dark bg */ --alert-success-bg: #1c3a23; --alert-success-text: #87d997; --alert-success-border: #2c5638; --alert-danger-bg: #3d1f23; --alert-danger-text: #ea868f; --alert-danger-border: #5a2c33; --alert-warning-bg: #3a3318; --alert-warning-text: #ffda6a; --alert-warning-border: #5a4f24; --alert-info-bg: #1a3438; --alert-info-text: #6edff6; --alert-info-border: #2c5258; --alert-primary-bg: #1d2d4e; --alert-primary-text: #6ea8fe; --alert-primary-border: #2c4275; --alert-secondary-bg: #2a2a30; --alert-secondary-text: #a8a8b0; --alert-secondary-border:#3d3d46; --alert-dark-bg: #2a2a30; --alert-dark-text: #c8c8d0; --alert-dark-border: #3d3d46; --dt-sort-icon: rgba(255, 255, 255, .35); } /* ─── Base ──────────────────────────────────────────────────────────────── */ html { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; /* enables UA-rendered scrollbars/inputs in dark */ } body { background-color: var(--bg-body); color: var(--text-primary); } a { color: var(--link); } a:hover, a:focus { color: var(--link-hover); } hr { border-color: var(--border); } /* ─── Navbar ────────────────────────────────────────────────────────────── */ .navbar { background-color: var(--bg-elevated) !important; border-bottom: 1px solid var(--border-light); } .navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link { color: var(--text-primary); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--link); } .navbar-light .navbar-nav .nav-link.active { color: var(--link); } .navbar-light .navbar-toggler { border-color: var(--border); color: var(--text-primary); } /* ─── Cards ─────────────────────────────────────────────────────────────── */ .card { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .card-header, .card-footer { background-color: var(--bg-muted); border-color: var(--border-light); } /* ─── Tables ────────────────────────────────────────────────────────────── */ .table { color: var(--text-primary); background-color: transparent; } .table th, .table td { border-color: var(--border); } .table thead th { border-bottom-color: var(--border-strong); color: var(--text-primary); } .table-bordered, .table-bordered th, .table-bordered td { border-color: var(--border); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--bg-striped); } .table-hover tbody tr:hover { background-color: var(--bg-hover); color: var(--text-primary); } /* table-dark — keep its own dark scheme even in light mode */ .table-dark { background-color: #343a40; color: #f8f9fa; } /* ─── Forms ─────────────────────────────────────────────────────────────── */ .form-control, .form-control-sm, .custom-select, select, input, textarea { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border); } .form-control:focus, .custom-select:focus { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--link); } .form-control::placeholder { color: var(--text-muted); } .form-control:disabled, .form-control[readonly] { background-color: var(--bg-muted); } label { color: var(--text-primary); } .input-group-text { background-color: var(--bg-muted); color: var(--text-primary); border-color: var(--border); } /* ─── Buttons (preserve Bootstrap defaults in light; tone down in dark) ──── */ .btn-primary { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); } [data-theme="dark"] .btn-outline-primary { color: var(--link); border-color: var(--link); } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--link); color: var(--text-inverse); } [data-theme="dark"] .btn-light { background-color: var(--bg-muted); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .btn-outline-dark { color: var(--text-primary); border-color: var(--text-secondary); } .close { color: var(--text-primary); text-shadow: none; opacity: .7; } .close:hover { color: var(--text-primary); opacity: 1; } /* ─── Alerts (used both as containers and as table cell indicators) ────── */ .alert-success { background-color: var(--alert-success-bg) !important; color: var(--alert-success-text) !important; border-color: var(--alert-success-border) !important; } .alert-danger { background-color: var(--alert-danger-bg) !important; color: var(--alert-danger-text) !important; border-color: var(--alert-danger-border) !important; } .alert-warning { background-color: var(--alert-warning-bg) !important; color: var(--alert-warning-text) !important; border-color: var(--alert-warning-border) !important; } .alert-info { background-color: var(--alert-info-bg) !important; color: var(--alert-info-text) !important; border-color: var(--alert-info-border) !important; } .alert-primary { background-color: var(--alert-primary-bg) !important; color: var(--alert-primary-text) !important; border-color: var(--alert-primary-border) !important; } .alert-secondary { background-color: var(--alert-secondary-bg) !important; color: var(--alert-secondary-text) !important; border-color: var(--alert-secondary-border) !important; } .alert-dark, tr.alert-dark > td { background-color: var(--alert-dark-bg) !important; color: var(--alert-dark-text) !important; border-color: var(--alert-dark-border) !important; } /* ─── Modals & dropdowns ────────────────────────────────────────────────── */ .modal-content { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .modal-header, .modal-footer { border-color: var(--border-light); } .modal-backdrop { background-color: #000; } [data-theme="dark"] .modal-backdrop.show { opacity: .7; } .dropdown-menu { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); box-shadow: var(--shadow-sm); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text-primary); } .dropdown-divider { border-color: var(--border-light); } /* ─── List groups, badges, code ──────────────────────────────────────────── */ .list-group-item { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-light); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--bg-hover); color: var(--text-primary); } .badge-primary { background-color: var(--link); color: var(--text-inverse); } code, pre, kbd, samp { background-color: var(--bg-code); color: var(--text-primary); border: 1px solid var(--border-light); padding: .1em .3em; border-radius: .2em; } pre { padding: .75em 1em; } blockquote { border-left: 4px solid var(--border-strong); color: var(--text-secondary); background-color: var(--bg-muted); padding: .5rem 1rem; } /* ─── Footer & utility classes ──────────────────────────────────────────── */ .footer { background-color: var(--bg-footer); color: var(--text-secondary); border-top: 1px solid var(--border-light); } .bg-light { background-color: var(--bg-muted) !important; color: var(--text-primary); } .bg-white { background-color: var(--bg-elevated) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } .border { border-color: var(--border) !important; } /* ─── DataTables 1.10 + Bootstrap 4 integration ─────────────────────────── */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--text-primary); } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background-color: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: .25rem; padding: .25rem .5rem; } table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { color: var(--text-primary); } .page-link { background-color: var(--bg-elevated); color: var(--link); border-color: var(--border); } .page-link:hover { background-color: var(--bg-hover); color: var(--link-hover); border-color: var(--border); } .page-item.active .page-link { background-color: var(--link); border-color: var(--link); color: var(--text-inverse); } .page-item.disabled .page-link { background-color: var(--bg-elevated); color: var(--text-muted); border-color: var(--border); } /* ─── tempusdominus datetime picker ─────────────────────────────────────── */ .bootstrap-datetimepicker-widget { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { color: var(--text-primary); } .bootstrap-datetimepicker-widget table td:hover, .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover { background-color: var(--bg-hover); color: var(--text-primary); } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background-color: var(--link); color: var(--text-inverse); } .bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new { color: var(--text-muted); } .bootstrap-datetimepicker-widget .picker-switch:hover, .bootstrap-datetimepicker-widget .prev:hover, .bootstrap-datetimepicker-widget .next:hover { background-color: var(--bg-hover); } /* ─── Toastr (notifications) ────────────────────────────────────────────── */ [data-theme="dark"] #toast-container > .toast-success { background-color: #1c5f2b; } [data-theme="dark"] #toast-container > .toast-error { background-color: #6b1f25; } [data-theme="dark"] #toast-container > .toast-info { background-color: #1a4a52; } [data-theme="dark"] #toast-container > .toast-warning { background-color: #5a4818; } /* ─── Custom controls (form-check, custom-control) ──────────────────────── */ .custom-control-label::before { background-color: var(--bg-input); border-color: var(--border-strong); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--link); border-color: var(--link); } /* ─── Theme toggle icon transition ──────────────────────────────────────── */ #theme-toggle i { transition: transform .2s ease, color .2s ease; } #theme-toggle:hover i { transform: rotate(15deg); }