/* ============================================================ enVigil Licence Portal – Theme Light / Dark mode via CSS custom properties. The attribute is set by the inline script in head.inc.php before first paint. ============================================================ */ /* ---------------------------------------------------------- 1. CUSTOM PROPERTIES ---------------------------------------------------------- */ :root { /* Palette – light */ --bg: #EDEAF4; --surface: #FFFFFF; --surface-border: #E0DCEE; --surface-shadow: 0 1px 5px rgba(60, 50, 100, 0.08); --text: #2A2D38; --text-muted: #74718A; --accent: #4160CE; --accent-hover: #2A46AD; --link: #4160CE; --link-hover: #2A46AD; --input-bg: #FFFFFF; --input-text: #2A2D38; --input-placeholder: #AAA7C0; --input-border: #C8C4DC; --table-head-bg: #F4F2FA; --table-border: #E5E2F0; --table-row-hover: #F8F6FD; --hr: #E0DCEE; --header-border: #E0DCEE; --footer-text: #74718A; --badge-active-bg: #1E9C5B; --badge-active-text: #FFFFFF; --badge-inactive-bg: #9290A8; --badge-inactive-text: #FFFFFF; --modal-bg: #FFFFFF; --modal-text: #2A2D38; --logo-filter: brightness(0); --autocomplete-bg: #FFFFFF; --autocomplete-border: #d4d4d4; --autocomplete-hover: #f0EEF8; } [data-theme="dark"] { /* Palette – dark */ --bg: #13151D; --surface: #1D2030; --surface-border: #32374E; --surface-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); --text: #E4E2F5; --text-muted: #9490B8; --accent: #6B8FEE; --accent-hover: #8AAAFB; --link: #6B8FEE; --link-hover: #8AAAFB; --input-bg: #252840; --input-text: #E4E2F5; --input-placeholder: #6B6888; --input-border: #404560; --table-head-bg: #252840; --table-border: #32374E; --table-row-hover: #2A2E48; --hr: #32374E; --header-border: #32374E; --footer-text: #9490B8; --badge-active-bg: #1E9C5B; --badge-active-text: #FFFFFF; --badge-inactive-bg: #5A5870; --badge-inactive-text: #E4E2F5; --modal-bg: #1D2030; --modal-text: #E4E2F5; --logo-filter: brightness(1); --autocomplete-bg: #252840; --autocomplete-border: #404560; --autocomplete-hover: #2E3250; } /* System preference – applied when no manual toggle has been set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #13151D; --surface: #1D2030; --surface-border: #32374E; --surface-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); --text: #E4E2F5; --text-muted: #9490B8; --accent: #6B8FEE; --accent-hover: #8AAAFB; --link: #6B8FEE; --link-hover: #8AAAFB; --input-bg: #252840; --input-text: #E4E2F5; --input-placeholder: #6B6888; --input-border: #404560; --table-head-bg: #252840; --table-border: #32374E; --table-row-hover: #2A2E48; --hr: #32374E; --header-border: #32374E; --footer-text: #9490B8; --badge-active-bg: #1E9C5B; --badge-active-text: #FFFFFF; --badge-inactive-bg: #5A5870; --badge-inactive-text: #E4E2F5; --modal-bg: #1D2030; --modal-text: #E4E2F5; --logo-filter: brightness(1); --autocomplete-bg: #252840; --autocomplete-border: #404560; --autocomplete-hover: #2E3250; } } /* ---------------------------------------------------------- 2. BASE ---------------------------------------------------------- */ html, body { font-family: 'Quicksand', sans-serif; background-color: var(--bg) !important; color: var(--text) !important; transition: background-color 0.2s, color 0.2s; } a { color: var(--link) !important; text-decoration: none; } a:hover { color: var(--link-hover) !important; text-decoration: underline; } hr { border-color: var(--hr) !important; opacity: 1; } /* ---------------------------------------------------------- 3. LAYOUT COMPONENTS ---------------------------------------------------------- */ .formWrapper { background-color: var(--surface) !important; border: 1px solid var(--surface-border) !important; box-shadow: var(--surface-shadow) !important; border-radius: 0.5rem !important; padding: 2.5rem !important; } header { border-color: var(--header-border) !important; display: flex; align-items: center; justify-content: space-between; } /* Header logo – white PNG on dark, inverted to dark on light */ header img.site-logo { filter: var(--logo-filter); transition: filter 0.2s; max-height: 50px; } /* Fallback for pages not yet using site-logo class */ header a img { filter: var(--logo-filter); transition: filter 0.2s; max-height: 50px; } .text-muted { color: var(--text-muted) !important; } footer { color: var(--footer-text) !important; border-color: var(--hr) !important; } .padLower { margin-bottom: 6px; } /* ---------------------------------------------------------- 4. THEME TOGGLE BUTTON ---------------------------------------------------------- */ .theme-toggle { background: none; border: 1px solid var(--surface-border); color: var(--text-muted); border-radius: 0.4rem; padding: 0.3rem 0.6rem; font-size: 1rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .theme-toggle:hover { background-color: var(--surface-border); color: var(--text); } /* ---------------------------------------------------------- 5. CARDS ---------------------------------------------------------- */ .card { background-color: var(--surface) !important; border: 1px solid var(--surface-border) !important; color: var(--text) !important; box-shadow: var(--surface-shadow); } .bg-light { background-color: var(--surface) !important; border: 1px solid var(--surface-border) !important; } /* ---------------------------------------------------------- 6. BUTTONS – restyle btn-outline-light for both themes ---------------------------------------------------------- */ .btn-outline-light { --bs-btn-color: var(--accent) !important; --bs-btn-border-color: var(--accent) !important; --bs-btn-hover-color: var(--accent) !important; --bs-btn-hover-bg: var(--surface-border) !important; --bs-btn-hover-border-color: var(--accent) !important; --bs-btn-active-color: #fff !important; --bs-btn-active-bg: var(--accent) !important; --bs-btn-active-border-color:var(--accent) !important; } /* ---------------------------------------------------------- 7. FORM CONTROLS ---------------------------------------------------------- */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], textarea { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } .form-control:focus, .form-select:focus { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 0.2rem rgba(65, 96, 206, 0.2) !important; } /* Placeholders */ input::placeholder, textarea::placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } input::-webkit-input-placeholder { color: var(--input-placeholder) !important; } input:-moz-placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } input::-moz-placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } input:-ms-input-placeholder { color: var(--input-placeholder) !important; } input::-ms-input-placeholder { color: var(--input-placeholder) !important; } /* Select option styling */ select option { background-color: var(--input-bg); color: var(--input-text); } /* ---------------------------------------------------------- 8. TABLES ---------------------------------------------------------- */ .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--table-border); color: var(--text) !important; } .table thead th { background-color: var(--table-head-bg) !important; color: var(--text) !important; border-bottom: 2px solid var(--table-border) !important; font-weight: 600; } .table tbody tr:hover { background-color: var(--table-row-hover) !important; } .table td, .table th { border-color: var(--table-border) !important; color: var(--text) !important; } /* ---------------------------------------------------------- 9. MODALS ---------------------------------------------------------- */ .modal-content { background-color: var(--modal-bg) !important; color: var(--modal-text) !important; border-color: var(--surface-border) !important; } .modal-header { border-color: var(--hr) !important; } .modal-footer { border-color: var(--hr) !important; } .btn-close { filter: var(--logo-filter); } /* ---------------------------------------------------------- 10. HERO / JUMBOTRON (index.php) ---------------------------------------------------------- */ .p-5.mb-4.bg-light.rounded-3 { background-color: var(--surface) !important; border: 1px solid var(--surface-border) !important; box-shadow: var(--surface-shadow) !important; } /* ---------------------------------------------------------- 11. CUSTOM CLASSES ---------------------------------------------------------- */ .lookupKeyLink, .lookupA { color: var(--link) !important; } .lookupKeyLink:hover, .lookupA:hover { color: var(--link-hover) !important; } /* Status badges */ .badge-active { background-color: var(--badge-active-bg); color: var(--badge-active-text); padding: 0.3em 0.65em; border-radius: 0.4rem; font-size: 0.78em; font-weight: 600; display: inline-block; } .badge-inactive { background-color: var(--badge-inactive-bg); color: var(--badge-inactive-text); padding: 0.3em 0.65em; border-radius: 0.4rem; font-size: 0.78em; font-weight: 600; display: inline-block; } /* Danger / destructive link (e.g. delete) — overrides the blanket a{} rule */ a.link-danger { color: #c0392b !important; } a.link-danger:hover { color: #922b21 !important; text-decoration: underline; } [data-theme="dark"] a.link-danger { color: #e74c3c !important; } [data-theme="dark"] a.link-danger:hover { color: #ff6b6b !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.link-danger { color: #e74c3c !important; } :root:not([data-theme="light"]) a.link-danger:hover { color: #ff6b6b !important; } } /* Search / filter bar */ .filter-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; margin-bottom: 1.25rem; } .filter-bar .form-control { flex: 1 1 auto; /* grow to fill available width */ min-width: 0; /* allow shrinking on small screens */ } .filter-bar .form-select { flex: 0 0 auto; /* fixed width, pushed to the right */ width: 180px; } /* ── Generate.php results summary ── */ .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } /* Feature flag tick / cross */ .feat-yes { color: #1E9C5B; font-weight: 700; font-size: 1.05em; } .feat-no { color: var(--text-muted); } /* Autocomplete (generate.php) */ .autocomplete { position: relative; display: inline-block; } .autocomplete-items { color: var(--input-text); position: absolute; border: 1px solid var(--autocomplete-border); z-index: 99; top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: var(--autocomplete-bg); border-bottom: 1px solid var(--autocomplete-border); } .autocomplete-items div:hover { background-color: var(--autocomplete-hover); } .autocomplete-active { background-color: var(--accent) !important; color: #fff; } /* ---------------------------------------------------------- 12. NAV TABS (modal & page tabs) ---------------------------------------------------------- */ /* Dark mode – inactive tab links should be light text, not accent blue */ [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover, [data-theme="dark"] .nav-tabs .nav-link:focus { color: var(--text); border-color: var(--surface-border); background-color: var(--surface-border); } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--text) !important; background-color: var(--modal-bg); border-color: var(--surface-border) var(--surface-border) var(--modal-bg); } [data-theme="dark"] .nav-tabs { border-color: var(--surface-border); } /* System preference equivalent */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; } :root:not([data-theme="light"]) .nav-tabs .nav-link:hover, :root:not([data-theme="light"]) .nav-tabs .nav-link:focus { color: var(--text); border-color: var(--surface-border); background-color: var(--surface-border); } :root:not([data-theme="light"]) .nav-tabs .nav-link.active { color: var(--text) !important; background-color: var(--modal-bg); border-color: var(--surface-border) var(--surface-border) var(--modal-bg); } :root:not([data-theme="light"]) .nav-tabs { border-color: var(--surface-border); } } /* ---------------------------------------------------------- 13. PRINT STYLES ---------------------------------------------------------- */ @media print { html, body { background-color: #fff !important; color: #000 !important; font-size: 11pt; } header, footer, .no-print, .theme-toggle, nav { display: none !important; } .formWrapper { background-color: #fff !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .container { max-width: 100% !important; padding: 0 !important; } .print-header { display: block !important; margin-bottom: 1.5rem; border-bottom: 2px solid #000; padding-bottom: 0.75rem; } .print-header h2 { font-size: 16pt; margin: 0 0 0.25rem; } .print-header p { margin: 0; font-size: 10pt; color: #555; } a { color: #000 !important; text-decoration: none !important; } .table { border-collapse: collapse !important; border: 1px solid #ccc !important; /* ensures closing bottom line renders */ width: 100% !important; color: #000 !important; } .table th, .table td { border: 1px solid #ccc !important; color: #000 !important; padding: 6px 10px !important; } .table thead th { background-color: #f0f0f0 !important; font-weight: bold; } /* Keep section headings with their content — no orphaned titles at page bottom */ h3 { page-break-after: avoid; break-after: avoid; } /* Summary grid stays two-column on paper */ .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cm; } /* Prevent a table from being split across pages */ .print-avoid-break { page-break-inside: avoid; break-inside: avoid; } .btn, button { display: none !important; } .print-show { display: block !important; } @page { margin: 1.5cm; } }