/* ========================================================================== dark.css -- the dark theme layer for the web dashboards. HOW THIS FILE WORKS Every rule below is scoped under [data-theme="dark"], which the server only ever puts on when the vs_theme cookie says so (vidsafe/helpers.py). Nothing here can match in light mode, so light rendering is byte-for-byte what it was before. The file is loaded last in website/base.html purely so it wins on source order. Bootstrap 5.3 does most of the work on its own via data-bs-theme="dark" -- cards, modals, tables, dropdowns, forms, alerts, offcanvas and the rest all flip without help. This file covers the three things it cannot: the custom dashboard chrome, the Bootstrap utilities that are hard-coded light (bg-white, bg-light, text-dark ...), and the third-party widgets (select2, Chart.js, SweetAlert2, the date picker). The app webview is never dark: it is excluded at the source, in the theme resolver. ========================================================================== */ :root[data-theme="dark"] { /* Surfaces, darkest first. Light counterparts in the comments. */ --vs-app-bg: #0a1628; /* was #f5f6fb -- canvas behind the content column */ --vs-surface: #0f1f36; /* was #ffffff -- sidebar, top bar, cards, modals */ --vs-surface-2: #142943; /* was #f3f5f9 -- inset rows, table heads, tints */ --vs-surface-3: #0c1d33; /* was #ffffff -- form controls, recessed wells */ /* Lines */ --vs-hairline: #17304f; /* was #eee -- subtle dividers */ --vs-border: #1e3a5f; /* was #e6eaf6 -- card and control borders */ --vs-border-strong: #2c4e77; /* was #c6c7c9 -- input outlines, --bs-border-color*/ --vs-card-accent: #24456e; /* was #d8e8ff -- dashboard stat card border */ /* Text */ --vs-text: #f1f5f9; /* was #212529 */ --vs-text-muted: #94a3b8; /* was #666 */ --vs-text-nav: #cbd5e1; /* was #444 -- sidebar links */ --vs-text-subnav: #94a3b8; /* was #4b5563 -- treeview sub-menu links */ /* Brand. #044FC0 only reaches ~2:1 on the navy, so it lightens for anything the eye has to read, and darkens back down behind white button text. */ --vs-brand: #4d90f0; /* icons, links, active nav, stat numbers */ --vs-brand-fill: #1a6ee0; /* filled primary buttons */ --vs-brand-soft: #14294a; /* active nav pill, soft tints */ /* Odds and ends */ --vs-thumb: #142943; /* image and video placeholders */ --vs-track: #1e3a5f; /* progress bar tracks */ --vs-success: #2e9e63; --vs-danger: #d9534f; --vs-warning: #d9a406; --vs-shadow: rgba(0, 0, 0, .45); --vs-overlay: rgba(4, 12, 24, .72); /* Bootstrap's own dark theme is neutral grey (#212529 / #2b3035). Repointing its body/surface variables at the brand navy is what keeps every component Bootstrap themes for free -- tables, modals, dropdowns, offcanvas -- on-palette instead of grey, without restyling any of them individually. */ --bs-body-bg: var(--vs-app-bg); --bs-body-color: var(--vs-text); --bs-emphasis-color: #ffffff; --bs-secondary-bg: var(--vs-surface-2); --bs-secondary-color: var(--vs-text-muted); --bs-tertiary-bg: var(--vs-surface-2); --bs-tertiary-color: var(--vs-text-muted); --bs-border-color: var(--vs-border-strong); --bs-heading-color: var(--vs-text); --bs-link-color: var(--vs-brand); --bs-link-hover-color: #7ab0f7; --bs-link-color-rgb: 77, 144, 240; --bs-code-color: #e685b5; /* Bootstrap's .bg-body-*, .text-body-* and .border-* utilities do NOT read the variables above -- they read the parallel *-rgb triplets, so that --bs-bg-opacity can be applied. Setting only the hex forms leaves those utilities on Bootstrap's stock neutral grey: the institute store's navbar rendered #2b3035 against the navy until this was added. The triplets must be literal numbers; var() cannot be used inside the rgba() Bootstrap builds from them. Keep each in step with its token. */ --bs-body-bg-rgb: 10, 22, 40; /* --vs-app-bg #0a1628 */ --bs-body-color-rgb: 241, 245, 249; /* --vs-text #f1f5f9 */ --bs-secondary-bg-rgb: 20, 41, 67; /* --vs-surface-2 #142943 */ --bs-secondary-color-rgb: 148, 163, 184; /* --vs-text-muted #94a3b8 */ --bs-tertiary-bg-rgb: 20, 41, 67; /* --vs-surface-2 #142943 */ --bs-tertiary-color-rgb: 148, 163, 184; /* --vs-text-muted #94a3b8 */ --bs-emphasis-color-rgb: 255, 255, 255; --bs-border-color-rgb: 44, 78, 119; /* --vs-border-strong #2c4e77 */ } /* The dashboard's own variables are declared on `body`, not :root (assets/website/ css/base.css), so they have to be redefined at the same place to be picked up. --primary-color is used 18 times: 15 as a text/icon colour, which is why it takes the lightened brand; the two background uses are corrected individually below. */ :root[data-theme="dark"] body { background-color: var(--vs-app-bg) !important; /* base.css sets #fff !important */ color: var(--vs-text); --primary-color: var(--vs-brand); --primary-color-light: var(--vs-brand-soft); --bs-border-color: var(--vs-border-strong); } /* The two places --primary-color is a background rather than a text colour: they need the darker fill so white sits on it at a readable contrast. */ :root[data-theme="dark"] .trigger:hover, :root[data-theme="dark"] .custom_steps_wrapper .nav-link.active .step_number { background-color: var(--vs-brand-fill); color: #fff; } /* --- Bootstrap surface elevation ----------------------------------------- Bootstrap derives most component backgrounds from --bs-body-bg, but it does it inside the component's own rule (`.card { --bs-card-bg: var(--bs-body-bg) }`), so repointing --bs-body-bg at :root is not enough -- the component rule wins and every card, modal and dropdown collapses onto the page canvas, losing the one step of elevation that makes a dashboard readable. Naming each one here restores it. In light mode these all resolve to #fff on a #f5f6fb page; this is the same relationship, one shade up from the navy. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .offcanvas, :root[data-theme="dark"] .offcanvas-lg, :root[data-theme="dark"] .offcanvas-md, :root[data-theme="dark"] .offcanvas-sm, :root[data-theme="dark"] .offcanvas-xl, :root[data-theme="dark"] .offcanvas-xxl, :root[data-theme="dark"] .list-group, :root[data-theme="dark"] .accordion, :root[data-theme="dark"] .toast, :root[data-theme="dark"] .popover, :root[data-theme="dark"] .pagination { --bs-card-bg: var(--vs-surface); --bs-modal-bg: var(--vs-surface); --bs-dropdown-bg: var(--vs-surface); --bs-offcanvas-bg: var(--vs-surface); --bs-list-group-bg: var(--vs-surface); --bs-accordion-bg: var(--vs-surface); --bs-toast-bg: var(--vs-surface); --bs-popover-bg: var(--vs-surface); --bs-pagination-bg: var(--vs-surface); } /* Sub-surfaces inside those components step up again, exactly as the light theme's #f8f9fa headers and footers do against their white card. */ :root[data-theme="dark"] .card { --bs-card-cap-bg: var(--vs-surface-2); --bs-card-border-color: var(--vs-border); } :root[data-theme="dark"] .modal-content { --bs-modal-header-border-color: var(--vs-border); --bs-modal-footer-border-color: var(--vs-border); --bs-modal-border-color: var(--vs-border); } :root[data-theme="dark"] .dropdown-menu { --bs-dropdown-border-color: var(--vs-border); --bs-dropdown-link-hover-bg: var(--vs-surface-2); --bs-dropdown-link-active-bg: var(--vs-brand-fill); --bs-dropdown-divider-bg: var(--vs-border); } :root[data-theme="dark"] .list-group { --bs-list-group-border-color: var(--vs-border); --bs-list-group-action-hover-bg: var(--vs-surface-2); --bs-list-group-active-bg: var(--vs-brand-fill); --bs-list-group-active-border-color: var(--vs-brand-fill); } :root[data-theme="dark"] .accordion { --bs-accordion-border-color: var(--vs-border); --bs-accordion-btn-bg: var(--vs-surface-2); --bs-accordion-active-bg: var(--vs-brand-soft); --bs-accordion-active-color: var(--vs-brand); } /* Tables sit directly on whatever contains them, so they take their stripes and hover from the surface variables rather than a background of their own. */ :root[data-theme="dark"] .table { --bs-table-color: var(--vs-text); --bs-table-border-color: var(--vs-border); --bs-table-striped-bg: rgba(148, 163, 184, .06); --bs-table-hover-bg: rgba(148, 163, 184, .10); --bs-table-active-bg: rgba(148, 163, 184, .14); } /* The modal scrim: Bootstrap's is already black, but at .5 it is too weak to separate a dark modal from a dark page. */ :root[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .72; } /* --- Bootstrap outline buttons ------------------------------------------- Outline buttons carry their colour as a literal (--bs-btn-color: #6c757d on .btn-outline-secondary), and Bootstrap does not adapt those for dark mode, so the label sits at 3.87:1 on the navy -- caught by a contrast sweep of the live Courses page, where "Filters" and "Sort by" were both failing. The filled variants are fine: they keep their own background. */ :root[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--vs-text-muted); /* was #6c757d -- 3.87:1 */ --bs-btn-border-color: var(--vs-border-strong); --bs-btn-hover-bg: var(--vs-surface-2); --bs-btn-hover-border-color: var(--vs-border-strong); --bs-btn-hover-color: var(--vs-text); --bs-btn-active-bg: var(--vs-surface-2); --bs-btn-active-border-color: var(--vs-border-strong); --bs-btn-active-color: var(--vs-text); --bs-btn-disabled-color: var(--vs-text-muted); --bs-btn-disabled-border-color: var(--vs-border); } :root[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--vs-brand); /* was #0d6efd -- 2.7:1 */ --bs-btn-border-color: var(--vs-brand); --bs-btn-hover-bg: var(--vs-brand-fill); --bs-btn-hover-border-color: var(--vs-brand-fill); --bs-btn-active-bg: var(--vs-brand-fill); --bs-btn-active-border-color: var(--vs-brand-fill); --bs-btn-disabled-color: var(--vs-brand); --bs-btn-disabled-border-color: var(--vs-brand); } /* .btn-outline-dark is near-black on near-black. There is no "dark" left to outline in dark mode, so it becomes the neutral outline the design already has. */ :root[data-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--vs-text); /* was #212529 -- 1.2:1 */ --bs-btn-border-color: var(--vs-border-strong); --bs-btn-hover-bg: var(--vs-surface-2); --bs-btn-hover-border-color: var(--vs-border-strong); --bs-btn-hover-color: var(--vs-text); --bs-btn-active-bg: var(--vs-surface-2); --bs-btn-active-color: var(--vs-text); } /* Link buttons and .link-dark, used in the sidebar billing box's Refresh link. */ :root[data-theme="dark"] .btn-link { --bs-btn-color: var(--vs-brand); --bs-btn-hover-color: #7ab0f7; } :root[data-theme="dark"] .link-dark { color: var(--vs-text) !important; /* was #212529 */ } /* --- Bootstrap colour utilities ------------------------------------------ .text-primary and friends are literal colours that Bootstrap does NOT adapt for dark mode -- .text-primary stays #0d6efd whatever data-bs-theme says. A contrast sweep of the live console found these on almost every list page (course names in Videos / Study Materials / MCQ Tests are .text-primary links at 4.03:1, coupon amounts are .text-success at 3.65:1). The replacements are Bootstrap's OWN dark-mode emphasis colours (--bs-*-text-emphasis), so the palette stays Bootstrap's rather than invented, and every one clears 6:1 on both --vs-app-bg and --vs-surface. */ :root[data-theme="dark"] .text-primary { color: var(--vs-brand) !important; } /* 4.03 -> 5.6 */ :root[data-theme="dark"] .text-success { color: #75b798 !important; } /* 3.65 -> 6.4 */ :root[data-theme="dark"] .text-danger { color: #ea868f !important; } /* 3.4 -> 6.2 */ :root[data-theme="dark"] .text-warning { color: #ffda6a !important; } /* 6.9 -> 10.4 */ :root[data-theme="dark"] .text-info { color: #6edff6 !important; } :root[data-theme="dark"] .text-secondary { color: var(--vs-text-muted) !important; } /* The link-* variants of the same utilities, used on anchors. */ :root[data-theme="dark"] .link-primary { color: var(--vs-brand) !important; } :root[data-theme="dark"] .link-success { color: #75b798 !important; } :root[data-theme="dark"] .link-danger { color: #ea868f !important; } :root[data-theme="dark"] .link-secondary { color: var(--vs-text-muted) !important; } /* Remaining outline buttons. Same failure as the secondary/primary/dark ones handled above: the label colour is a literal Bootstrap does not adapt. */ :root[data-theme="dark"] .btn-outline-success { --bs-btn-color: #75b798; /* was #198754 -- 4.0:1 */ --bs-btn-border-color: #2e7d5b; --bs-btn-hover-bg: var(--vs-success); --bs-btn-hover-border-color: var(--vs-success); --bs-btn-active-bg: var(--vs-success); --bs-btn-disabled-color: #75b798; --bs-btn-disabled-border-color: #2e7d5b; } :root[data-theme="dark"] .btn-outline-danger { --bs-btn-color: #ea868f; /* was #dc3545 */ --bs-btn-border-color: #8f3a40; --bs-btn-hover-bg: var(--vs-danger); --bs-btn-hover-border-color: var(--vs-danger); --bs-btn-active-bg: var(--vs-danger); --bs-btn-disabled-color: #ea868f; --bs-btn-disabled-border-color: #8f3a40; } :root[data-theme="dark"] .btn-outline-warning { --bs-btn-color: #ffda6a; /* was #ffc107 */ --bs-btn-border-color: #8a6d0b; --bs-btn-hover-bg: var(--vs-warning); --bs-btn-hover-border-color: var(--vs-warning); --bs-btn-hover-color: #231a00; --bs-btn-active-bg: var(--vs-warning); --bs-btn-active-color: #231a00; } :root[data-theme="dark"] .btn-outline-info { --bs-btn-color: #6edff6; --bs-btn-border-color: #3a7d8c; --bs-btn-hover-bg: #3a97ad; --bs-btn-hover-border-color: #3a97ad; --bs-btn-active-bg: #3a97ad; } :root[data-theme="dark"] .btn-outline-light { --bs-btn-color: var(--vs-text); --bs-btn-border-color: var(--vs-border-strong); --bs-btn-hover-bg: var(--vs-surface-2); --bs-btn-hover-border-color: var(--vs-border-strong); --bs-btn-hover-color: var(--vs-text); } /* --- Status colours that only clear AA on a light page -------------------- Bootstrap's solid #198754 / #ffc107 / #dc3545 are tuned for near-white. As TEXT on the navy they land at 3.65:1 and below, so anywhere a template uses them for a score, a label or a figure, the lighter emphasis pair takes over. These are also the fallback targets for the var(--vs-score-*) hooks added to templates that define their own status classes. */ :root[data-theme="dark"] body { --vs-score-high: #75b798; --vs-score-medium: #ffda6a; --vs-score-low: #ea868f; } /* --- Solid badges whose white label was already marginal ------------------ .badge.bg-warning (a custom #ff7807) and .badge.bg-info (#0dcaf0) are rendered with white text, which is 2.64:1 and 1.96:1 -- failing in LIGHT mode too, so this is a pre-existing issue rather than something dark mode introduced. Light is left exactly as it is; on dark the label flips to the dark ink Bootstrap's own .text-bg-warning / .text-bg-info already use, which is legible on both fills. */ :root[data-theme="dark"] .badge.bg-warning, :root[data-theme="dark"] .badge.bg-info { color: #231a00 !important; } :root[data-theme="dark"] .badge.bg-info { color: #032830 !important; } /* ========================================================================== 10-base.css -- dark overrides for assets/website/css/base.css Additive only. Every selector is scoped to :root[data-theme="dark"], so light mode is untouched. The `body{...}` block at the top of base.css (the --primary-color / --bs-border-color declarations and background-color:#fff) is handled in 00-tokens.css and is deliberately not repeated here. !important is mirrored from the source rule, never added. Rules are grouped in source order; headings name the source selector. ========================================================================== */ /* --- Dashboard Card: .dashboard_card and friends ------------------------- */ :root[data-theme="dark"] .dashboard_card { background: var(--vs-surface); border: 1px solid var(--vs-card-accent); } /* was color:#000 -- the icon wrapper's own glyph colour, not the inside it */ :root[data-theme="dark"] .dashboard_card .card_icon_wrapper { color: var(--vs-text); } :root[data-theme="dark"] .dashboard_card .card_text { color: var(--vs-text-muted); } /* was background:#fbfbfb / border:#e3e2ff -- hover lifts one surface step and brightens the border rather than washing out. */ :root[data-theme="dark"] a.dashboard_card:hover { background: var(--vs-surface-2); border: 1px solid var(--vs-border-strong); } /* .dashboard_card .card_icon_wrapper i and .card_number use var(--primary-color), which 00-tokens.css already repoints at --vs-brand. Not overridden here. */ /* --- .card.vidsafe_card -------------------------------------------------- */ :root[data-theme="dark"] .card.vidsafe_card { border: 1px solid var(--vs-border); } /* --- .box / .box-header -------------------------------------------------- */ /* The 8px 4px 36px -4px #dadaff shadow is a pale lilac glow tuned for a white page; on navy it reads as a halo, so it becomes a real drop shadow. */ :root[data-theme="dark"] .box { background: var(--vs-surface); box-shadow: 8px 4px 36px -4px var(--vs-shadow); -webkit-box-shadow: 8px 4px 36px -4px var(--vs-shadow); } :root[data-theme="dark"] .box-header { border-bottom: 1px solid var(--vs-border); } /* --- .course_item_box list rows ------------------------------------------ */ :root[data-theme="dark"] .course_item_box { border: 1px solid var(--vs-border); background: var(--vs-surface); } :root[data-theme="dark"] .course_item_box:hover { background: var(--vs-surface-2); } :root[data-theme="dark"] .course_item_box.bulk_selected { background: var(--vs-brand-soft); box-shadow: inset 3px 0 0 var(--vs-brand); } /* No token exists for "brand-soft, one step lighter"; --vs-surface-2 is within 1% of --vs-brand-soft and would read as no hover at all. */ :root[data-theme="dark"] .course_item_box.bulk_selected:hover { background: #1b3760; } /* .course_item_box.bulk_selected .btn only sets opacity: 0.45, which dims toward the page the same way in either theme. Left alone. */ /* movedHighlightPulse pulses #fff -> #fff3cd -> #ffe08a, i.e. it would flash the row white and strand the light body text on pale amber. @keyframes cannot be theme-scoped (a same-named block would replace the light one globally), so the dark theme gets its own animation and only the animation-name is overridden. --vs-text on the brightest stop (#574311) is 8.4:1. */ @keyframes vs_dark_moved_highlight_pulse { 0%, 100% { background: var(--vs-surface); } 15%, 45%, 75% { background: #3a3016; } 30%, 60%, 90% { background: #574311; } } :root[data-theme="dark"] .course_item_box.moved_highlight { animation-name: vs_dark_moved_highlight_pulse; } /* the inset 4px #f0ad4e marker is a saturated amber and reads fine on navy */ /* --- .course_item_icon type chips ---------------------------------------- */ :root[data-theme="dark"] .course_item_icon { background: var(--vs-surface-2); } /* The per-type chips are colour-coded by meaning, so the hue is kept and only the value is inverted: pale tint -> deep tint, dark glyph -> light glyph. No tokens exist for amber/red surface tints. */ :root[data-theme="dark"] .course_item_box.type_folder .course_item_icon { background-color: #3a2a10 !important; /* was #FAE9C9 */ color: #f0a04a; /* was #EA780E -- 6.3:1 */ } :root[data-theme="dark"] .course_item_box.type_video .course_item_icon { background: #3a1414 !important; /* was #FAE4E4 */ color: #f08a8a; /* was #BD2929 -- 6.5:1 */ } :root[data-theme="dark"] .course_item_box.type_study_material .course_item_icon { background: var(--vs-brand-soft) !important; color: var(--vs-brand); /* 4.4:1, but a 24px glyph (large) */ } /* .type_live_class keeps #fff on #BD2929 (6.0:1) -- already correct on dark. */ :root[data-theme="dark"] .course_item_file_box { background: var(--vs-surface-2); } /* --- .nav-underline tabs -------------------------------------------------- */ :root[data-theme="dark"] .nav-underline { border-bottom: 1px solid var(--vs-border); } :root[data-theme="dark"] .nav-underline .nav-link.active, :root[data-theme="dark"] .nav-underline .show > .nav-link { color: var(--vs-brand) !important; border-bottom-color: var(--vs-brand); } :root[data-theme="dark"] .nav-underline .nav-link { color: var(--vs-text-muted) !important; /* was #888 */ } /* --- input::placeholder --------------------------------------------------- */ /* #ccc on a dark control is bright enough to be mistaken for a real value. */ :root[data-theme="dark"] input::placeholder { color: var(--vs-text-muted) !important; } /* --- sortable list (.sortable_item / .sortable-ghost) --------------------- */ :root[data-theme="dark"] .sortable_item { background-color: var(--vs-surface-2); border: 1px solid var(--vs-border-strong); } /* the drop placeholder: a recessed well instead of a light grey slab */ :root[data-theme="dark"] .sortable-ghost { background-color: var(--vs-surface-3); } /* --- table.responsive ----------------------------------------------------- */ :root[data-theme="dark"] table.responsive th, :root[data-theme="dark"] table.responsive td { border: 1px solid var(--vs-border); } :root[data-theme="dark"] table.responsive th { background-color: var(--vs-surface-2); } @media screen and (max-width: 768px) { :root[data-theme="dark"] .responsive tr { border: 1px solid var(--vs-border); } /* the rgba(0,0,0,0.01) shadow on .responsive tr is a no-op on dark; skipped */ :root[data-theme="dark"] .responsive th { background: var(--vs-surface-2) !important; } /* stacked cards: background:#fff with no colour of its own would put the light body text on white. */ :root[data-theme="dark"] .responsive td { background: var(--vs-surface); border-bottom: 1px solid var(--vs-hairline) !important; } } /* --- .page_top_box -------------------------------------------------------- */ :root[data-theme="dark"] .page_top_box { background: var(--vs-surface-2); border: 1px solid var(--vs-border); } /* --- .testimonial_box ----------------------------------------------------- */ :root[data-theme="dark"] .testimonial_box { background-color: var(--vs-surface) !important; border-left: 4px solid var(--vs-brand); } :root[data-theme="dark"] .testimonial_box .testimonial_image_box img { border: 4px solid var(--vs-border); } :root[data-theme="dark"] .testimonial_box .testimonial_designation, :root[data-theme="dark"] .testimonial_box .testimonial_text { color: var(--vs-text-muted); } /* --- .offering_box -------------------------------------------------------- */ /* the white-to-near-white gradient inverts to surface-2 -> surface, keeping the same "slightly tinted at the top-left" reading */ :root[data-theme="dark"] .offering_box { background: linear-gradient(135deg, var(--vs-surface-2) 0%, var(--vs-surface) 100%); border: 1px solid var(--vs-border); } :root[data-theme="dark"] .offering_box .offering_icon { color: var(--vs-brand); } :root[data-theme="dark"] .offering_box .offering_title { color: var(--vs-text); } :root[data-theme="dark"] .offering_box .offering_description { color: var(--vs-text-muted); } /* The 3px brand bar, shared by .offering_box, .faq_box and .faq_accordion_item. #044FC0 is only 2.0:1 against --vs-surface-2 (it is ~7:1 on the light card), so the left half of the gradient fades into the card and the bar tapers away. Both stops move up one step: --vs-brand-fill clears 3:1 and --vs-brand reaches 4.6:1, so it reads across its whole width. */ :root[data-theme="dark"] .offering_box::before, :root[data-theme="dark"] .faq_box::before, :root[data-theme="dark"] .faq_accordion_item::before { background: linear-gradient(90deg, var(--vs-brand-fill), var(--vs-brand)); } /* --- FAQ blocks and accordion --------------------------------------------- */ :root[data-theme="dark"] .faq_box { background: linear-gradient(135deg, var(--vs-surface-2) 0%, var(--vs-surface) 100%); border: 1px solid var(--vs-border); } :root[data-theme="dark"] .faq_question { color: var(--vs-text); } :root[data-theme="dark"] .faq_question i { color: var(--vs-brand); } :root[data-theme="dark"] .faq_answer { color: var(--vs-text-muted); } :root[data-theme="dark"] .faq_accordion_item { background: linear-gradient(135deg, var(--vs-surface-2) 0%, var(--vs-surface) 100%); border: 1px solid var(--vs-border); } :root[data-theme="dark"] .faq_accordion_button { color: var(--vs-brand) !important; } :root[data-theme="dark"] .faq_accordion_button:not(.collapsed) { background: linear-gradient(135deg, var(--vs-brand-soft) 0%, var(--vs-surface) 100%) !important; color: var(--vs-brand) !important; } /* The chevron is an inline SVG data URI with a hard-coded fill='%23044FC0', which cannot read a CSS variable, so the lightened brand (#4d90f0) is written into the URL literally. */ :root[data-theme="dark"] .faq_accordion_button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234d90f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } :root[data-theme="dark"] .faq_accordion_body { background: linear-gradient(135deg, var(--vs-surface-2) 0%, var(--vs-surface) 100%); color: var(--vs-text-muted) !important; border-top: 1px solid var(--vs-border) !important; } /* --- course detail header ------------------------------------------------- */ :root[data-theme="dark"] .course_top_background { background-color: var(--vs-surface-2); } :root[data-theme="dark"] .course_title_wrapper .course_detail_title, :root[data-theme="dark"] .course_title_wrapper .course_detail_subtitle { color: var(--vs-text); } /* rgba(26,46,85,.07) is a pale blue-grey lift that disappears on navy */ :root[data-theme="dark"] .course_detail_side_card { box-shadow: 0px 10px 50px 0px var(--vs-shadow) !important; } /* --- .custom_steps_wrapper ------------------------------------------------ */ :root[data-theme="dark"] .custom_steps_wrapper .step_number { background-color: var(--vs-surface-2); } /* .custom_steps_wrapper .nav-link.active .step_number (the --primary-color fill with #fff on it) is already corrected in 00-tokens.css. */ /* --- .modal-title --------------------------------------------------------- */ :root[data-theme="dark"] .modal-title { color: var(--vs-text) !important; } /* --- MCQ question boxes and options --------------------------------------- */ :root[data-theme="dark"] .mcq_question_box { border: 1px solid var(--vs-border); background-color: var(--vs-surface-2); } :root[data-theme="dark"] .mcq_question_option { border: 1px solid var(--vs-border); } :root[data-theme="dark"] .option_alpha { background-color: var(--vs-surface-2); color: var(--vs-text-muted); } /* No dark-green surface token exists; #12321f is the green counterpart of --vs-surface-2 and carries --vs-text at 12.6:1. */ :root[data-theme="dark"] .correct_option { background-color: #12321f; border-color: var(--vs-success); } /* .correct_option .option_alpha keeps #fff on #155724 (6.1:1) -- fine on dark. */ :root[data-theme="dark"] .has_user_selected { border-color: var(--vs-brand); } /* #044FC0 is only 3.1:1 against the darkened question box, so the chip takes the filled-brand token; the #fff glyph rules below it stay correct (4.8:1). */ :root[data-theme="dark"] .has_user_selected .option_alpha { background-color: var(--vs-brand-fill); } /* --- .beautiful_table ------------------------------------------------------ */ :root[data-theme="dark"] .beautiful_table { border: 1px solid var(--vs-hairline); } :root[data-theme="dark"] .beautiful_table th, :root[data-theme="dark"] .beautiful_table td { border: 1px solid var(--vs-border); color: var(--vs-text); } /* #4e4edc is 2.6:1 on the dark surface */ :root[data-theme="dark"] .beautiful_table th { color: var(--vs-brand); } /* Bootstrap striping: the source sets a near-white --bs-table-color-type on a near-white stripe, which would land as dark-on-dark here. Both halves are repointed so the stripe stays a stripe and stays readable. */ :root[data-theme="dark"] .beautiful_table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-color-type: var(--vs-text); --bs-table-bg-type: var(--vs-surface-2); } /* --- answer-state tints ----------------------------------------------------- */ /* No red/green surface tokens; these are the danger and success hues taken down to --vs-surface-2's value. --vs-text clears 13:1 on all three. */ :root[data-theme="dark"] .user_answered_incorrectly { border-color: var(--vs-danger); background-color: #3a1417; } :root[data-theme="dark"] .mcq_question_box.incorrect_answer { background-color: #2a181c !important; } :root[data-theme="dark"] .mcq_question_box.correct_answer { background-color: #12281f !important; } :root[data-theme="dark"] .mcq_question_box.unattempted { background-color: var(--vs-surface-2) !important; } /* ========================================================================== 11-helpers.css -- dark overrides for assets/website/css/helpers.css Additive only. Every selector below is scoped to :root[data-theme="dark"], so nothing here can match in light mode. Blocks follow source order and each one names the helpers.css rule it shadows, so the two files diff side by side. !important is mirrored from the source, never added. Deliberately absent: rules that set no colour (layout, sizing, font-size, animation timing, select2 geometry), rules whose colour already comes from a var(--bs-*) that Bootstrap's data-bs-theme="dark" retargets (.bg-danger-subtle, .nav-underline .dropdown-item a, .select2-selection--multiple border), and colours that already read correctly on the navy canvas: the purple .bg_primary fill, the orange .bg-warning / .btn-warning fills, the four .legend-title fills, the saturated .seats-dot indicators and .seats-text.text-* colours, the rgba(0,0,0,.6) .form-loader scrim, and .text_white (white on coloured fills). ========================================================================== */ /* .border-primary-subtle -- border-color #e4efff */ :root[data-theme="dark"] .border-primary-subtle { border-color: var(--vs-border) !important; } /* .help-text -- color: red. --vs-danger is the palette's only red; on --vs-surface it reaches 4.2:1, a little short of the 4.5 body-text target (it clears 3:1). */ :root[data-theme="dark"] .help-text { color: var(--vs-danger); } /* .page_subheader -- #666 */ :root[data-theme="dark"] .page_subheader { color: var(--vs-text-muted); } /* .bg-gray-eee / .bg-gray-ddd -- #eee / #ddd. The two helpers exist to be one step apart, so ddd takes --vs-border (the next value up from --vs-surface-2) rather than collapsing onto the same fill. Neither sets a text colour; body copy is --vs-text and clears 12:1 on both. */ :root[data-theme="dark"] .bg-gray-eee { background-color: var(--vs-surface-2) !important; } :root[data-theme="dark"] .bg-gray-ddd { background-color: var(--vs-border) !important; } /* .vidsafe_card -- border #ede5ff, box-shadow 0 0 5px 5px #f4efff. That shadow is a white lilac glow; on navy it has to become a dark halo or the card grows a bright ring. */ :root[data-theme="dark"] .vidsafe_card { border-color: var(--vs-border) !important; box-shadow: 0px 0px 5px 5px var(--vs-shadow); } /* .data_box .data_label / .data_value -- #666 / #555 */ :root[data-theme="dark"] .data_box .data_label { color: var(--vs-text-muted); } :root[data-theme="dark"] .data_box .data_value { color: var(--vs-text); } /* .drop-zone -- 2px dashed #eee on #f8f5ff, label #044FC0. The dashed rule was near-invisible by design in light (#eee on #f8f5ff), so it takes the strongest line token and stays a soft hint rather than a hard box. */ :root[data-theme="dark"] .drop-zone { border-color: var(--vs-border-strong); background-color: var(--vs-brand-soft); color: var(--vs-brand); } /* .drop-zone.dragover -- #e9ecef. Light steps *down* from #f8f5ff, so dark recesses too rather than lifting: --vs-surface-3 is a 1.30:1 step off the resting --vs-brand-soft (light's own step is only 1.10:1, so this reads more clearly, not less) and it carries the --vs-brand label at 5.3:1. Lifting to --vs-border instead would drop that label to 3.6:1, under the 4.5 needed for 1rem body text. */ :root[data-theme="dark"] .drop-zone.dragover { background-color: var(--vs-surface-3); } /* .video-preview -- border #ddd */ :root[data-theme="dark"] .video-preview { border-color: var(--vs-border); } /* FILE UPLOAD -- .file_uploaded_div background #faf8ff, border #d7c4ff */ :root[data-theme="dark"] .file_uploaded_div { background-color: var(--vs-surface-2); border-color: var(--vs-border); } /* .inline-thin-progressbar -- border #bbb, background #fff */ :root[data-theme="dark"] .inline-thin-progressbar { border-color: var(--vs-border-strong); background-color: var(--vs-track); } /* .file_uploaded_div .delete + :hover -- #666 / #222 */ :root[data-theme="dark"] .file_uploaded_div .delete { color: var(--vs-text-muted); } :root[data-theme="dark"] .file_uploaded_div .delete:hover { color: var(--vs-text); } /* .thin_scrollbar -- track #fbfbfb, thumb #fff with a #f1f1f1 ring, hover #f0f0f0. Light kept the thumb barely above the track; dark keeps the same relationship with the two line tokens, hover being the lighter of the pair. */ :root[data-theme="dark"] .thin_scrollbar::-webkit-scrollbar-track { background: var(--vs-surface-2); } :root[data-theme="dark"] .thin_scrollbar::-webkit-scrollbar-thumb { background-color: var(--vs-border); border-color: var(--vs-surface-2); } :root[data-theme="dark"] .thin_scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--vs-border-strong); } /* Firefox. The source declares a single value, which is invalid and dropped, so this is the first declaration that actually applies -- thumb then track. */ :root[data-theme="dark"] .thin_scrollbar * { scrollbar-color: var(--vs-border) var(--vs-surface-2); } /* .fieldset_box + legend -- borders #ddd, legend #fff on #000 text. The legend fill is what masks the border line behind it, so it must stay an opaque surface, not a transparent tint. */ :root[data-theme="dark"] .fieldset_box { border-color: var(--vs-border); } /* The #ddd ring belongs to every legend, the four coloured .legend-title chips included -- left alone it stays a pale outline on the navy card. */ :root[data-theme="dark"] .fieldset_box legend { border-color: var(--vs-border); } /* Fill and text are excluded from .legend-title.primary/.danger/.warning/ .success. Those four carry their own saturated fill and white text in helpers.css at (0,3,0); `.fieldset_box legend` under the theme prefix is (0,3,1), so an unqualified rule here would out-specify all four and flatten them to the plain surface in dark only. The :not() chain keeps them on their source colours (which read correctly on navy) while bare and the bare .legend-title used in the mains-test templates still get the dark surface they need. */ :root[data-theme="dark"] .fieldset_box legend:not(.primary):not(.danger):not(.warning):not(.success) { background-color: var(--vs-surface); color: var(--vs-text); } /* .stacked-responsive-table (mobile) -- tr background white, td border #f6f6f6, td::before #888. The white row is the headline fix here: without it every stacked card renders --vs-text on white. */ @media (max-width: 768px) { :root[data-theme="dark"] .stacked-responsive-table tr { background-color: var(--vs-surface); } :root[data-theme="dark"] .stacked-responsive-table td { border-bottom-color: var(--vs-hairline); } :root[data-theme="dark"] .stacked-responsive-table td::before { color: var(--vs-text-muted); } } /* .custom_fieldset + legend -- 1px dashed #044fc0 on #fff, legend #fff on #044fc0. The legend keeps its white text: it moves to the darker brand fill, where white sits at 4.8:1. */ :root[data-theme="dark"] .custom_fieldset { border-color: var(--vs-brand); background-color: var(--vs-surface); } :root[data-theme="dark"] .custom_fieldset legend { background-color: var(--vs-brand-fill); } /* .image_upload_preview_box + :after -- border #ddd, placeholder caption #999 */ :root[data-theme="dark"] .image_upload_preview_box { border-color: var(--vs-border); } :root[data-theme="dark"] .image_upload_preview_box:after { color: var(--vs-text-muted); } /* textarea.form-control::placeholder -- #ccc. --vs-text-muted is the faintest legible token in the palette; it reads a touch stronger than #ccc did on white, which is the right trade on a dark field. */ :root[data-theme="dark"] textarea.form-control::placeholder { color: var(--vs-text-muted) !important; } /* .bg-primary-light -- #edf0f9 */ :root[data-theme="dark"] .bg-primary-light { background-color: var(--vs-brand-soft) !important; } /* #pricing_calculation_preview .course_price / .payment_gateway / .your_share / .our_share -- all #000 */ :root[data-theme="dark"] #pricing_calculation_preview .course_price, :root[data-theme="dark"] #pricing_calculation_preview .payment_gateway, :root[data-theme="dark"] #pricing_calculation_preview .your_share, :root[data-theme="dark"] #pricing_calculation_preview .our_share { color: var(--vs-text); } /* .input_with_clear_button::after -- #666 X on a #fff pill, border #ddd. The pill is a mask over the field it sits on, so it takes the field surface. */ :root[data-theme="dark"] .input_with_clear_button::after { color: var(--vs-text-muted); background-color: var(--vs-surface-3); border-color: var(--vs-border); } /* .form_group_with_clear_button .clear_input_button + :hover -- #666 / #000 */ :root[data-theme="dark"] .form_group_with_clear_button .clear_input_button { color: var(--vs-text-muted); } :root[data-theme="dark"] .form_group_with_clear_button .clear_input_button:hover { color: var(--vs-text); } /* select.form-control -- the chevron is an inline SVG with stroke='%23343a40', a near-black that disappears on a dark field. A data: URI cannot read a CSS variable, so the stroke is the literal value of --vs-text-muted (#94a3b8). */ :root[data-theme="dark"] select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e"); } /* .alert-warning -- #E8750C on #FFF8F2, border #F58F30. .alert-info -- #f2f7ff fill, border #B0CFFF. Both fills are near-white. The info alert's text is left to Bootstrap's dark --bs-info-text-emphasis. */ :root[data-theme="dark"] .alert-warning { border-color: var(--vs-warning) !important; color: var(--vs-warning) !important; background-color: var(--vs-surface-2) !important; } :root[data-theme="dark"] .alert-info { border-color: var(--vs-brand) !important; background: var(--vs-brand-soft) !important; } /* .box_checkbox_label + :hover -- #fff chip, border #ddd, hover tint #f2f7ff. The chip sits on a card, so it recesses to --vs-surface-3 and the hover lifts to --vs-brand-soft; using --vs-surface-2 for the resting state would have made the hover step invisible. */ :root[data-theme="dark"] .box_checkbox_label { border-color: var(--vs-border); background-color: var(--vs-surface-3); } :root[data-theme="dark"] .box_checkbox_label:hover { background-color: var(--vs-brand-soft); } /* .highlight_flash + @keyframes highlightFlash -- #fff9c4 settling to #fff. A @keyframes block cannot be scoped by an attribute selector, so dark gets its own uniquely named copy and .highlight_flash is repointed at it; the light animation is left exactly as it was and nothing references the dark one outside [data-theme="dark"]. The amber glow works on navy and is kept. No dark-amber token exists, so the wash is a literal warm navy that holds --vs-text at 12:1. */ @keyframes vsDarkHighlightFlash { 0% { box-shadow: 0 0 10px rgba(255, 177, 59, 0.8); background-color: #3a2e08 !important; border-color: #ff7807 !important; } 50% { box-shadow: 0 0 5px rgba(255, 177, 59, 0.4); background-color: #3a2e08 !important; border-color: #ff7807 !important; } 100% { box-shadow: none; background-color: var(--vs-surface) !important; border-color: #ff7807 !important; } } :root[data-theme="dark"] .highlight_flash { animation-name: vsDarkHighlightFlash; background-color: #3a2e08 !important; } /* .select2-selection__choice -- #2a62b4 on #e9eef7, border #d4e5ff */ :root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--vs-brand-soft); border-color: var(--vs-border); color: var(--vs-brand); } /* ===== Collapsible Slots Accordion ===== */ /* .slots-accordion .accordion-item -- border #e9ecef */ :root[data-theme="dark"] .slots-accordion .accordion-item { border-color: var(--vs-border); } /* .accordion-button, :not(.collapsed), :focus -- #fff fills, focus border #e9ecef */ :root[data-theme="dark"] .slots-accordion .accordion-button, :root[data-theme="dark"] .slots-accordion .accordion-button:not(.collapsed) { background-color: var(--vs-surface); } :root[data-theme="dark"] .slots-accordion .accordion-button:focus { border-color: var(--vs-border); } /* .accordion-button::after -- inline SVG chevron with fill='%23666'. Same data: URI constraint as the select arrow, so the literal --vs-text-muted value. */ :root[data-theme="dark"] .slots-accordion .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* .date-header-icon / .date-header-text -- #0d6efd / #333 */ :root[data-theme="dark"] .slots-accordion .date-header-icon { color: var(--vs-brand); } :root[data-theme="dark"] .slots-accordion .date-header-text { color: var(--vs-text); } /* .slots-count-badge -- #555 on #e9ecef */ :root[data-theme="dark"] .slots-accordion .slots-count-badge { background-color: var(--vs-surface-2); color: var(--vs-text); } /* .bookings-count-badge -- #c62828 on #fce4ec. The pale pink fill has to go, and --vs-danger is the only red in the palette: it lands at 3.7:1 on --vs-surface-2, below the 4.5 target for a 0.75rem label but clear of 3:1. */ :root[data-theme="dark"] .slots-accordion .bookings-count-badge { background-color: var(--vs-surface-2); color: var(--vs-danger); } /* ===== Slots Table ===== */ /* .slots-table thead th -- #6c757d on #fff, rules #e9ecef */ :root[data-theme="dark"] .slots-table thead th { background-color: var(--vs-surface-2); border-bottom-color: var(--vs-border); border-top-color: var(--vs-border); color: var(--vs-text-muted); } /* .slots-table tbody td -- border-bottom #f0f0f0 */ :root[data-theme="dark"] .slots-table tbody td { border-bottom-color: var(--vs-hairline); } /* .slots-table .mentor-cell-td -- border-right #f0f0f0 */ :root[data-theme="dark"] .slots-table .mentor-cell-td { border-right-color: var(--vs-hairline); } /* .slots-table .mentor-last-row td -- 2px #e9ecef group separator */ :root[data-theme="dark"] .slots-table .mentor-last-row td { border-bottom-color: var(--vs-border); } /* .mentor-avatar -- #6c757d glyph on #e9ecef */ :root[data-theme="dark"] .slots-table .mentor-avatar, :root[data-theme="dark"] .mentor-card-header .mentor-avatar { background-color: var(--vs-surface-2); color: var(--vs-text-muted); } /* .mentor-name / .time-text / .center-text -- #333 / #333 / #555 */ :root[data-theme="dark"] .slots-table .mentor-name, :root[data-theme="dark"] .mentor-card-header .mentor-name, :root[data-theme="dark"] .slots-table .time-text, :root[data-theme="dark"] .slots-table .center-text { color: var(--vs-text); } /* Mode Badges -- .mode-on is #2e7d32 on #e8f5e9 with a #c8e6c9 edge, .mode-off is #757575 on #fff with a #e0e0e0 edge. Both fills are near-white. --vs-success on --vs-surface-2 gives 4.3:1, marginally under 4.5 for the 0.75rem label; the palette has no lighter green. */ :root[data-theme="dark"] .mode-badge.mode-on { background-color: var(--vs-surface-2); color: var(--vs-success); border-color: var(--vs-success); } :root[data-theme="dark"] .mode-badge.mode-off { background-color: var(--vs-surface-2); color: var(--vs-text-muted); border-color: var(--vs-border); } /* .action-link -- #0d6efd */ :root[data-theme="dark"] .action-link { color: var(--vs-brand); } /* ===== Slots mobile cards ===== */ /* .mentor-card -- #fff, border #e9ecef */ :root[data-theme="dark"] .mentor-card { background-color: var(--vs-surface); border-color: var(--vs-border); } /* .mentor-card-header -- #f8f9fa, border-bottom #e9ecef */ :root[data-theme="dark"] .mentor-card-header { background-color: var(--vs-surface-2); border-bottom-color: var(--vs-border); } /* .slot-card / .slot-card-row -- #fff on #f0f0f0, row rule #f8f8f8. Light nested white-on-white and let the hairline do the work; dark keeps that reading. */ :root[data-theme="dark"] .slot-card { background-color: var(--vs-surface); border-color: var(--vs-hairline); } :root[data-theme="dark"] .slot-card-row { border-bottom-color: var(--vs-hairline); } /* .slot-label / .slot-value -- #6c757d / #333 */ :root[data-theme="dark"] .slot-label { color: var(--vs-text-muted); } :root[data-theme="dark"] .slot-value { color: var(--vs-text); } /* .dropdown-item.active, .dropdown-item:active -- #f0f0f0 fill, colour inherits */ :root[data-theme="dark"] .dropdown-item.active, :root[data-theme="dark"] .dropdown-item:active { background-color: var(--vs-surface-2); } /* ========================================================================== 12-navigation.css -- dark overrides for the dashboard chrome. Sources covered, in full: assets/website/css/navigation.css sidebar, top bar, treeview menu, .trigger, .theme_toggle_btn assets/website/css/style.css assets/website/css/accounts.css Additive only. Every selector is scoped to :root[data-theme="dark"], so nothing here can match in light mode. Source rules are named in the headings so the two files diff against each other. --primary-color is already repointed at --vs-brand in 00-tokens.css, so most `var(--primary-color)` uses in navigation.css -- the .trigger ring and icon, the active nav label and its 4px border, the .theme_toggle_btn hover -- resolve correctly on their own and are not repeated here. .trigger:hover (brand fill + white icon) is handled there too. The exception is the treeview sub-menu: see the specificity note on that block. ========================================================================== */ /* --- navigation.css: the sidebar shell ----------------------------------- .dashboard_left_column, .dashboard_left_column .menu_container, and its .light_sidebar counterpart (declared twice in the source: colour at the top of the file, background again further down). */ :root[data-theme="dark"] .dashboard_left_column{ border-right-color: var(--vs-hairline); /* was #eee -- vanishes otherwise */ } :root[data-theme="dark"] .dashboard_left_column .menu_container, :root[data-theme="dark"] .light_sidebar .dashboard_left_column .menu_container{ background: var(--vs-surface); /* was #FFF, both copies */ } /* The .light_sidebar copy is the one that actually ships, and its #444 is the sidebar's inherited text colour. The base rule's `color:#fff` is left alone -- white already reads at ~16:1 on --vs-surface. */ :root[data-theme="dark"] .light_sidebar .dashboard_left_column .menu_container{ color: var(--vs-text-nav); /* was #444 */ } /* --- navigation.css: .dashboard_right_column ------------------------------ The content canvas, in both its base and .light_sidebar forms. */ :root[data-theme="dark"] .dashboard_right_column, :root[data-theme="dark"] .light_sidebar .dashboard_right_column{ background: var(--vs-app-bg); /* was #F3F5F9 / #F5F6FB */ } /* --- navigation.css: .dashboard_top_bar ---------------------------------- */ :root[data-theme="dark"] .dashboard_top_bar{ background: var(--vs-surface); /* was #fff */ border-bottom-color: var(--vs-hairline); /* was #eee */ } /* --- navigation.css: .trigger ------------------------------------------- The sidebar collapse chip. Colour and the 2px ring are var(--primary-color) and follow the token remap; only the white fill needs a token here. --vs-surface would sink it into the sidebar it sits on, so it takes the next surface up and keeps reading as a raised chip. */ :root[data-theme="dark"] .trigger{ background: var(--vs-surface-2); /* was #fff */ } /* --- navigation.css: .user_image_holder --------------------------------- Avatar placeholder disc. #ddd would normally map to --vs-border, but this is an image placeholder, which is exactly what --vs-thumb is for. It reads slightly flatter than the light theme did (1.16:1 off --vs-surface vs #ddd-on-#fff's 1.36:1), which is why the note is here rather than the round number. Currently dead in any case -- the markup is commented out in all three dashboard bases -- so it is kept only so the class is covered if it returns. */ :root[data-theme="dark"] .user_image_holder{ background: var(--vs-thumb); /* was #ddd */ } /* --- navigation.css: .sidebar_menu_ul li a ------------------------------- */ :root[data-theme="dark"] .light_sidebar .sidebar_menu_ul li a{ color: var(--vs-text-nav); /* was #444 -- 11:1 on --vs-surface */ } /* The hover tint is rgba(4,79,192,.06): six per cent of a dark blue over a dark blue panel is nothing at all, so it becomes the soft brand tint. */ :root[data-theme="dark"] .sidebar_menu_ul li a:hover{ background: var(--vs-brand-soft); } /* --- navigation.css: li.active a / li.treeview.active a ------------------- The active pill. Its label colour and 4px left border are var(--primary-color) and would come through on their own; they are restated so the whole pair sits in one place. --vs-brand on --vs-brand-soft measures 4.41:1 -- a hair UNDER the 4.5:1 body-text bar (it clears the 3:1 large/UI bar comfortably). Both values are fixed by the token contract, so this is a palette-level call, not one this file can make: do not darken --vs-brand-soft any further, and see the note at the foot of the file. */ :root[data-theme="dark"] .light_sidebar .sidebar_menu_ul li.active a, :root[data-theme="dark"] .light_sidebar .sidebar_menu_ul li.treeview.active a{ background: var(--vs-brand-soft); /* was #E8EFFB */ color: var(--vs-brand); border-left-color: var(--vs-brand); } /* --- navigation.css: the treeview sub-menu ------------------------------- .treeview-menu li a sets its colour !important, so the override must too, or it loses. Its `background: transparent !important` is already correct on dark. SPECIFICITY TRAP -- the reason the hover and active colours are restated below rather than left to the --primary-color remap. Scoping adds two class-level components (:root and [data-theme]), so the resting rule outranks the source's own state rules even though it is the less specific selector in light mode: :root[data-theme="dark"] .treeview-menu li a (0,3,2) !important .treeview-menu li a:hover (0,2,2) !important ul.treeview-menu li.active a (0,2,3) !important (0,3,2) beats both, so a bare `color: ... !important` here silently flattens the hovered and active sub-items to the muted resting grey -- the active item stops being distinguishable at all. Verified in-browser: light gives rgb(4,79,192) for both states; without the two restatements below, dark gave rgb(148,163,184) for both. Each state therefore restates its colour at its own scoped specificity. */ :root[data-theme="dark"] .treeview-menu li a{ color: var(--vs-text-subnav) !important; /* was #4b5563 -- 6.4:1 on --vs-surface */ } :root[data-theme="dark"] .treeview-menu li a:hover{ background: var(--vs-brand-soft) !important; /* was rgba(4,79,192,.06) */ color: var(--vs-brand) !important; /* was var(--primary-color) */ } :root[data-theme="dark"] ul.treeview-menu li.active a{ background: var(--vs-brand-soft) !important; /* was #E8EFFB */ color: var(--vs-brand) !important; /* was var(--primary-color) */ } /* The rail down the left of an open group, and the rule between menu groups. */ :root[data-theme="dark"] .treeview.active > .treeview-menu{ border-left-color: var(--vs-border); /* was #e3e7ef */ } :root[data-theme="dark"] .sidebar_menu_ul li.menu_divider{ background: var(--vs-border); /* was #e3e7ef */ } /* --- navigation.css: .theme_toggle_btn ----------------------------------- The light/dark switch itself. It sits on the top bar (--vs-surface), so it takes the next surface up plus the strong border to stay findable. The fill alone is only 1.16:1 against the bar (as in light, where #f3f5f9 on #fff is 1.09:1) -- it is the border that draws the control, at 1.9:1, up from #c6c7c9-on-#fff's 1.7:1. Still short of the 3:1 UI bar, but strictly better than the light theme it mirrors. The :hover rule is pure var(--primary-color) and needs nothing. */ :root[data-theme="dark"] .theme_toggle_btn{ border-color: var(--vs-border-strong); /* was #c6c7c9 */ background: var(--vs-surface-2); /* was #f3f5f9 */ color: var(--vs-text-nav); /* was #444 -- 9.9:1 on --vs-surface-2 */ } /* --- style.css: alternating landing bands -------------------------------- In light mode type_2 (#fff) *is* the page and type_1 (#f9fbff) is a faint lift off it. Inverting that relationship rather than the hexes keeps the banding: type_2 returns to the canvas, type_1 stays one step above it. */ :root[data-theme="dark"] .home_section_type_1{ background-color: var(--vs-surface); /* was #f9fbff */ } :root[data-theme="dark"] .home_section_type_2{ background-color: var(--vs-app-bg); /* was #fff */ } :root[data-theme="dark"] .institute_footer{ background-color: var(--vs-surface); /* was #f9fbff */ } /* style.css's .course_detail_side_card shadow is NOT repeated here -- 10-base.css already carries an identical rule under its course-detail section. Two byte-for-byte copies in the same assembled file is just drift waiting to happen. */ /* --- style.css: .thin_vidsafe_card -------------------------------------- */ :root[data-theme="dark"] .thin_vidsafe_card{ border-color: var(--vs-border); /* was #E6EAF6 */ background-color: var(--vs-surface); /* was #fff */ } :root[data-theme="dark"] .thin_vidsafe_card_title, :root[data-theme="dark"] .thin_vidsafe_card_price{ color: var(--vs-text); /* was #000 on a now-dark card */ } /* --- accounts.css: .load_modal_step_link -------------------------------- Grey step pill. The colour carries !important in the source, the background does not, so the override matches each. Hover moved a step darker against white; on navy the equivalent move is a step lighter. */ :root[data-theme="dark"] .load_modal_step_link{ color: var(--vs-text) !important; /* was #000 !important */ background: var(--vs-surface-2); /* was #eee */ } :root[data-theme="dark"] .load_modal_step_link:hover{ background: var(--vs-border); /* was #ddd */ } /* --- Deliberately not overridden ---------------------------------------- .login_column (#044FC0) and .auth_context_badge -- a saturated brand panel that reads correctly on a dark page, with its white text at 7.3:1 on the blue and the badge's rgba(255,255,255,.16) fill still sitting on that unchanged blue. .help-text (#eb953a) -- 7.7:1 on --vs-app-bg as it stands. .sidebar_menu_ul li a / .menu_container base `color:#fff` -- white on --vs-surface, already correct. .treeview.active { background: transparent } and .treeview-menu li a's transparent background -- no colour to change. .thin_badge, .no-break, .force-hidden, .organization_box, the media query, and the layout halves of every rule above -- geometry only. KNOWN MARGINAL CONTRAST (palette-level, not fixable in this file) --vs-brand on --vs-brand-soft is 4.41:1. That pairing is what the token contract prescribes for active navigation, and it lands just under the 4.5:1 body-text threshold. It affects three states: the active sidebar pill, the active treeview sub-item, and the treeview hover. Raising --vs-brand a step (or lifting --vs-brand-soft toward --vs-surface-2) would clear it, but both are shared tokens and the change belongs in 00-tokens.css after a look at everything else that uses them. Flagged rather than patched locally with an off-contract colour. ------------------------------------------------------------------------ */ /* ========================================================================== 13 -- assets/website/css/forms.css + assets/website/css/components.css Additive dark-mode overrides only. Every selector is prefixed with :root[data-theme="dark"], so light mode cannot match a single rule here. Headings below name the source rule (and its line) being overridden. !important is mirrored from the source, never added. ========================================================================== */ /* -------------------------------------------------------------------------- forms.css -- form controls The source's own rules set almost no colour (.form-control is radius/height only, line 49), but a text input is the one surface that must never stay white, so the resting state is pinned to the control token here rather than left to whatever --bs-body-bg happens to be. -------------------------------------------------------------------------- */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] textarea.form-control { background-color: var(--vs-surface-3); border-color: var(--vs-border-strong); color: var(--vs-text); } /* forms.css .form-control:focus (line 71) -- source pins bg to --bs-body-bg, which is the page canvas; keep focus on the control surface instead so the field does not change shade when focused. border-color #86b7fe is left alone: a pale blue ring already reads correctly on the navy. */ :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--vs-surface-3); color: var(--vs-text); } /* forms.css input.form-control::placeholder + the four vendor prefixes (lines 54-69). #bbb on a dark field is a mid-grey smear. textarea is deliberately NOT grouped in here: helpers.css sets `textarea.form-control::placeholder { color:#ccc !important }`, which no un-!important declaration can beat. That one is handled, with the !important mirrored, in 11-helpers.css. */ :root[data-theme="dark"] input.form-control::placeholder { color: var(--vs-text-muted); } :root[data-theme="dark"] input.form-control::-webkit-input-placeholder { color: var(--vs-text-muted); } :root[data-theme="dark"] input.form-control:-moz-placeholder { color: var(--vs-text-muted); } :root[data-theme="dark"] input.form-control::-moz-placeholder { color: var(--vs-text-muted); } :root[data-theme="dark"] input.form-control:-ms-input-placeholder { color: var(--vs-text-muted); } /* Disabled / readonly: Bootstrap greys these to #e9ecef, i.e. a white field with dark text sitting in a dark form. */ :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-select:disabled, :root[data-theme="dark"] .form-control[readonly] { background-color: var(--vs-surface-2); border-color: var(--vs-border); color: var(--vs-text-muted); } /* The select caret is a data-URI SVG with a hard-coded stroke='%23343a40' -- near-black on a dark field. A data URI cannot read a CSS variable, so the hex is inlined; %2394a3b8 is --vs-text-muted. */ :root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* File input: the button half is a separate light slab. */ :root[data-theme="dark"] .form-control::file-selector-button { background-color: var(--vs-surface-2); border-color: var(--vs-border); color: var(--vs-text); } /* Checkboxes and radios: unchecked box is #fff with an rgba(0,0,0,.25) border, both invisible on dark. The checked tick/dot stays white on the brand fill. */ :root[data-theme="dark"] .form-check-input { background-color: var(--vs-surface-3); border-color: var(--vs-border-strong); } :root[data-theme="dark"] .form-check-input:checked { background-color: var(--vs-brand-fill); border-color: var(--vs-brand-fill); } /* forms.css .form-label (line 79) sets size/weight only; the colour comes from the cascade. Labels and helper text get the muted token. */ :root[data-theme="dark"] .form-label, :root[data-theme="dark"] .col-form-label { color: var(--vs-text); } :root[data-theme="dark"] .form-text { color: var(--vs-text-muted); } :root[data-theme="dark"] .input-group-text { background-color: var(--vs-surface-2); border-color: var(--vs-border-strong); color: var(--vs-text); } /* Validation states are deliberately NOT overridden. base.html sets data-bs-theme="dark" alongside data-theme="dark", so Bootstrap 5.3.3's own dark theme is already supplying --bs-form-invalid-color / --bs-form-invalid-border-color = #ea868f and --bs-form-valid-* = #75b798. Those measure 6.5:1 and 7.1:1 on --vs-surface. Repointing them at --vs-danger (#d9534f) would DROP .invalid-feedback to 4.18:1 on a card -- below AA -- and --vs-success (#2e9e63) to 4.87:1, so forcing the palette tokens here makes the contrast worse, not better. Left to Bootstrap. */ /* Selection highlight: the browser default is tuned for a white page. */ :root[data-theme="dark"] ::selection { background-color: var(--vs-brand-fill); color: var(--vs-text); } /* -------------------------------------------------------------------------- forms.css .btn-primary (line 90) / .btn-outline-primary (line 107) Only the values that break on dark are repointed. --bs-btn-hover-bg and --bs-btn-active-bg (#083C8B) are left as-is: a deep saturated blue under white text is fine on the navy and keeps the pressed state distinct. -------------------------------------------------------------------------- */ :root[data-theme="dark"] .btn-primary { --bs-btn-bg: var(--vs-brand-fill); --bs-btn-border-color: var(--vs-brand-fill); --bs-btn-disabled-bg: var(--vs-brand-fill); --bs-btn-disabled-border-color: var(--vs-brand-fill); } /* #044fc0 as a *text* colour is ~2.5:1 on the navy -- unreadable. The outline variant takes the lightened brand for text/border (5.2:1 on a card) and the fill for its hover/active grounds (white on it, 4.8:1). Note: 00-tokens.css line 191 declares an identical `.btn-outline-primary` block (reasoning from Bootstrap's #0d6efd rather than forms.css's #044fc0). Same eight declarations, same values, so nothing breaks and this one wins on order -- but one of the two should be retired. forms.css owns the selector, so this is the copy to keep. */ :root[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--vs-brand); --bs-btn-border-color: var(--vs-brand); --bs-btn-hover-bg: var(--vs-brand-fill); --bs-btn-hover-border-color: var(--vs-brand-fill); --bs-btn-active-bg: var(--vs-brand-fill); --bs-btn-active-border-color: var(--vs-brand-fill); --bs-btn-disabled-color: var(--vs-brand); --bs-btn-disabled-border-color: var(--vs-brand); } /* forms.css .btn-light (line 124) -- brand text on a pale brand slab. Hover text goes to --vs-text: brand-on-hover-fill is only 3.4:1, while the resting brand-on-soft pair is 4.5:1. Hover/active grounds step *lighter* (--vs-border, --vs-border-strong) because on dark "raised" means lighter. (An earlier draft of 20-bootstrap-shim.css also declared `.btn-light` and, being later in the concatenation, won at equal specificity with Bootstrap's stock #f8f9fa/#000 -- values this app never renders, since forms.css line 124 replaces all twelve --bs-btn-* with the brand pair #044FC0 on #E6EAF6. That duplicate has since been removed from part 20, so the faithful mapping below is the live one. Do not reintroduce a second `.btn-light` block.) */ :root[data-theme="dark"] .btn-light { --bs-btn-color: var(--vs-brand); --bs-btn-bg: var(--vs-brand-soft); --bs-btn-border-color: var(--vs-brand-soft); --bs-btn-hover-color: var(--vs-text); --bs-btn-hover-bg: var(--vs-border); --bs-btn-hover-border-color: var(--vs-border); --bs-btn-active-color: var(--vs-text); --bs-btn-active-bg: var(--vs-border-strong); --bs-btn-active-border-color: var(--vs-border-strong); --bs-btn-disabled-color: var(--vs-text-muted); --bs-btn-disabled-bg: var(--vs-brand-soft); --bs-btn-disabled-border-color: var(--vs-brand-soft); } /* forms.css .btn-link:hover / :active (lines 141-146) -- near-white wash. !important mirrored from the source. The link colour itself already comes from --bs-link-color in 00-tokens.css, so it is not repeated here. */ :root[data-theme="dark"] .btn-link:hover { background-color: var(--vs-surface-2) !important; } :root[data-theme="dark"] .btn-link:active { background-color: var(--vs-border) !important; } /* -------------------------------------------------------------------------- forms.css .select2-container (line 149) -- NOT overridden here. The source's only select2 declaration is `display: block !important`, which carries no colour. Every coloured part of the widget (selection box, dropdown panel, search field, result highlight, multi-select pills, clear/arrow glyphs, disabled state) is owned by 21-vendor.css, which names forms.css line 149 and helpers.css lines 278-295 / 655-667 as its sources and loads after this file. Duplicating it here would only produce two blocks at equal specificity where the later one silently wins. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- components.css :: VIEW TOGGLE COMPONENT (lines 66-102) A segmented control: a light track with a white "raised" chip. On dark the ordering has to invert -- the track becomes the darkest step (a recessed well) and the active chip the lightest, or the chip would read as a hole. -------------------------------------------------------------------------- */ :root[data-theme="dark"] .view-toggle-container { background-color: var(--vs-surface-3); } :root[data-theme="dark"] .view-toggle-btn { color: var(--vs-text-muted); /* 6.6:1 on the track */ } /* Hover has to be a step the eye can actually see against the track. The obvious pick, --vs-surface, is only 1.02:1 on --vs-surface-3 -- the hover state would simply not exist. --vs-border is 1.47:1 on the track (the light theme's #e0e0e0-on-#f0f0f0 is 1.16:1) and carries --vs-text at 10.5:1. */ :root[data-theme="dark"] .view-toggle-btn:hover { color: var(--vs-text); background-color: var(--vs-border); } /* Source shadow is rgba(0,0,0,.1) -- invisible on navy; --vs-shadow restores the lift. */ :root[data-theme="dark"] .view-toggle-btn.active { background-color: var(--vs-surface-2); color: var(--vs-brand); /* 4.6:1 */ box-shadow: 0 1px 3px var(--vs-shadow); } /* -------------------------------------------------------------------------- components.css :: FILTER SIDEBAR COMPONENT (lines 109-211) -------------------------------------------------------------------------- */ /* .filter-chip-label (line 120) + :hover (line 131). Hover also brightens the text: the muted token on the lighter hover ground is only 4.3:1, on --vs-text it is ~10:1. */ :root[data-theme="dark"] .filter-chip-label { background-color: var(--vs-surface-2); border-color: var(--vs-border); color: var(--vs-text-muted); /* 5.7:1 */ } :root[data-theme="dark"] .filter-chip-label:hover { background-color: var(--vs-border); border-color: var(--vs-border-strong); color: var(--vs-text); } /* Checked chip (line 136) keeps its white label -- 4.8:1 on the fill. */ :root[data-theme="dark"] .filter-chip input[type="checkbox"]:checked + .filter-chip-label { background-color: var(--vs-brand-fill); border-color: var(--vs-brand-fill); } :root[data-theme="dark"] .filter-section-title { color: var(--vs-text); } /* border-bottom: 1px solid #eee -- would disappear entirely. */ :root[data-theme="dark"] .filter-section { border-bottom-color: var(--vs-hairline); } /* The offcanvas panel itself (.offcanvas.filter-offcanvas, line 159) sets only a width, but its footer is being darkened below -- leaving the panel white would put dark body text on a dark strip. Scoped to the filter offcanvas so no other panel is touched. */ :root[data-theme="dark"] .offcanvas.filter-offcanvas { background-color: var(--vs-surface); color: var(--vs-text); } :root[data-theme="dark"] .offcanvas-footer { background-color: var(--vs-surface-2); color: var(--vs-text); } /* .active-filter-pill (line 183). The pale blue ground/border become the soft brand tint and the card accent; the label takes the lightened brand (4.5:1). .remove-filter is left alone: a saturated blue dot under a white glyph is already correct on dark, and its darker :hover shade still passes. */ :root[data-theme="dark"] .active-filter-pill { background-color: var(--vs-brand-soft); border-color: var(--vs-card-accent); color: var(--vs-brand); } /* -------------------------------------------------------------------------- components.css :: COURSE META TAGS COMPONENT (lines 240-283) Pastel-ground badges. All three grounds go to --vs-surface-3: on the lighter --vs-surface-2 the green label drops to 4.3:1, and these labels are 10-11px. Borders use the semantic tokens because the palette has no soft green/amber tint to stand in for #a7e9c8 / #ffe082. -------------------------------------------------------------------------- */ :root[data-theme="dark"] .meta-tag-center { background-color: var(--vs-surface-3); color: var(--vs-brand); /* 5.3:1 */ border-color: var(--vs-card-accent); } :root[data-theme="dark"] .meta-tag-language { background-color: var(--vs-surface-3); color: var(--vs-success); /* 5.0:1 */ border-color: var(--vs-success); } :root[data-theme="dark"] .meta-tag-tags-group { background-color: var(--vs-surface-3); color: var(--vs-warning); /* 7.5:1 */ border-color: var(--vs-warning); } /* .tag-item (line 260) is skipped on purpose: a saturated #ffc107 chip with black text reads correctly on dark and needs no change. */ /* .tag-more-btn / .tag-less-btn (line 273): #b58105 is 3.1:1 here. The hover shade darkens in the source, which is backwards on dark and there is no lighter amber token, so hover brightens to --vs-text instead. */ :root[data-theme="dark"] .tag-more-btn, :root[data-theme="dark"] .tag-less-btn { color: var(--vs-warning); } :root[data-theme="dark"] .tag-more-btn:hover, :root[data-theme="dark"] .tag-less-btn:hover { color: var(--vs-text); } /* -------------------------------------------------------------------------- components.css :: TABLE VIEW COMPONENT (lines 327-436) -------------------------------------------------------------------------- */ /* GROUND -- read before changing anything below. courses.html renders this table as `table table-bordered table-light courses-table`. `.table-light` is one of Bootstrap's FIXED contextual variants: unlike .table/.card/.modal it is NOT re-derived under data-bs-theme="dark" -- it hard-pins --bs-table-color:#000 and --bs-table-bg:#f8f9fa in both themes, and 00-tokens.css only reaches --bs-table-color. Left uncorrected, every rule in this section would paint --vs-text on a near-white slab (~1.05:1) and the table view would read blank. It is corrected in 20-bootstrap-shim.css (`.table-light` -> --bs-table-bg: var(--vs-surface-2)), which owns the Bootstrap utilities and loads after this file, so the ground for everything below is --vs-surface-2, not --vs-surface. Do not duplicate that block here; do keep these rules legible on surface-2. */ /* Image placeholder shown before/instead of the thumbnail. */ :root[data-theme="dark"] .table-thumbnail { background-color: var(--vs-thumb); } :root[data-theme="dark"] .table-course-title { color: var(--vs-text); } :root[data-theme="dark"] .table-course-title:hover { color: var(--vs-brand); } :root[data-theme="dark"] .table-course-subtitle { color: var(--vs-text-muted); } /* .table-action-btn (line 366) -- `background: white` with a mid-grey icon. The row it sits on is --vs-surface-2 (see .table-light above), so the button cannot also be --vs-surface-2 or it disappears into the row. --vs-surface is 1.12:1 off the row, the same separation `background: white` had against the source's #f8f9fa table (1.05:1), and the border does the rest. Hover steps lighter (1.28:1 off the row) and brightens the icon. */ :root[data-theme="dark"] .table-action-btn { background: var(--vs-surface); border-color: var(--vs-border); color: var(--vs-text-muted); /* 6.5:1 */ } :root[data-theme="dark"] .table-action-btn:hover { background-color: var(--vs-border); border-color: var(--vs-border-strong); color: var(--vs-text); } /* Compact table variants of the meta tags (lines 406-419) -- same mapping. */ :root[data-theme="dark"] .table-meta-tag.center { background-color: var(--vs-surface-3); color: var(--vs-brand); } :root[data-theme="dark"] .table-meta-tag.language { background-color: var(--vs-surface-3); color: var(--vs-success); } :root[data-theme="dark"] .table-meta-tag.tag { background-color: var(--vs-surface-3); color: var(--vs-warning); } :root[data-theme="dark"] .table-price .old-price { color: var(--vs-text-muted); } /* #198754 is 2.9:1 on the navy. --vs-success is the only green in the palette. NOTE for review: the .table-light ground is --vs-surface-2, so this pair measures 4.33:1 -- just under AA for normal text. Every other --vs-success use in this file sits on a --vs-surface-3 chip (4.99:1) and passes. The real fix is a lighter green token in 00-tokens.css, not a one-off hex here. */ :root[data-theme="dark"] .table-price .current-price { color: var(--vs-success); } /* The @media (max-width: 992px) block (line 448) sets widths and margins only -- nothing to override. Likewise the equal-height card grid (lines 11-59) and the show/hide utilities. .courses-table th has its own background commented out in the source, but it is not colourless in practice: the head inherits .table-light from the , which is handled at the top of this section. */ /* ========================================================================== PART 20 -- Bootstrap 5.3 compatibility shim + template-local