/* ============================================= 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; } /* --- 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; } /* Active menu highlight — white outline instead of colour fill. Mirrors every selector in the student.css hover block (line 581) so no element — li, a, or span — gets the yellow fill in dark mode. */ 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: #1a1a1a !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; } /* --- 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; } /* --- 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; } /* --- 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: #ffd849 !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 Help submenu background (student.css sets #f8c030 amber) --- */ body.dark-mode #sidebar .sidebar-content .sidebar-dropdown div.sidebar-submenu { background-color: #333 !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/orange background is kept; restore dark text --- */ body.dark-mode .item-popup .popup-item-header, body.dark-mode .item-popup .popup-item-header * { color: #1c0f24 !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; }