/* ========================================================================== Almaty.tv — тёмная тема Подключается поверх собранного build/*.css. Активируется атрибутом data-theme="dark" на , который ставит переключатель в шапке. ========================================================================== */ :root { --atv-green: #2eb135; --atv-green-soft: #29a02f; } html[data-theme="dark"] { color-scheme: dark; --d-bg: #14171a; /* фон страницы */ --d-surface: #1c2025; /* карточки, секции, шапка */ --d-surface-2: #242a31; /* поля ввода, выпадающие меню */ --d-surface-3: #2b323a; /* ховер */ --d-border: #2f373f; --d-text: #e6e8ea; --d-text-muted: #99a3ac; --d-green: #3fc248; /* зелёный, осветлённый для контраста на тёмном */ --d-green-bar: #24892a; /* полоса рубрик — приглушена, чтобы не слепила */ } /* ---------- База ---------- */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--d-bg) !important; color: var(--d-text); } html[data-theme="dark"] a { color: var(--d-text); } html[data-theme="dark"] a:hover { color: var(--d-green); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--d-text); } /* ---------- Шапка ---------- */ html[data-theme="dark"] .header, html[data-theme="dark"] .navbar, html[data-theme="dark"] .header .navbar { background-color: var(--d-surface) !important; border-bottom: 1px solid var(--d-border); } html[data-theme="dark"] .nav-link, html[data-theme="dark"] .navbar-nav .nav-link { color: var(--d-text) !important; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .navbar-nav .nav-link:hover { color: var(--d-green) !important; } html[data-theme="dark"] .lang-switcher__link { color: var(--d-text-muted) !important; } html[data-theme="dark"] .lang-switcher__link:hover { color: var(--d-green) !important; } html[data-theme="dark"] .lang-switcher__link.--border-right { border-right-color: var(--d-border) !important; } /* полоски бургер-меню */ html[data-theme="dark"] .menu-bars i span { background-color: var(--d-text) !important; } /* ---------- Зелёная полоса рубрик ---------- */ html[data-theme="dark"] .secondary-menu { background-color: var(--d-green-bar) !important; } /* ---------- Секции и карточки ---------- */ html[data-theme="dark"] .section, html[data-theme="dark"] .top-section, html[data-theme="dark"] .last-section, html[data-theme="dark"] .live-section .section, html[data-theme="dark"] .footer, html[data-theme="dark"] .mobile-sidebar, html[data-theme="dark"] .card { background-color: var(--d-surface) !important; color: var(--d-text); } html[data-theme="dark"] .footer { border-top: 1px solid var(--d-border); } /* ---------- Лента новостей / список программ ---------- */ html[data-theme="dark"] .last-news, html[data-theme="dark"] .last-news__list, html[data-theme="dark"] .program-list, html[data-theme="dark"] .news { background-color: transparent !important; color: var(--d-text); } html[data-theme="dark"] .list__item { border-color: var(--d-border) !important; color: var(--d-text); } /* активная строка «в эфире» остаётся зелёной */ html[data-theme="dark"] .list__item.bg { background-color: var(--d-green-bar) !important; } html[data-theme="dark"] .list__item.bg .time, html[data-theme="dark"] .list__item.bg .name, html[data-theme="dark"] .list__item.bg .on-air { color: #fff !important; } html[data-theme="dark"] .last-news__item, html[data-theme="dark"] .last-news__link { border-color: var(--d-border) !important; color: var(--d-text) !important; } html[data-theme="dark"] .last-news__item:hover { background-color: var(--d-surface-3) !important; } /* даты, время, служебный текст */ html[data-theme="dark"] .date, html[data-theme="dark"] .time, html[data-theme="dark"] .news__date, html[data-theme="dark"] .last-news__time, html[data-theme="dark"] .text-muted, html[data-theme="dark"] .view-count { color: var(--d-text-muted) !important; } /* ---------- Заголовки блоков с зелёной чертой ---------- */ html[data-theme="dark"] .top__title, html[data-theme="dark"] .live__title, html[data-theme="dark"] .last-section__title, html[data-theme="dark"] .program-list__title, html[data-theme="dark"] .section__title, html[data-theme="dark"] .category__title { color: var(--d-text) !important; } /* ---------- Карточки новостей и рубрики на главной ---------- */ html[data-theme="dark"] .news__link, html[data-theme="dark"] .news__title, html[data-theme="dark"] .categories__title, html[data-theme="dark"] .category__title, html[data-theme="dark"] .news-item__title { color: var(--d-text) !important; } html[data-theme="dark"] .news__link:hover, html[data-theme="dark"] .news__title:hover { color: var(--d-green) !important; } /* кнопка «Другие новости» */ html[data-theme="dark"] .btn-link, html[data-theme="dark"] .news__link-all { background-color: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html[data-theme="dark"] .btn-link:hover, html[data-theme="dark"] .news__link-all:hover { background-color: var(--d-green-bar) !important; color: #fff !important; } /* ---------- Выпадающие меню ---------- */ html[data-theme="dark"] .dropdown-menu { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html[data-theme="dark"] .dropdown-item { color: var(--d-text) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--d-surface-3) !important; color: var(--d-green) !important; } /* ---------- Формы и поиск ---------- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .searchInput { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] .form-control::placeholder { color: var(--d-text-muted) !important; } html[data-theme="dark"] .search-form, html[data-theme="dark"] .search-form__header { background-color: transparent !important; } html[data-theme="dark"] .input-group-text { background-color: var(--d-surface-3) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html[data-theme="dark"] .btn-outline-success { color: var(--d-green) !important; border-color: var(--d-green) !important; } html[data-theme="dark"] .btn-outline-success:hover { background-color: var(--d-green) !important; color: #10130f !important; } /* иконка поиска и переключателя */ html[data-theme="dark"] .js-search-form-toggle__icon, html[data-theme="dark"] .fa { color: var(--d-text); } /* ---------- Текст статьи ---------- */ html[data-theme="dark"] .news__text, html[data-theme="dark"] .news__text p, html[data-theme="dark"] .news__text li, html[data-theme="dark"] .news__text span, html[data-theme="dark"] .news__text div, html[data-theme="dark"] .page__text, html[data-theme="dark"] .page__text p { color: var(--d-text) !important; background-color: transparent !important; } html[data-theme="dark"] .news__text a { color: var(--d-green) !important; } html[data-theme="dark"] .news__text blockquote { background-color: var(--d-surface-2) !important; border-left-color: var(--d-green) !important; color: var(--d-text) !important; } html[data-theme="dark"] .news__text table, html[data-theme="dark"] .news__text td, html[data-theme="dark"] .news__text th { border-color: var(--d-border) !important; color: var(--d-text) !important; } /* подпись под фото */ html[data-theme="dark"] .image-caption, html[data-theme="dark"] .news__image-caption { color: var(--d-text-muted) !important; } /* ---------- Боковые блоки статьи (#f8f9f9 в светлой теме) ---------- */ html[data-theme="dark"] .popular-news, html[data-theme="dark"] .partner-news, html[data-theme="dark"] .telegram-subscribe, html[data-theme="dark"] .tags, html[data-theme="dark"] .next-prev-news, html[data-theme="dark"] .also-read, html[data-theme="dark"] .subscribe { background-color: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html[data-theme="dark"] .popular-news__title, html[data-theme="dark"] .partner-news__title, html[data-theme="dark"] .next-prev-news__title, html[data-theme="dark"] .telegram-subscribe__title { color: var(--d-text) !important; } html[data-theme="dark"] .popular-news__item, html[data-theme="dark"] .next-prev-news__item { border-color: var(--d-border) !important; color: var(--d-text) !important; } html[data-theme="dark"] .popular-news__link, html[data-theme="dark"] .popular-news a, html[data-theme="dark"] .partner-news a, html[data-theme="dark"] .next-prev-news a { color: var(--d-text) !important; } html[data-theme="dark"] .popular-news a:hover, html[data-theme="dark"] .next-prev-news a:hover { color: var(--d-green) !important; } html[data-theme="dark"] .popular-news__date, html[data-theme="dark"] .popular-news .date { color: var(--d-text-muted) !important; } /* теги-чипы */ html[data-theme="dark"] .tags__link { background-color: var(--d-surface-3) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } html[data-theme="dark"] .tags__link:hover { background-color: var(--d-green-bar) !important; color: #fff !important; } /* хлебные крошки */ html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumbs { background-color: transparent !important; } html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] .breadcrumbs a { color: var(--d-green) !important; } /* ---------- Пагинация ---------- */ html[data-theme="dark"] .pagination .page-link { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--d-green-bar) !important; border-color: var(--d-green-bar) !important; color: #fff !important; } /* ---------- Меню футера и прочие ссылки с явным чёрным цветом ---------- */ /* правило для голого `a` проигрывает классам вроде .menu__link — перечисляем явно */ html[data-theme="dark"] .menu__link, html[data-theme="dark"] .menu a, html[data-theme="dark"] .footer a, html[data-theme="dark"] .footer__link, html[data-theme="dark"] .sidebar a, html[data-theme="dark"] .mobile-sidebar a { color: var(--d-text) !important; } html[data-theme="dark"] .menu__link:hover, html[data-theme="dark"] .menu a:hover, html[data-theme="dark"] .footer a:hover, html[data-theme="dark"] .sidebar a:hover { color: var(--d-green) !important; } html[data-theme="dark"] .menu__title, html[data-theme="dark"] .footer__title { color: var(--d-text) !important; } /* утилиты Bootstrap с тёмным текстом */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-body { color: var(--d-text) !important; } /* ---------- Вкладки, архив, боковые колонки ---------- */ html[data-theme="dark"] aside, html[data-theme="dark"] .v-tabs, html[data-theme="dark"] .archive-tabs, html[data-theme="dark"] .nav-tabs, html[data-theme="dark"] .tab-content { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; } html[data-theme="dark"] .v-tabs__item, html[data-theme="dark"] .nav-tabs .nav-link { color: var(--d-text) !important; } html[data-theme="dark"] .v-tabs__item.active, html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--d-green-bar) !important; color: #fff !important; border-color: var(--d-green-bar) !important; } /* ---------- Телепрограмма: таблицы дней ---------- */ html[data-theme="dark"] .tv-list, html[data-theme="dark"] .tv-list__day, html[data-theme="dark"] .tv-list__item { background-color: transparent !important; border-color: var(--d-border) !important; color: var(--d-text) !important; } html[data-theme="dark"] table { color: var(--d-text); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent !important; color: var(--d-text) !important; border-color: var(--d-border) !important; } /* ---------- Разделители и тени ---------- */ html[data-theme="dark"] hr { border-color: var(--d-border) !important; } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--d-border) !important; } html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-sm { box-shadow: 0 2px 12px rgba(0, 0, 0, .45) !important; } /* ---------- Курс валют / погода в шапке ---------- */ html[data-theme="dark"] .currency, html[data-theme="dark"] .currency__item, html[data-theme="dark"] .weather { color: #fff !important; } /* ---------- Картинки: чуть приглушаем, чтобы не слепили ---------- */ html[data-theme="dark"] .news img, html[data-theme="dark"] .last-news img, html[data-theme="dark"] .top-section img { filter: brightness(.92); } html[data-theme="dark"] .header__logo, html[data-theme="dark"] .footer img { filter: none; } /* ---------- Полосы прокрутки ---------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--d-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--d-surface-3); border-radius: 6px; border: 3px solid var(--d-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a434d; } /* ========================================================================== Переключатель темы в шапке ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; /* иначе во flex-шапке кнопку сжимает в овал */ padding: 0; margin: 0 4px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #333; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background-color: rgba(46, 177, 53, .12); border-color: rgba(46, 177, 53, .35); color: var(--atv-green); } .theme-toggle:focus-visible { outline: 2px solid var(--atv-green); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* В светлой теме показываем луну (предложение переключиться), в тёмной — солнце. Селекторы намеренно вложенные: одноклассовые правила проигрывали `.theme-toggle svg`. */ .theme-toggle .theme-toggle__sun { display: none; } .theme-toggle .theme-toggle__moon { display: block; } html[data-theme="dark"] .theme-toggle { color: var(--d-text-muted); } html[data-theme="dark"] .theme-toggle:hover { background-color: rgba(63, 194, 72, .14); border-color: rgba(63, 194, 72, .4); color: var(--d-green); } html[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; } html[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; } /* на мобильных чуть компактнее */ @media (max-width: 575.98px) { .theme-toggle { width: 30px; height: 30px; margin: 0 2px; } .theme-toggle svg { width: 17px; height: 17px; } }