/* ============================================= Plain / Light Monochrome Accessibility Mode Activated by .plain-mode class on White background, black text — mirrors dark-mode.css structure. ============================================= */ /* --- Base --- */ body.plain-mode { background-color: #fafafa !important; color: #000 !important; background-image: none !important; } /* --- Sidebar --- */ body.plain-mode #sidebar, body.plain-mode .sidebar-wrapper { background-color: #fafafa !important; border-right: 2px solid #000 !important; } /* --- Page wrapper / panels --- */ body.plain-mode .page-wrapper, body.plain-mode .dashslide, body.plain-mode .container-fluid { background-color: #fafafa !important; } /* --- All text --- */ body.plain-mode h1, body.plain-mode h2, body.plain-mode h3, body.plain-mode h4, body.plain-mode h5, body.plain-mode h6, body.plain-mode p, body.plain-mode span, body.plain-mode label, body.plain-mode li, body.plain-mode a, body.plain-mode small, body.plain-mode td, body.plain-mode th, body.plain-mode .form-check-label, body.plain-mode .form-text { color: #000 !important; text-shadow: none !important; } /* --- Navigation links --- */ body.plain-mode .sidebar-dropdown > a, body.plain-mode .sidebar-dropdown a span, body.plain-mode .nav-link, body.plain-mode .nav-link i { color: #000 !important; } /* Active menu highlight — black outline on white */ body.plain-mode .sidebar-dropdown:hover, body.plain-mode .sidebar-dropdown > a.active-menu, body.plain-mode .sidebar-dropdown > a:hover, body.plain-mode #sidebar a.active-menu, body.plain-mode #sidebar a:hover, body.plain-mode .menu-action:hover, body.plain-mode .menu-action:active, body.plain-mode .menu-action > a:hover, body.plain-mode .menu-action > span:hover, body.plain-mode .submenu-link:hover, body.plain-mode .submenu-link:active, body.plain-mode .submenu-link > a:hover { background-color: #f0f0f0 !important; color: #000 !important; border-radius: 4px; } body.plain-mode .chiller-theme .sidebar-wrapper ul li:hover a i, body.plain-mode .chiller-theme .sidebar-wrapper ul li:hover a span, body.plain-mode .chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before { color: #000 !important; text-shadow: none !important; } /* --- Buttons --- */ body.plain-mode button, body.plain-mode .btn, body.plain-mode .btn-submit { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: none !important; } /* --- Form inputs --- */ body.plain-mode input[type="text"], body.plain-mode input[type="email"], body.plain-mode input[type="password"], body.plain-mode select, body.plain-mode textarea { background-color: #fff !important; color: #000 !important; border: 1px solid #000 !important; } body.plain-mode input[type="checkbox"], body.plain-mode input[type="radio"] { accent-color: #000; } /* --- Cards --- */ body.plain-mode .card { background-color: #fff !important; border: 1px solid #000 !important; color: #000 !important; } /* --- Modals --- */ body.plain-mode .modal-content { background-color: #fff !important; border: 1px solid #000 !important; color: #000 !important; } body.plain-mode .modal-header, body.plain-mode .modal-footer { border-color: #000 !important; background-color: #fff !important; } /* --- Progress bars --- */ body.plain-mode .progress { background-color: #e0e0e0 !important; border: 1px solid #000 !important; } body.plain-mode .progress-bar { background-color: #000 !important; color: #fff !important; } /* --- Notification / badge bubbles --- */ body.plain-mode .notification-bubble, body.plain-mode .bg-homework, body.plain-mode .badge { background-color: #000 !important; color: #fff !important; border: 1px solid #000 !important; } /* --- Settings page form --- */ body.plain-mode form { background-color: #fafafa !important; border: 1px solid #000 !important; } /* --- Yes/No pill toggle --- */ body.plain-mode .yes-no-toggle { border-color: #000 !important; } body.plain-mode .yes-no-toggle label { background-color: #fafafa !important; color: #000 !important; } body.plain-mode .yes-no-toggle input:checked + label { background-color: #ffd849 !important; color: #4a3050 !important; } /* --- Override inline background / color --- */ body.plain-mode [style*="background-color"] { background-color: #fafafa !important; } body.plain-mode [style*="background:"] { background: #fafafa !important; } body.plain-mode [style*="color:"]:not(.medal-list-mountain-button) { color: #000 !important; } /* --- Avatar box: #414141 dark grey → light grey in plain mode --- */ body.plain-mode .avatarbox { background-color: #e8e8e8 !important; color: #000 !important; } /* --- Sidebar status bar --- */ body.plain-mode .statusbar, body.plain-mode #sidebar .statusbar span, body.plain-mode .statusbar * { color: #000 !important; } /* --- Game of the Day tile --- */ body.plain-mode .fadingBackgroundAnimation3, body.plain-mode .gameOfTheDay { background: #fff !important; animation: none !important; border: 1px solid #000 !important; } /* --- Last played tile --- */ body.plain-mode .lastplayed { background-color: #fff !important; border: 1px solid #000 !important; } /* --- Images: greyscale in the shell --- */ body.plain-mode .sidebar-menu img, body.plain-mode .gameOfTheDay img, body.plain-mode .header-homework img, body.plain-mode .exitbutton { filter: grayscale(100%) brightness(0.8); } /* --- Top navigation bar --- */ body.plain-mode .dashboard-nav { background-color: #fafafa !important; border-bottom: 2px solid #000 !important; color: #000 !important; } /* --- nav block buttons --- */ body.plain-mode .block-gradient { background: #fff !important; animation: none !important; border: 2px solid #000 !important; color: #000 !important; } body.plain-mode .block-primary { background-color: #fff !important; border: 2px solid #000 !important; color: #000 !important; } /* --- Sidebar Help submenu background --- */ body.plain-mode #sidebar .sidebar-content .sidebar-dropdown div.sidebar-submenu { background-color: #f5f5f5 !important; color: #000 !important; } /* --- Medal Mountain: preserve DB font_color --- */ body.plain-mode .medal-list-mountain-button * { color: inherit !important; } /* --- Quest page / multiplayer menu --- */ body.plain-mode .button-group { background-color: #fff !important; box-shadow: none !important; border: 1px solid #000 !important; color: #000 !important; } body.plain-mode .list-group-item, body.plain-mode .list-group-item a { background-color: #fff !important; color: #000 !important; border-color: #ccc !important; } body.plain-mode .list-group-item:hover, body.plain-mode .list-group-item a:hover { background-color: #f0f0f0 !important; color: #000 !important; } body.plain-mode .card-header { background-color: #fff !important; color: #000 !important; border-color: #ccc !important; } /* --- Scrollbars --- */ body.plain-mode::-webkit-scrollbar-track, body.plain-mode ::-webkit-scrollbar-track { background-color: #e0e0e0 !important; } body.plain-mode::-webkit-scrollbar-thumb, body.plain-mode ::-webkit-scrollbar-thumb { background-color: #888 !important; } body.plain-mode::-webkit-scrollbar-thumb:hover, body.plain-mode ::-webkit-scrollbar-thumb:hover { background-color: #555 !important; } /* --- Keep game iframe unaffected --- */ body.plain-mode iframe#mainframe { filter: none; } /* ============================================= Game Plain Mode ============================================= */ /* Question + answer blocks */ body.plain-mode .block { background-color: #f8f8f8 !important; color: #000 !important; border-color: #ccc !important; box-shadow: 4px 4px #bbb !important; } body.plain-mode .block--orange, body.plain-mode .block--beige, body.plain-mode .block--blue { background-color: #f8f8f8 !important; } /* Stepped light greyscale per option */ body.plain-mode [data-option-container] > .block--option:nth-child(1) { background-color: #f5f5f5 !important; } body.plain-mode [data-option-container] > .block--option:nth-child(2) { background-color: #eeeeee !important; } body.plain-mode [data-option-container] > .block--option:nth-child(3) { background-color: #e6e6e6 !important; } body.plain-mode [data-option-container] > .block--option:nth-child(4) { background-color: #dedede !important; } body.plain-mode .block--option:hover { background-color: #d0d0d0 !important; } /* Keep correct / wrong feedback colours */ body.plain-mode .block.correct, body.plain-mode .block.correct:hover { background-color: #5a9e42 !important; color: #fff !important; border-color: #5a9e42 !important; } body.plain-mode .block.wrong, body.plain-mode .block.wrong:hover { background-color: #cc3300 !important; color: #fff !important; border-color: #cc3300 !important; } /* Disabled state */ body.plain-mode .block--disabled, body.plain-mode .block.disabled { background-color: #e0e0e0 !important; border-color: #aaa !important; color: #888 !important; } /* Number icon circles */ body.plain-mode .block-icon { background-color: #e0e0e0 !important; border-color: #999 !important; } /* Header action buttons */ body.plain-mode .button { background-color: #f8f8f8 !important; color: #000 !important; box-shadow: 4px 4px #bbb !important; border: 1px solid #aaa !important; } body.plain-mode .button--orange:hover, body.plain-mode .button--beige:hover { background-color: #e0e0e0 !important; } /* Start / pause modal */ body.plain-mode .custom-modal, body.plain-mode .pause-modal { background-color: #f8f8f8 !important; color: #000 !important; box-shadow: 4px 4px #bbb !important; } body.plain-mode .custom-modal__time { background-color: rgba(240,240,240,.9) !important; color: #000 !important; } /* Overlay backdrop */ body.plain-mode .overlay { background-color: rgba(255,255,255,.85) !important; } /* Scoop Snatcher / Quizzy */ body.plain-mode .quiz-container { background-color: rgba(245,245,245,.95) !important; } /* --- Fix 1: Avatar images — keep normal colour --- */ body.plain-mode #userAvatarImage img, body.plain-mode .user-main-avatar, body.plain-mode .avatar-items img, body.plain-mode .user-avatar-img { filter: none !important; } /* --- Fix 2: Shop popup — restore dark text on yellow/orange backgrounds --- */ body.plain-mode .item-popup .popup-item-header, body.plain-mode .item-popup .popup-item-header * { color: #1c0f24 !important; } /* --- Fix 3: Pick-a-pair / Arrange-a-rama — dark text on amber card backgrounds --- */ body.plain-mode .word-card, body.plain-mode .word-card *, body.plain-mode .group-card, body.plain-mode .group-card * { color: #4a3050 !important; } /* --- Fix 4: Orderama answer bar — dark text on light-orange background --- */ body.plain-mode .word-container .word, body.plain-mode .word-container .word * { color: #4a3050 !important; } /* --- Fix 5: Wrongarama — light cloud background; restore correct/wrong colours --- */ body.plain-mode .cumulus { background-color: #f0f0f0 !important; border-color: #ccc !important; } body.plain-mode .cumulus::after { display: none !important; } body.plain-mode .gap.correct, body.plain-mode .word.correct { background-color: #5a9e42 !important; border-color: #5a9e42 !important; color: #fff !important; } /* --- Fix 6: Tricky Trios — light per-column tints; selected cyan --- */ body.plain-mode [data-column="0"] .item { background-color: #d4a8e0 !important; color: #000 !important; } body.plain-mode [data-column="1"] .item { background-color: #a8d4a0 !important; color: #000 !important; } body.plain-mode [data-column="2"] .item { background-color: #f5c49a !important; color: #000 !important; } body.plain-mode .item.selected { background-color: #2a9fc8 !important; color: #fff !important; }