/* ============================================================ 1bol.kz — тёмная тема Подключается отдельным файлом, вне webpack-сборки. Активируется атрибутом на : data-bs-theme="dark" (Bootstrap 5.3 сам перекрашивает свои компоненты, здесь — только кастомные классы сайта.) ============================================================ */ html[data-bs-theme="dark"] { --b1-bg: #12141a; /* фон страницы */ --b1-surface: #1b1e26; /* карточки/секции */ --b1-surface-2: #232733; /* приподнятые блоки, ховеры */ --b1-text: #e8eaf0; --b1-text-2: #aab3c0; --b1-muted: #838c99; --b1-border: #2b303b; --b1-red: #ff4d52; /* фирменный красный, осветлён для тёмного фона */ /* переменные Bootstrap 5.3 — чтобы его компоненты попали в тон */ --bs-body-bg: var(--b1-bg); --bs-body-color: var(--b1-text); --bs-border-color: var(--b1-border); --bs-emphasis-color: var(--b1-text); --bs-secondary-color: var(--b1-text-2); color-scheme: dark; } /* ---------- базовые поверхности ---------- */ /* !important обязателен: в custom.css body задан как `background: #f2f2f2 !important` (строки 625 и 1298 — второй раз внутри media-запроса для мобильных) */ html[data-bs-theme="dark"] body { background: var(--b1-bg) !important; color: var(--b1-text); } /* Обёртка контента: `.content .container` в custom.css:343 залита #f2f2f2 */ html[data-bs-theme="dark"] .content .container { background-color: var(--b1-bg) !important; } /* белые карточки-секции */ html[data-bs-theme="dark"] .section, html[data-bs-theme="dark"] .author-news, html[data-bs-theme="dark"] .author, html[data-bs-theme="dark"] .result-table, html[data-bs-theme="dark"] .news-card, html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .adv-sec2, html[data-bs-theme="dark"] .top-bk1 { background-color: var(--b1-surface) !important; border-color: var(--b1-border) !important; color: var(--b1-text); } /* блок видео: `.section-video .container` задан с !important */ html[data-bs-theme="dark"] .section-video .container { background-color: var(--b1-surface) !important; } /* рекламные подложки и служебные блоки со светлой заливкой */ html[data-bs-theme="dark"] .adv-block, html[data-bs-theme="dark"] .undt-nws-adv, html[data-bs-theme="dark"] .intext-adv-div, html[data-bs-theme="dark"] .mobile-reaction-adv-div, html[data-bs-theme="dark"] .today-tags { background-color: var(--b1-surface-2) !important; } /* модальное окно (задано с !important) */ html[data-bs-theme="dark"] .modal-overlay .overlay .modal-aside { background: var(--b1-surface) !important; color: var(--b1-text); } /* шапка и рекламная полоса над ней */ html[data-bs-theme="dark"] .header, html[data-bs-theme="dark"] .head-adv-sec { background-color: var(--b1-surface) !important; border-bottom-color: var(--b1-border) !important; } /* сайдбар (выезжающее меню) */ html[data-bs-theme="dark"] .sidebar, html[data-bs-theme="dark"] .sidebar__inner, html[data-bs-theme="dark"] .js-sidebar { background-color: var(--b1-surface) !important; color: var(--b1-text); } /* ---------- текст ---------- */ html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6, html[data-bs-theme="dark"] p, html[data-bs-theme="dark"] span, html[data-bs-theme="dark"] li, html[data-bs-theme="dark"] td, html[data-bs-theme="dark"] th, html[data-bs-theme="dark"] div { border-color: var(--b1-border); } /* .news__link — основной класс заголовков новостей (56 шт. на главной), в светлой теме он чёрный и на тёмном фоне полностью пропадает */ html[data-bs-theme="dark"] .news__link, html[data-bs-theme="dark"] a.news__link, html[data-bs-theme="dark"] .news__title, html[data-bs-theme="dark"] .news__title a, html[data-bs-theme="dark"] .section-header, html[data-bs-theme="dark"] .section-header a, html[data-bs-theme="dark"] .news__text, html[data-bs-theme="dark"] .news__extract, html[data-bs-theme="dark"] .news__author-link { color: var(--b1-text) !important; } html[data-bs-theme="dark"] .news__link:hover, html[data-bs-theme="dark"] a.news__link:hover { color: var(--b1-red) !important; } /* второстепенный текст: даты, категории, подписи */ html[data-bs-theme="dark"] .news__date, html[data-bs-theme="dark"] .news__category, html[data-bs-theme="dark"] .news__info, html[data-bs-theme="dark"] .devel, html[data-bs-theme="dark"] .breadcrumb-item__link, html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] small { color: var(--b1-text-2) !important; } /* ссылки внутри текста статьи — красный вместо синего Bootstrap */ html[data-bs-theme="dark"] .news__extract a, html[data-bs-theme="dark"] .news__text a { color: var(--b1-red) !important; border-bottom-color: var(--b1-red) !important; } /* ---------- меню категорий в шапке ---------- */ html[data-bs-theme="dark"] .category-menu__link { color: var(--b1-text) !important; } html[data-bs-theme="dark"] .category-menu__link:hover { color: var(--b1-red) !important; } /* иконки категорий — чёрные SVG, осветляем */ html[data-bs-theme="dark"] .category-menu__link::before { filter: invert(1) brightness(1.6); } /* активный пункт «Матч-болжам» — красная плашка, оставляем как есть */ html[data-bs-theme="dark"] .bolzhammenu, html[data-bs-theme="dark"] .category-menu__link--bolzham { color: #fff !important; } html[data-bs-theme="dark"] .bolzhammenu::before, html[data-bs-theme="dark"] .category-menu__link--bolzham::before { filter: none; } /* ---------- иконки шапки ---------- */ /* файл называется search-icon-black.svg — на тёмном фоне не виден */ html[data-bs-theme="dark"] .search-link { filter: invert(1) brightness(1.6); } /* гамбургер — чёрные полоски */ html[data-bs-theme="dark"] .menu-bars span, html[data-bs-theme="dark"] .menu-bars i span { background-color: var(--b1-text) !important; } /* ---------- таблицы (турнирная таблица QFL) ---------- */ html[data-bs-theme="dark"] table, html[data-bs-theme="dark"] .table { color: var(--b1-text); border-color: var(--b1-border); } html[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--b1-text); border-bottom-color: var(--b1-border); } html[data-bs-theme="dark"] tr:hover, html[data-bs-theme="dark"] .table tbody tr:hover { background-color: var(--b1-surface-2) !important; } /* вкладки над таблицей */ html[data-bs-theme="dark"] .nav-link { color: var(--b1-text-2) !important; background-color: transparent !important; } html[data-bs-theme="dark"] .nav-link.active { color: var(--b1-text) !important; background-color: var(--b1-surface-2) !important; border-color: var(--b1-border) !important; } /* ---------- формы и поиск ---------- */ html[data-bs-theme="dark"] input, html[data-bs-theme="dark"] textarea, html[data-bs-theme="dark"] select, html[data-bs-theme="dark"] .form-control { background-color: var(--b1-surface-2) !important; color: var(--b1-text) !important; border-color: var(--b1-border) !important; } html[data-bs-theme="dark"] input::placeholder, html[data-bs-theme="dark"] textarea::placeholder { color: var(--b1-muted) !important; } /* ---------- футер (он и в светлой теме тёмный — только выравниваем) ---------- */ html[data-bs-theme="dark"] .footer { background-color: #0d0f13 !important; } html[data-bs-theme="dark"] .footer, html[data-bs-theme="dark"] .footer a, html[data-bs-theme="dark"] .copyright, html[data-bs-theme="dark"] .copyright a { color: var(--b1-text-2) !important; } /* ---------- разделители ---------- */ html[data-bs-theme="dark"] hr, html[data-bs-theme="dark"] .--bordered { border-color: var(--b1-border) !important; } /* ---------- фотографии: чуть приглушаем яркость, чтобы не слепили ---------- */ html[data-bs-theme="dark"] .news__image img, html[data-bs-theme="dark"] .news-image img { filter: brightness(0.92); } /* ============================================================ Кнопка переключателя темы ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 14px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #212529; cursor: pointer; transition: background-color .2s ease, color .2s ease; flex-shrink: 0; } .theme-toggle:hover { background-color: rgba(0, 0, 0, .07); } .theme-toggle svg { width: 19px; height: 19px; display: block; } /* показываем иконку той темы, на которую переключимся */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } html[data-bs-theme="dark"] .theme-toggle { color: var(--b1-text); } html[data-bs-theme="dark"] .theme-toggle:hover { background-color: rgba(255, 255, 255, .10); } html[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-bs-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }