/* ========================================================================== Theme tokens and dark-mode overrides. The actual `data-theme` attribute is set on by the no-flash script in the of the layout BEFORE first paint, based on: localStorage.theme ∈ {'light', 'dark', 'system'} When 'system', the script follows window.matchMedia('(prefers-color-scheme: dark)'). Resolved value is always 'light' or 'dark' on data-theme. The user's preference is also exposed on data-theme-pref (light|dark|system) so the header switcher can highlight the active option. This file is loaded after layout.css (see LayoutAsset) so it can override palette-related rules. ========================================================================== */ :root, :root[data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --surface-elevated: #ffffff; --text-primary: #1b1b1b; --text-muted: #666666; --border-color: #e8e8e8; --shadow-color: rgba(0, 0, 0, 0.08); --inverse-bg: #1b1b1b; --inverse-text: #ffffff; } :root[data-theme="dark"] { --bg-primary: #0e0e0e; --bg-secondary: #181818; --surface-elevated: #1f1f1f; --text-primary: #e8e8e8; --text-muted: #9a9a9a; --border-color: #2a2a2a; --shadow-color: rgba(0, 0, 0, 0.4); --inverse-bg: #f0f0f0; --inverse-text: #1b1b1b; /* Bootstrap overrides for dark mode — invert the accent so buttons remain readable. */ --accent-color: #f0f0f0; --accent-color-rgb: 240, 240, 240; --accent-hover: #d0d0d0; } /* -------------------------------------------------------------------------- Base elements -------------------------------------------------------------------------- */ /* The data-theme attribute lives on , so the html selector itself must be `html[data-theme="dark"]` (the descendant form `[data-theme="dark"] html` matches no element). layout.css declares `html,body{background:#FFFFFF !important}` so we mirror !important here. */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .wrap, html[data-theme="dark"] .wrap-flex { background-color: var(--bg-primary) !important; color: var(--text-primary); } [data-theme="dark"] .bg-gray { background-color: var(--bg-secondary) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] label { color: var(--text-primary); } [data-theme="dark"] a { color: var(--text-primary); } [data-theme="dark"] hr { border-color: var(--border-color); } /* Tables */ [data-theme="dark"] table, [data-theme="dark"] .table { color: var(--text-primary); border-color: var(--border-color); } /* Inputs */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted); } /* forms.css hard-codes white bg + black text on .form-control:focus, which flips inputs to a glaring white-on-dark-page look. Keep the dark surface on focus and only lift the border to indicate focus state. */ [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus, [data-theme="dark"] .form-control:focus { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); } /* Comment form labels (#252525 / #2B651E / #882525) — almost invisible on dark. Lift them to readable tones, keeping the success/error distinction. */ [data-theme="dark"] .comment-form .form-group label.control-label { color: var(--text-primary); } [data-theme="dark"] .comment-form .form-group.has-success label.control-label { color: #6cbf6c; } [data-theme="dark"] .comment-form .form-group.has-error label.control-label { color: #e57373; } [data-theme="dark"] .comment-form .form-group.has-error input { border-color: #e57373; } [data-theme="dark"] .comment-form .form-group.has-success input { border-color: #6cbf6c; } /* Default comment-form input border is #DDDDDD (white-ish on dark). Match the muted border used by the textarea for "Ваша думка". */ [data-theme="dark"] .comment-form .form-group input, [data-theme="dark"] .product-buy-form input { border-color: var(--border-color); } [data-theme="dark"] .comment-form .form-group.has-error .help-block, [data-theme="dark"] .comment-form .form-group .text-danger { color: #e57373; } /* Drag-captcha slider: track is #EBEFF5 (very pale on light, blends into dark page). Make track darker, handle lighter — the inverse of the default. bootstrap-slider applies its own gradient on .slider-handle.round; we need to override both the colour and the background-image with !important. */ [data-theme="dark"] .drag-captcha-slider > div.slider > div.slider-track, [data-theme="dark"] .slider.slider-horizontal .slider-track { background: var(--bg-secondary) !important; } [data-theme="dark"] .slider .slider-handle, [data-theme="dark"] .slider .slider-handle.round, [data-theme="dark"] .slider.slider-horizontal .slider-handle { background-color: var(--inverse-bg) !important; background-image: none !important; border: 1px solid var(--border-color) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Slider selection (the filled portion before the handle) defaults to a pale gradient — almost white in dark mode. Use a calm grey so the track segments read consistently. */ [data-theme="dark"] .slider .slider-selection, [data-theme="dark"] .slider.slider-horizontal .slider-selection { background: var(--border-color) !important; background-image: none !important; box-shadow: none; } /* The captcha "green zone" is rendered as `
`, so the rule above accidentally drains its colour. Restore green explicitly with at least the same specificity. */ [data-theme="dark"] .slider .slider-selection.green-highlight, [data-theme="dark"] .slider.slider-horizontal .slider-selection.green-highlight, [data-theme="dark"] .slider .green-highlight { background: #2baf59 !important; background-image: none !important; } /* Cards / panels */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content { background-color: var(--surface-elevated); color: var(--text-primary); border-color: var(--border-color); } /* -------------------------------------------------------------------------- Header / navigation -------------------------------------------------------------------------- */ /* Logo (inherits currentColor from its ). Default color follows the body text. In dark mode it must be light. */ .nav-new .nav-logo { color: #1b1b1b; } [data-theme="dark"] .nav-new .nav-logo { color: var(--text-primary); } /* The pill-shaped header container has its own light bg in navMenu.css (`#F6F6F6` / `#F2F2F2`). Override in dark mode. */ [data-theme="dark"] .nav-new .nav-container { background-color: var(--bg-secondary) !important; color: var(--text-primary); } [data-theme="dark"] .nav-new .links a, [data-theme="dark"] .nav-new .links .dropdown > a { color: var(--text-primary); } [data-theme="dark"] .nav-new .nav-round-btn > a { background-color: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); } [data-theme="dark"] .nav-new .nav-round-btn > a:hover, [data-theme="dark"] .nav-new .nav-round-btn > a:focus-visible { background-color: var(--surface-elevated); border-color: var(--text-muted); } [data-theme="dark"] .nav-new .nav-round-btn > a svg { color: var(--text-primary); fill: var(--text-primary); } /* Light theme uses rgba(240,240,240,0.3) + backdrop-filter: blur(16px) for a frosted look. Mirror that in dark mode with a translucent dark fill so the backdrop-filter (already declared in navMenu.css) still produces the blur. */ [data-theme="dark"] .nav-new .dropdown-menu { background-color: rgba(20, 20, 20, 0.55); color: var(--text-primary); border: 1px solid var(--border-color); } [data-theme="dark"] .nav-new div.active ul.dropdown-menu.dropdown-menu-mobile { background-color: rgba(20, 20, 20, 0.55); } [data-theme="dark"] .nav-new .dropdown .dropdown-submenu .submenu-menu.desktop { background-color: rgba(20, 20, 20, 0.85); border: 1px solid var(--border-color); color: var(--text-primary); } [data-theme="dark"] .nav-new .dropdown-menu li, [data-theme="dark"] .nav-new .dropdown-menu li a, [data-theme="dark"] .nav-new .dropdown-menu li button { color: var(--text-primary); background-color: transparent; } [data-theme="dark"] .nav-new .dropdown-menu li:hover, [data-theme="dark"] .nav-new .dropdown-menu li a:hover, [data-theme="dark"] .nav-new .dropdown-menu li button:hover { background-color: rgba(255, 255, 255, 0.08); } /* Notification timestamp ("2 months ago") is #CECECE in light mode — almost invisible on dark surfaces. Use a muted but readable tone instead. */ [data-theme="dark"] .nav-new .dropdown-menu .notification .time { color: var(--text-muted); } /* -------------------------------------------------------------------------- Footer (`footer.footer` is `#F6F6F6` with `#252525` text in light mode). -------------------------------------------------------------------------- */ [data-theme="dark"] footer.footer { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] footer.footer a, [data-theme="dark"] footer.footer a:hover, [data-theme="dark"] footer.footer .footer-links-title { color: var(--text-primary); } [data-theme="dark"] footer.footer .footer-bottom { border-color: var(--border-color); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ [data-theme="dark"] .btn-dark { background-color: var(--inverse-bg); color: var(--inverse-text); border-color: var(--inverse-bg); } [data-theme="dark"] .btn-dark:hover, [data-theme="dark"] .btn-dark:focus { background-color: #cfcfcf; color: var(--inverse-text); border-color: #cfcfcf; } [data-theme="dark"] .btn-outline-secondary { color: var(--text-primary); border-color: var(--border-color); background-color: transparent; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); } [data-theme="dark"] .btn-outline-dark { color: var(--text-primary); border-color: var(--border-color); background-color: transparent; } [data-theme="dark"] .btn-outline-dark:hover, [data-theme="dark"] .btn-outline-dark:focus-visible { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); } /* btn-primary uses --accent-color for bg (which we inverted in dark mode) and white text — making the label invisible. Flip the label color across every state, otherwise `.btn-primary:hover { color: white }` from layout.css wins when the cursor is over the button. We must also override bg in :hover / :active / :focus, because styles51.css forces `background: #333333 !important` on those states (designed for the light-theme dark button) — that flips dark theme's white button to near-black with dark text → looks disabled. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn-primary:focus-visible, [data-theme="dark"] .btn-primary:active { background-color: var(--accent-color) !important; color: var(--inverse-text) !important; fill: var(--inverse-text) !important; --bs-btn-color: var(--inverse-text); --bs-btn-hover-color: var(--inverse-text); --bs-btn-active-color: var(--inverse-text); --bs-btn-bg: var(--accent-color); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); } [data-theme="dark"] .btn-primary:hover { background-color: var(--accent-hover) !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Round buttons (scroll-to-top, search submit, etc.). They use --accent-color for bg and hard-code color:#fff / fill="#fff" for the icon. In dark mode we want the secondary-button look: dark fill, lighter outline, white icon. */ [data-theme="dark"] .round-btn-primary, [data-theme="dark"] .btn-primary-round, [data-theme="dark"] a.btn-primary-round, [data-theme="dark"] #scroll-to-top, [data-theme="dark"] #scroll-to-top-btn, [data-theme="dark"] .btn-round-primary-lg, [data-theme="dark"] button.btn-round-primary-lg { background-color: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .round-btn-primary:hover, [data-theme="dark"] .btn-primary-round:hover, [data-theme="dark"] a.btn-primary-round:hover, [data-theme="dark"] #scroll-to-top:hover, [data-theme="dark"] #scroll-to-top-btn:hover, [data-theme="dark"] .btn-round-primary-lg:hover, [data-theme="dark"] button.btn-round-primary-lg:hover { background-color: var(--surface-elevated) !important; border-color: var(--text-muted) !important; } [data-theme="dark"] .round-btn-primary svg, [data-theme="dark"] .btn-primary-round svg, [data-theme="dark"] a.btn-primary-round svg, [data-theme="dark"] #scroll-to-top svg, [data-theme="dark"] #scroll-to-top-btn svg, [data-theme="dark"] .btn-round-primary-lg svg, [data-theme="dark"] button.btn-round-primary-lg svg { color: var(--text-primary) !important; fill: var(--text-primary) !important; } [data-theme="dark"] .round-btn-primary svg path, [data-theme="dark"] .btn-round-primary-lg svg path, [data-theme="dark"] button.btn-round-primary-lg svg path, [data-theme="dark"] .btn-primary-round svg path, [data-theme="dark"] #scroll-to-top svg path, [data-theme="dark"] #scroll-to-top-btn svg path { fill: var(--text-primary) !important; } /* -------------------------------------------------------------------------- Vanilla modals (search, quiz CTA, etc.) — light theme variant has a semi-transparent white background with backdrop blur. In dark mode we want a semi-transparent dark fill instead. -------------------------------------------------------------------------- */ [data-theme="dark"] .vanilla-modal-theme-light .vanilla-modal-content { background-color: rgba(20, 20, 20, 0.85); color: var(--text-primary); border: 1px solid var(--border-color); } [data-theme="dark"] .vanilla-modal-theme-light .vanilla-modal-close, [data-theme="dark"] .vanilla-modal-theme-light .vanilla-modal-close svg { color: var(--text-primary); fill: var(--text-primary); } [data-theme="dark"] .vanilla-modal-theme-light input[type="text"], [data-theme="dark"] .vanilla-modal-theme-light input[type="search"] { color: var(--text-primary); background-color: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-color); } [data-theme="dark"] .vanilla-modal-theme-light input[type="text"]:focus { color: var(--text-primary); background-color: rgba(255, 255, 255, 0.1); border-color: var(--text-muted); } [data-theme="dark"] .vanilla-modal-theme-light ::placeholder { color: var(--text-muted); } /* -------------------------------------------------------------------------- Sticky bottom bars (set via inline style on the element — !important needed). Match the frosted-glass look of the nav dropdowns: translucent fill + backdrop-filter blur. No border-radius — these are full-width bars. -------------------------------------------------------------------------- */ #sticky-page-to-topic-bar, #sticky-session-bar { background-color: rgba(240, 240, 240, 0.55) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="dark"] #sticky-page-to-topic-bar, [data-theme="dark"] #sticky-session-bar { background-color: rgba(20, 20, 20, 0.55) !important; border-top: 1px solid var(--border-color) !important; box-shadow: 0 -4px 16px var(--shadow-color) !important; } /* -------------------------------------------------------------------------- Study-page
blocks (caption colors set inline — need !important) -------------------------------------------------------------------------- */ [data-theme="dark"] figure figcaption { color: var(--text-muted) !important; } [data-theme="dark"] figure figcaption strong { color: var(--text-primary); } /* Lift images on dark BG — slightly reduce brightness for less glare. */ [data-theme="dark"] figure img { filter: brightness(0.92); } /* -------------------------------------------------------------------------- Sidebar / page chrome -------------------------------------------------------------------------- */ [data-theme="dark"] .sidebar, [data-theme="dark"] aside { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .article-footer { border-color: var(--border-color); } [data-theme="dark"] .article-footer .views { color: var(--text-muted); } /* Long-form content (explanation / article pages) — pure #e8e8e8 body text is too high-contrast for sustained reading on the dark background. Soften the main text to a calmer grey. Targets the text elements directly (the global `[data-theme="dark"] p,span,li…` rule sets them, so a container rule alone wouldn't win); headings stay at their brighter color for hierarchy. */ [data-theme="dark"] .article-body, [data-theme="dark"] .article-body p, [data-theme="dark"] .article-body li, [data-theme="dark"] .article-body span, [data-theme="dark"] .article-body td, [data-theme="dark"] .article-body th { color: #c0c0c0; } /* -------------------------------------------------------------------------- Quiz / study cards (basic; deep restyle comes later) -------------------------------------------------------------------------- */ [data-theme="dark"] .quiz-card, [data-theme="dark"] .study-card { background-color: var(--surface-elevated); color: var(--text-primary); border-color: var(--border-color); } /* -------------------------------------------------------------------------- Admin: editable html-blocks default border is white (invisible on light bg, but visible on dark). Make it transparent so it only appears on hover. -------------------------------------------------------------------------- */ [data-theme="dark"] div.editable-block, [data-theme="dark"] div.editable-comment { border-color: transparent; } [data-theme="dark"] div.editable-block:hover, [data-theme="dark"] div.saved:hover, [data-theme="dark"] div.editable-comment:hover { border-color: var(--border-color); } /* Admin: floating controls bar that appears on hover (add/edit/copy/move/...). Default Bootstrap btn renders white-on-dark; we want dark-on-light icons in dark theme. */ [data-theme="dark"] .editable-block .controls, [data-theme="dark"] .editable-comment .controls { background-color: var(--surface-elevated); border: 1px solid var(--border-color); } [data-theme="dark"] .editable-block .controls .btn, [data-theme="dark"] .editable-comment .controls .btn { background-color: transparent; color: var(--text-primary); border-color: transparent; } [data-theme="dark"] .editable-block .controls .btn:hover, [data-theme="dark"] .editable-comment .controls .btn:hover { background-color: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] .editable-block .controls .btn:active, [data-theme="dark"] .editable-comment .controls .btn:active { background-color: #3a3a3a !important; color: var(--text-primary) !important; } [data-theme="dark"] .editable-block .controls .btn-group .dropdown-menu { background-color: var(--surface-elevated); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .editable-block .controls .btn-group .dropdown-menu .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .editable-block .controls .btn-group .dropdown-menu .dropdown-item:hover { background-color: var(--bg-secondary); } /* -------------------------------------------------------------------------- Homepage hero / section headers (`h1.home`, `h2.home`) — set to #101010 in pages/site/index.css with the same specificity as our base rule, so we need a slightly more specific selector to win. -------------------------------------------------------------------------- */ [data-theme="dark"] h1.home, [data-theme="dark"] h2.home { color: var(--text-primary); } /* -------------------------------------------------------------------------- Homepage tiles: `.tile-material` (popular articles), `.tile-feedback` (user feedback). Both have light-grey backgrounds and dark text by default. -------------------------------------------------------------------------- */ [data-theme="dark"] .tile-material, [data-theme="dark"] .tile-feedback, [data-theme="dark"] .tile-material:hover, [data-theme="dark"] .tile-feedback:hover { background-color: var(--surface-elevated); color: var(--text-primary); } [data-theme="dark"] .tile-material h3, [data-theme="dark"] .tile-feedback h3, [data-theme="dark"] div.tile-feedback h3 { color: var(--text-primary); } [data-theme="dark"] .tile-material p, [data-theme="dark"] .tile-feedback p { color: #c8c8c8; } [data-theme="dark"] .tile-material span.tag-article { background-color: var(--bg-secondary); color: var(--text-primary); } [data-theme="dark"] .tile-material span.tag-level { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] div.tile-tags { color: var(--text-muted); } /* -------------------------------------------------------------------------- Study group page: topic tiles (`.tile-training`) — light bg with dark text in light mode; we need the inverse here. -------------------------------------------------------------------------- */ [data-theme="dark"] .tile-training { background-color: var(--surface-elevated); } [data-theme="dark"] .tile-training h3, [data-theme="dark"] .tile-training p { color: var(--text-primary); } [data-theme="dark"] .tile-training-desc { color: #9aa0a6 !important; } /* Card avatar border — the light #e3e3e6 reads as a harsh white ring on the dark card. Use a soft grey instead. Same for the topic page header icon. */ [data-theme="dark"] .tile-training-icon, [data-theme="dark"] .topic-header-icon { border-color: #888888; } [data-theme="dark"] .tile-pill { background-color: #2b343b; color: #a7bdc6; } [data-theme="dark"] .record-card, [data-theme="dark"] .level-card { background-color: var(--surface-elevated); } [data-theme="dark"] .record-value { color: var(--text-primary); } [data-theme="dark"] .record-label { color: #c8c8c8; } [data-theme="dark"] .record-toast { background-color: var(--surface-elevated); } [data-theme="dark"] .record-toast-item { color: #c8c8c8; } [data-theme="dark"] .badge-card { background-color: var(--surface-elevated); } /* -------------------------------------------------------------------------- Profile page (and other `.accent-block` cards). The block has a hard-coded light grey #F6F6F6 background; in dark mode the body text inside it (which we already lift to var(--text-primary)) becomes light-on-light. Re-skin the card to a dark surface; text colors then naturally show through. -------------------------------------------------------------------------- */ [data-theme="dark"] .accent-block { background: var(--surface-elevated); color: var(--text-primary); } [data-theme="dark"] .accent-block.purple { background-color: var(--surface-elevated); } /* -------------------------------------------------------------------------- Login / signup / password-reset (.page-login). Hard-codes #F6F6F6 card, white inputs, dark text. Re-skin to dark surface and light text. -------------------------------------------------------------------------- */ [data-theme="dark"] .page-login .tile, [data-theme="dark"] .page-login .tile:hover { background-color: var(--surface-elevated); color: var(--text-primary); } [data-theme="dark"] .page-login .tile h3, [data-theme="dark"] .page-login .tile p, [data-theme="dark"] .page-login .tile li, [data-theme="dark"] .page-login .tile a { color: var(--text-primary); } [data-theme="dark"] .page-login input[type="text"], [data-theme="dark"] .page-login input[type="password"], [data-theme="dark"] .page-login input[type="text"]:focus, [data-theme="dark"] .page-login input[type="password"]:focus { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .page-login ::placeholder { color: var(--text-muted); } [data-theme="dark"] .page-login .form-group .checkbox label { color: var(--text-primary); } [data-theme="dark"] .page-login .form-group .checkbox input[type="checkbox"] { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .page-login .form-group .checkbox input[type="checkbox"]:checked { background-color: var(--text-primary); border-color: var(--text-primary); } [data-theme="dark"] .page-login .form-group .checkbox input[type="checkbox"]::after { border-color: var(--inverse-text); } [data-theme="dark"] .social-auth-divider::before, [data-theme="dark"] .social-auth-divider::after { background-color: var(--border-color); } [data-theme="dark"] .social-auth-divider span { color: var(--text-muted); } [data-theme="dark"] .page-login .tile a.btn-google { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .page-login .tile a.btn-google:hover { background-color: var(--surface-elevated); color: var(--text-primary); } /* -------------------------------------------------------------------------- Learning index: daily activity chart card. Card has hard-coded #f5f5f5 bg and the SVG axis/gridline use light-mode greys. -------------------------------------------------------------------------- */ [data-theme="dark"] .daily-activity-card { background: var(--surface-elevated); color: var(--text-primary); } [data-theme="dark"] .daily-chart-axis { fill: var(--text-muted); } [data-theme="dark"] .daily-chart-gridline { stroke: var(--border-color); } [data-theme="dark"] .daily-activity-legend { color: var(--text-muted); } /* Topic page: last session card (`.last-session-card`) — light grey bg in light mode, with text inheriting from the body. */ [data-theme="dark"] .last-session-card { background: var(--surface-elevated); } [data-theme="dark"] .last-session-card:hover { background: #2a2a2a; } /* The result line reuses .tile-training-desc. On a real card the description is a

inside .tile-training, so it renders at --text-primary (the `.tile-training p` rule wins over .tile-training-desc's #c8c8c8). Match that here so the session line looks identical to a card description in dark. */ [data-theme="dark"] .last-session-card .tile-training-desc { color: var(--text-primary); } /* Session-type badge ("Вивчення", "Повторення", etc.). Bootstrap's bg-secondary uses #6c757d which is a fairly bright mid-grey on dark surfaces — it pulls focus that should belong to the surrounding content. Use a quiet, near-card fill with light text instead. */ [data-theme="dark"] .badge.bg-secondary { background-color: #2c2c2c !important; color: var(--text-primary) !important; } /* -------------------------------------------------------------------------- Study session page (`views/study/session.php`). -------------------------------------------------------------------------- */ /* Progress bar container has inline background-color:#efefef — far too bright on a dark page. */ [data-theme="dark"] .progress-container { background-color: var(--bg-secondary) !important; } [data-theme="dark"] .my-learning-progress-bar { background-color: var(--bg-secondary); } /* Achievement (badge) progress-bar track: same dark-gray as the topic-card progress track, instead of the light #e3e3e6 that reads as white on dark. */ [data-theme="dark"] .badge-card-bar { background-color: var(--bg-secondary); } /* Segmented progress bar on studied-topic cards: dark track in dark theme. */ [data-theme="dark"] .study-topic-bar { background-color: var(--bg-secondary); } /* Daily-goal bar uses Bootstrap's .progress track, which stays light on the dark page. Match the mastery progress bar on the topic cards (.my-learning-progress-bar = --bg-secondary), so the track reads against the level card the same way it does on a topic card. */ [data-theme="dark"] .progress { background-color: var(--bg-secondary); } /* Bootstrap's `.text-muted` is #6c757d which barely shows on dark surfaces. The POS hint ("adverb (прислівник)") and other muted labels live there. */ [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } /* btn-primary in the disabled state inherits a light bg from --accent-color inversion + Bootstrap's opacity, ending up as a pale ghost. Give it an explicit dark fill while disabled so the action hierarchy reads cleanly. Exclude the loading state — that one keeps the normal button look + opacity from .js-loading-btn.is-loading (so a busy primary still reads as primary). */ [data-theme="dark"] .btn-primary:disabled:not(.is-loading), [data-theme="dark"] .btn-primary.disabled:not(.is-loading) { background-color: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; opacity: 1; } /* Loading-state primary keeps its normal accent fill in both themes (busy ≠ off). styles51.css sets `.btn-primary:active/:focus { background: #333 !important }` and layout.css sets `.btn-primary:disabled { background: #2E2E2E }`, so the selectors below must include each pseudo-state to outweigh those rules. */ .btn-primary.is-loading, .btn-primary.is-loading:hover, .btn-primary.is-loading:focus, .btn-primary.is-loading:focus-visible, .btn-primary.is-loading:active, .btn-primary.is-loading:disabled, .btn-primary.is-loading.disabled { background-color: var(--accent-color) !important; color: #ffffff !important; border-color: transparent !important; } [data-theme="dark"] .btn-primary.is-loading, [data-theme="dark"] .btn-primary.is-loading:hover, [data-theme="dark"] .btn-primary.is-loading:focus, [data-theme="dark"] .btn-primary.is-loading:focus-visible, [data-theme="dark"] .btn-primary.is-loading:active, [data-theme="dark"] .btn-primary.is-loading:disabled, [data-theme="dark"] .btn-primary.is-loading.disabled { background-color: var(--accent-color) !important; color: var(--inverse-text) !important; border-color: transparent !important; } /* Spinner uses currentColor; explicitly tie it to the button's resolved label color so a stray Bootstrap --bs-btn-disabled-color can't bleed through. */ [data-theme="dark"] .btn-primary .btn-spinner { color: var(--inverse-text); border-color: var(--inverse-text); border-right-color: transparent; } /* Ripple pseudo-element is hard-coded to a white radial gradient on btn-primary, which is invisible against the inverted (light) primary in dark mode. Use a dark wash to match. */ [data-theme="dark"] .btn-primary::after { background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 70%); } /* Inline correct-answer block uses inline background:#e9ecef. */ [data-theme="dark"] #correct-answer-block { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } /* Bootstrap border utilities default to #dee2e6 — too bright on dark surfaces. The chronological-order list uses `.border-bottom` between months. */ [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--border-color) !important; } /* Word/explanation card after answering. The JS sets inline background:#f8f9fa on #explanation plus inline color:#333/#666/#888 on inner spans. We override bg here, then surface inner text colours via attribute selectors. */ [data-theme="dark"] #explanation { background-color: var(--surface-elevated) !important; color: var(--text-primary); } [data-theme="dark"] #explanation strong[style*="#333"] { color: var(--text-primary) !important; } [data-theme="dark"] #explanation [style*="#666"] { color: var(--text-muted) !important; } [data-theme="dark"] #explanation [style*="#888"] { color: var(--text-muted) !important; } /* Historical fact cards rendered after answering (session.php). JS sets inline background:#fff + border:#e8e8e8 on each card and inline colours on inner text/sub/divider/chevron. Override those for dark theme via attribute selectors to avoid touching the JS. */ [data-theme="dark"] #explanation [style*="background:#fff"] { background-color: var(--surface-elevated) !important; border-color: var(--border-color) !important; } [data-theme="dark"] #explanation [style*="border:1px solid #e8e8e8"] { border-color: var(--border-color) !important; } [data-theme="dark"] #explanation [style*="border-top:1px solid #f0f0f0"] { border-top-color: var(--border-color) !important; } [data-theme="dark"] #explanation [style*="color:#222"] { color: var(--text-primary) !important; } [data-theme="dark"] #explanation [style*="color:#555"] { color: var(--text-primary) !important; } [data-theme="dark"] #explanation [style*="background:#f0f0f0"] { background-color: var(--bg-secondary) !important; } [data-theme="dark"] #explanation [style*="color:#bbb"] { color: var(--text-muted) !important; } /* Outline-secondary buttons in disabled state — currently nearly white text on a near-white outline. Quiet them down to a darker, muted treatment. */ [data-theme="dark"] .btn-outline-secondary:disabled, [data-theme="dark"] .btn-outline-secondary.disabled { background-color: transparent !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; opacity: 1; } /* Feedback pill (#feedback) for the neutral "Don't know" state and the correct-answer block. JS sets background via `style.backgroundColor = '#e9ecef'`, which the browser serializes as `rgb(233, 236, 239)` — so we match on rgb() strings, not hex. The correct-answer block keeps hex literals from inline HTML. */ [data-theme="dark"] #feedback[style*="rgb(233, 236, 239)"], [data-theme="dark"] #correct-answer-block { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; } [data-theme="dark"] #feedback[style*="rgb(102, 102, 102)"], [data-theme="dark"] #correct-answer-block { color: var(--text-muted) !important; } /* Radio input when answer is selected. session.php sets `background-color:#000; border-color:#000;` on `:checked`, which makes the whole circle invisible against the dark page — the inner Bootstrap dot is the only thing left. In dark mode keep the outer ring visible by switching to a transparent fill with a light border. */ [data-theme="dark"] .form-check-input[type="radio"]:checked { background-color: transparent !important; border-color: var(--text-primary) !important; } [data-theme="dark"] .form-check-input[type="radio"]:focus { border-color: var(--text-primary) !important; box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15) !important; } /* -------------------------------------------------------------------------- Mastery heatmap (Моя мапа засвоєння) — invert level 0 from light grey to dark grey, and use solid green tones for levels 1..9 (rgba alphas blend with the page colour, so on a near-black background they would wash out). -------------------------------------------------------------------------- */ [data-theme="dark"] .heatmap-cell-l0 { background: transparent; border-color: #48484a; } [data-theme="dark"] .heatmap-cell-l1 { background: #1c3a26; } [data-theme="dark"] .heatmap-cell-l2 { background: #214b30; } [data-theme="dark"] .heatmap-cell-l3 { background: #265c3a; } [data-theme="dark"] .heatmap-cell-l4 { background: #2c6d44; } [data-theme="dark"] .heatmap-cell-l5 { background: #327f4f; } [data-theme="dark"] .heatmap-cell-l6 { background: #389158; } [data-theme="dark"] .heatmap-cell-l7 { background: #3ea564; } [data-theme="dark"] .heatmap-cell-l8 { background: #34b66a; } [data-theme="dark"] .heatmap-cell-l9 { background: #2baf59; } [data-theme="dark"] .heatmap-cell-lapsed { background: #9e4444; } [data-theme="dark"] .heatmap-tooltip, [data-theme="dark"] .heatmap-info-icon .heatmap-info-tooltip, [data-theme="dark"] .card-hint { background: var(--surface-elevated); border-color: var(--border-color); color: var(--text-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------------------------- Topic page: stats row (Нових / Вивчається / Засвоєно) -------------------------------------------------------------------------- */ [data-theme="dark"] .topic-stats-row { background: var(--bg-secondary); } [data-theme="dark"] .topic-stat-label { color: var(--text-muted); } [data-theme="dark"] .topic-stat-divider { background: var(--border-color); } /* -------------------------------------------------------------------------- Topic page: historical timeline (`.ht-*` widget rendered in views/study/_timeline.php). The widget is designed for a light surface — invert its palette in dark mode. -------------------------------------------------------------------------- */ [data-theme="dark"] .ht-wrap { background: var(--bg-secondary); } [data-theme="dark"] .ht-nav { background: #222; } [data-theme="dark"] .ht-nav-btn { color: var(--text-muted); } [data-theme="dark"] .ht-nav-btn:hover { background: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .ht-minimap-vp { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .ht-axis { background: #4a4a4a; } [data-theme="dark"] .ht-tick-line { background: #5a5a5a; } [data-theme="dark"] .ht-tick-label { color: var(--text-muted); } [data-theme="dark"] .ht-tick.decade .ht-tick-line { background: #888; } [data-theme="dark"] .ht-tick.decade .ht-tick-label { color: #c0c0c0; } [data-theme="dark"] .ht-name { color: var(--text-primary); } [data-theme="dark"] .ht-item:hover .ht-lbl .ht-name { color: #fff; } [data-theme="dark"] .ht-sub { color: var(--text-muted); } [data-theme="dark"] .ht-guide { background: #2a2a2a; } [data-theme="dark"] .ht-row-label { color: var(--text-muted); } /* Phase zones (alternating background bands) and phase titles. */ [data-theme="dark"] .ht-phase-bg { background: #1f1f1f; } [data-theme="dark"] .ht-phase-label { color: #b0b0b0; } /* Tooltip */ [data-theme="dark"] .ht-tooltip { background: var(--surface-elevated); border-color: var(--border-color); color: var(--text-primary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .ht-tt-title { color: var(--text-primary); } [data-theme="dark"] .ht-tt-sub { color: var(--text-muted); } [data-theme="dark"] .ht-tt-desc { color: #d8d8d8; } /* -------------------------------------------------------------------------- Theme switcher button — show only the icon matching the current preference. -------------------------------------------------------------------------- */ .nav-new .theme-menu .theme-icon { display: none; align-items: center; justify-content: center; } [data-theme-pref="light"] .nav-new .theme-menu .theme-icon-light { display: inline-flex; } [data-theme-pref="dark"] .nav-new .theme-menu .theme-icon-dark { display: inline-flex; } [data-theme-pref="system"] .nav-new .theme-menu .theme-icon-system { display: inline-flex; } /* Active option in dropdown gets a subtle highlight. Use a translucent black tint so it reads on the frosted glass dropdown without flattening into it. */ .nav-new .theme-menu .js-theme-option.is-active { font-weight: 600; background-color: rgba(0, 0, 0, 0.12); } [data-theme="dark"] .nav-new .theme-menu .js-theme-option.is-active { background-color: rgba(0, 0, 0, 0.4); } [data-theme="dark"] .nav-new .theme-menu .js-theme-option.is-active:hover { background-color: rgba(0, 0, 0, 0.5); }