/* ============================================================================ ТЁМНАЯ ТЕМА «ЗНАК» — 28.07.2026, НА ПРОДЕ И ПО УМОЛЧАНИЮ. Обкатана как копия на /dark/ (27.07), принята Сарматом 28.07 и перенесена на сам сайт. Светлый «Хром» никуда не делся: он лежит в style.css как базовое состояние и включается кнопкой темы в шапке. Этот файл подключают index.html и learn.html ПОСЛЕ style.css. ЗАЧЕМ ОН ЕСТЬ Цвет утверждённого знака — розовое золото плюс сирень — считался под тёмный фон. На светлом серебре золото даёт APCA 17 (знака там просто нет), поэтому в «Хроме» под него пришлось подкладывать тёмную планку шапки, а сирень (#C888E6, APCA 41 на серебре) из тела сайта ушла вовсе. На тёмной основе оба цвета знака живут на всей странице, а не на одной пластине. ЧТО ЗДЕСЬ МЕНЯЕТСЯ, А ЧТО НЕТ Меняется ТОЛЬКО облицовка: токены цвета плюс те правила слоя «Хром», где светлое вбито числом (белые карточки, стальные заголовки, стеклянные кнопки на белом). Разметка, раскладка, размеры зоны нажатия, вся логика — общие с продом, файл ничего этого не дублирует. Значит копия не протухнет: любая правка сайта приезжает сюда сама. ГЕОМЕТРИЯ НЕ ОТКАТЫВАЕТСЯ. Старая тёмная тема шла с нулевым скруглением (--r:0) — и ровно на это была жалоба 27.07: «квадратные кнопки, всё грубое». Возвращать её вместе с цветом значит воскрешать уже закрытую претензию. Тут тёмная палитра на СЕГОДНЯШНЕЙ геометрии: таблетки, 14px у поверхностей, литой металл главной кнопки. ВСЁ ПОДВЕШЕНО НА html[data-theme="dark"]. Атрибут снимается — страница мгновенно становится текущим прод-«Хромом», ни одна строка отсюда не применяется. Это и есть переключатель тем: одна разметка, два скина. ============================================================================ */ /* ------------------------------- 1. ТОКЕНЫ -------------------------------- */ html[data-theme="dark"]{ /* Пять ступеней тёмного. База НЕ чёрная (#100B18): чистый чёрный на OLED мажется при прокрутке, и фиолетовый слой продукта на нём выглядит грязным. */ --bg-0:#100B18;--bg-1:#17101F;--bg-2:#1E1629;--bg-3:#261D33;--bg-4:#302442; --line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.16); --ink:#F6F1FA;--mut:#C6B7D7;--dim:#A594C0; --txt:var(--ink);--muted:#A594C0;--line2:var(--line-strong); --bg:var(--bg-0);--bg2:var(--bg-1);--panel:var(--bg-2);--panel2:var(--bg-3); --glass:rgba(38,29,51,.66); /* Сирень знака возвращается в тело сайта: на #100B18 она даёт APCA 78 (на серебре было 41). Роль прежняя — состояние и данные, не призыв нажать. */ --iris:#C888E6;--iris-deep:#A664D0;--iris-soft:rgba(200,136,230,.13); --accent:#F0A8CC;--accent2:#F3D9AC;--brand:#FF4D9D;--accent-fill:#B8407A; /* Бегунок .rs-sw в этой теме — темнее --ls-mean (#8AD9FA), не тот же тон: светлый пастельный синий на белом ТЕКСТЕ бегунка читался бы слабо. */ --rs-a:#0B3B66;--rs-b:#0E86D9; --good:#7FE8C9;--err:#F0879B; --champ:#F3D9AC;--gold-soft:#F3D9AC;--gold:#D9A441; --plate:#17101F;--plate-ink:#F6F1FA; /* Четыре слоя строки песни — тёмный расчёт: база 9-12:1, заливка 5-7.6:1 на #100B18/#17101F. Четыре различимых тона: фиолет / роза / циан / мята. Светлая палитра разбора (бронза-сталь-синь) на тёмном мертва: бронза #8A5620 к #100B18 даёт APCA 33 при норме 75 для мелкого. */ --lyr-k:#C6A5FF;--lyr-k-fill:#9A6BF0; --lyr-r:#FF93C4;--lyr-r-fill:#D14E93; --lyr-m:#5CC8F5;--lyr-m-fill:#2E97CC; --lyr-s:#5FE6A4;--lyr-s-fill:#23A874; --lyr-active:#FFFFFF;--lyr-idle:rgba(246,241,250,.60);--lyr-past:rgba(246,241,250,.50); /* Тени снова честно чёрные: холодная синеватая тень «Хрома» на тёмном фоне не видна вовсе. */ --sh-1:0 1px 2px rgba(0,0,0,.55); --sh-2:0 10px 26px rgba(0,0,0,.60); --sh-3:0 20px 48px rgba(0,0,0,.68); --bevel:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.45); --bevel-soft:inset 0 1px 0 rgba(255,255,255,.08); } /* ------------------------------- 2. ФОН ----------------------------------- */ /* Два источника света по углам — сиреневый сверху справа, золотой снизу слева: те же два цвета, что в знаке. Клетчатой подложки нет (снята 27.07: клетка это язык таблицы), глубина берётся светом. */ html[data-theme="dark"] body{ background: radial-gradient(64% 44% at 96% 0%, rgba(200,136,230,.17), transparent 66%), radial-gradient(58% 46% at 0% 100%, rgba(237,199,162,.11), transparent 64%), linear-gradient(180deg,#1A1226 0%,#100B18 54%,#0C0813 100%); background-attachment:fixed;background-color:var(--bg-0);color:var(--ink)} /* ------------------------------ 3. ШАПКА ---------------------------------- */ /* На светлом шапке нужна была тёмная пластина — иначе знака не видно. Здесь вся страница тёмная, поэтому пластина уходит: шапка становится тем же корпусом, только уплотнённым размытием. Золотая нить по нижнему ребру остаётся — она связывает планку со знаком. */ html[data-theme="dark"] header{ background:linear-gradient(180deg,rgba(38,29,51,.90),rgba(16,11,24,.86)); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.45)} html[data-theme="dark"] header::after{ background:linear-gradient(90deg,transparent,rgba(237,199,162,.55) 30%,rgba(200,136,230,.5) 70%,transparent)} html[data-theme="dark"] header, html[data-theme="dark"] header .wrap, html[data-theme="dark"] header a, html[data-theme="dark"] header button{color:var(--ink)} html[data-theme="dark"] .navtab{background:rgba(255,255,255,.05);color:var(--mut); border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} html[data-theme="dark"] .navtab:hover{background:rgba(255,255,255,.10);color:var(--ink)} /* ВЫБРАННАЯ ВКЛАДКА В ТЁМНОЙ ТЕМЕ, 03.08 (правка Сармата: «не видно, какая кнопка включена»). Причина была не в оттенке, а в специфичности: золото для .navtab.on лежит в style.css двумя классами (0,2,0), а правило строкой выше — html[data-theme="dark"] .navtab — весит (0,2,1) и молча его съедало. То есть в тёмной теме активной вкладки не существовало вовсе, обе рисовались одинаково. Здесь золото возвращается с тем же весом и усилено до различия, которое видно боковым зрением: светлая плашка против прозрачной, тёмный текст против серого, кольцо и тень. Контраст текста к плашке 11.4:1 при норме 4.5. */ html[data-theme="dark"] .navtab.on{ background: linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 46%), linear-gradient(160deg,#FBEAD6,#EDC79E 46%,#CE9165); color:#241009;font-weight:800;border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(237,199,162,.55), 0 8px 20px rgba(190,130,95,.42)} html[data-theme="dark"] .navtab.on:hover{ background: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%), linear-gradient(160deg,#FFF3E6,#F3D2AC 46%,#D89B6E); color:#241009} @media(max-width:560px){ html[data-theme="dark"] .navtabs{border-top:1px solid var(--line)} } /* --------------------------- 4. ПОВЕРХНОСТИ ------------------------------- */ /* Белую бумагу «Хрома» заменяет приподнятая тёмная поверхность. Правило проекта «глубина осветлением, а не свечением» тут и работает: карточка светлее фона на ступень, ореолов нет. */ html[data-theme="dark"] .lp-card, html[data-theme="dark"] .hd, html[data-theme="dark"] .result, html[data-theme="dark"] .lesson-box, html[data-theme="dark"] .chat-box, html[data-theme="dark"] .onb-card, html[data-theme="dark"] .help-box{ background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border:1px solid var(--line);box-shadow:var(--sh-2)} html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .opt, html[data-theme="dark"] .lenta-item{background:var(--bg-2);border-color:var(--line)} html[data-theme="dark"] .card-locked{background:linear-gradient(135deg,rgba(48,36,66,.55),rgba(23,16,31,.80))} /* Перелив фотокарты на тёмном ярче: на белом он читался под углом, на тёмном ему нужно больше альфы, иначе его просто нет. */ html[data-theme="dark"] .lp-card::after, html[data-theme="dark"] .card::after, html[data-theme="dark"] .hd::after{ background:linear-gradient(115deg, transparent 30%, rgba(200,136,230,.16) 42%, rgba(95,216,240,.13) 50%, rgba(243,217,172,.16) 58%, transparent 70%); background-size:260% 100%;background-position:100% 0} /* -------------------------- 5. ТИПОГРАФИКА -------------------------------- */ /* Заголовок в «Хроме» — тёмная сталь по светлому. На тёмном тот же приём читается только вывернутым: полированное серебро от белого к сиреневой тени. @supports обязателен: без background-clip:text свойство color:transparent оставило бы заголовок невидимым. */ @supports (background-clip:text) or (-webkit-background-clip:text){ html[data-theme="dark"] .lp-h, html[data-theme="dark"] .sec-h h2, html[data-theme="dark"] .hd h2, html[data-theme="dark"] .onb-card h2{ background:linear-gradient(176deg,#FFFFFF 0%,#EFE6F8 42%,#B9A6D6 100%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.45)} } /* Приборные ярлыки — сиренью знака, а не иридесцентом «Хрома». */ html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .lp-eyebrow, html[data-theme="dark"] .hd-eyebrow, html[data-theme="dark"] .opt-h, html[data-theme="dark"] .port-h, html[data-theme="dark"] .song-online-h, html[data-theme="dark"] .kp-h, html[data-theme="dark"] .kp-tag, html[data-theme="dark"] .sec-h .tag, html[data-theme="dark"] .hd-src, html[data-theme="dark"] .lp-src, html[data-theme="dark"] .lp-done-n, html[data-theme="dark"] .yt-hint{color:var(--iris)} html[data-theme="dark"] footer{border-top:1px solid var(--line);color:var(--dim)} html[data-theme="dark"] footer b{color:var(--mut)} /* Полированная таблетка поддержки собрана под белую страницу — на тёмном она светится фонарём. Тот же приём, что и у прочих поверхностей темы: металл темнеет, фаска остаётся, блик уходит в 8% белого. */ html[data-theme="dark"] .foot-help{ color:var(--ink);border-color:var(--line-strong); background:linear-gradient(180deg,#332746 0%,#271D36 46%,#1D1529 54%,#2C2140 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.45),var(--sh-2)} html[data-theme="dark"] .foot-help:hover, html[data-theme="dark"] .foot-help:focus-visible{border-color:var(--iris);color:var(--iris); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.45),var(--sh-3)} /* ----------------------------- 6. КНОПКИ ---------------------------------- */ /* Главная кнопка НЕ трогается: розовое золото — цвет знака и главного действия, на тёмном металл работает даже лучше, чем на белом (перепад блик/тень виден целиком). Меняется только вторичная: стекло, собранное для белой страницы, на тёмной превращается в светлое пятно. */ html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .lang-btn{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); color:var(--ink);border:1px solid var(--line-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.45)} html[data-theme="dark"] .btn.ghost:hover, html[data-theme="dark"] .lang-btn:hover{ background: radial-gradient(160px 100px at var(--mx) var(--my),rgba(200,136,230,.22),transparent 70%), linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06)); border-color:rgba(200,136,230,.55);color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 16px rgba(0,0,0,.5)} html[data-theme="dark"] .btn.ghost:active, html[data-theme="dark"] .lang-btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.5)} html[data-theme="dark"] .btn.accent:disabled{filter:grayscale(.5) brightness(.85); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)} /* «Ещё раз» и «Выбрать песню» в тёмной теме (правка Сармата 30.07: плоские рамки читались как «незаметные»): пилюля тёмного металла с бликом, надпись — ребристое серебро «Выбрать своего айдола» с бликом по шрифту. */ html[data-theme="dark"] .lp-ghost{border-color:rgba(255,255,255,.28);color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.11) 55%,rgba(255,255,255,.03) 100%); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 4px 14px rgba(0,0,0,.35)} html[data-theme="dark"] .lp-ghost:hover{border-color:var(--accent2);color:var(--accent2)} @supports(-webkit-background-clip:text){ html[data-theme="dark"] .lp-ghost .lp-ghost-t{ background:linear-gradient(180deg,#FFFFFF 0%,#D7DEEA 36%,#FFFFFF 50%,#B7C1D2 62%,#8F9AB0 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))} } /* Кнопка айдола больше не сиреневая рамка: с 28.07 она из того же металла, что шапка (см. style.css). Тёмная тема её не перекрашивает — металл одинаков в обеих. */ html[data-theme="dark"] .streak-chip, html[data-theme="dark"] .hero-chips .streak-chip{background:rgba(16,11,24,.78); border-color:var(--gold);color:var(--gold-soft)} /* Кружок справки: на белом он был белым с бронзовой каймой, здесь — тёмный с золотой. Разметка та же, правило перебивается по специфичности. */ html[data-theme="dark"] .onb-help, html[data-theme="dark"] .home .hero-foot .onb-help{ background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:1px solid rgba(243,217,172,.45);color:var(--accent2); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 4px rgba(0,0,0,.5)} html[data-theme="dark"] .onb-help:hover{background:linear-gradient(180deg,#33254A,#241A33); border-color:var(--accent2);color:#FFF0D6} /* ------------------------------ 7. ПОЛЯ ----------------------------------- */ html[data-theme="dark"] .song-search, html[data-theme="dark"] .auth-form input, html[data-theme="dark"] .chat-input input, html[data-theme="dark"] .help-in textarea{ background:var(--bg-1);border:1px solid var(--line-strong);color:var(--ink); box-shadow:inset 0 2px 4px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.03)} html[data-theme="dark"] .song-search::placeholder, html[data-theme="dark"] .auth-form input::placeholder, html[data-theme="dark"] .chat-input input::placeholder, html[data-theme="dark"] .help-in textarea::placeholder{color:var(--dim)} html[data-theme="dark"] .song-search:focus, html[data-theme="dark"] .auth-form input:focus{border-color:var(--iris); box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 0 3px rgba(200,136,230,.22)} html[data-theme="dark"] .ov{background:rgba(8,5,13,.74);backdrop-filter:blur(7px)} /* -------------------- 8. СОСТОЯНИЯ И МЕЛКИЕ ЭЛЕМЕНТЫ ---------------------- */ html[data-theme="dark"] .song-seg button.on, html[data-theme="dark"] .wb-tab.on{color:var(--iris);border-bottom-color:var(--iris)} html[data-theme="dark"] .gtab.on, html[data-theme="dark"] .opt.on{background:linear-gradient(180deg,#8A5FD8,#6C46D8); border-color:transparent;color:#fff} html[data-theme="dark"] .card.sel{outline-color:var(--iris)} html[data-theme="dark"] .lp-prog{background:var(--bg-3);border-color:var(--line)} html[data-theme="dark"] .lp-prog i{background:linear-gradient(90deg,var(--accent2),var(--iris))} html[data-theme="dark"] .ai-badge{color:var(--iris);border-color:var(--line-strong)} html[data-theme="dark"] .ai-badge::before{background:var(--iris)} html[data-theme="dark"] .sl-note, html[data-theme="dark"] .kp-note, html[data-theme="dark"] .ksl-cb, html[data-theme="dark"] .hd-c{background:var(--iris-soft); border-color:rgba(200,136,230,.26);color:var(--mut)} html[data-theme="dark"] .kline.upcoming{border-left-color:var(--iris)} /* Метка режима чтения: заливка — цвет самого яруса, а он на тёмной теме светлый, поэтому чернила снова тёмные. В «Хроме» тут стоит color:#fff — на #C6A5FF это 1.9:1, то есть подпись пропала бы. */ html[data-theme="dark"] .vm-btn.on{color:#100B18} /* Подсказка на тёмной странице обязана отличаться от карточки — берёт золотую кайму, как было в старой теме. */ html[data-theme="dark"] .toast{background:var(--bg-3);border:1px solid var(--gold); color:var(--ink);box-shadow:var(--sh-2)} html[data-theme="dark"] .help-fab{background:rgba(30,22,41,.86); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); color:var(--mut);border:1px solid var(--line-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.55)} html[data-theme="dark"] .help-fab:hover, html[data-theme="dark"] .help-fab:focus-visible{border-color:var(--iris);color:var(--iris)} /* ====================================================================== 9. ЭКРАН ПЕСНИ (/dark/learn.html). Он объявляет свои токены инлайном ПОСЛЕ style.css — это «прививка от редизайна», сделанная нарочно. Правила ниже сильнее по специфичности (html[data-theme] против :root), поэтому прививку они снимают штатно, а не хаком. ТРИ ЦВЕТА, НЕ ЧЕТЫРЕ. Потолок цветовых кодов на экране — четыре [FHWA-RD-98-057], занято три: золото / нейтраль / циан. Это верхние строки списка BBC для текста поверх видео (белый, жёлтый, голубой); фиолетового и розового в том списке нет вовсе. СПЕТОЕ НА ТЁМНОМ ЗАГОРАЕТСЯ, а не темнеет: тон тот же, насыщенность полная. Сила сигнала 164 / 101 / 139 единиц против 75 у гашения яркостью. На светлой теме всё наоборот — там ореол даёт грязь. ====================================================================== */ html[data-theme="dark"]{ --ls-kr:#F6D0A4; --ls-kr-sung:#FFD000; --ls-kr-bg:rgba(255,208,0,.10); --ls-tr:#BDB4CC; --ls-tr-sung:#FFFFFF; --ls-tr-bg:rgba(255,255,255,.08); --ls-mean:#8AD9FA; --ls-mean-sung:#00EAFF; --ls-mean-bg:rgba(0,234,255,.10); } /* Спетое слово светится своим тоном. На светлой теме этого правила нет специально — там ореол читается как грязное пятно вокруг букв. */ html[data-theme="dark"] .ls-kr .ls-w > i{text-shadow:0 0 10px rgba(255,208,0,.55)} html[data-theme="dark"] .ls-tr .ls-w > i{text-shadow:0 0 10px rgba(255,255,255,.60)} html[data-theme="dark"] .ls-mean .ls-w > i{text-shadow:0 0 9px rgba(0,234,255,.60)} /* Липкая шапка с клипом. Тень у неё была холодная (расчёт под серебро) — на тёмном её просто не видно, границу держит только чёрная. */ html[data-theme="dark"] .ls-top{background:var(--bg-0);box-shadow:0 8px 20px rgba(0,0,0,.55)} /* Карточка песни: белая бумага с бронзовой кромкой → тёмная поверхность с золотой. Кромка остаётся золотой в обеих темах, это метка набора. */ html[data-theme="dark"] .ls-item{background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border-color:rgba(243,217,172,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 10px rgba(0,0,0,.45)} html[data-theme="dark"] .ls-item:last-child{border-bottom-color:rgba(243,217,172,.30)} html[data-theme="dark"] .ls-item:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(0,0,0,.5)} html[data-theme="dark"] .ls-find{background:var(--bg-1);border-color:rgba(243,217,172,.34);color:var(--ink); box-shadow:inset 0 2px 4px rgba(0,0,0,.40)} html[data-theme="dark"] .ls-find:focus{border-color:var(--accent2); box-shadow:inset 0 2px 4px rgba(0,0,0,.40),0 0 0 3px rgba(243,217,172,.20)} html[data-theme="dark"] .ls-online-m{background:var(--bg-1);border-color:var(--line)} html[data-theme="dark"] .ls-back, html[data-theme="dark"] .ls-pick{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); border-color:var(--line-strong);color:var(--mut); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 4px rgba(0,0,0,.45)} /* Пульт над текстом: главная кнопка остаётся золотом, остальные из белого стекла становятся тёмным. */ html[data-theme="dark"] .ls-dk:not(.main){ background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.45)} html[data-theme="dark"] .ls-ln.on{box-shadow:var(--sh-1),inset 0 0 0 1px rgba(200,136,230,.30)} /* Тумблер «играть подряд» одевается вместе со всем пультом — правила единого пульта живут в learn.html (31.07). Здесь их дублировать нельзя: получится два источника правды на одну кнопку, и следующая правка попадёт не в тот файл. */ html[data-theme="dark"] .ls-toast{color:var(--ink);border-color:rgba(243,217,172,.40); background:linear-gradient(180deg,rgba(48,36,66,.98),rgba(30,22,41,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.55)} /* ====================== 10. САМ ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ========================= Была плавающая пилюля в правом нижнем углу — снята 28.07 по правке Сармата: она ложилась на строки разбора песни и на кнопку помощи. Плавающий элемент, перекрывающий контент на мобиле, забракован юзабилити-тестами [Baymard, 15.10.2019], а экран песни у нас и без того плотный. Теперь это ОДНА круглая кнопка 44/48px, и она встаёт в уже существующую строку управления каждого экрана (кто куда — в theme.js): шапка сайта — рядом с языком, экран песни — в пульте «Песни / play / повтор / i», список песен — рядом с «Гримёркой». Ни одного нового слоя поверх содержимого, ни одного fixed-элемента. Стиль берётся от хоста, а не от темы: в шапке она стоит на тёмной планке (в обеих темах) — значит светлое стекло; внутри экрана песни идёт за фоном страницы, поэтому у неё два состояния. ========================================================================= */ .theme-btn{appearance:none;-webkit-appearance:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:44px;height:44px;padding:0;border-radius:999px;font:inherit; border:1px solid rgba(255,255,255,.22);color:#E7ECF6; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); transition:border-color 140ms,color 140ms,background 140ms,transform 100ms} .theme-btn:hover{border-color:rgba(237,199,162,.65);color:#fff;background:rgba(255,255,255,.22)} .theme-btn:active{transform:scale(.94)} .theme-btn svg{display:block} /* В шапке кнопка и язык — одна группа справа. Отступ auto переезжает на неё, иначе между ними разъедется вся свободная ширина строки. */ header .theme-btn{margin-left:auto} /* Соседний селектор, а не просто «.lang-wrap»: у языка в style.css стоит margin-left:auto, и именно он прижимает всю правую группу к краю. Если кнопка темы почему-то не встала (скрипт не доехал), правило сработать не должно — иначе язык и вход уедут вплотную к знаку. */ /* Зазор тема↔язык = зазору «Вход»↔«Регистрация» (правка Сармата 29.07). Зазор складывается из column-gap строки шапки и этого маргина, поэтому числа разные: gap строки 8px (6px до 420px), у пары вход/регистрация 10px (6px до 640px). Замерено браузером на 390/430/640/900. */ header .theme-btn ~ .lang-wrap{margin-left:2px} @media(max-width:640px){header .theme-btn ~ .lang-wrap{margin-left:-2px}} @media(max-width:420px){header .theme-btn ~ .lang-wrap{margin-left:0}} @media(max-width:560px){header .theme-btn{margin-left:auto;order:1}header .theme-btn ~ .lang-wrap{order:1}} /* Внутри экрана песни хост светлый (или тёмный) — кнопка одевается под пульт. */ #lsRoot .theme-btn{width:48px;height:48px; border-color:rgba(23,27,38,.16);color:#4E5766; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.60)); box-shadow:inset 0 1px 0 #fff,0 2px 8px rgba(23,32,56,.10)} #lsRoot .theme-btn:hover{border-color:rgba(194,134,90,.55);color:#8A5620; background:linear-gradient(180deg,#fff,#F7F9FC)} html[data-theme="dark"] #lsRoot .theme-btn{border-color:var(--line-strong);color:var(--mut); background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.45)} html[data-theme="dark"] #lsRoot .theme-btn:hover{border-color:var(--accent2);color:var(--accent2); background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08))} /* В списке песен она стоит в одной строке с «Гримёркой» и обязана сесть на ту же базовую линию: у .ls-back высота 44 и свой нижний отступ. */ .ls-list > .theme-btn{width:44px;height:44px;margin-left:8px;vertical-align:top; margin-bottom:var(--s3)}