/* ============================================================ ТЕМА ОФОРМЛЕНИЯ "КРАСНЫЙ РУБИН" — тёмная тема сайта. Покупается в магазине, включается через POST /api/site-theme. Применяется как класс .theme-ruby на (см. js/theme-starry.js). ФАЙЛ СГЕНЕРИРОВАН из css/theme-starry.css скриптом gen-dark-theme.js. Правки набора селекторов вносить в звёздную тему и перегенерировать, иначе темы разъедутся: новый компонент появится в одной и останется светлым пятном в остальных. Отличие от звёздной, помимо палитры: блоки светятся рубиновым и нет анимации на фоне. ============================================================ */ html.theme-ruby body { background: linear-gradient(160deg, #1a0509 0%, #2b0810 35%, #450d1c 70%, #170409 100%) !important; } /* Экраны-контейнеры (menu-screen и т.п.) обычно САМИ рисуют непрозрачный фон поверх всего (position:fixed;inset:0), из-за чего канвас со звёздами (z-index:0, см. ниже) оказался бы под ними и никогда не был виден. Делаем их прозрачными в этой теме — тёмный градиент и звёзды видны сквозь них с уровня body/canvas. */ html.theme-ruby .menu-screen, html.theme-ruby .spider-screen, html.theme-ruby .monopoly-screen, html.theme-ruby .mafia-screen, html.theme-ruby .modal-screen, html.theme-ruby .standalone-intro { background: transparent !important; } /* Лендинговые страницы игр (games/ИМЯ-ИГРЫ/index.html — "Монополия онлайн...", "Мафия онлайн..." и т.д., отдельные от самого игрового экрана) держат свою карточку-описание в .standalone-intro-card — та же "стеклянная" логика, что и у .menu-card/.game-card ниже (объединено с той же группой селекторов намеренно). Заголовки h1/h2 внутри неё объединены с группой .hero-title ниже (не отдельным правилом) — по необъяснённой причине браузер иногда молча "теряет" отдельно стоящее правило с этим конкретным селектором при парсинге (воспроизведено и подтверждено: rule count в разобранной таблице стилей на 1 меньше, чем количество правил в самом файле) — объединение с уже работающей группой надёжно обходит эту особенность. */ html.theme-ruby .standalone-home-link, html.theme-ruby .standalone-footnote { color: #d89aa6 !important; } /* Ночные оттенки карточек/панелей — те же полупрозрачные "стеклянные" блоки, что и в светлой теме, просто на тёмной подложке с холодным лунным акцентом вместо тёплого сиреневого. */ html.theme-ruby .menu-card, html.theme-ruby .game-card, html.theme-ruby .rating-panel, html.theme-ruby .auth-modal-card, html.theme-ruby .profile-modal-card, html.theme-ruby .standalone-intro-card { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.18) !important; box-shadow: 0 10px 40px rgba(24, 2, 8, 0.55) !important; color: #f8dee2; } html.theme-ruby .header-balance { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.25) !important; } html.theme-ruby .header-logo { background: linear-gradient(135deg, #ffb8c0, #ff6a80) !important; -webkit-background-clip: text !important; } html.theme-ruby .hero-title, html.theme-ruby .profile-header-name, html.theme-ruby .game-name, html.theme-ruby .standalone-intro-card h1, html.theme-ruby .standalone-intro-card h2 { color: #ffe4e8 !important; } html.theme-ruby .hero-sub, html.theme-ruby .game-desc, html.theme-ruby .game-players { color: #d8a2ac; } /* ============================================================ ПОЛНЫЙ ПРОХОД ПО ТЕКСТУ И ОСТАВШИМСЯ СВЕТЛЫМ БЛОКАМ ------------------------------------------------------------ Правило темы: тёмный фон -> весь текст интерфейса белый/светлый, светлый фон -> весь текст тёмный (как было). До этого раздела переопределялись только несколько заметных мест — здесь собраны ВСЕ оставшиеся классы сайта с жёстко заданным тёмно-фиолетовым (#3a2a4a и похожие) или приглушённо-серым (#9080b0 и похожие) текстом, из-за которых на тёмном фоне буквы становились еле видны или сливались совсем (ровно баг с никами в рейтинге и цифрами баланса на скриншотах). Карт самих игр (.spider-card, доска монополии и т.п.) это НЕ касается — у них всегда свой белый фон независимо от темы сайта, трогать не нужно. ============================================================ */ /* -- Заголовочный текст (был тёмно-фиолетовым #3a2a4a) -> светлый -- */ html.theme-ruby .menu-title, html.theme-ruby .auth-form-title, html.theme-ruby .auth-account-name, html.theme-ruby .header-avatar-menu-name, html.theme-ruby .header-balance .balance-amount, html.theme-ruby .header-avatar-menu-profile, html.theme-ruby .rating-title, html.theme-ruby .rname, html.theme-ruby .spider-title, html.theme-ruby .promo-mycode-history-code, html.theme-ruby .shop-item-name, html.theme-ruby #mafiaRoomCodeDisplay, html.theme-ruby .mafia-count-value, html.theme-ruby .mafia-lobby-player-row, html.theme-ruby .mafia-lobby-room-host { color: #ffe9ec !important; } /* -- Приглушённый серо-сиреневый текст (подписи, метки, второстепенные строки) -> светлее, чтобы не терялся на тёмном фоне -- */ html.theme-ruby .menu-sub, html.theme-ruby .auth-switch-link, html.theme-ruby .auth-why-note, html.theme-ruby .auth-tiny-note, html.theme-ruby .auth-modal-close, html.theme-ruby .auth-account-balance, html.theme-ruby .nick-row label, html.theme-ruby .games-label, html.theme-ruby .site-version-footer, html.theme-ruby .footer-telegram-link, html.theme-ruby .back-link, html.theme-ruby .hero-welcome, html.theme-ruby .profile-loading, html.theme-ruby .profile-tab, html.theme-ruby .profile-empty-note, html.theme-ruby .profile-history-date, html.theme-ruby .rating-empty, html.theme-ruby .rmeta, html.theme-ruby .rrank, html.theme-ruby .rating-my-rank, html.theme-ruby .spider-topbar-stats, html.theme-ruby .promo-hint, html.theme-ruby .promo-mycode-desc, html.theme-ruby .promo-empty, html.theme-ruby .shop-empty-text, html.theme-ruby .shop-item-cat, html.theme-ruby .shop-item-desc, html.theme-ruby .standalone-intro-card p, html.theme-ruby .mafia-switch-label, html.theme-ruby .mafia-role-chip-label, html.theme-ruby .lobby-list-title, html.theme-ruby .lobby-list-empty, html.theme-ruby .mafia-lobby-room-meta { color: #e0aeb6 !important; } html.theme-ruby .mafia-role-chip:has(input:checked) .mafia-role-chip-label { color: #ffb0c4 !important; } html.theme-ruby .rating-my-rank b { color: #ffb8c0 !important; } /* -- Поля ввода (логин/пароль/ник/промокод) — были белыми с тёмным текстом, теперь та же лунная "стеклянная" подложка -- */ html.theme-ruby .auth-input, html.theme-ruby .nick-input, html.theme-ruby .promo-input { background: rgba(46, 11, 20, 0.5) !important; border-color: rgba(255, 88, 112, 0.3) !important; color: #ffe9ec !important; } /* -- Оставшиеся непрозрачные светлые "коробки" — карточка аккаунта, строки рейтинга, выпадающее меню аватарки, карточки магазина, кнопка "Назад" в играх, верхняя панель Пасьянса, неактивные вкладки рейтинга -- все переводим на тот же лунный полупрозрачный стиль -- */ html.theme-ruby .auth-account-card, html.theme-ruby .rrow, html.theme-ruby .header-avatar-menu, html.theme-ruby .shop-item-card, html.theme-ruby .mono-back, html.theme-ruby .spider-topbar, html.theme-ruby .spider-undo-btn, html.theme-ruby .net-auth-required-box, html.theme-ruby .net-btn, html.theme-ruby .lang-toggle-btn, html.theme-ruby .mafia-settings-section, html.theme-ruby .mafia-role-chip, html.theme-ruby .mafia-lobby-room-card, html.theme-ruby .mafia-lobby-player-row, html.theme-ruby .mafia-count-btn, html.theme-ruby .room-row, html.theme-ruby .net-player-row, html.theme-ruby #netRoomCodeDisplay, html.theme-ruby .room-code-display, html.theme-ruby .net-shuffle-btn, html.theme-ruby .panel, html.theme-ruby .inp, html.theme-ruby .btn-ghost, html.theme-ruby .mafia-add-bot-btn { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.22) !important; color: #ffe9ec !important; } html.theme-ruby .panel-title, html.theme-ruby .room-name { color: #ffe9ec !important; } html.theme-ruby .or-divider { color: #e0aeb6 !important; } html.theme-ruby .or-divider::before, html.theme-ruby .or-divider::after { background: rgba(255, 88, 112, 0.22) !important; } html.theme-ruby .net-auth-required-text, html.theme-ruby .net-lobby-hint, html.theme-ruby .net-player-order-label, html.theme-ruby .room-meta, html.theme-ruby .room-players, html.theme-ruby .online-label { color: #e0aeb6 !important; } html.theme-ruby .net-player-name { color: #ffe9ec !important; } html.theme-ruby .game-pill, html.theme-ruby .header-back-link { background: rgba(200, 60, 84, 0.18) !important; border-color: rgba(255, 88, 112, 0.3) !important; color: #ffb4c2 !important; } html.theme-ruby .room-icon { background: rgba(255, 88, 112, 0.12) !important; } html.theme-ruby .room-join { background: rgba(200, 60, 84, 0.25) !important; color: #ffb4c2 !important; } html.theme-ruby .online-count { color: #ffe9ec !important; } /* Экран выбора сложности в Пасьянсе — своя отдельная светлая "стеклянная" коробка карточек выбора, отдельная от всего перечисленного выше. */ html.theme-ruby .spider-difficulty-screen h1 { color: #ffe9ec !important; } html.theme-ruby .spider-difficulty-screen p, html.theme-ruby .spider-diff-btn .diff-sub { color: #e0aeb6 !important; } html.theme-ruby .spider-diff-btn { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.22) !important; } html.theme-ruby .spider-diff-btn .diff-label { color: #ffe9ec !important; } html.theme-ruby .spider-win-card { background: rgba(62, 16, 27, 0.92) !important; } html.theme-ruby .spider-win-card h2 { color: #ffe9ec !important; } html.theme-ruby .spider-win-card p { color: #e0aeb6 !important; } html.theme-ruby .rrow.top1 { background: linear-gradient(135deg, rgba(245, 200, 66, 0.16), rgba(245, 200, 66, 0.05)) !important; border-color: rgba(224, 160, 32, 0.3) !important; } html.theme-ruby .rrow.me { background: rgba(200, 60, 84, 0.16) !important; border-color: rgba(255, 110, 130, 0.4) !important; } html.theme-ruby .rtab { background: rgba(255, 88, 112, 0.14) !important; color: #ecc0c6 !important; } html.theme-ruby .rtab:hover { background: rgba(255, 88, 112, 0.24) !important; } html.theme-ruby .rtab.active { color: #fff !important; } html.theme-ruby .spider-topbar-stats b, html.theme-ruby .spider-back-btn { color: #ffe9ec !important; } html.theme-ruby .promo-section-title { color: #f4d0d6 !important; } html.theme-ruby .promo-mycode { background: rgba(255, 88, 112, 0.12) !important; border-color: rgba(255, 88, 112, 0.4) !important; color: #ffb8c0 !important; } html.theme-ruby .promo-copy-btn, html.theme-ruby .shop-item-btn-owned, html.theme-ruby .promo-redemption-reward { background: rgba(255, 88, 112, 0.14) !important; color: #ffb8c0 !important; } html.theme-ruby .auth-logout-btn, html.theme-ruby .spider-restart-btn { background: rgba(224, 96, 96, 0.14) !important; border-color: rgba(224, 96, 96, 0.4) !important; } /* Полотно фоновой анимации темы — рисуется в js/theme-starry.js, растянуто на весь экран позади контента (z-index ниже любого интерфейсного элемента), клики сквозь него не блокируются. Канвас ОДИН на все темы: у звёздной на нём падают звёзды, у "Крови системы" — ASCII-дождь. Тема без анимации просто его не показывает. */ /* z-index:-1, а НЕ 0. Элемент с отрицательным z-index рисуется поверх фона родителя, но под всем содержимым в потоке — именно это нам и нужно. При z-index:0 канвас оказывался выше любого непозиционированного контента: на экране выбора сложности в пасьянсе (.spider-difficulty-screen без position/z-index) символы дождя шли прямо по заголовку и тексту. Полагаться на то, что «у всех экранов и так z-index 500+», нельзя — у пасьянса его нет. */ #themeAnimCanvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; } /* Контентные слои сайта и так уже позиционированы поверх (menu-screen и т.д. используют z-index:500+), поэтому канвасу достаточно z-index:0 — он ложится прямо на фон, под всем остальным. */ /* ============================================================ КОМПОНЕНТЫ, ПОЯВИВШИЕСЯ ПОЗЖЕ САМОЙ ТЕМЫ Магазин, профиль и промокоды переписывались уже после того, как этот файл был написан, поэтому их поверхности оставались светлыми на тёмном фоне — светлый текст на светлой плашке. Держим их здесь, вместе с остальными: css/theme-ruby.css генерируется из этого файла, так что добавленное сюда автоматически попадает и во вторую тёмную тему. ============================================================ */ html.theme-ruby .shop-card, html.theme-ruby .profile-stat-big, html.theme-ruby .profile-stat-game-row, html.theme-ruby .profile-cosmetic-card, html.theme-ruby .profile-pawn-card, html.theme-ruby .profile-history-row, html.theme-ruby .shop-exchange-box { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.18) !important; color: #ffe9ec !important; } html.theme-ruby .shop-card-name, html.theme-ruby .shop-section-title, html.theme-ruby .profile-stat-big-num, html.theme-ruby .profile-stat-game-name, html.theme-ruby .profile-cosmetic-name, html.theme-ruby .profile-pawn-label, html.theme-ruby .profile-history-game, html.theme-ruby .profile-locker-section-title, html.theme-ruby .profile-settings-label, html.theme-ruby .profile-header-name, html.theme-ruby .shop-card-price { color: #ffe9ec !important; } html.theme-ruby .shop-card-desc, html.theme-ruby .shop-card-cat, html.theme-ruby .shop-section-note, html.theme-ruby .profile-stat-big-label, html.theme-ruby .profile-stat-game-sub, html.theme-ruby .profile-cosmetic-desc, html.theme-ruby .profile-history-date, html.theme-ruby .profile-settings-hint, html.theme-ruby .profile-cosmetics-note, html.theme-ruby .shop-empty-text, html.theme-ruby .promo-mycode-desc, html.theme-ruby .promo-hint { color: #e0aeb6 !important; } /* Блок фактов внутри карточки товара и вкладки-разделы */ html.theme-ruby .shop-card-facts { background: rgba(255, 88, 112, 0.1) !important; } html.theme-ruby .shop-fact { color: #ecc0c6 !important; } html.theme-ruby .shop-fact b { color: #ffe9ec !important; } html.theme-ruby .shop-tab, html.theme-ruby .profile-tab { color: #d8a2ac !important; } html.theme-ruby .shop-tab.active, html.theme-ruby .profile-tab.active { color: #ffb8c0 !important; } html.theme-ruby .shop-tabs, html.theme-ruby .profile-tabs { border-color: rgba(255, 88, 112, 0.18) !important; } html.theme-ruby .profile-modal-header, html.theme-ruby .rating-my-rank { border-color: rgba(255, 88, 112, 0.18) !important; } /* Поля ввода внутри магазина/промокодов */ html.theme-ruby .shop-exchange-input, html.theme-ruby .promo-input { background: rgba(46, 11, 20, 0.5) !important; border-color: rgba(255, 88, 112, 0.22) !important; color: #ffe9ec !important; } /* Блок "нужна подтверждённая почта" и статус почты в профиле: тёмный текст по светлой янтарной подложке на тёмном фоне не читается. */ html.theme-ruby .promo-locked-title, html.theme-ruby .profile-email-status.pending { color: #f5d060 !important; } html.theme-ruby .promo-locked-text { color: #cfc6e8 !important; } html.theme-ruby .profile-email-status.ok { color: #8fe0a4 !important; } /* Поле "получаешь" в обмене валюты. Это не input, а подсвеченная золотом плашка; её тёмно-золотой текст (#8a6a20) на тёмном фоне не читается, поэтому осветляем текст и приглушаем подложку. */ html.theme-ruby .shop-exchange-output { background: rgba(245, 208, 66, 0.10) !important; border-color: rgba(245, 208, 66, 0.26) !important; color: #f5d060 !important; } /* Подложка превью фишек в магазине — в светлой теме лавандовая, на тёмном фоне выглядела бы светлым пятном. Золотую подложку пакетов звёзд (.shop-preview-star) намеренно не трогаем — золото смысловое. */ html.theme-ruby .shop-preview-pawn { background: linear-gradient(160deg, rgba(62, 16, 27, 0.9), rgba(46, 11, 20, 0.95)) !important; } /* ============================================================ ПОЛОСЫ ПРОКРУТКИ Системная полоса светлая и на тёмном фоне выглядит белой лентой — особенно заметно в магазине и профиле, где прокрутка идёт внутри модалки. Красим и саму страницу, и все внутренние области. Цвета берутся из палитры темы, поэтому у каждой тёмной темы полоса своя (файлы генерируются из этого, см. gen-dark-theme.js). ============================================================ */ html.theme-ruby ::-webkit-scrollbar { width: 10px; height: 10px; } html.theme-ruby ::-webkit-scrollbar-track { background: rgba(46, 11, 20, 0.5); border-radius: 100px; } html.theme-ruby ::-webkit-scrollbar-thumb { background: rgba(255, 88, 112, 0.22); border-radius: 100px; } html.theme-ruby ::-webkit-scrollbar-thumb:hover { background: rgba(255, 88, 112, 0.4); } html.theme-ruby ::-webkit-scrollbar-corner { background: transparent; } /* Firefox — своё свойство, наследуется вниз по дереву от корня. */ html.theme-ruby { scrollbar-width: thin; scrollbar-color: rgba(255, 88, 112, 0.22) rgba(46, 11, 20, 0.5); } /* ============================================================ БАРАБАН УДАЧИ Страница появилась позже темы, поэтому её заголовок, подводка и элементы управления оставались тёмными на тёмном фоне — читать было нечем. Сам круг не трогаем: его сектора и подписи заданы своими цветами и одинаково читаются в любой теме. ============================================================ */ html.theme-ruby .wheel-title { color: #ffe9ec !important; } html.theme-ruby .wheel-lead, html.theme-ruby .wheel-cost-label { color: #e0aeb6 !important; } html.theme-ruby .wheel-back { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.22) !important; color: #ffb8c0 !important; } html.theme-ruby .wheel-bal { background: rgba(62, 16, 27, 0.55) !important; color: #ffe9ec !important; } /* Только НЕактивные кнопки: у выбранной свой фирменный градиент с белым текстом, и перекрашивать её под тему не нужно — иначе светлый текст становится приглушённым и выбранная ставка перестаёт выделяться. */ html.theme-ruby .wheel-bet-btn:not(.active) { background: rgba(62, 16, 27, 0.55) !important; border-color: rgba(255, 88, 112, 0.22) !important; color: #ecc0c6 !important; } html.theme-ruby .wheel-bet-btn:not(.active):hover { background: rgba(62, 16, 27, 0.8) !important; } html.theme-ruby .wheel-result.lose { color: #e0aeb6 !important; } html.theme-ruby .wheel-demo-note { background: rgba(245, 200, 66, 0.1) !important; border-color: rgba(245, 200, 66, 0.3) !important; color: #f0d68f !important; } /* Палитра барабана удачи под эту тему (см. --wheel-* в games/roulette/wheel.css). Смысловое деление сохраняем: «пусто» — самый тусклый, ×5 — золото. Меняются только базовые оттенки, чтобы круг сидел на ночном фоне, а не светился как в светлой теме. */ /* ============================================================ ПАЛИТРА ИГРОВОГО ЭКРАНА МАФИИ ПОД ЭТУ ТЕМУ ------------------------------------------------------------ Задаётся на ПЕРЕСЕЧЕНИИ темы и фазы: у мафии день и ночь — игровой сигнал, и внутри любой темы день обязан оставаться заметно светлее ночи. Поэтому здесь два набора, а не один общий «тёмный». Значения по умолчанию (светлая тема сайта) живут в games/mafia/mafia.css, здесь только перекрытие. ============================================================ */ /* ============================================================ ПОДСВЕТКА БЛОКОВ Внешнее свечение + тонкая внутренняя грань, чтобы панели выглядели подсвеченными изнутри, а не просто перекрашенными. ============================================================ */ html.theme-ruby .menu-card, html.theme-ruby .game-card, html.theme-ruby .rating-panel, html.theme-ruby .auth-modal-card, html.theme-ruby .profile-modal-card, html.theme-ruby .standalone-intro-card, html.theme-ruby .shop-card, html.theme-ruby .panel { box-shadow: 0 0 0 1px rgba(255, 88, 112, 0.16), 0 4px 26px rgba(220, 30, 60, 0.22), inset 0 1px 0 rgba(255, 150, 170, 0.12) !important; } html.theme-ruby .game-card:hover, html.theme-ruby .shop-card:hover { box-shadow: 0 0 0 1px rgba(255, 88, 112, 0.3), 0 10px 38px rgba(230, 30, 60, 0.4), inset 0 1px 0 rgba(255, 150, 170, 0.18) !important; } html.theme-ruby .shop-tab.active, html.theme-ruby .profile-tab.active, html.theme-ruby .rtab.active { background: linear-gradient(135deg, rgba(200, 60, 84, 0.32), rgba(200, 60, 84, 0.14)) !important; box-shadow: inset 0 0 0 1px rgba(255, 88, 112, 0.3), 0 0 14px rgba(220, 30, 60, 0.22) !important; color: #ffb4c2 !important; } html.theme-ruby .hero-title span { background: linear-gradient(135deg, #ff8fa3, #e01e3c) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ ФИРМЕННЫЙ ГРАДИЕНТ В светлой теме кнопки, аватары и логотип используют фиолетовый градиент бренда — на тёмном цветном фоне он выбивался бы сиреневым пятном. Список селекторов = все места в css/menu.css с этим градиентом. ============================================================ */ html.theme-ruby .nick-login-btn, html.theme-ruby .auth-submit-btn, html.theme-ruby .game-icon, html.theme-ruby .header-login-btn, html.theme-ruby .header-avatar, html.theme-ruby .profile-header-avatar, html.theme-ruby .game-card .beta-badge, html.theme-ruby .game-card .game-btn, html.theme-ruby .profile-settings-save-btn, html.theme-ruby .promo-redeem-btn, html.theme-ruby .rava, html.theme-ruby .wheel-spin-btn, html.theme-ruby .wheel-bet-btn.active, html.theme-ruby .wheel-auth-btn, html.theme-ruby .shop-btn { background: linear-gradient(135deg, #e0526e, #a8102e) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(200, 20, 50, 0.4) !important; } html.theme-ruby .header-logo { background: linear-gradient(135deg, #ff8fa3, #e01e3c) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html.theme-ruby .shop-btn-owned, html.theme-ruby .rating-retry-btn, html.theme-ruby .promo-copy-btn { background: rgba(200, 60, 84, 0.18) !important; border-color: rgba(255, 88, 112, 0.3) !important; color: #ffb4c2 !important; box-shadow: none !important; } /* Золотую валюту НЕ трогаем: монеты и звёзды должны остаться узнаваемо золотыми в любой теме — это смысловой цвет, а не оформление. */ /* ============================================================ ПАЛИТРА БАРАБАНА УДАЧИ Сектора красятся из этих переменных (см. --wheel-* в games/roulette/wheel.css). Смысловое деление одинаково во всех темах: «пусто» самый тусклый, ×5 — золото. Меняется только базовый оттенок, чтобы круг сидел на фоне темы, а не выглядел чужим. ============================================================ */ html.theme-ruby { --wheel-nothing: #3a1018; --wheel-half: #6a1c30; --wheel-back: #a82440; --wheel-x2: #8a3a2a; --wheel-x5: #c9922c; --wheel-cosmetic:#8e2456; --wheel-text: #ffeef0; --wheel-rim: #7a1c33; --wheel-hub: #7a1830; } /* ============================================================ ПАЛИТРА ИГРОВОГО ЭКРАНА МАФИИ Два набора на тему: день и ночь. Внутри темы день СВЕТЛЕЕ ночи — смена фаз это игровой сигнал, по нему считывают фазу быстрее, чем по надписи, и уравнивать их нельзя. ============================================================ */ html.theme-ruby .mafia-screen{ --mf-bg:linear-gradient(135deg,#4a1220 0%,#3c0e1a 45%,#2a0812 100%); --mf-panel:rgba(110,30,46,0.45); --mf-panel-2:rgba(96,26,40,0.66); --mf-border:rgba(255,120,140,0.22); --mf-divider:rgba(255,120,140,0.18); --mf-text:#ffe8ec; --mf-text-dim:#e6bcc4; --mf-text-faint:#c08e99; --mf-accent:#f08fa4; --mf-accent-soft:rgba(220,70,100,0.18); --mf-accent-text:#ffb3c1; --mf-accent-ring:rgba(220,70,100,0.40); --mf-timer:#ffc2ce; --mf-timer-glow:0 0 12px rgba(220,70,100,0.45); --mf-card-shadow:0 10px 28px rgba(30,4,10,0.5); --mf-mobile-panel:rgba(48,12,22,0.96); --mf-mobile-text:#ffe8ec; --mf-mobile-faint:#c08e99; --mf-good:#7ad48c; --mf-bad:#f0889c; --mf-menu-bg:#3c0e1a; --mf-vote:#ffb0c0; --mf-blob-1:rgba(200,40,70,0.32); --mf-blob-2:rgba(150,30,60,0.28); } html.theme-ruby .mafia-screen.night{ --mf-bg:linear-gradient(135deg,#26060f 0%,#1c040b 50%,#120206 100%); --mf-panel:rgba(48,12,22,0.60); --mf-panel-2:rgba(54,14,25,0.75); --mf-border:rgba(255,120,140,0.13); --mf-divider:rgba(255,120,140,0.10); --mf-text:#f7dde2; --mf-text-dim:#c49aa4; --mf-text-faint:#96707c; --mf-accent:#e08b9e; --mf-accent-soft:rgba(220,70,100,0.12); --mf-accent-text:#e08b9e; --mf-accent-ring:rgba(220,70,100,0.26); --mf-timer:#f0a8b8; --mf-timer-glow:0 0 14px rgba(220,70,100,0.55); --mf-card-shadow:0 10px 28px rgba(0,0,0,0.6); --mf-good:#7ad48c; --mf-bad:#f0889c; --mf-menu-bg:#1c040b; --mf-vote:#ffb0c0; --mf-blob-1:rgba(160,20,50,0.28); --mf-blob-2:rgba(110,15,40,0.24); }