/* ============================================================ * theme.css — тёмная тема для avemedia.ru (v1) * Механизм — как на board.avemedia.ru: * класс .theme-light/.theme-dark на (ставит скрипт в ), * все цвета через переменные, выбор в localStorage('avemedia-theme'). * Дефолт — ВСЕГДА светлая (основная тема сайта). * * Этап 1 (этот файл): каркас + шапка/футер + BS-примитивы + * наши дизайн-системы (.ord/.fb/.ct-contacts, включая API-блок контактов). * Старые страницы без тёмных правил остаются читаемыми на тёмном фоне — * полируются постепенно. * ============================================================ */ /* ---------- 1. ПЕРЕМЕННЫЕ ---------- */ :root, .theme-light { --page-bg: #f7f7fa; --card-bg: #ffffff; --ink: #17171a; --mute: #77777f; --line: #e6e6ea; --brand-green: #2f9e54; --brand-yellow: #ffc107; --brand-red: #d9271e; --input-bg: #ffffff; --input-border: #d9d9df; --soft-bg: #fcfcfd; --soft-bg2: #f0f0f4; --card-shadow: 0 1px 2px rgba(16,16,24,.04), 0 4px 16px rgba(16,16,24,.07); --nav-bg: #ffffff; --link: #d9271e; --switch-text: #77777f; --switch-track: #d9d9df; } .theme-dark { --page-bg: #14171b; --card-bg: #1e2227; --ink: #f1f3f5; --mute: #8a929a; --line: #2a2f36; --brand-green: #3db968; --brand-yellow: #ffc107; --brand-red: #ff5f57; --input-bg: #191c20; --input-border: #3a414a; --soft-bg: #22262c; --soft-bg2: #2a2f36; --card-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); --nav-bg: #191c20; --link: #ffcf30; --switch-text: #adb5bd; /* значения с борда */ --switch-track: #3a414a; } /* ---------- 2. ПЕРЕКЛЮЧАТЕЛЬ — иконки, компактный (v6) ---------- */ .avm-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 7px; } .avm-toggle-side { display: flex; align-items: center; color: var(--switch-text); transition: color .15s; } .avm-toggle-side svg { width: 15px; height: 15px; fill: currentColor; display: block; } .avm-toggle-side.active { color: var(--brand-yellow); } .avm-switch { position: relative; display: inline-block; width: 44px; height: 22px; margin: 0; } .avm-switch input { opacity: 0; width: 0; height: 0; } .avm-switch .track { position: absolute; cursor: pointer; inset: 0; background: var(--switch-track); border-radius: 22px; transition: background .2s; } .avm-switch .thumb { position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #ffffff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } .avm-switch input:checked + .track { background: #ffc107; } .avm-switch input:checked + .track .thumb { transform: translateX(22px); } .avm-switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(255, 193, 7, .35); } /* в шапке: отступ от лупы; на узких экранах прячем подписи — остаётся свитч */ #header-main .avm-toggle-wrap { margin-right: 14px; } @media (max-width: 575.98px) { #header-main .avm-toggle-side { display: none; } #header-main .avm-toggle-wrap { gap: 0; margin-right: 8px; } } /* ---------- 3. БАЗА ---------- */ .theme-dark body, .theme-dark { background: var(--page-bg); color: var(--ink); } .theme-dark a { color: var(--link); } .theme-dark body { transition: background .25s, color .25s; } /* ---------- 4. ШАПКА (#header-main) ---------- */ .theme-dark #header-main { background-color: var(--nav-bg); } .theme-dark #header-main .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(241,243,245,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .theme-dark #header-main .navbar-nav .nav-link { color: var(--ink) !important; } .theme-dark #header-main .navbar-nav .nav-link:hover, .theme-dark #header-main .navbar-nav .nav-item.active .nav-link { color: #ffffff !important; } .theme-dark #header-main .search-trigger { color: var(--brand-yellow); } .theme-dark #header-main .search-trigger:hover { background-color: var(--soft-bg2); color: #ffffff; } @media (max-width: 991px) { .theme-dark #header-main .navbar-collapse { background-color: var(--nav-bg); border-top: 1px solid var(--line); } } /* ЛОГОТИП: свап на светлую версию (файл лежит рядом с logo.png) */ .theme-dark #header-main .navbar-brand img.logo { content: url("/images/logo-light.png"); } /* ---------- 5. ФУТЕР (#footer-main) ---------- */ .theme-dark #footer-main { background-color: var(--nav-bg) !important; color: var(--mute); } .theme-dark #footer-main .footer-title { color: var(--ink); } .theme-dark #footer-main .footer-link { color: var(--mute); } .theme-dark #footer-main .footer-link:hover { color: var(--brand-yellow); } .theme-dark #footer-main .social-icon { background-color: var(--soft-bg2); color: var(--ink); } .theme-dark #footer-main .social-icon:hover { background-color: var(--brand-yellow); color: #1a1a1a; } .theme-dark #footer-main .footer-bottom-bar { border-top: 1px solid var(--line); } .theme-dark #footer-main .footer-bottom-bar, .theme-dark #footer-main .bg-light { background-color: transparent !important; } /* ---------- 6. BOOTSTRAP-ПРИМИТИВЫ (по всему сайту) ---------- */ .theme-dark .card { background-color: var(--card-bg); border-color: var(--line); } .theme-dark .bg-light { background-color: var(--nav-bg) !important; } .theme-dark .bg-white { background-color: var(--card-bg) !important; } .theme-dark .text-dark { color: var(--ink) !important; } .theme-dark .text-muted, .theme-dark .text-secondary { color: var(--mute) !important; } .theme-dark .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--ink); } .theme-dark .form-control::placeholder { color: var(--mute); } .theme-dark .form-control:focus { background-color: var(--input-bg); color: var(--ink); } .theme-dark .btn-light, .theme-dark .btn-outline-secondary { background-color: var(--soft-bg2); border-color: var(--input-border); color: var(--ink); } .theme-dark .modal-content { background-color: var(--card-bg); border-color: var(--line); } .theme-dark .dropdown-menu { background-color: var(--card-bg); border-color: var(--line); } .theme-dark .dropdown-item { color: var(--ink); } .theme-dark .dropdown-item:hover { background-color: var(--soft-bg2); } .theme-dark .list-group-item { background-color: var(--card-bg); border-color: var(--line); color: var(--ink); } .theme-dark .table td, .theme-dark .table th { border-color: var(--line); color: var(--ink); } .theme-dark .close { color: var(--ink); } .theme-dark .alert-info { background-color: #1a2430; border-color: #2b3d52; color: var(--ink); } .theme-dark .alert-warning { background-color: #2b2517; border-color: #4a3f1e; color: var(--ink); } .theme-dark .alert-success { background-color: #1d2b22; border-color: #2c4a36; color: var(--ink); } .theme-dark .alert-danger { background-color: #2e1a1c; border-color: #4e282b; color: var(--ink); } /* ---------- 7. НАШИ ДИЗАЙН-СИСТЕМЫ ---------- */ /* 7а. Страница заказа (.ord) */ .theme-dark .ord { --ord-green: var(--brand-green); --ord-line: var(--line); --ord-ink: var(--ink); --ord-mute: var(--mute); } .theme-dark .ord-card { background: var(--card-bg); box-shadow: var(--card-shadow); } .theme-dark .ord .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--ink); } .theme-dark .ord-pay { border-color: var(--input-border); background: var(--soft-bg); } .theme-dark .ord-pay.on { border-color: var(--brand-green); background: #1d2b22; } .theme-dark .ord-tk { background: var(--card-bg); border-color: var(--line); box-shadow: -6px 0 14px rgba(0,0,0,.3); } .theme-dark .ord-empty { background: var(--soft-bg); color: var(--mute); } .theme-dark .ord .viewsw { background: var(--soft-bg2); } .theme-dark .ord .viewsw__b.on { background: var(--card-bg); color: var(--ink); } .theme-dark .ord .ord-paybtn { color: #1a1a1a; } .theme-dark .ord-mobbar { background: var(--card-bg); border-top: 1px solid var(--line); } /* 7б. Фидбек (.fb) */ .theme-dark .fb { --fb-green: var(--brand-green); --fb-line: var(--line); --fb-ink: var(--ink); --fb-mute: var(--mute); --fb-red: var(--brand-red); } .theme-dark .fb-card { background: var(--card-bg); box-shadow: var(--card-shadow); } .theme-dark .fb .fb-control { background: var(--input-bg); border-color: var(--input-border); color: var(--ink); } .theme-dark .fb-pay { border-color: var(--input-border); background: var(--soft-bg); } .theme-dark .fb-pay.on { border-color: var(--brand-green); background: #1d2b22; } .theme-dark .fb-drop { border-color: #3a414a; background: var(--soft-bg); } .theme-dark .fb-drop__icon { background: var(--soft-bg2); color: var(--mute); } .theme-dark .fb-note--info { background: #1a2430; border-color: #2b3d52; } .theme-dark .fb-note--warn { background: #2b2517; border-color: #4a3f1e; } .theme-dark .fb-note--danger{ background: #2e1a1c; border-color: #4e282b; color: #f1b8bd; } .theme-dark .fb-note--ok { background: #1d2b22; border-color: #2c4a36; color: #9fdcb4; } .theme-dark .fb .fb-paybtn { color: #1a1a1a; } .theme-dark .fb-captcha-box { background: var(--soft-bg2); color: var(--ink); } /* 7в. Контакты: и страница, и API-блок (.ct-contacts/.ctc-*) */ .theme-dark .ct-contacts { --ctg: var(--brand-green); --ctl: var(--line); --cti: var(--ink); --ctm: var(--mute); --ctr: var(--brand-red); } .theme-dark .ct-contacts .ctc-card { background: var(--card-bg); box-shadow: var(--card-shadow); } .theme-dark .ct-contacts .ctc-row { border-color: var(--input-border); background: var(--soft-bg); } .theme-dark .ct-contacts .ctc-ico { background: var(--soft-bg2); color: var(--mute); } .theme-dark .ct-contacts .ctc-btn { background: var(--soft-bg2); color: var(--ink); } .theme-dark .ct-contacts .ctc-btn:hover { background: #343a42; } .theme-dark .ct-contacts .ctc-badge { background: #1d2b22; border-color: #2c4a36; color: #9fdcb4; } .theme-dark .ct-contacts .ctc-state.is-open { color: var(--brand-green); } .theme-dark .ct-contacts .ctc-state.is-closed { color: var(--brand-red); } .theme-dark .ct-contacts .ctc-req td { border-bottom-color: var(--line); } /* ---------- 8. МОДАЛКА ПРОВЕРКИ EMAIL (email-check-modal) ---------- */ .theme-dark .email-check-modal .modal-content { background: var(--card-bg); color: var(--ink); } /* ============================================================ * ЭТАП 2 (v2): календарь афиши, пагинация, корзина/категории заказа, * модалки email-check и vpn, cookie-виджет, datepicker. * ============================================================ */ /* ---------- КАЛЕНДАРЬ АФИШИ (avm-calendar) ---------- */ .theme-dark .avm-calendar-wrapper { background: var(--card-bg); box-shadow: 0 8px 30px rgba(0,0,0,.4); } .theme-dark .avm-quick-btn { background: var(--soft-bg2); border-color: var(--input-border); color: var(--ink); } .theme-dark .avm-calendar-nav { background: var(--card-bg); border-color: var(--input-border); color: var(--ink); } .theme-dark .avm-datepicker-btn { background: var(--card-bg); border-color: var(--input-border); color: var(--ink); } .theme-dark .avm-datepicker-popup { background: var(--card-bg); border-color: var(--line); box-shadow: 0 20px 40px rgba(0,0,0,.5); } .theme-dark .avm-dp-nav { background: var(--card-bg); border-color: var(--input-border); color: var(--ink); } .theme-dark .avm-dp-day { background: var(--card-bg); color: var(--ink); } .theme-dark .avm-dp-day.weekend, .theme-dark .weekend { background: var(--soft-bg); } /* ---------- ПАГИНАЦИЯ ---------- */ .theme-dark .pagination .page-link { background-color: var(--card-bg); border-color: var(--line); color: var(--ink); } .theme-dark .pagination .page-item:not(.disabled) .page-link:hover { background-color: var(--soft-bg2); color: #ffffff; } .theme-dark .pagination .page-item.active .page-link { background-color: var(--brand-yellow); border-color: var(--brand-yellow); color: #1a1a1a; } .theme-dark .pagination .page-item.disabled .page-link { background-color: var(--soft-bg); border-color: var(--line); color: var(--mute); } /* ---------- КОРЗИНА И КАТЕГОРИИ (страница заказа) ---------- */ .theme-dark .cart-item:hover { background-color: var(--soft-bg); } .theme-dark .cart-item__remove { background: var(--soft-bg2); color: var(--mute); border-color: transparent; } .theme-dark .cart-item__remove:hover { background: #2e1a1c; color: #ff8a8a; } .theme-dark .ticket-category-toggle { color: var(--ink); } .theme-dark .ticket-category-toggle:hover { background: var(--soft-bg); } .theme-dark .hall-plan-toggle { color: var(--ink); } .theme-dark .hall-plan-toggle:hover { background: var(--soft-bg); } /* ---------- МОДАЛКА ПРОВЕРКИ EMAIL (email-check-modal) ---------- */ .theme-dark .email-check-modal .modal-content { background: var(--card-bg); color: var(--ink); } .theme-dark .email-check-modal__icon { background: var(--soft-bg2); color: var(--mute); } .theme-dark .email-check-modal__icon--warning { background: #2b2517; color: #ffcf30; } .theme-dark .email-check-modal__icon--error { background: #2e1a1c; color: #ff8a8a; } .theme-dark .email-check-modal__notice--warning { background: #2b2517; color: #e8d9a0; } .theme-dark .email-check-modal__notice--error { background: #2e1a1c; color: #f1b8bd; } .theme-dark .email-check-modal__keep { border-color: var(--input-border); background: var(--soft-bg2); color: var(--ink); } .theme-dark .email-check-modal__keep:hover { background: #343a42; } .theme-dark .email-check-modal__edit { /* главная кнопка модалки */ } /* ---------- VPN-АЛЕРТ ---------- */ .theme-dark .vpn-alert-modal .modal-content { background: var(--card-bg); color: var(--ink); } .theme-dark .vpn-alert-modal__icon { background: var(--soft-bg2); color: var(--mute); } .theme-dark .vpn-alert-modal__advice { color: var(--mute); } .theme-dark .vpn-alert-modal__footer { background: var(--soft-bg); border-top: 1px solid var(--line); } /* ---------- COOKIE-ВИДЖЕТ ---------- */ .theme-dark #cookie { background-color: var(--card-bg); color: var(--ink); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-left: 5px solid var(--brand-yellow); box-shadow: 0 10px 30px rgba(0,0,0,.5); } /* ---------- BOOTSTRAP-DATEPICKER (всплывающий) ---------- */ .theme-dark .datepicker { background: var(--card-bg); color: var(--ink); border-color: var(--line); } .theme-dark .datepicker .datepicker-switch, .theme-dark .datepicker .prev, .theme-dark .datepicker .next, .theme-dark .datepicker table tr td, .theme-dark .datepicker table tr th, .theme-dark .datepicker table tr td day { color: var(--ink); } .theme-dark .datepicker table tr td.day:hover, .theme-dark .datepicker table tr td.focused { background: var(--soft-bg2); } .theme-dark .datepicker table tr td.active, .theme-dark .datepicker table tr td.active:hover, .theme-dark .datepicker table tr td span.active { background: var(--brand-yellow); color: #1a1a1a; } .theme-dark .datepicker table tr td.today { background: #2b2517; color: #ffcf30; } .theme-dark .datepicker table tr td.old, .theme-dark .datepicker table tr td.new { color: var(--mute); } /* ---------- МЕЛКАЯ ПОЛИРОВКА ---------- */ .theme-dark .breadcrumb { background: transparent; } .theme-dark .breadcrumb-item a { color: var(--mute); } .theme-dark .breadcrumb-item.active { color: var(--ink); } .theme-dark .breadcrumb-item + .breadcrumb-item::before { color: var(--mute); } .theme-dark .close:hover { color: #ffffff; } .theme-dark .form-control:disabled, .theme-dark .form-control[readonly] { background-color: var(--soft-bg); color: var(--mute); } .theme-dark ::placeholder { color: var(--mute); opacity: .8; } .theme-dark hr { border-top: 1px solid var(--line); } .theme-dark .text-warning { color: var(--brand-yellow) !important; } .theme-dark .text-success { color: var(--brand-green) !important; } .theme-dark .text-danger { color: var(--brand-red) !important; } .theme-dark .text-primary { color: var(--link) !important; } /* ============================================================ * ЭТАП 2.1 (v3): легаси-контент — инлайн-стили редактора * и оставшиеся компоненты. Проверено по 13 страницам: * инлайн color:#000 — это / из визуального редактора, * ни один не на цветном фоне (жёлтых бейджей с таким текстом нет). * ============================================================ */ /* --- чёрный текст инлайн -> светлый --- */ .theme-dark [style*="color:#000"], .theme-dark [style*="color: #000"], .theme-dark [style*="color:#000000"], .theme-dark [style*="color: #000000"], .theme-dark [style*="color:#333"], .theme-dark [style*="color: #333"], .theme-dark [style*="color:#212529"], .theme-dark [style*="color: #212529"], .theme-dark [style*="color:#2b2b2b"], .theme-dark [style*="color:#2b2b2b"], .theme-dark [style*="color:#444"], .theme-dark [style*="color:#555"] { color: var(--ink) !important; } /* --- инлайн светлые фоны -> тёмная карточка --- */ .theme-dark [style*="background:#fff"], .theme-dark [style*="background: #fff"], .theme-dark [style*="background-color:#fff"], .theme-dark [style*="background-color: #fff"], .theme-dark [style*="background:#ffffff"], .theme-dark [style*="background: #ffffff"], .theme-dark [style*="background:#f5f5f5"], .theme-dark [style*="background: #f5f5f5"], .theme-dark [style*="background:#f8f9fa"], .theme-dark [style*="background: #f8f9fa"], .theme-dark [style*="background:#fafbfc"], .theme-dark [style*="background: #fafbfc"], .theme-dark [style*="background:#fcfcfd"], .theme-dark [style*="background: #fcfcfd"] { background: var(--card-bg) !important; color: var(--ink); } /* --- карточка хлебных крошек (crumb-card) --- */ .theme-dark .crumb-card { background: var(--card-bg); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35); color: var(--ink); } .theme-dark .crumb-card a { color: var(--mute); } .theme-dark .crumb-card a:hover { color: var(--link); } /* --- возрастной бейдж на постерах (0+, 12+, 16+...) --- */ .theme-dark .age-restriction-badge { background-color: rgba(20, 23, 27, .82); color: var(--ink); } /* --- страховка: Bootstrap-утилиты, встречающиеся в контенте --- */ .theme-dark .text-body { color: var(--ink) !important; } .theme-dark .text-black-50 { color: var(--mute) !important; } .theme-dark .btn-outline-dark { color: var(--ink); border-color: var(--input-border); } .theme-dark .btn-outline-dark:hover { background: var(--soft-bg2); color: #fff; } .theme-dark .btn-dark { background: var(--soft-bg2); border-color: var(--input-border); color: var(--ink); } .theme-dark .jumbotron { background: var(--card-bg); color: var(--ink); } .theme-dark .badge-light { background: var(--soft-bg2); color: var(--ink); } /* ============================================================ * ЭТАП 2.2 (v4): постраничные вшитые