/* ============================================= 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; } body.plain-mode .spacer { background-color: #ccc !important; color: #222 !important; border-color: #aaa !important; } body.plain-mode .account-list { background-color: #bbb !important; color: #000 !important; } body.plain-mode .account-sublist { background-color: #d5d5d5 !important; } /* Icon badges: black background, white icon in plain mode */ body.plain-mode .chiller-theme .sidebar-wrapper .sidebar-menu ul li a i { background: #222 !important; color: #fff !important; } body.plain-mode .chiller-theme .sidebar-wrapper ul li:hover a i, body.plain-mode .chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active2 a i { color: #fff !important; text-shadow: none !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; } /* Hover — subtle tint in same colour family as active states */ 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: rgba(153, 79, 178, 0.25) !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; } body.plain-mode .btn-danger { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !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; } /* --- Experience bar (XP) --- */ body.plain-mode .experience-bar__track { background-color: #aaa !important; border: 1px solid #555 !important; } body.plain-mode .experience-bar__track .expbar { background-color: #555 !important; } body.plain-mode #sidebar .statusbar .experience-bar__label, body.plain-mode #sidebar .statusbar .experience-bar__label span { color: #fff !important; text-shadow: 0 0 4px rgba(0,0,0,0.9) !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; } /* Same as dark mode: the "Teacher Task time!" nav pill is a button, not a bubble. The black-bubble treatment above turns it black, while plain-mode's own rules give the label black ink — black on black. Keep it coloured like its siblings. */ body.plain-mode .header-homework.bg-homework { background-color: #593062 !important; color: #fff !important; border: none !important; } body.plain-mode .header-homework.bg-homework:hover { background-color: #713a7d !important; } /* All three "…time!" pills keep a strong colour, so their labels must stay white. The blanket `body.plain-mode span, … a, … label { color: #000 }` rule near the top of this file out-specifies Bootstrap's .text-white and was turning every pill label black on its own colour. */ body.plain-mode .header-homework, body.plain-mode .header-homework a, body.plain-mode .header-homework span, body.plain-mode .header-homework i, body.plain-mode .header-spelling-zone, body.plain-mode .header-spelling-zone a, body.plain-mode .header-spelling-zone span, body.plain-mode .header-spelling-zone i, body.plain-mode .header-checkup, body.plain-mode .header-checkup a, body.plain-mode .header-checkup span, body.plain-mode .header-checkup i { color: #fff !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: #7bb662 !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 expanded item (active2) and submenu container --- */ body.plain-mode .sidebar-dropdown.active2 { background-color: rgba(153, 79, 178, 0.15) !important; } body.plain-mode #sidebar .sidebar-content .sidebar-dropdown div.sidebar-submenu { background-color: rgba(153, 79, 178, 0.15) !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; } /* --- Roll of Honour table --- */ body.plain-mode .summarytable { background-color: #fff !important; color: #222 !important; } body.plain-mode .summarytable th, body.plain-mode .summarytable td { color: #222 !important; border-color: #ccc !important; } /* --- Activity Reports table --- */ body.plain-mode #activity-report-table > tbody > tr:nth-of-type(odd) { background-color: #f0f0f0 !important; } body.plain-mode #activity-report-table > tbody > tr:nth-of-type(even) { background-color: #fff !important; } /* --- Progress Tracking / Statistics --- */ body.plain-mode .statistics .table { background-color: #fff !important; color: #222 !important; border-color: #aaa !important; } body.plain-mode .statistics .table th, body.plain-mode .statistics .table td { color: #222 !important; border-color: #aaa !important; } body.plain-mode .statistics .table tbody tr:nth-child(odd) { background-color: #f0f0f0 !important; } body.plain-mode .statistics .table tbody tr:nth-child(even) { background-color: #fff !important; } body.plain-mode .statistics .list-table th { background-color: #ccc !important; color: #222 !important; } body.plain-mode .statistics .list-table tr:nth-child(even) { background-color: #f0f0f0 !important; } body.plain-mode .statistics .list-table tr:hover { background-color: #e0e0e0 !important; } body.plain-mode .statistics .list-table td { color: #222 !important; } /* --- My Classes --- */ body.plain-mode .classmenu #stdclstable, body.plain-mode .classmenu #addclassresult2, body.plain-mode .classmenu #pastoralGroupTable { background-color: #fff !important; color: #222 !important; border-color: #aaa !important; } body.plain-mode .classmenu #stdclstable th, body.plain-mode .classmenu #stdclstable td, body.plain-mode .classmenu #addclassresult2 th, body.plain-mode .classmenu #addclassresult2 td, body.plain-mode .classmenu #pastoralGroupTable th, body.plain-mode .classmenu #pastoralGroupTable td { color: #222 !important; border-color: #aaa !important; } body.plain-mode .classmenu #stdclstable tbody tr.odd, body.plain-mode .classmenu #stdclstable tbody tr:nth-child(odd) { background-color: #f0f0f0 !important; } body.plain-mode .classmenu #stdclstable tbody tr.even, body.plain-mode .classmenu #stdclstable tbody tr:nth-child(even) { background-color: #fff !important; } /* --- Sporty Spelling word list rows --- */ body.plain-mode #group_list .group-row { background-color: #f0f0f0 !important; border: 1px solid #ccc !important; } body.plain-mode #group_list .group-row:hover { background-color: #e4e4e4 !important; } body.plain-mode #group_list .status-pending { background-color: #e8e8e8 !important; } body.plain-mode #group_list > .col-12:last-child > .mt-4 { background-color: #ddd !important; } body.plain-mode #group_list > .col-12:last-child > .mt-4 > .mt-2 { background-color: #f5f5f5 !important; } body.plain-mode #group_list .btn-group[style] { background: #eee !important; border: 1px solid #ccc !important; } /* --- Live Play (index-quests) --- */ body.plain-mode .play-live-game-list { background: #f0f0f0 !important; border-color: #ccc !important; } body.plain-mode .play-live-game-list:hover { background: #e0e0e0 !important; } body.plain-mode .modal-homework-settings .modal-content, body.plain-mode .modal-homework-saved .modal-content { background-color: #fff !important; color: #000 !important; } /* --- Roll Call --- */ body.plain-mode .roll-call-settings-div { background-color: #e8e8e8 !important; color: #222 !important; box-shadow: 0 5px #aaa !important; } body.plain-mode .modal-rollama-yellow .modal-content { background-color: #fff !important; color: #000 !important; } /* --- Game of the Day table --- */ body.plain-mode .gameOfDayTable th, body.plain-mode .gameOfDayTable td { color: #000 !important; border-color: #aaa !important; } body.plain-mode .gameOfDayTable tbody tr:nth-child(odd) { background-color: #f0f0f0 !important; } body.plain-mode .gameOfDayTable tbody tr:nth-child(even) { background-color: #fff !important; } /* --- Class/group selector buttons (Live Play, Teacher Tasks, Sporty Spelling) --- */ body.plain-mode .rollama-button { background-color: #e8e8e8 !important; color: #222 !important; box-shadow: 5px 5px #aaa !important; } body.plain-mode .rollama-button:hover { background-color: #f0ebf5 !important; color: #000 !important; } body.plain-mode .rollama-active-link, body.plain-mode .btn-check:checked + .rollama-button { background-color: #733381 !important; color: #fff !important; box-shadow: 5px 5px #aaa, 0 0 0 3px rgba(115,51,129,0.3) !important; outline: 2px solid #733381 !important; } /* ── Competition page (Gold Rush) ─────────────────── */ body.plain-mode .comp-page-header { background-color: #fafafa !important; } body.plain-mode .comp-intro-lead, body.plain-mode .comp-intro-steps { color: #000 !important; } body.plain-mode .comp-resource-btn { background: #fff !important; border: 2px solid #000 !important; box-shadow: none !important; color: #000 !important; } body.plain-mode .comp-folder { box-shadow: 3px 3px #000 !important; } body.plain-mode .comp-folder-header { background: #e0e0e0 !important; } body.plain-mode .curComps .btn { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: none !important; } body.plain-mode .curComps .btn.btn-primary { background-color: #ccc !important; color: #000 !important; } body.plain-mode .comp-create-btn { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: none !important; } body.plain-mode .comp-tab-link { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: none !important; } body.plain-mode .comp-tab-link.active { background-color: #333 !important; color: #fff !important; } body.plain-mode .comp-folder-body { background-color: #f0f0f0 !important; } body.plain-mode .battle { background-color: #fff !important; border: 2px solid #000 !important; color: #000 !important; } body.plain-mode .battleDiv { background: rgba(0,0,0,0.05) !important; } body.plain-mode .battleGroup { color: #000 !important; } body.plain-mode .ptsBattle { color: #333 !important; } body.plain-mode .battle-progress-info-div:not(:empty) { border-top-color: rgba(0,0,0,0.2) !important; } body.plain-mode .battle-info-progress-bar { background-color: #e0e0e0 !important; } body.plain-mode .battle-group-info-point { color: #222 !important; } body.plain-mode .battle-tab-nav a { background: #e8e8e8 !important; color: #000 !important; border: 1px solid #000 !important; } body.plain-mode .battle-tab-nav a.active { background: #000 !important; color: #fff !important; } body.plain-mode .comp-section-label { background: rgba(0,0,0,0.07) !important; border-left-color: #000 !important; color: #000 !important; } body.plain-mode .newCompContainer { background-color: #fff !important; border-color: #000 !important; box-shadow: 3px 3px #000 !important; } body.plain-mode .comp-pane-action-btn { background-color: #e8e8e8 !important; border: 2px solid #000 !important; color: #000 !important; box-shadow: none !important; } /* --- Spelling Zone assignment tables (table.uniform-columns) --- See the matching block in dark-mode.css. Plain mode separates the three columns by tone rather than hue, and needs the ink set explicitly because the blanket `body.plain-mode td, body.plain-mode th { color: #000 }` rule near the top of this file does not know these cells changed background. */ body.plain-mode table.uniform-columns th, body.plain-mode table.uniform-columns td { border-color: #8c8c8c !important; } body.plain-mode .bg-color-define-th { background-color: #c4c4c4 !important; } body.plain-mode .bg-color-recognise-th { background-color: #dcdcdc !important; } body.plain-mode .bg-color-spell-th { background-color: #aeaeae !important; } body.plain-mode .bg-color-define-td { background-color: #f2f2f2 !important; } body.plain-mode .bg-color-recognise-td { background-color: #fafafa !important; } body.plain-mode .bg-color-spell-td { background-color: #e8e8e8 !important; } body.plain-mode [class*="bg-color-"], body.plain-mode [class*="bg-color-"] * { color: #1f1f1f !important; text-shadow: none !important; } /* --- Quests surfaces (extracted from inline styles, LEDGER L-024) --- Mirrors the dark-mode block: these were previously caught by the [style*=…] rules above and need explicit rules now that their colours live in classes. */ body.plain-mode .quests-surface, body.plain-mode .quest-type-divider { background: #fafafa !important; color: #000 !important; } body.plain-mode .category-title, body.plain-mode .quests-ink-plum, body.plain-mode .quest-title-text { color: #000 !important; } body.plain-mode .quest-preview-btn { background-color: #fafafa !important; color: #000 !important; } body.plain-mode .quest-search-icon, body.plain-mode .quest-instruction-ink { color: #000 !important; } /* multiplayer-hub.php game cards — see the matching block in css/dark-mode.css. */ body.plain-mode .game-card--cream, body.plain-mode .game-card--slate { background: #fafafa !important; } /* --- Quests section headings --- index-quests.css renders these as wooden signposts. Plain mode is the low-decoration theme and forces the text to #000, which on that timber measures 3.01:1 — so the plank comes off entirely here rather than being recoloured, and the heading goes back to being a heading. */ body.plain-mode .category-title { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; } body.plain-mode .category-title::before { display: none !important; } /* --- Quests tier banners --- Flattened the same way .quest-type-divider is above: plain mode drops the two-tone card, and the tiers read as headings rather than as coloured furniture. The icons stay — they are the only thing distinguishing the two once the colour is gone. */ body.plain-mode .quest-tier-banner { background-color: #fafafa !important; color: #000 !important; box-shadow: none !important; border: 1px solid #ccc; } body.plain-mode .quest-tier-name, body.plain-mode .quest-tier-hint, body.plain-mode .quest-tier-count { color: #000 !important; } /* Year-group chips on the Teacher Tasks toolbar. `body.plain-mode button` forces every button to white on a black border, so without this the selected chip renders identically to the seven it was chosen over and the control looks stateless. Same inversion used by the other pressed states in this theme. */ body.plain-mode .year-chip.is-on { background-color: #333 !important; color: #fff !important; border-color: #000 !important; } /* --------------------------------------------------------------------------- Teacher Tasks control bar — index-quests/toolbar.php `body.plain-mode button` forces every button to white on a black border, so without these the pressed states — an open dropdown, a chosen year pill, an active Select — render identically to the controls they were chosen over and the whole bar reads as stateless. Same inversion, and same reason, as .year-chip.is-on above. --------------------------------------------------------------------------- */ body.plain-mode .qt-btn--filter.is-open, body.plain-mode .qt-btn--view.is-on, body.plain-mode .qt-pill.is-on { background-color: #333 !important; color: #fff !important; border-color: #000 !important; } body.plain-mode .qt-count { background-color: #333 !important; color: #fff !important; } /* `body.plain-mode button` boxes every button in a black border. Right for a button, wrong for a text link and for a list row: it drew a rectangle around "Clear all" and around all 17 topic rows. */ body.plain-mode .qt-clear, body.plain-mode .qt-row, body.plain-mode .qt-chip-x { border: 0 !important; } body.plain-mode .qt-btn--filter.is-open .qt-count { background-color: #fff !important; color: #333 !important; } /* The action bar is a dark surface in every theme; its buttons must not be flattened to the plain-mode white or the primary action disappears into it. */ body.plain-mode .qt-selbar { background-color: #333 !important; box-shadow: none !important; } body.plain-mode .qt-selbar-go { background-color: #fff !important; color: #000 !important; box-shadow: none !important; } body.plain-mode .qt-selbar-ghost { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } /* --- Favourites and Recent ------------------------------------------------- Same problem as the bar above: `body.plain-mode button` boxes every button in black, which turns two quiet rail rows and every row inside the panels into outlined buttons. The star is the other case — plain mode is a low-colour theme, so the gold fill goes and the state is carried by filled-vs-outlined instead, which is the distinction the glyph was already making. --------------------------------------------------------------------------- */ body.plain-mode .quest-shortcuts .quest-shortcut, body.plain-mode .qt-fav-item-star, body.plain-mode .qt-recent-again, body.plain-mode .qt-fav-choose { border: 0 !important; } body.plain-mode .quest-shortcuts .quest-shortcut { background-color: transparent !important; color: #000 !important; } body.plain-mode .quest-shortcuts .quest-shortcut:hover, body.plain-mode .quest-shortcuts .quest-shortcut[aria-expanded="true"] { background-color: #eee !important; } body.plain-mode .quest-shortcut-icon, body.plain-mode .quest-shortcut--fav.has-selection .quest-shortcut-icon { color: #000 !important; } body.plain-mode .quest-shortcut-count { background-color: #333 !important; color: #fff !important; } body.plain-mode .qt-fav-choose { background-color: #333 !important; color: #fff !important; box-shadow: none !important; } body.plain-mode .qt-recent-again { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; } body.plain-mode .qt-recent-set { color: #000 !important; } /* Filled black for a favourite, outlined for not — the same two states, drawn without relying on hue. */ /* Transparent surface as well as no border: `body.plain-mode button` paints every button white, which put a tile behind each star in the list. */ body.plain-mode .qt-fav-item-star { background-color: transparent !important; } body.plain-mode .quest-fav i, body.plain-mode .qt-fav-item-star { color: transparent !important; -webkit-text-stroke: 1.5px #000 !important; } body.plain-mode .quest-fav.is-on i, body.plain-mode .qt-fav-item-star.is-on { color: #000 !important; -webkit-text-stroke: 1px #000 !important; } body.plain-mode .qt-selbar--fav { background-color: #333 !important; box-shadow: none !important; }