/** * W3C-style accessibility toolbar: font-size (continuous zoom, adjustable * progressively via the K/S/B buttons) and a 3-way theme cycle (light -> * dark -> high-contrast -> light), ported from iprograms' * admin-layout-theme.php / system/theme_toggle.php. * * Activated purely via [data-theme] on and the --a11y-zoom custom * property (set inline on ), both stamped server-side from a cookie * (see header.php / guest.php) so there is no flash of the wrong theme/size * on first paint. */ /* ---- US-ACC-01: adjustable font size. zoom (not transform:scale or a root font-size change) so fixed-position chrome (.topbar, .left-sidebar, .footer) scales in place instead of breaking its positioning context - this app's layout is largely px-based, not rem-based. --a11y-zoom is a continuous value (not a fixed small/normal/large bucket): clicking the small (K) or large (B) button repeatedly steps it progressively further in that direction, clicking medium (S) resets it to 1 - see assets/js/a11y-toolbar.js. Falls back to 1 (no zoom) when the custom property isn't set at all (e.g. a page that doesn't stamp it inline). ---- */ :root { zoom: var(--a11y-zoom, 1); } /* ---- Dark mode palette ---- */ :root[data-theme="dark"] body { background: linear-gradient(180deg, #0a1524, #0f1e33) !important; color: #e6edf7; } :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .navbar.top-navbar { background: #0d1a2e !important; } :root[data-theme="dark"] .left-sidebar { background: #0d1a2e !important; } :root[data-theme="dark"] .page-wrapper { background: transparent !important; } /* .page-titles (the title/breadcrumb row at the top of nearly every page) hardcodes background: #fff in dist/css/style.css - without this override, dark-mode's light heading text renders illegibly on that leftover white band. Transparent lets the dark body gradient show through, matching .page-wrapper above. */ :root[data-theme="dark"] .page-titles { background: transparent !important; } /* .text-muted's default gray (#6c757d) has enough contrast against light backgrounds but falls to ~3.4:1 against dark card backgrounds - brighten it for dark mode. .score-meta (interview-score attribution/timestamp lines) hardcodes the same gray directly rather than using .text-muted, so it needs the same fix explicitly. */ :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .score-meta { color: #94a7c4 !important; } :root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .right-sidebar, :root[data-theme="dark"] .modal-content { background: #16223a !important; color: #e6edf7; border-color: #2a3a54; } /* .slot-section (the "Maklumat Slot & Pemohon" applicant-detail modal cards - copy-pasted with a hardcoded white background across several views) sits nested inside .modal-content with its own opaque background, so the .modal-content dark override above never reaches it: its light text kept inheriting onto that leftover white card, and .slot-section-title's own hardcoded dark-indigo color went dark-on-dark against the fix below. One override here covers every view that reuses this class instead of patching each copy separately. */ :root[data-theme="dark"] .slot-section { background: #16223a !important; border-color: #2a3a54 !important; color: #e6edf7; } :root[data-theme="dark"] .slot-section-title { color: #e6edf7 !important; border-color: #2a3a54 !important; } /* .deleted-record-body (the "this record is soft-deleted" banner body in the applicant account modal) - same opaque-white-card-inside-a-dark-modal problem as .slot-section above. */ :root[data-theme="dark"] .deleted-record-body { background-color: #16223a !important; color: #e6edf7 !important; } /* Applicant-search autocomplete panel (admin-add-application-form.php) - every one of these hardcodes a light background with no text color of its own, so they inherited the ancestor modal's forced-light dark-mode text straight onto their unchanged light backgrounds. */ :root[data-theme="dark"] .autocomplete-left-col, :root[data-theme="dark"] .autocomplete-right-col, :root[data-theme="dark"] .dropdown-header, :root[data-theme="dark"] .autocomplete-history-table th { background: #16223a !important; color: #e6edf7 !important; } :root[data-theme="dark"] .dropdown-item.hovered { background-color: #1b2b4a !important; } /* Select2 dropdown panel (filter multi-selects across the admin side) has no theme awareness at all by default, so it stayed plain white/black-on-white regardless of [data-theme] - same illegible-in-a-dark-UI pattern as the plain .form-control fix above, just for Select2's own separately-rendered elements. */ :root[data-theme="dark"] .select2-dropdown, :root[data-theme="dark"] .select2-search__field, :root[data-theme="dark"] .select2-results__option, :root[data-theme="dark"] .select2-results__footer, :root[data-theme="dark"] .select2-container--default .select2-selection--single, :root[data-theme="dark"] .select2-container--default .select2-selection--multiple { background: #12233d !important; color: #e6edf7 !important; border-color: #2a3a54 !important; } :root[data-theme="dark"] .select2-results__option--highlighted { background: #1b2b4a !important; color: #e6edf7 !important; } :root[data-theme="dark"] .select2-selection__choice { background: #1b2b4a !important; color: #e6edf7 !important; border-color: #2a3a54 !important; } /* sejarah_pentauliahan.php's status-highlight table rows - background-only (!important) with no text color of their own, so the blanket dark-mode td/th color override above landed light-on-light on each of these. */ :root[data-theme="dark"] .sejarah-row.table-info td { background-color: #163449 !important; color: #e6edf7 !important; } :root[data-theme="dark"] .gap-row { background-color: rgba(255, 255, 255, .04) !important; color: #94a7c4 !important; } :root[data-theme="dark"] .warning-row { background-color: #4a3b12 !important; color: #e6edf7 !important; } :root[data-theme="dark"] .audit-row, :root[data-theme="dark"] .audit-row td { background-color: #16223a !important; color: #94a7c4 !important; } /* jadual_pengajaran.php's schedule-table cell highlights - same background-only pattern as the sejarah_pentauliahan.php rows above. */ :root[data-theme="dark"] .bg-light-cell, :root[data-theme="dark"] .new-location-edit-row td { background-color: rgba(255, 255, 255, .04) !important; color: #e6edf7 !important; } /* .flash-highlight's amber flash keyframe (row-changed indicator, 1s x3) is light regardless of theme; force dark text just for those 3 flashes so it doesn't briefly go light-on-light. */ :root[data-theme="dark"] .flash-highlight, :root[data-theme="contrast"] .flash-highlight { color: #1a1a1a !important; } /* DataTables child-row expansion panels (tracker requirements/user-stories) - background-only, rendered as real content so the blanket td/th color override above forces light text onto their unchanged light background. */ :root[data-theme="dark"] .rtr-child-row, :root[data-theme="dark"] .ust-child-row { background: #16223a !important; color: #e6edf7 !important; } /* .wf-row (tracker waterfall chart rows) sits inside a .card, whose dark override already forces its text light - only the :hover background was left light, going light-on-light while hovered. */ :root[data-theme="dark"] .wf-row:hover { background-color: #1b2b4a !important; } /* Batch editor's mobile-view header bar - same opaque-light-bar-inside-a- dark-card pattern as .deleted-record-body/.slot-section above. */ :root[data-theme="dark"] .mobile-header { background: #16223a !important; color: #e6edf7 !important; } /* #admin-controls (email log detail modal's status-update panel) hardcodes a light-yellow background with no text color of its own, nested inside .modal-content - same pattern as .deleted-record-body above. */ :root[data-theme="dark"] #admin-controls { background-color: #4a3b12 !important; color: #e6edf7 !important; } /* .disclaimer-docs hardcodes .text-muted's light-mode gray directly instead of using the class - same fix as .score-meta above. */ :root[data-theme="dark"] .disclaimer-docs { color: #94a7c4 !important; } /* #sejarahTabsContent (penemuduga slot detail's tab body) hardcodes bg-white with no text color, nested inside the already-fixed .slot-section - same forced-light-text-onto-unmoved-background pattern. */ :root[data-theme="dark"] #sejarahTabsContent { background: #16223a !important; color: #e6edf7 !important; } /* KPI figures on reports/statistics_fragment.php force Bootstrap's .text-dark (~#212529) inside .card, whose dark override repaints the card but can't override this child's own !important color - dark-on-dark. */ :root[data-theme="dark"] .stats-card .text-dark { color: #e6edf7 !important; } /* Select2 chip remove (x) icons hardcode a dark maroon/green assuming the parent chip keeps its pastel light background - the already-fixed .select2-selection__choice override repaints the chip dark, leaving these icons dark-on-dark. */ :root[data-theme="dark"] .select2-tag-exclude .select2-selection__choice__remove { color: #f5c2c7 !important; } :root[data-theme="dark"] .select2-tag-include .select2-selection__choice__remove { color: #a3cfbb !important; } /* .documents-placeholder hardcodes .text-muted's gray directly - same fix as .score-meta/.disclaimer-docs above. */ :root[data-theme="dark"] .penemuduga-slot-details .documents-placeholder { color: #94a7c4 !important; } /* The "Pemohon yang akan Ditemuduga" assigned-applicant list items (renderAssignedList() in secretariat/interview_schedule.php) hardcode bg-white with no text color, inside a BootstrapDialog .modal-content. */ :root[data-theme="dark"] [data-role="assigned-list"] li { background: #16223a !important; color: #e6edf7 !important; } /* visual_templates/form.php's "no background set yet" page-thumbnail placeholder - naked "Tiada Latar" text with no color of its own on a hardcoded #eee box inside .card. */ :root[data-theme="dark"] .no-background-placeholder { color: #1a1a1a !important; } /* public/semakan.php's .semakan-card is a fully self-contained public page (own hardcoded white background/dark headings via its own