/* ════════════════════════════════════════════════════════════════════ * Современный переключатель тёмной темы в шапке (line-иконки солнце/луна) * -------------------------------------------------------------------- * Заменяет прежний «кружок с обводкой» на лёгкую ghost-кнопку, как в * проекте D:\Novels (lucide Moon / Sun). Файл подключается ПОСЛЕ * css/dark-theme.css, поэтому переопределяет старые правила * .header-theme-toggle по порядку каскада. * * Тёмная тема самой кнопки живёт здесь же (селекторы body.dark-theme ...), * чтобы не трогать общий css/dark-theme.css. * ════════════════════════════════════════════════════════════════════ */ /* Базовая кнопка: прозрачная, без обводки и фона, тап-таргет 40px */ .header-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 2px; border: 0; background: transparent; color: #5b6470; border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; transition: background-color .18s ease, color .18s ease; } .header-theme-toggle:hover, .header-theme-toggle:focus-visible { background: rgba(0, 0, 0, .06); border: 0; color: #1f6fb8; outline: none; box-shadow: none; } .header-theme-toggle:active { background: rgba(0, 0, 0, .1); } .header-theme-toggle svg { display: block; width: 22px; height: 22px; } /* Обёртки иконок — для плавной смены при переключении темы */ .header-theme-toggle__moon, .header-theme-toggle__sun { align-items: center; justify-content: center; transition: transform .25s ease, opacity .25s ease; } /* Светлая тема → предлагаем тёмную → показываем луну */ .header-theme-toggle__sun { display: none; } .header-theme-toggle__moon { display: inline-flex; } /* Тёмная тема → предлагаем светлую → показываем солнце */ body.dark-theme .header-theme-toggle__moon { display: none; } body.dark-theme .header-theme-toggle__sun { display: inline-flex; } /* Сама кнопка в тёмной теме — тоже прозрачная ghost, без кружка */ body.dark-theme .header-theme-toggle { background: transparent; border: 0; color: #c8cdd5; } body.dark-theme .header-theme-toggle:hover, body.dark-theme .header-theme-toggle:focus-visible { background: rgba(255, 255, 255, .08); border: 0; color: #6db3f2; } body.dark-theme .header-theme-toggle:active { background: rgba(255, 255, 255, .14); } /* ── Адаптив ──────────────────────────────────────────────────────── * В мобильной шапке кнопка выравнивается с остальными иконками * (закладки, колокольчик, аватар) — тот же размер тап-таргета, без * лишних отступов, чтобы не появлялся горизонтальный скролл. */ @media (max-width: 500px) { .header-icon-item .header-theme-toggle svg, .header-icon-item.bookmarks a svg, .header-icon-item .main-header-notifications svg, .header-icon-item .main-header-notifications_icon { width: 18px; height: 18px; } .header-icon-item .header-theme-toggle__sun svg { width: 16px; height: 16px; } .header-icon-item .header-theme-toggle__moon svg { width: 18px; height: 18px; } #roulette-trigger svg { width: 17px; height: 17px; } } /* ════════════════════════════════════════════════════════════════════ * Единый РАЗМЕР и line-стиль для всех иконок шапки * -------------------------------------------------------------------- * Переключатель темы, закладки, рулетка(подарок) и колокольчик приведены * к одному оптическому размеру и весу: * • единый тап-таргет (бокс) 38×38px, иконки по центру; * • базовый глиф 20px, одинаковая толщина штриха (stroke-width: 2); * • один цвет (currentColor) — наследуется и в тёмной теме; * • одинаковые горизонтальные промежутки между иконками. * * Файл грузится последним среди CSS шапки, поэтому переопределяет * `fill: currentColor` / `width: 75%` и инлайновые размеры из v3.1.css * без правки чужих файлов. * * Важно: красный счётчик непрочитанного у колокольчика — отдельный * вне кнопки .main-header-notifications, поэтому правила ниже его не * затрагивают и бейдж остаётся на месте. * ════════════════════════════════════════════════════════════════════ */ /* Обёртка иконки: одинаковые промежутки и вертикальное центрирование. * Селекторы с двумя классами перебивают `.header-item.bookmarks * { margin-left: 8px }` из v3.1.css, чтобы промежутки были равными. */ .header-item.header-icon-item, .header-item_dropdown.header-icon-item { display: inline-flex; align-items: center; justify-content: center; margin: 0 2px; } /* Единый бокс-кликабельная зона 38×38 + сброс рамок/теней/фокус-ринга. * Сброс border/box-shadow/outline убирает тёмный контур у колокольчика и * закладки (нативная рамка кнопки и фокус-ring после клика). */ .header-icon-item .header-theme-toggle, .header-icon-item.bookmarks a, .header-icon-item .main-header-notifications { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; border-radius: 8px; color: #5b6470; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .18s ease, color .18s ease; } /* hover/focus — лёгкая подложка и синий акцент, как у переключателя темы */ .header-icon-item .header-theme-toggle:hover, .header-icon-item.bookmarks a:hover, .header-icon-item .main-header-notifications:hover, .header-icon-item .header-theme-toggle:focus-visible, .header-icon-item.bookmarks a:focus-visible, .header-icon-item .main-header-notifications:focus-visible { background: rgba(0, 0, 0, .06); color: #1f6fb8; outline: none; box-shadow: none; } /* Убираем фокус-ring (тёмный контур) при клике мышью */ .header-icon-item .header-theme-toggle:focus, .header-icon-item.bookmarks a:focus, .header-icon-item .main-header-notifications:focus { outline: none; box-shadow: none; } /* Базовый глиф: 20px, единый line-стиль (fill:none) и толщина штриха. * Селекторы заведомо специфичнее правил v3.1.css * (`.header-item.bookmarks a svg { fill: currentColor; width: 75% }`), * поэтому закладка перестаёт быть залитой и принимает общий размер. */ .header-icon-item .header-theme-toggle svg, .header-icon-item.bookmarks a svg, .header-icon-item .main-header-notifications svg, .header-icon-item .main-header-notifications_icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } /* ── Оптическая компенсация формы ─────────────────────────────────── * Подарок широкий и визуально тяжёлый — делаем его чуть МЕНЬШЕ остальных. * Солнце с лучами тоже «раздувается» — слегка уменьшаем. Полумесяц и * остальные — базовые 20px. */ #roulette-trigger svg { width: 19px; height: 19px; } .header-icon-item .header-theme-toggle__sun svg { width: 18px; height: 18px; } .header-icon-item .header-theme-toggle__moon svg { width: 20px; height: 20px; } /* Тёмная тема: светлый контрастный цвет + синий акцент на hover. * Гасим border/box/тень: dark-theme.css задаёт * `body.dark-theme .main-header-notifications { background: …; border: 1px … }` * — из-за этого у колокольчика и подарка (это