/* ───────────────────────────────────────────────────────────────────────────── Тёмная тема ANews. Активируется классом body.theme-dark (переключатель в настройках ставит cookie an_theme=dark, а сервер добавляет класс на — без мигания). Файл подключается всегда: без класса он ничего не меняет. Стратегия: сначала перекрываем namespace-переменные (--anc-*, --apc-*, --m-*, --color-*) — это разом перекрашивает все новые компоненты, построенные на них. Потом — точечные оверрайды для легаси Bootstrap-поверхностей. ───────────────────────────────────────────────────────────────────────────── */ body.theme-dark { /* Базовые токены */ --background: #17191c; --color-text-primary: #e6e8eb; --color-text-secondary: #aab1b9; --color-text-tertiary: #7f868e; --color-text-info: #6ea8fe; --color-border-tertiary: #2c3036; /* Карточка публикации/автора (--anc-*) */ --anc-panel:#1f2226; --anc-text:#e6e8eb; --anc-sub:#aab1b9; --anc-muted:#7f868e; --anc-border:#2c3036; --anc-hover:#262a2f; --anc-blue:#4f8cff; --anc-danger:#ff6b6b; /* Панель комментариев/поста (--apc-*) */ --apc-bg:#1f2226; --apc-text:#e6e8eb; --apc-sub:#aab1b9; --apc-muted:#7f868e; --apc-border:#2c3036; --apc-blue:#4f8cff; /* Мессенджер (--m-*) */ --m-panel:#1f2226; --m-text:#e6e8eb; --m-sub:#aab1b9; --m-muted:#7f868e; --m-border:#2c3036; --m-hover:#262a2f; --m-blue:#4f8cff; --m-active:#2b3340; --m-bubble-in:#23272c; --m-bubble-out:#2f4a6d; --m-bubble-out-text:#eaf2ff; --m-danger:#ff6b6b; background: #17191c; color: #e6e8eb; } /* ── Каркас страницы ─────────────────────────────────────────────────────── */ body.theme-dark .bg-light-color { background: #1f2226; } body.theme-dark .bg-secondary { background-color: #23272c !important; } body.theme-dark .bg-white { background-color: #1b1e21 !important; } body.theme-dark .navbar-light .navbar-nav .nav-link { color: rgb(255 255 255 / 55%); } body.theme-dark .scrolled { background: #1b1e21db; } body.theme-dark .sidebar-container { background-color: #1f2226; } /* ── Типографика ─────────────────────────────────────────────────────────── */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6, body.theme-dark .h1, body.theme-dark .h2, body.theme-dark .h3, body.theme-dark .h4, body.theme-dark .h5, body.theme-dark .h6 { color: #e9ebee; } body.theme-dark .text-dark { color: #e6e6e6 !important; } body.theme-dark .text-muted { color: #8a929b !important; } body.theme-dark a { color: #6ea8fe; } /* ── Карточки ───────────────────────────────────────────────────────────── */ body.theme-dark .card { background-color: #1f2226; border: .0625rem solid #2c3036; } body.theme-dark .card-header { background-color: #23272c; border-bottom: .0625rem solid #2c3036; } body.theme-dark .card-footer { background-color: #1b1e21; } body.theme-dark .card-icon-actions a { color: #aab1b9; } /* Веб-карточка публикации (wc-card из work_card_all.php) */ body.theme-dark .wc-card { background: #1f2226; border-color: #2c3036; } body.theme-dark .wc-title { color: #e9ebee; } body.theme-dark .wc-title:hover { color: #6ea8fe; } body.theme-dark .wc-desc { color: #aab1b9; } body.theme-dark .wc-cover, body.theme-dark .wc-tags a { background: #23272c; } body.theme-dark .wc-foot { border-top-color: #2c3036; } body.theme-dark .wc-meta .wc-author { color: #aab1b9; } /* Карточка-группа авторского всплеска (art-burst) */ body.theme-dark .art-burst { background: #1f2226; border-color: #2c3036; } body.theme-dark .ab-list { border-top-color: #2c3036; } body.theme-dark .ab-item { border-bottom-color: #23272c; } body.theme-dark .ab-name, body.theme-dark .ab-title { color: #e9ebee; } body.theme-dark .ab-titles, body.theme-dark .ab-desc { color: #aab1b9; } /* ── Списки / дропдауны ─────────────────────────────────────────────────── */ body.theme-dark .list-group-item { color: #c6c6c6; background-color: #1b1e21; border-bottom: 1px solid #2c3036; } body.theme-dark .list-group-item-action:hover, body.theme-dark .list-group-item-action:focus { color: #e0e0e0; background-color: #262a2f; } body.theme-dark .list-group-heading { color: #dadada; } body.theme-dark .dropdown-menu { background-color: #23272c; color: #c6c6c6; } body.theme-dark .dropdown-item { color: #d7dade; } body.theme-dark .dropdown-item:hover, body.theme-dark .dropdown-item:focus { color: #ffffff; background: #303439; } /* ── Кнопки ─────────────────────────────────────────────────────────────── */ body.theme-dark .btn-secondary { color: #d4eaff; background: #2c3036; border-color: #2c3036; box-shadow: none; } /* ── Формы / поиск ──────────────────────────────────────────────────────── */ body.theme-dark .form-control, body.theme-dark .bootstrap-select .dropdown-toggle.btn-default { color: #cfd3d8; background-color: #1b1e21; border: .0625rem solid #33383d; } body.theme-dark .form-control::placeholder { color: #6c757d; } body.theme-dark .focused .input-group-text, body.theme-dark .input-group-text { color: #aab1b9; background-color: #23272c; border-color: #33383d; } body.theme-dark .input-group-transparent .input-group-text { color: #8a929b; background-color: transparent; border-color: #2c3036; } /* ── Табы ───────────────────────────────────────────────────────────────── */ body.theme-dark .tabs-nav { background: #1f2226; } body.theme-dark .tab-item { color: #cfd3d8; } body.theme-dark .tab-item.active { color: #ffffff; background: rgb(0 0 0 / 25%); } body.theme-dark .tab-item:hover { color: #aab1b9; background: rgb(0 0 0 / 30%); } body.theme-dark .theme-tab.active { color: #6ea8fe; border-bottom-color: #6ea8fe; } /* ── Профиль / статьи ───────────────────────────────────────────────────── */ body.theme-dark .article-page-footer { background: #1b1e21; } body.theme-dark .up-pane-info { background: #1f2226db; } body.theme-dark .user-card-listed.card-container { background-color: #1f2226; } body.theme-dark .img-thumbnail { background-color: #23272c; border-color: #33383d; } body.theme-dark .feed-post .feed-repost { background: #1b1e21; border-color: #2c3036; } body.theme-dark hr { border-top-color: #2c3036; } /* ── Пас 2: закриваємо «світлі» ділянки ───────────────────────────────────── Найчастіше світле — це інлайнові фони прямо в розмітці (background:#fff тощо). Перекрити їх можна лише через атрибут-селектор із !important. Ловимо часті значення; #fff як підрядок покриває і #ffffff. */ body.theme-dark [style*="background: #fff"], body.theme-dark [style*="background:#fff"], body.theme-dark [style*="background-color: #fff"], body.theme-dark [style*="background-color:#fff"], body.theme-dark [style*="background: #fbfbfb"], body.theme-dark [style*="background:#fbfbfb"], body.theme-dark [style*="background: #fafafa"], body.theme-dark [style*="background:#fafafa"], body.theme-dark [style*="background-color: #fafafa"], body.theme-dark [style*="background: #f8f9fa"], body.theme-dark [style*="background:#f8f9fa"], body.theme-dark [style*="background-color: #f8f9fa"], body.theme-dark [style*="background: #f7f8fa"], body.theme-dark [style*="background:#f7f8fa"], body.theme-dark [style*="background: #f5f5f5"], body.theme-dark [style*="background:#f5f5f5"], body.theme-dark [style*="background: #f1f1f1"], body.theme-dark [style*="background-color: #eee"] { background-color: #1f2226 !important; } /* Утиліти фону/тексту/меж */ body.theme-dark .bg-light { background-color: #1f2226 !important; } body.theme-dark .text-black { color: #e6e8eb !important; } body.theme-dark .text-secondary { color: #aab1b9 !important; } body.theme-dark .text-body { color: #e6e8eb !important; } body.theme-dark .border, body.theme-dark .border-top, body.theme-dark .border-right, body.theme-dark .border-bottom, body.theme-dark .border-left { border-color: #2c3036 !important; } body.theme-dark .dropdown-divider { border-top-color: #2c3036; } body.theme-dark .close { color: #e6e8eb; text-shadow: none; } body.theme-dark .close:hover { color: #ffffff; } /* Навбар / шапка */ body.theme-dark .navbar, body.theme-dark .navbar-light { background-color: #17191c !important; } body.theme-dark .navbar-light .navbar-brand, body.theme-dark .navbar-light .navbar-nav .active > .nav-link { color: #e9ebee; } body.theme-dark .navbar-nav .nav-link { color: #aab1b9; } /* Модалки */ body.theme-dark .modal-content { background-color: #1f2226; color: #e6e8eb; border-color: #2c3036; } body.theme-dark .modal-header, body.theme-dark .modal-footer { border-color: #2c3036; } body.theme-dark .modal-backdrop.show { opacity: .7; } /* Таблиці */ body.theme-dark .table { color: #d7dade; } body.theme-dark .table th, body.theme-dark .table td, body.theme-dark .table thead th { border-color: #2c3036; } body.theme-dark .table-hover tbody tr:hover { background-color: #23272c; color: #e9ebee; } body.theme-dark .table-striped tbody tr:nth-of-type(odd) { background-color: #1b1e21; } /* Alert / badge (кольорові лишаємо, гасимо лише світлі) */ body.theme-dark .alert-light, body.theme-dark .alert-secondary { background: #23272c; color: #d7dade; border-color: #2c3036; } body.theme-dark .badge-light { background: #2c3036; color: #d7dade; } body.theme-dark .badge-secondary { background: #3a3f45; color: #e9ebee; } /* Перемикач теми в налаштуваннях */ body.theme-dark .custom-control-label { color: #d7dade; } body.theme-dark .custom-control-input:checked ~ .custom-control-label::before { background-color: #4f8cff; border-color: #4f8cff; } /* Нативні app-модулі, що мають власні світлі фони */ body.theme-dark .apt-bar, body.theme-dark .app-work-header, body.theme-dark .an-chain, body.theme-dark .wc-card, body.theme-dark .reader-content, body.theme-dark .reader-wrap, body.theme-dark .notify-item, body.theme-dark .notify-list, body.theme-dark .thread-item, body.theme-dark .feed-post { background-color: #1f2226; border-color: #2c3036; color: #e6e8eb; }