/* ============================================= Dark / High-Contrast Wireframe Accessibility Mode Activated by .dark-mode class on Phase 1: student dashboard shell only. Games are in #mainframe (iframe) and styled separately. ============================================= */ /* --- Base --- */ body.dark-mode { background-color: #1a1a1a !important; color: #fff !important; } /* --- Sidebar (has inline background-color) --- */ body.dark-mode #sidebar, body.dark-mode .sidebar-wrapper { background-color: #1a1a1a !important; border-right: 2px solid #fff !important; } body.dark-mode .spacer { background-color: #2e2e2e !important; color: #ccc !important; border-color: #444 !important; } body.dark-mode .account-list { background-color: #2e2e2e !important; } body.dark-mode .account-sublist { background-color: #222 !important; } /* Icon badges: white background, dark icon in dark mode */ body.dark-mode .chiller-theme .sidebar-wrapper .sidebar-menu ul li a i { background: #fff !important; color: #1a1a1a !important; } body.dark-mode .chiller-theme .sidebar-wrapper ul li:hover a i, body.dark-mode .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active2 a i { color: #1a1a1a !important; text-shadow: none !important; } /* --- Page wrapper / panels --- */ body.dark-mode .page-wrapper, body.dark-mode .dashslide, body.dark-mode .container-fluid { background-color: #1a1a1a !important; } /* --- All text --- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode p, body.dark-mode span, body.dark-mode label, body.dark-mode li, body.dark-mode a, body.dark-mode small, body.dark-mode td, body.dark-mode th, body.dark-mode .form-check-label, body.dark-mode .form-text { color: #fff !important; text-shadow: none !important; } /* --- Navigation links --- */ body.dark-mode .sidebar-dropdown > a, body.dark-mode .sidebar-dropdown a span, body.dark-mode .nav-link, body.dark-mode .nav-link i { color: #fff !important; } /* Hover — subtle tint in same colour family as active states */ body.dark-mode .sidebar-dropdown:hover, body.dark-mode .sidebar-dropdown > a.active-menu, body.dark-mode .sidebar-dropdown > a:hover, body.dark-mode #sidebar a.active-menu, body.dark-mode #sidebar a:hover, body.dark-mode .menu-action:hover, body.dark-mode .menu-action:active, body.dark-mode .menu-action > a:hover, body.dark-mode .menu-action > span:hover, body.dark-mode .submenu-link:hover, body.dark-mode .submenu-link:active, body.dark-mode .submenu-link > a:hover { background-color: rgba(153, 79, 178, 0.3) !important; color: #fff !important; border-radius: 4px; } /* student.css has a .chiller-theme li:hover rule that sets icons/spans to #4a3050 !important — beats our generic overrides. Mirror the selectors here with body.dark-mode prefix to win the specificity battle. */ body.dark-mode .chiller-theme .sidebar-wrapper ul li:hover a i, body.dark-mode .chiller-theme .sidebar-wrapper ul li:hover a span, body.dark-mode .chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before { color: #fff !important; text-shadow: none !important; } /* --- Buttons --- */ body.dark-mode button, body.dark-mode .btn, body.dark-mode .btn-submit { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; } body.dark-mode .btn-danger { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; } /* --- Form inputs --- */ body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode select, body.dark-mode textarea { background-color: #000 !important; color: #fff !important; border: 1px solid #fff !important; } body.dark-mode input[type="checkbox"], body.dark-mode input[type="radio"] { accent-color: #fff; } /* --- Cards --- */ body.dark-mode .card { background-color: #000 !important; border: 1px solid #fff !important; color: #fff !important; } /* --- Modals --- */ body.dark-mode .modal-content { background-color: #000 !important; border: 1px solid #fff !important; color: #fff !important; } body.dark-mode .modal-header, body.dark-mode .modal-footer { border-color: #fff !important; background-color: #000 !important; } /* --- Progress bars --- */ body.dark-mode .progress { background-color: #222 !important; border: 1px solid #fff !important; } body.dark-mode .progress-bar { background-color: #fff !important; color: #000 !important; } /* --- Experience bar (XP) — purple palette so white label stays readable --- */ body.dark-mode .experience-bar__track { background-color: #7c5a9e !important; border: 1px solid #a07cc0 !important; } body.dark-mode .experience-bar__track .expbar { background-color: #3d1f62 !important; } /* --- Notification / badge bubbles --- */ body.dark-mode .notification-bubble, body.dark-mode .bg-homework, body.dark-mode .badge { background-color: #fff !important; color: #000 !important; border: 1px solid #fff !important; } /* The "Teacher Task time!" nav pill shares .bg-homework with those bubbles, but its label is a and Bootstrap's .text-white is !important — so the white-bubble treatment above leaves white text on a white pill. It is a button, not a bubble: keep it coloured like its .header-spelling-zone and .header-checkup siblings, which are not swept into that rule. */ body.dark-mode .header-homework.bg-homework { background-color: #593062 !important; color: #fff !important; border: none !important; } body.dark-mode .header-homework.bg-homework:hover { background-color: #713a7d !important; } /* --- Settings page form --- */ body.dark-mode form { background-color: #1a1a1a !important; /* border: 1px solid #fff !important; */ } /* --- Yes/No pill toggle --- */ body.dark-mode .yes-no-toggle { border-color: #fff !important; } body.dark-mode .yes-no-toggle label { background-color: #1a1a1a !important; color: #fff !important; } body.dark-mode .yes-no-toggle input:checked + label { background-color: #7bb662 !important; color: #4a3050 !important; } /* --- Override inline background / color (dashboard shell only) --- Covers both `background-color:` and `background:` shorthand. Scoped to .dark-mode so no effect in normal mode. Does not affect iframe contents. */ body.dark-mode [style*="background-color"] { background-color: #1a1a1a !important; } body.dark-mode [style*="background:"] { background: #1a1a1a !important; } body.dark-mode [style*="color:"]:not(.medal-list-mountain-button) { color: #fff !important; } /* --- Sidebar status bar (XP, coins — hardcoded yellow in student.css) --- */ body.dark-mode .statusbar, body.dark-mode #sidebar .statusbar span, body.dark-mode .statusbar * { color: #fff !important; } /* --- Game of the Day tile (gradient animation) --- */ body.dark-mode .fadingBackgroundAnimation3, body.dark-mode .gameOfTheDay { background: #000 !important; animation: none !important; border: 1px solid #fff !important; } /* --- Last played tile --- */ body.dark-mode .lastplayed { background-color: #000 !important; border: 1px solid #fff !important; } /* --- Images: greyscale non-avatar images in the shell --- */ body.dark-mode .sidebar-menu img, body.dark-mode .gameOfTheDay img, body.dark-mode .header-homework img, body.dark-mode .exitbutton { filter: grayscale(100%) brightness(2); } /* --- Top navigation bar --- */ body.dark-mode .dashboard-nav { background-color: #1a1a1a !important; border-bottom: 2px solid #fff !important; color: #fff !important; } /* --- nav block buttons (streak counter, back-to-teacher, practice mode) --- */ body.dark-mode .block-gradient { background: #000 !important; animation: none !important; border: 2px solid #fff !important; color: #fff !important; } body.dark-mode .block-primary { background-color: #000 !important; border: 2px solid #fff !important; color: #fff !important; } /* --- Sidebar expanded item (active2) and submenu container --- */ body.dark-mode .sidebar-dropdown.active2 { background-color: #333 !important; } body.dark-mode #sidebar .sidebar-content .sidebar-dropdown div.sidebar-submenu { background-color: #2a2a2a !important; color: #fff !important; } /* --- Medal Mountain: preserve DB-specified font_color on mountain buttons --- The inline color= comes from the DB and controls contrast against each mountain image. Exclude from the broad inline-color override, and force all descendants to inherit it so the all-text rule doesn't win. */ body.dark-mode .medal-list-mountain-button * { color: inherit !important; } /* --- Quest page / multiplayer menu — class-based orange/amber backgrounds --- */ body.dark-mode .button-group { background-color: #000 !important; box-shadow: none !important; border: 1px solid #fff !important; color: #fff !important; } body.dark-mode .list-group-item, body.dark-mode .list-group-item a { background-color: #000 !important; color: #fff !important; border-color: #555 !important; } body.dark-mode .list-group-item:hover, body.dark-mode .list-group-item a:hover { background-color: #111 !important; color: #fff !important; } body.dark-mode .card-header { background-color: #000 !important; color: #fff !important; border-color: #555 !important; } /* --- Scrollbars: greyscale instead of purple track / yellow thumb --- Two forms needed: no-space targets the body's own viewport scrollbar; space-descendant targets scrollbars on overflow elements inside body. */ body.dark-mode::-webkit-scrollbar-track, body.dark-mode ::-webkit-scrollbar-track { background-color: #222 !important; } body.dark-mode::-webkit-scrollbar-thumb, body.dark-mode ::-webkit-scrollbar-thumb { background-color: #888 !important; } body.dark-mode::-webkit-scrollbar-thumb:hover, body.dark-mode ::-webkit-scrollbar-thumb:hover { background-color: #aaa !important; } /* --- Keep game iframe unaffected (games are styled per-game) --- */ body.dark-mode iframe#mainframe { filter: none; } /* ============================================= Game Dark Mode Applied inside game iframes via head.php cookie check. body.dark-mode is set on the game's own . ============================================= */ /* Body: remove tiled background images, go dark */ body.dark-mode { background-image: none !important; } /* Question + answer blocks */ body.dark-mode .block { background-color: #1a1a1a !important; color: #fff !important; border-color: #555 !important; box-shadow: 4px 4px #444 !important; } body.dark-mode .block--orange, body.dark-mode .block--beige, body.dark-mode .block--blue { background-color: #1a1a1a !important; } /* Stepped greyscale per option so each answer is visually distinct */ body.dark-mode [data-option-container] > .block--option:nth-child(1) { background-color: #1e1e1e !important; } body.dark-mode [data-option-container] > .block--option:nth-child(2) { background-color: #252525 !important; } body.dark-mode [data-option-container] > .block--option:nth-child(3) { background-color: #2d2d2d !important; } body.dark-mode [data-option-container] > .block--option:nth-child(4) { background-color: #343434 !important; } body.dark-mode .block--option:hover { background-color: #444 !important; } /* Keep correct / wrong feedback colours — they communicate game state */ body.dark-mode .block.correct, body.dark-mode .block.correct:hover { background-color: #5a9e42 !important; color: #fff !important; border-color: #5a9e42 !important; } body.dark-mode .block.wrong, body.dark-mode .block.wrong:hover { background-color: #cc3300 !important; color: #fff !important; border-color: #cc3300 !important; } /* Disabled state (e.g. unclickable bank button) */ body.dark-mode .block--disabled, body.dark-mode .block.disabled { background-color: #2a2a2a !important; border-color: #555 !important; color: #777 !important; } /* Number icon circles */ body.dark-mode .block-icon { background-color: #333 !important; border-color: #666 !important; } /* Header action buttons (pause, score, teacher) */ body.dark-mode .button { background-color: #1a1a1a !important; color: #fff !important; box-shadow: 4px 4px #444 !important; border: 1px solid #555 !important; } body.dark-mode .button--orange:hover, body.dark-mode .button--beige:hover { background-color: #333 !important; } /* Start / pause modal */ body.dark-mode .custom-modal, body.dark-mode .pause-modal { background-color: #1a1a1a !important; color: #fff !important; box-shadow: 4px 4px #444 !important; } body.dark-mode .custom-modal__time { background-color: rgba(30,30,30,.8) !important; color: #fff !important; } /* Overlay backdrop */ body.dark-mode .overlay { background-color: rgba(0,0,0,.85) !important; } /* --- Scoop Snatcher / Quizzy --- .quiz-container has its own semi-transparent grey; make it dark. Ice cream images and animations are decorative — left untouched. */ body.dark-mode .quiz-container { background-color: rgba(20,20,20,.85) !important; } /* --- Fix 1: Avatar images — keep normal colour, not greyscale --- */ body.dark-mode #userAvatarImage img, body.dark-mode .user-main-avatar, body.dark-mode .avatar-items img, body.dark-mode .user-avatar-img { filter: none !important; } /* --- Fix 2: Shop popup — yellow background is kept; restore dark text throughout --- */ body.dark-mode .item-popup, body.dark-mode .item-popup * { color: #1c0f24 !important; } /* Buttons inside the popup have their own dark background — keep white text on them */ body.dark-mode .item-popup .popup-section-buttons > button, body.dark-mode .item-popup .popup-section-buttons > button * { color: #fff !important; } /* --- Fix 3: Pick-a-pair / Arrange-a-rama — dark text on amber card backgrounds --- */ body.dark-mode .word-card, body.dark-mode .word-card *, body.dark-mode .group-card, body.dark-mode .group-card * { color: #4a3050 !important; } /* --- Fix 4: Orderama answer bar — dark text on light-orange background --- */ body.dark-mode .word-container .word, body.dark-mode .word-container .word * { color: #4a3050 !important; } /* --- Fix 5: Wrongarama — override CSS-defined blue cloud; restore correct/wrong colours --- */ body.dark-mode .cumulus { background-color: #1a1a1a !important; border-color: #555 !important; } body.dark-mode .cumulus::after { display: none !important; } body.dark-mode .gap.correct, body.dark-mode .word.correct { background-color: #5a9e42 !important; border-color: #5a9e42 !important; color: #fff !important; } /* --- Fix 6: Tricky Trios — restore per-column colours; selected cyan beats .button base --- */ body.dark-mode [data-column="0"] .item { background-color: #6b3578 !important; } body.dark-mode [data-column="1"] .item { background-color: #3a6630 !important; } body.dark-mode [data-column="2"] .item { background-color: #8a4414 !important; } body.dark-mode .item.selected { background-color: #2a9fc8 !important; color: #fff !important; } /* --- Certificate buttons --- */ body.dark-mode .printable-btn { background: #2e2e2e !important; color: #ccc !important; border-color: #555 !important; box-shadow: 1px 3px #111 !important; } body.dark-mode .printable-btn:hover { background: #3a3a3a !important; color: #fff !important; } /* --- Activity Reports table --- */ body.dark-mode #activity-report-table > tbody > tr:nth-of-type(odd) { background-color: #222 !important; } body.dark-mode #activity-report-table > tbody > tr:nth-of-type(even) { background-color: #2e2e2e !important; } body.dark-mode #activity-report-table th, body.dark-mode #activity-report-table td { color: #fff !important; border-color: #555 !important; } /* --- Progress Tracking / Statistics --- */ body.dark-mode .statistics .table { background-color: #2e2e2e !important; color: #fff !important; border-color: #555 !important; } body.dark-mode .statistics .table th, body.dark-mode .statistics .table td { color: #fff !important; border-color: #555 !important; } body.dark-mode .statistics .table tbody tr:nth-child(odd) { background-color: #222 !important; } body.dark-mode .statistics .table tbody tr:nth-child(even) { background-color: #2e2e2e !important; } body.dark-mode .statistics .list-table th { background-color: #333 !important; color: #fff !important; } body.dark-mode .statistics .list-table tr:nth-child(even) { background-color: #2e2e2e !important; } body.dark-mode .statistics .list-table tr:hover { background-color: #444 !important; } body.dark-mode .statistics .list-table td { color: #fff !important; border-color: #555 !important; } body.dark-mode .statistics select { background-color: #2e2e2e !important; color: #fff !important; border-color: #555 !important; } /* --- My Classes --- */ body.dark-mode .classmenu #stdclstable, body.dark-mode .classmenu #addclassresult2, body.dark-mode .classmenu #pastoralGroupTable { background-color: #2e2e2e !important; color: #fff !important; border-color: #555 !important; } body.dark-mode .classmenu #stdclstable th, body.dark-mode .classmenu #stdclstable td, body.dark-mode .classmenu #addclassresult2 th, body.dark-mode .classmenu #addclassresult2 td, body.dark-mode .classmenu #pastoralGroupTable th, body.dark-mode .classmenu #pastoralGroupTable td { color: #fff !important; border-color: #555 !important; } body.dark-mode .classmenu #stdclstable tbody tr.odd, body.dark-mode .classmenu #stdclstable tbody tr:nth-child(odd) { background-color: #222 !important; } body.dark-mode .classmenu #stdclstable tbody tr.even, body.dark-mode .classmenu #stdclstable tbody tr:nth-child(even) { background-color: #2e2e2e !important; } body.dark-mode .classmenu .nav-link { color: #ccc !important; background-color: #2e2e2e !important; } /* --- Sporty Spelling word list rows --- */ body.dark-mode #group_list .group-row { background-color: #2e2e2e !important; border: 1px solid #444 !important; } body.dark-mode #group_list .group-row:hover { background-color: #3a3a3a !important; } body.dark-mode #group_list .status-pending { background-color: #252525 !important; border-color: #555 !important; } /* Outer containers — give subtle dark-grey tiers so the section has visible structure */ body.dark-mode #group_list > .col-12:last-child > .mt-4 { background-color: #222 !important; } body.dark-mode #group_list > .col-12:last-child > .mt-4 > .mt-2 { background-color: #2a2a2a !important; } body.dark-mode #group_list .btn-group[style] { background: #252525 !important; border: 1px solid #444 !important; } /* --- Live Play (index-quests) --- */ body.dark-mode .play-live-game-list { background: #2e2e2e !important; border-color: #444 !important; } body.dark-mode .play-live-game-list:hover { background: #3a3a3a !important; } body.dark-mode .modal-homework-settings .modal-content, body.dark-mode .modal-homework-saved .modal-content { background-color: #1a1a1a !important; color: #fff !important; } /* --- Roll Call --- */ /* The example under a game's name ("go · goes · to go") is a white chip on the light page. The catch-all below turns the row dark and the text light, but it cannot reach a background declared in a stylesheet — so the chip stayed #fff with white text on it, i.e. blank. Measured on the rebuilt quest tiles, where these are on the page rather than inside a modal. */ body.dark-mode #game-items .list-group-item h5 { background-color: #2e2e2e !important; color: #e8e8e8 !important; } /* The Show-more control inherits the page's ink, which is dark on light. */ body.dark-mode .rc-more { color: #ccc !important; } body.dark-mode .roll-call-settings-div { background-color: #2e2e2e !important; color: #ccc !important; box-shadow: 0 5px #111 !important; } body.dark-mode .modal-rollama-yellow .modal-content { background-color: #2e2e2e !important; color: #ccc !important; } /* --- Notification Preferences --- */ body.dark-mode .notification-checks { background-color: #2e2e2e !important; color: #ccc !important; border: 1px solid #555 !important; } body.dark-mode .notification-checks h3 { color: #ccc !important; } body.dark-mode .checkbox-item:hover { background-color: rgba(153, 79, 178, 0.3) !important; } /* --- Resources: PDF buttons --- */ body.dark-mode .pdf-button { background: #2e2e2e !important; color: #ccc !important; border: 1px solid #555; } body.dark-mode .pdf-button:hover { background: #3a3a3a !important; color: #fff !important; } /* --- Game of the Day table --- */ body.dark-mode .gameOfDayTable th, body.dark-mode .gameOfDayTable td { color: #fff !important; border-color: #555 !important; } body.dark-mode .gameOfDayTable tbody tr:nth-child(odd) { background-color: #222 !important; } body.dark-mode .gameOfDayTable tbody tr:nth-child(even) { background-color: #2e2e2e !important; } /* Keep sidebar icon badges dark on hover — badge background stays white so icon must stay #1a1a1a */ body.dark-mode #sidebar .menu-action:hover i, body.dark-mode #sidebar .sidebar-dropdown > a:hover i, body.dark-mode #sidebar li.sidebar-dropdown:hover > a i { color: #1a1a1a !important; } /* --- Class/group selector buttons (Live Play, Teacher Tasks, Sporty Spelling) --- */ body.dark-mode .rollama-button { background-color: #3a3a3a !important; color: #e8e8e8 !important; box-shadow: 5px 5px #111 !important; } body.dark-mode .rollama-button:hover { background-color: #4d3a5a !important; color: #fff !important; } body.dark-mode .rollama-active-link, body.dark-mode .btn-check:checked + .rollama-button { background-color: #6b3b78 !important; color: #fff !important; box-shadow: 5px 5px #111, 0 0 0 3px rgba(153,79,178,0.5) !important; outline: 2px solid #994fb2 !important; } /* ── Competition page (Gold Rush) ─────────────────── */ body.dark-mode .comp-page-header { background-color: #1a1a1a !important; } body.dark-mode .comp-intro-lead, body.dark-mode .comp-intro-steps { color: #fff !important; } body.dark-mode .comp-resource-btn { background: #000 !important; border: 2px solid #fff !important; box-shadow: none !important; color: #fff !important; } body.dark-mode .comp-folder { box-shadow: 3px 3px #fff !important; } body.dark-mode .comp-folder-header { background: #2e2e2e !important; } body.dark-mode .curComps .btn { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; } body.dark-mode .curComps .btn.btn-primary { background-color: #4a4a4a !important; } body.dark-mode .comp-create-btn { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; } body.dark-mode .comp-tab-link { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; } body.dark-mode .comp-tab-link.active { background-color: #4a4a4a !important; color: #fff !important; } body.dark-mode .comp-folder-body { background-color: #1a1a1a !important; } body.dark-mode .battle { background-color: #000 !important; border: 1px solid #fff !important; color: #fff !important; } body.dark-mode .battleDiv { background: rgba(255,255,255,0.07) !important; } body.dark-mode .battleGroup { color: #fff !important; } body.dark-mode .ptsBattle { color: #ccc !important; } body.dark-mode .battle-progress-info-div:not(:empty) { border-top-color: rgba(255,255,255,0.25) !important; } body.dark-mode .battle-info-progress-bar { background-color: #2a2a2a !important; } body.dark-mode .battle-group-info-point { color: #aaa !important; } body.dark-mode .battle-tab-nav a { background: rgba(255,255,255,0.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; } body.dark-mode .battle-tab-nav a.active { background: #fff !important; color: #000 !important; } body.dark-mode .comp-section-label { background: rgba(255,255,255,0.08) !important; border-left-color: #fff !important; color: #fff !important; } body.dark-mode .newCompContainer { background-color: #000 !important; border-color: #fff !important; box-shadow: 3px 3px #fff !important; } body.dark-mode .comp-pane-action-btn { background-color: #2e2e2e !important; border: 2px solid #fff !important; color: #fff !important; } /* --- Spelling Zone assignment tables (table.uniform-columns) --- Used by spelling-zone-word-lists.php, spelling-zone-practice-playlists.php and practice-playlist-settings.php. The Define / Recognise / Spell columns carry pale identity colours with !important, and `body.dark-mode { color: #fff !important }` was painting their text white on top — white on light. Keep the identity hues (they are how the columns are read) at a darker tone, with ink to match. */ body.dark-mode table.uniform-columns th, body.dark-mode table.uniform-columns td { border-color: #555 !important; } body.dark-mode .bg-color-define-th { background-color: #c9705c !important; } body.dark-mode .bg-color-recognise-th { background-color: #c9964f !important; } body.dark-mode .bg-color-spell-th { background-color: #6e8a62 !important; } body.dark-mode .bg-color-define-th, body.dark-mode .bg-color-recognise-th, body.dark-mode .bg-color-spell-th, body.dark-mode .bg-color-define-th *, body.dark-mode .bg-color-recognise-th *, body.dark-mode .bg-color-spell-th * { color: #12100f !important; text-shadow: none !important; } body.dark-mode .bg-color-define-td { background-color: #3a2320 !important; } body.dark-mode .bg-color-recognise-td { background-color: #3a2f20 !important; } body.dark-mode .bg-color-spell-td { background-color: #26301f !important; } body.dark-mode .bg-color-define-td, body.dark-mode .bg-color-recognise-td, body.dark-mode .bg-color-spell-td, body.dark-mode .bg-color-define-td *, body.dark-mode .bg-color-recognise-td *, body.dark-mode .bg-color-spell-td * { color: #fff !important; } /* --- Quests surfaces (extracted from inline styles, LEDGER L-024) --- These elements used to be caught by the [style*="background-color"] / [style*="color:"] rules above, because their colours were inline. Now that they are classes, they need explicit rules. The values reproduce exactly what the catch-all produced, so this is a no-op for users — it just makes the behaviour intentional and overridable. */ body.dark-mode .quests-surface, body.dark-mode .quest-type-divider { background: #1a1a1a !important; color: #fff !important; } body.dark-mode .category-title, body.dark-mode .quests-ink-plum, body.dark-mode .quest-title-text { color: #fff !important; } body.dark-mode .quest-preview-btn { background-color: #1a1a1a !important; color: #fff !important; } body.dark-mode .quest-search-icon, body.dark-mode .quest-instruction-ink { color: #fff !important; } /* multiplayer-hub.php game cards. Previously inline backgrounds caught by the [style*="background:"] rule above; the values here reproduce it exactly. */ body.dark-mode .game-card--cream, body.dark-mode .game-card--slate { background: #1a1a1a !important; } /* Morphology bubble pills (index-quests teacher/Live Play). The pills are light in light mode; here they go dark so the theme's white link text stays readable, and the borders keep the family-colour hint. */ body.dark-mode .game-bubbles .game-link.game-bubble { background-color: #262626; color: #f0e9f5; border-color: #5a4a66; } body.dark-mode .game-bubbles .game-link.game-bubble:hover { border-color: #b083c9; } /* Consolidated Morphology menu. The family tiles are ordinary quest cards, so they take the theme's card treatment already; only the root rows and the modal's word chips need saying — both are light surfaces the theme's pale text would disappear into. */ body.dark-mode .morph-family-pills .game-link.morph-root { background-color: #262626; color: #f0e9f5; border-top-color: rgba(240, 233, 245, 0.15); } body.dark-mode .morph-family-pills .game-link.morph-root:hover { background-color: #33283a; color: #ffd849; } body.dark-mode .morph-modal .modal-content { background-color: #1e1e1e; color: #f0e9f5; } /* The engine rows are .list-group-item, already themed above — only the word chips need a rule of their own. */ body.dark-mode .morph-word { background-color: #2b2b2b; color: #f0e9f5; } body.dark-mode .morph-tier--bronze .morph-tier-title { color: #d9a066; } body.dark-mode .morph-tier--silver .morph-tier-title { color: #c0c6d0; } body.dark-mode .morph-tier--gold .morph-tier-title { color: #e8c65c; } body.dark-mode .morph-word-star { color: #e8c65c; } /* index-quests class/group picker. These three backgrounds were inline until the partial was switched to the shared .tcag-* classes, so the [style*="background:"] rule above used to flatten them; reproduced here so the switch is invisible to users. Scoped to --quests on purpose. The same widget is also built by js/modules/TeacherClassesAndGroups.js, which has always used the classes and therefore was never flattened — it keeps its translucent white pill on the teacher dashboard. An unscoped rule here turned that one dark too (caught by teacher-dashboard · dark). */ body.dark-mode .tcag-container--quests, body.dark-mode .tcag-container--quests .tcag-pill, body.dark-mode .tcag-container--quests .tcag-divider { background: #1a1a1a !important; } /* --- Contents rail on the teacher quests grid --- The rail is a