/* * Russian keyboard — скин «Dark». ТРЕТИЙ скин инструмента (первый — Skeuo, второй — Light). * * ОСОБЕННОСТЬ: этот скин красит не только инструмент, но и СТРАНИЦУ ВОКРУГ — иначе тёмная * клавиатура на белом листе выглядит дырой. При этом движок сайта под тему НЕ ПРАВИТСЯ ни на * строку: сайт целиком собран на токенах `--tls-*` (assets/css/theme.css), и мы просто * переопределяем их у корня документа — отсюда, из файла инструмента. Признак темы (`data-rkbd-theme` * на ) ставит JS инструмента; ушёл со страницы — тема исчезла вместе с ней. * * Почему это не нарушает правило «скин заперт под .rkbd[data-skin]»: правило бережёт СОСЕДНИЕ СКИНЫ * от протечек, а тут протекать некуда — признак темы живёт ровно столько, сколько открыт инструмент, * и ставится только им. Сами стили, как и требует конвенция, лежат в инструменте. */ /* ───────────────────────── Страница вокруг инструмента ───────────────────────── Только ПАЛИТРА: размеры, отступы и шрифты сайта не трогаем — это его дело, а не наше. */ html[data-rkbd-theme="dark"] { /* Браузеру: рисуй свои полосы прокрутки, поля и выпадашки в тёмном. Без этого на тёмной странице остаются ослепительно белые системные элементы. */ color-scheme: dark; --tls-bg: #14171c; --tls-surface: #1b1f26; --tls-text: #e3e7ee; --tls-text-muted: #98a1b0; --tls-border: #2f3742; /* Синий оригинала на тёмном не читается — берём светлее, чтобы ссылки оставались ссылками. */ --tls-accent: #7aa9ff; --tls-accent-dark: #a3c4ff; --tls-link-home: #7aa9ff; --tls-highlight: #e8ae2e; /* жёлтый hover карточек: чуть глуше, иначе жжёт глаз */ /* Шапка и меню: тот же синий, но приглушённый до ночного. */ --tls-header-bg: #1c2740; --tls-header-hover: #2a3757; --tls-header-text: #dde5f4; --tls-menu-bg: #1b1f26; --tls-menu-hover: #262d38; --tls-menu-active: #2a3757; --tls-menu-text: #e3e7ee; /* Карточки инструментов (листинг и «See also»). */ --tls-item-bg: #23304d; --tls-item-shot-border: #0f1218; --tls-item-shadow: 0 1px 4px rgba(0, 0, 0, .6); --tls-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* ───────────────────────── Инструмент ───────────────────────── */ .rkbd[data-skin="dark"] { --r-accent: #7aa9ff; --r-accent-soft: #22304d; --r-ink: #e6eaf2; --r-muted: #98a1b0; --r-line: #2f3742; --r-key-line: #333c49; --r-special: #232a34; --r-surface: #1b1f26; --r-shot: #7aa9ff; } /* Кнопки панели — того же материала, что клавиши: блик сверху, тёмная подошва снизу, вдавливание при нажатии. В базовом скине они плоские, и на тёмном это особенно заметно. */ .rkbd[data-skin="dark"] .rkbd__lang, .rkbd[data-skin="dark"] .rkbd__btn { background: linear-gradient(180deg, #2b333f 0%, #232a34 100%); border-color: #3b4552; box-shadow: 0 2px 0 #0e1218, 0 4px 9px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); } @media (hover: hover) { .rkbd[data-skin="dark"] .rkbd__lang:hover, .rkbd[data-skin="dark"] .rkbd__btn:hover { border-color: #4b5a6e; background: linear-gradient(180deg, #333c4a 0%, #2a323d 100%); } } /* Базовый скин гасит тень у сфокусированной кнопки (общесайтовое правило «без обрамления фокуса») — вместе с ней пропал бы и объём. Возвращаем ровно ту же тень, обрамления при этом не появляется. */ .rkbd[data-skin="dark"] .rkbd__lang:focus, .rkbd[data-skin="dark"] .rkbd__lang:focus-visible, .rkbd[data-skin="dark"] .rkbd__btn:focus, .rkbd[data-skin="dark"] .rkbd__btn:focus-visible { border-color: #3b4552; box-shadow: 0 2px 0 #0e1218, 0 4px 9px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); } .rkbd[data-skin="dark"] .rkbd__lang:active, .rkbd[data-skin="dark"] .rkbd__btn:active { transform: translateY(2px); box-shadow: 0 0 0 #0e1218, 0 1px 3px rgba(0, 0, 0, .4), inset 0 2px 5px rgba(0, 0, 0, .5); } @media (hover: hover) { /* Пункты выпадашек — плоские, они и должны быть плоскими: это список, а не клавиши. */ .rkbd[data-skin="dark"] .rkbd__langitem:hover, .rkbd[data-skin="dark"] .rkbd__skinitem:hover, .rkbd[data-skin="dark"] .rkbd__moreitem:hover { background: #2b333f; } } .rkbd[data-skin="dark"] .rkbd__btn .bi, .rkbd[data-skin="dark"] .rkbd__moreitem .bi { color: #9aa4b4; } .rkbd[data-skin="dark"] .rkbd__note .bi { color: #7f8ba3; } .rkbd[data-skin="dark"] .rkbd__langmenu, .rkbd[data-skin="dark"] .rkbd__skinmenu, .rkbd[data-skin="dark"] .rkbd__moremenu { box-shadow: 0 10px 26px rgba(0, 0, 0, .55); } .rkbd[data-skin="dark"] .rkbd__area::placeholder { color: #6d7788; } .rkbd[data-skin="dark"] .rkbd__area:focus { border-color: #3d4a63; } .rkbd[data-skin="dark"] .rkbd__sound .rkbd__switch, .rkbd[data-skin="dark"] .rkbd__moresound .rkbd__switch { background: #3a4250; } .rkbd[data-skin="dark"] .rkbd__sound .rkbd__switch::after, .rkbd[data-skin="dark"] .rkbd__moresound .rkbd__switch::after { background: #cdd4df; } /* Разделитель настроек в меню «⋯» на тёмном — в тон тёмных линий. */ .rkbd[data-skin="dark"] .rkbd__moresep { background: #2b333f; } /* Корзинка очистки в поле: приглушённая иконка, при наведении — мягкая тёмная подложка. */ .rkbd[data-skin="dark"] .rkbd__clear { color: #8a94a6; } @media (hover: hover) { .rkbd[data-skin="dark"] .rkbd__clear:hover { background: #2b333f; color: #e6ebf2; } } /* Всплывашка на тёмном должна быть СВЕТЛЕЕ фона, иначе её не видно. */ .rkbd[data-skin="dark"] .rkbd__toast { background: rgba(60, 70, 86, .97); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); } /* ───────────────────────── Клавиши ───────────────────────── ОБЪЁМ НА ТЁМНОМ СТРОИТСЯ ИНАЧЕ, ЧЕМ НА СВЕТЛОМ. Чёрная тень под клавишей на тёмном корпусе не видна вовсе — она сливается с фоном, и клавиатура выглядит плоской наклейкой (владелец, 2026-07-21: «пропала объёмность, зажатия кнопок нет»). Поэтому глубину здесь дают три вещи: • светлая грань СВЕРХУ (inset-блик) — по ней глаз читает, что клавиша выпуклая; • «подошва» снизу цветом ТЕМНЕЕ корпуса (#0e1218 против панели #1b1f26) — она и есть высота; • лёгкий градиент по вертикали, чтобы верх клавиши был светлее низа. Тень-размытие оставлена, но она тут вспомогательная. */ .rkbd[data-skin="dark"] .kb { --kb-key-bg: linear-gradient(180deg, #313a48 0%, #2a323d 52%, #242b34 100%); --kb-key-fg: #e6eaf2; --kb-key-border: #3f4a5a; --kb-key-shadow: 0 3px 0 #0e1218, 0 6px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .35); --kb-special-bg: linear-gradient(180deg, #272f3a 0%, #1f252e 100%); --kb-special-fg: #b7c0ce; --kb-press-bg: #242b34; --kb-hint-fg: #7d8797; --kb-corner-fg: #96a1b2; --kb-pop-bg: #2b323e; --kb-active-indicator: #7aa9ff; --kb-lock-indicator: #7aa9ff; } /* Служебные клавиши стоят на своей, ещё более тёмной подошве — как в скевоморфном скине. */ .rkbd[data-skin="dark"] .kb__key[data-type="action"], .rkbd[data-skin="dark"] .kb__key[data-type="layer"] { border-color: #38424f; box-shadow: 0 3px 0 #0a0d12, 0 6px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); } @media (hover: hover) { .rkbd[data-skin="dark"] .kb__key:hover { border-color: #4b5a6e; background: linear-gradient(180deg, #384252 0%, #2f3846 52%, #29313c 100%); } } /* НАЖАТИЕ: клавиша уходит вниз ровно на высоту подошвы — она «садится» на корпус. Подошва при этом исчезает, а внутрь ложится тень: без неё вдавливания не видно, сколько цвет ни меняй. */ .rkbd[data-skin="dark"] .kb__key[data-press], .rkbd[data-skin="dark"] .kb__key[data-active] { transform: translateY(3px); background: linear-gradient(180deg, #20262e 0%, #252c36 100%); box-shadow: 0 0 0 #0e1218, 0 2px 5px rgba(0, 0, 0, .45), inset 0 2px 5px rgba(0, 0, 0, .55); } .rkbd[data-skin="dark"] .kb__key[data-type="action"][data-press], .rkbd[data-skin="dark"] .kb__key[data-type="layer"][data-press], .rkbd[data-skin="dark"] .kb__key[data-type="action"][data-active] { box-shadow: 0 0 0 #0a0d12, 0 2px 5px rgba(0, 0, 0, .45), inset 0 2px 5px rgba(0, 0, 0, .55); } /* ─────────── Тач-грань: то же оформление, но БЕЗ РАЗМЫТИЯ ─────────── Замер на живом телефоне (панель ?perf=1): светлый скин 64 мс на нажатие, этот 208. Разница — размытая тень у клавиш: телефон пересчитывает размытие при каждой перерисовке. Оставляем «подошву» без размытия (она и держит объём) и внутренние блики. На десктопе всё как было. */ .rkbd[data-skin="dark"] .kb[data-face="mobile"] { --kb-key-shadow: 0 3px 0 #0e1218, inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .35); } /* Нажатие — только сменой фона: клавиша не «садится», тень не пересчитывается. Залипший регистр (`data-active`) правило не трогает — он держится долго и рисуется один раз. */ .rkbd[data-skin="dark"] .kb[data-face="mobile"] .kb__key[data-press] { transform: none; box-shadow: 0 3px 0 #0e1218, inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .35); } .rkbd[data-skin="dark"] .kb[data-face="mobile"] .kb__key[data-type="action"], .rkbd[data-skin="dark"] .kb[data-face="mobile"] .kb__key[data-type="layer"], .rkbd[data-skin="dark"] .kb[data-face="mobile"] .kb__key[data-type="action"][data-press], .rkbd[data-skin="dark"] .kb[data-face="mobile"] .kb__key[data-type="layer"][data-press] { box-shadow: 0 3px 0 #0a0d12, inset 0 1px 0 rgba(255, 255, 255, .05); } /* Половинки раздвоенной клавиши (↑/↓) вдвое ниже обычных — подошва в 3px была бы им почти в треть. Селекторы с [data-type] и НИЖЕ общих правил служебных клавиш: специфичность равная, решает порядок. */ .rkbd[data-skin="dark"] .kb__key--half[data-type="action"] { box-shadow: 0 2px 0 #0a0d12, 0 4px 8px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); } .rkbd[data-skin="dark"] .kb__key--half[data-type="action"][data-press] { transform: translateY(2px); box-shadow: 0 0 0 #0a0d12, 0 2px 4px rgba(0, 0, 0, .4), inset 0 2px 4px rgba(0, 0, 0, .5); } /* Вырезанная полоска на пробеле — как на настоящей клавиатуре. */ .rkbd[data-skin="dark"] .kb__key[data-a="space"]::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: 9px; height: 2px; border-radius: 999px; background: #161b22; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } @media (hover: hover) { .rkbd[data-skin="dark"] .kb__pop-key:hover { background: #3a4250; } }