/* ============================================================================ Чёрно-золотой проход: вычищаем остатки сине-фиолетовой палитры и красим ключевые кнопки в золото проекта. Файл — перекрытие: он красит элементы, уже описанные в css экранов и игр, поэтому обязан стоять в ПОСЛЕДНИМ. За это отвечает hoistOverrideStyles() в app_scripts.html (ключ blackGold в OVERRIDE_STYLE_KEYS) — она возвращает файл в конец head после загрузки каждой ленивой группы. ========================================================================= */ :root { --yak-blk-surface: linear-gradient(180deg, rgba(24, 24, 24, .94), rgba(13, 13, 13, .97)); --yak-blk-soft: linear-gradient(180deg, rgba(34, 34, 34, .82), rgba(17, 17, 17, .9)); --yak-blk-field: linear-gradient(180deg, rgba(15, 15, 15, .98), rgba(9, 9, 9, .99)); --yak-blk-line: rgba(255, 255, 255, .14); --yak-blk-line-strong: rgba(255, 255, 255, .26); --yak-blk-gold-text: #f0dca0; --yak-blk-gold-fill: #d6b871; --yak-blk-gold-line: rgba(255, 233, 175, .55); --yak-blk-gold-ink: #3a2a08; } /* ========================================================================== 1. Кнопки «+» у баланса — золотые ========================================================================== */ #balance .top-balance-plus, #balance.floating-balance-card.compact-balance-toolbar .top-balance-plus { /* Ровная золотая заливка: без градиента, без обводки, без свечения. */ background: #e2c479 !important; background-image: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; color: #2a1e06 !important; -webkit-text-fill-color: #2a1e06 !important; text-shadow: none !important; font-weight: 900 !important; } /* ========================================================================== 2. Risk Bar — шар серый вместо фиолетового ========================================================================== */ #solo-riskbar-panel .riskbar-ball { background: radial-gradient(circle at 32% 28%, #ffffff 0 12%, #d6d8dd 38%, #8e939c 66%, #3a3d44 100%) !important; box-shadow: 0 0 14px rgba(255, 255, 255, .18) !important; } /* ========================================================================== 3. Задания — «Открыть канал» золотая ========================================================================== */ #tasks-screen .gold-btn.task-premium-btn, .gold-btn.task-premium-btn { background: var(--yak-blk-gold-fill) !important; border: 1px solid var(--yak-blk-gold-line) !important; color: var(--yak-blk-gold-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34) !important; text-shadow: none !important; font-weight: 900 !important; } /* ========================================================================== 4. Бонусное колесо ========================================================================== */ /* Неактивная кнопка «Получить бонус» — чёрная, а не тёмно-синяя. */ #free-screen .daily-gold-btn, #free-screen .daily-gold-btn:disabled { background: var(--yak-blk-surface) !important; border: 1px solid var(--yak-blk-line) !important; color: rgba(236, 236, 236, .72) !important; box-shadow: none !important; } /* Активная остаётся золотой (правило из daily_bonus.css), просто повторяем его здесь, потому что базовое правило выше стало сильнее по порядку. */ #free-screen .daily-gold-btn:not(:disabled) { background: var(--yak-blk-gold-fill) !important; border-color: var(--yak-blk-gold-line) !important; color: var(--yak-blk-gold-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34) !important; } /* Указатель выигрыша — чёрный треугольник с тонкой белой окантовкой. Треугольник нарисован границами, поэтому «обводка» — второй треугольник чуть крупнее, выведенный через ::before под основным. */ /* Указатель — чёрный треугольник с тонкой белой окантовкой. Сам треугольник нарисован границами и своего box не имеет, поэтому обычный border к нему не применить. Первый заход был через второй треугольник в ::before — он вылезал ниже и читался как ВТОРОЙ курсор. Правильный способ — четыре drop-shadow без размытия: фильтр обводит фактическую форму фигуры. */ #free-screen .daily-roulette-pointer { border-top-color: #0c0c0c !important; filter: drop-shadow(1px 0 0 rgba(255, 255, 255, .95)) drop-shadow(-1px 0 0 rgba(255, 255, 255, .95)) drop-shadow(0 1px 0 rgba(255, 255, 255, .95)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .95)) !important; } #free-screen .daily-roulette-pointer::before, #free-screen .daily-roulette-pointer::after { content: none !important; } /* ========================================================================== 5. Реферальное окно — ни одного градиента ========================================================================== Специфичность подобрана под конкурентов из referral-modal.css: там подложку окна ставит правило `.profile-action-modal .profile-action-body > #wallet-screen .redesign-referral-card.referral-modal-shell` (id + 3 класса), поэтому повторяем ровно тот же селектор — файл грузится позже и выигрывает при равной специфичности. */ .profile-action-modal .profile-action-body > #wallet-screen .redesign-referral-card.referral-modal-shell, .profile-action-modal .redesign-referral-card.referral-modal-shell, .profile-action-modal[data-mode="referral"] .referral-modal-shell { background: #101010 !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* «10% с пополнений друзей» — был цветной градиентный текст. */ .profile-action-modal .referral-modal-reward, .profile-action-modal .referral-modal-subtitle, .referral-modal-reward { background: none !important; background-image: none !important; -webkit-text-fill-color: var(--yak-blk-gold-text) !important; color: var(--yak-blk-gold-text) !important; text-shadow: none !important; } /* Плитки статистики, поле ссылки, строки топа — ровный чёрный с обводкой. */ .profile-action-modal[data-mode="referral"] .referral-stat-card, .profile-action-modal[data-mode="referral"] .referral-link-block, .profile-action-modal[data-mode="referral"] .referral-link-input, .profile-action-modal[data-mode="referral"] .referral-top-week, .profile-action-modal[data-mode="referral"] .referral-top-empty, .profile-action-modal .referral-stat-card, .profile-action-modal .referral-link-block, .profile-action-modal .referral-link-input, .profile-action-modal .referral-top-week { background: #141414 !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: #ececec !important; -webkit-text-fill-color: #ececec !important; } /* Строки топа недели — не отдельные карточки, а одна общая закруглённая плашка (фон и рамка заданы на .referral-top-list в referral-modal.css). Полная рамка по всем 4 сторонам делала каждую строку квадратной — оставляем только текст, фон/рамку не красим. */ .profile-action-modal[data-mode="referral"] .referral-top-row, .profile-action-modal .referral-top-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--yak-blk-line) !important; color: #ececec !important; -webkit-text-fill-color: #ececec !important; } .profile-action-modal[data-mode="referral"] .referral-top-row:last-child, .profile-action-modal .referral-top-row:last-child { border-bottom: 0 !important; } /* Призы в топе недели — чёрный фон с обводкой вместо фиолетовых градиентов. */ .profile-action-modal[data-mode="referral"] .referral-top-prize, .profile-action-modal .referral-top-prize { background: #191919 !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: var(--yak-blk-gold-text) !important; -webkit-text-fill-color: var(--yak-blk-gold-text) !important; } .profile-action-modal[data-mode="referral"] .referral-top-prize.is-empty, .profile-action-modal .referral-top-prize.is-empty { color: rgba(236, 236, 236, .4) !important; -webkit-text-fill-color: rgba(236, 236, 236, .4) !important; } /* Медали мест 1-2-3 — без цветных градиентов. */ .profile-action-modal[data-mode="referral"] .referral-top-place, .profile-action-modal .referral-top-place, .profile-action-modal .referral-top-place-1, .profile-action-modal .referral-top-place-2, .profile-action-modal .referral-top-place-3 { background: #1c1c1c !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: #ececec !important; -webkit-text-fill-color: #ececec !important; } /* Блик-градиент поверх кнопок (::before) — убираем совсем. */ .profile-action-modal .referral-action-btn::before, .referral-action-btn::before { display: none !important; background: none !important; } /* Кнопки окна: обводка в тон самой заливке, без свечения. Селекторы по id — в style.profile.v2.css лежит правило `#refClaimBtn, #copyRefBtn` с !important и золотой обводкой #6b5323; по классам его не перебить, id весомее любого набора классов. */ #refClaimBtn, #copyRefBtn, #shareRefBtn, .profile-action-modal[data-mode="referral"] .referral-action-btn, .profile-action-modal .referral-action-btn { background: linear-gradient(180deg, rgba(24, 24, 24, .94), rgba(13, 13, 13, .97)) !important; background-image: linear-gradient(180deg, rgba(24, 24, 24, .94), rgba(13, 13, 13, .97)) !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: #ececec !important; text-shadow: none !important; } /* «Вывести» активная — золото, обводка в тон заливке. */ #refClaimBtn:not(:disabled), .profile-action-modal[data-mode="referral"] .referral-action-btn-claim:not(:disabled) { background: var(--yak-blk-gold-fill) !important; background-image: var(--yak-blk-gold-fill) !important; border: 1px solid var(--yak-blk-gold-line) !important; color: var(--yak-blk-gold-ink) !important; box-shadow: none !important; } /* «Вывести» неактивная: серая заливка, обводка — тот же серый на пару тонов светлее. Раньше на выключенной кнопке оставалась золотая рамка, и она читалась как доступное действие. */ #refClaimBtn:disabled, #copyRefBtn:disabled, #shareRefBtn:disabled, .profile-action-modal[data-mode="referral"] .referral-action-btn:disabled { background: linear-gradient(180deg, rgba(40, 40, 40, .95), rgba(30, 30, 30, .98)) !important; background-image: linear-gradient(180deg, rgba(40, 40, 40, .95), rgba(30, 30, 30, .98)) !important; border: 1px solid rgba(255, 255, 255, .16) !important; color: rgba(236, 236, 236, .45) !important; box-shadow: none !important; opacity: 1 !important; } /* Подчищаем цветные подсветки внутри окна. */ .profile-action-modal[data-mode="referral"] * { text-shadow: none !important; } /* ========================================================================== 6. Обмен Stars → TON и вывод средств ========================================================================== ВАЖНО про селекторы: секция #wallet-screen физически переезжает из #profile-screen внутрь .profile-action-body, когда пользователь открывает «Пополнить»/«Вывести» (см. openProfileActionModal в plinko/ui.js). Поэтому правила с префиксом #profile-screen в открытом окне НЕ работают — привязка идёт к #wallet-screen, который есть в обоих местах. Для правил, где конкурент имеет вид `.profile-action-body > #wallet-screen .panel-card` (id + 2 класса), повторяем ту же форму — файл грузится позже и выигрывает. Карточки обмена и кошелька — ровный чёрный, без стекла и свечения. */ #wallet-screen .redesign-convert-card, #wallet-screen .redesign-wallet-functions, .profile-action-body > #wallet-screen .redesign-convert-card, .profile-action-body > #wallet-screen .redesign-wallet-functions { padding: 14px !important; border-radius: 18px !important; background: #121212 !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #wallet-screen .redesign-convert-card .panel-title, #wallet-screen .redesign-wallet-functions .panel-title, .profile-action-body > #wallet-screen .panel-title { font-size: 16px !important; font-weight: 900 !important; color: #fff !important; } #wallet-screen .redesign-convert-card .section-subtext, #wallet-screen .redesign-wallet-functions .section-subtext { color: rgba(236, 236, 236, .45) !important; font-size: 12px !important; } /* ---- Поле суммы: короткое и крупное, а не растянутое на всю ширину ---- */ #wallet-screen .redesign-convert-card .field-row.field-row-wide, .profile-action-body > #wallet-screen .redesign-convert-card .field-row.field-row-wide { display: grid !important; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) !important; gap: 10px !important; align-items: end !important; } /* У вывода поле суммы тоже короткое — рядом остаётся воздух. */ #wallet-screen .redesign-wallet-functions .field-row.field-row-wide, .profile-action-body > #wallet-screen .redesign-wallet-functions .field-row.field-row-wide { display: grid !important; grid-template-columns: minmax(0, 132px) !important; gap: 10px !important; } #wallet-screen .field input, #wallet-screen #convertStarsAmount, #wallet-screen #withdrawAmount, .profile-action-body > #wallet-screen .field input { width: 100% !important; min-height: 48px !important; padding: 0 12px !important; border-radius: 13px !important; border: 1px solid var(--yak-blk-line) !important; background: var(--yak-blk-field) !important; background-image: linear-gradient(180deg, rgba(15, 15, 15, .98), rgba(9, 9, 9, .99)) !important; box-shadow: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 19px !important; font-weight: 900 !important; text-align: left !important; } #wallet-screen .field label, .profile-action-body > #wallet-screen .field label { margin-bottom: 5px !important; color: rgba(214, 197, 158, .7) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .5px !important; text-transform: uppercase !important; } /* Правая колонка «Результат» — просто текст без рамки и подложки: рамка вокруг него читалась как лишний прямоугольник рядом с полем ввода. */ #wallet-screen .redesign-convert-card .wallet-field { min-height: 48px; display: flex !important; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } #wallet-screen .redesign-convert-card .wallet-field label { margin-bottom: 0 !important; } #wallet-screen #convertPreviewInfo { color: var(--yak-blk-gold-text) !important; -webkit-text-fill-color: var(--yak-blk-gold-text) !important; font-size: 15px !important; font-weight: 900 !important; } #wallet-screen #convertRulesInfo { color: rgba(236, 236, 236, .45) !important; font-size: 11px !important; } /* ---- Кнопки ---------------------------------------------------------- */ /* «Конвертировать в TON» — золотая, во всю ширину. */ #convertStarsBtn, #wallet-screen #convertStarsBtn, .profile-action-body > #wallet-screen #convertStarsBtn { width: 100% !important; min-height: 50px !important; margin-top: 12px !important; border-radius: 14px !important; background: var(--yak-blk-gold-fill) !important; background-image: none !important; border: 1px solid var(--yak-blk-gold-line) !important; color: var(--yak-blk-gold-ink) !important; -webkit-text-fill-color: var(--yak-blk-gold-ink) !important; box-shadow: none !important; text-shadow: none !important; font-size: 15px !important; font-weight: 900 !important; } /* «Создать заявку на вывод». В разметке у неё класс .danger-btn (красная) — перебиваем по id: серая пока форма не заполнена, зелёная когда готова. Класс is-ready вешает static/js/withdraw_ready.js. */ #withdrawBtn, #wallet-screen #withdrawBtn, .profile-action-body > #wallet-screen #withdrawBtn { width: 100% !important; min-height: 50px !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(44, 44, 44, .92), rgba(28, 28, 28, .96)) !important; background-image: linear-gradient(180deg, rgba(44, 44, 44, .92), rgba(28, 28, 28, .96)) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: rgba(236, 236, 236, .55) !important; -webkit-text-fill-color: rgba(236, 236, 236, .55) !important; box-shadow: none !important; text-shadow: none !important; font-size: 15px !important; font-weight: 900 !important; opacity: 1 !important; } #withdrawBtn.is-ready, #wallet-screen #withdrawBtn.is-ready, .profile-action-body > #wallet-screen #withdrawBtn.is-ready { background: linear-gradient(180deg, #4ad98a 0%, #2fb46a 52%, #1e8b50 100%) !important; background-image: linear-gradient(180deg, #4ad98a 0%, #2fb46a 52%, #1e8b50 100%) !important; border-color: rgba(140, 255, 190, .5) !important; color: #06301b !important; -webkit-text-fill-color: #06301b !important; } /* Иконка внутри кнопки вывода перекрашивается вместе с ней. */ #withdrawBtn .profile-v2-btn-icon { color: currentColor; filter: brightness(0) saturate(100%) opacity(.55); } #withdrawBtn.is-ready .profile-v2-btn-icon { filter: brightness(0) saturate(100%) opacity(.75); } /* Переключатель «Обмен / Вывод» — чёрная плашка, активная вкладка золотая. */ #wallet-screen .withdraw-method-switcher, .profile-action-body > #wallet-screen .withdraw-method-switcher { padding: 3px !important; border-radius: 15px !important; background: linear-gradient(180deg, #1a1a1a, #101010) !important; background-image: linear-gradient(180deg, #1a1a1a, #101010) !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; } #wallet-screen .withdraw-method-btn, .profile-action-body > #wallet-screen .withdraw-method-btn { min-height: 40px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: rgba(236, 236, 236, .6) !important; -webkit-text-fill-color: rgba(236, 236, 236, .6) !important; font-weight: 900 !important; } #wallet-screen .withdraw-method-btn.active, .profile-action-body > #wallet-screen .withdraw-method-btn.active { background: var(--yak-blk-gold-fill) !important; background-image: none !important; color: var(--yak-blk-gold-ink) !important; -webkit-text-fill-color: var(--yak-blk-gold-ink) !important; } #wallet-screen .withdraw-method-btn.active .profile-v2-btn-icon { color: var(--yak-blk-gold-ink); filter: brightness(0) saturate(100%) opacity(.8); } /* Кнопки кошелька — ровные чёрные плашки. */ #bindTonWalletBtn, #unbindTonWalletBtn, #wallet-screen #bindTonWalletBtn, #wallet-screen #unbindTonWalletBtn { min-height: 42px !important; padding: 0 14px !important; border-radius: 13px !important; background: var(--yak-blk-surface) !important; background-image: linear-gradient(180deg, rgba(24, 24, 24, .94), rgba(13, 13, 13, .97)) !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: #ececec !important; font-weight: 900 !important; } /* Служебные плашки под формой («Мин. вывод», «К получению», «Автовывод») — ровный чёрный и заметно менее скруглённые: раньше это были почти капсулы с radius 999px, что спорило с прямоугольными карточками вокруг. */ #wallet-screen .summary-chip, #wallet-screen .small-note, #wallet-screen .wallet-aux-block, .profile-action-body > #wallet-screen .summary-chip, .profile-action-body > #wallet-screen .small-note { padding: 9px 12px !important; border-radius: 10px !important; background: #161616 !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: rgba(236, 236, 236, .6) !important; } /* Тот же прямоугольный ритм у полей, кнопок и карточек вкладки. */ #wallet-screen .field input, #wallet-screen #convertStarsAmount, #wallet-screen #withdrawAmount, #wallet-screen #bindTonWalletBtn, #wallet-screen #unbindTonWalletBtn, #wallet-screen .withdraw-method-btn, .profile-action-body > #wallet-screen .field input { border-radius: 10px !important; } #wallet-screen #convertStarsBtn, #wallet-screen #withdrawBtn, #withdrawBtn, #convertStarsBtn { border-radius: 12px !important; } #wallet-screen .withdraw-method-switcher, #wallet-screen .redesign-convert-card, #wallet-screen .redesign-wallet-functions, .profile-action-body > #wallet-screen .redesign-convert-card, .profile-action-body > #wallet-screen .redesign-wallet-functions { border-radius: 14px !important; } /* История заявок внизу вкладки — тот же прямоугольный вид. */ #wallet-screen #withdrawHistoryList, #wallet-screen #withdrawHistoryList > * { border-radius: 10px !important; background-image: none !important; } /* ========================================================================== 7. Общая зачистка синего: служебные чипы и заголовки профиля ========================================================================== */ #profile-screen .summary-chip, #profile-screen .small-note, #profile-screen .profile-info-chip { background-image: none !important; } #profile-screen .summary-chip, #profile-screen .profile-info-chip { background: #141414 !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; } /* ========================================================================== 8. История игр — чёрный фон вместо тёмно-синего ========================================================================== Окна истории у всех режимов используют разметку arena-modal-* внутри контейнера .arena-history-screen (Crash, PvP, Arena, Lucky, Squid), плюс у Crash/Mines есть свой экран истории. Раньше тут перечислялись id окон — и Lucky в списке не было, поэтому его история оставалась тёмно-синей. Теперь красим по классу .arena-history-screen: правило само подхватывает любой режим, в том числе будущие. */ .arena-history-screen .arena-modal-card, .arena-history-screen .crash-screen-modal-card, #minesHistoryScreen .crash-screen-modal-card, #crashHistoryScreen .crash-screen-modal-card, #arenaWinModal .arena-modal-card, #pvpWinModal .pvp-modal-card { background: linear-gradient(180deg, rgba(22, 22, 22, .98), rgba(10, 10, 10, .99)) !important; background-image: linear-gradient(180deg, rgba(22, 22, 22, .98), rgba(10, 10, 10, .99)) !important; border: 1px solid var(--yak-blk-line) !important; } .arena-history-screen .arena-modal-title { color: #fff !important; } .arena-history-screen .arena-card-meta, .arena-history-screen .arena-modal-subtitle { color: rgba(236, 236, 236, .62) !important; } /* Кнопка закрытия истории — чёрная с белой обводкой. */ .arena-history-screen .arena-modal-close { background: var(--yak-blk-soft) !important; border: 1px solid var(--yak-blk-line-strong) !important; color: #fff !important; } /* Вкладки: неактивная — чёрная, активная — золотая (как было задумано). */ .arena-history-screen .arena-history-tab, .arena-history-screen .crash-history-tab, .arena-history-screen .lucky-history-tab, #minesHistoryScreen .crash-history-tab { background: var(--yak-blk-soft) !important; border: 1px solid var(--yak-blk-line) !important; color: rgba(236, 236, 236, .62) !important; box-shadow: none !important; } .arena-history-screen .arena-history-tab.active, .arena-history-screen .crash-history-tab.active, .arena-history-screen .lucky-history-tab.active, #minesHistoryScreen .crash-history-tab.active { background: var(--yak-blk-gold-fill) !important; border-color: var(--yak-blk-gold-line) !important; color: var(--yak-blk-gold-ink) !important; } /* Строки истории — отдельные тёмные плашки с белой ниткой обводки, как на референсе: слева номер раунда, справа щит Provably Fair. */ .arena-history-screen .arena-history-card-item2 { margin-bottom: 7px !important; padding: 9px 11px !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(34, 34, 34, .72), rgba(20, 20, 20, .86)) !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; } .arena-history-screen .arena-history-card-item2.win { border-color: rgba(96, 226, 160, .34) !important; } .arena-history-screen .arena-history-card-item2.lose { border-color: rgba(255, 110, 140, .28) !important; } /* Номер раунда — плотная тёмная плашка. */ .arena-history-screen .arena-history-round-badge { padding: 4px 10px !important; border-radius: 9px !important; background: rgba(0, 0, 0, .55) !important; border: 1px solid rgba(255, 255, 255, .1); color: #ececec !important; } /* Щит честной игры — золотой, чтобы читался как ссылка на проверку. */ .arena-history-screen .arena-history-shield { width: 24px !important; height: 24px !important; border-radius: 8px !important; background: rgba(226, 196, 121, .12) !important; border: 1px solid rgba(226, 196, 121, .3); color: var(--yak-blk-gold-text) !important; } /* Списки истории Crash/Risk Bar/Squid/Lucky/Mines — тоже чёрные плашки. */ .arena-history-screen .riskbar-history-item, .arena-history-screen .squid-history-item, .arena-history-screen .crash-history-entry, .arena-history-screen .lucky-history-item, .arena-history-screen .lucky-history-item.lucky-history-card2, .mines-history-entry { background: linear-gradient(180deg, rgba(34, 34, 34, .6), rgba(20, 20, 20, .8)) !important; border: 1px solid var(--yak-blk-line) !important; border-radius: 12px !important; margin-bottom: 6px; padding: 8px 10px !important; box-shadow: none !important; } /* Цветовая метка результата у Lucky живёт на обводке строки — правило выше гасит её общей чёрной ниткой, поэтому возвращаем цвета (те же, что в lucky.css после чёрно-золотой перекраски: розовый / серый / зелёный). */ .arena-history-screen .lucky-history-item.lucky-history-card2.blue { border-color: rgba(255, 79, 130, .3) !important; } .arena-history-screen .lucky-history-item.lucky-history-card2.orange { border-color: rgba(170, 180, 200, .3) !important; } .arena-history-screen .lucky-history-item.lucky-history-card2.red { border-color: rgba(54, 242, 138, .3) !important; } /* Пустая история («История пока пуста», загрузка, ошибка) — тоже чёрная. */ .arena-history-screen .arena-history-empty, .arena-history-screen .crash-history-empty, .arena-history-screen .pvp-history-empty, .arena-history-screen .lucky-history-empty, .arena-history-screen .squid-history-empty, .arena-history-screen .riskbar-history-empty, #minesHistoryScreen .crash-history-empty { background: rgba(20, 20, 20, .78) !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; color: rgba(236, 236, 236, .62) !important; } /* Списки-истории вне игр: история вывода TON в профиле, история подарков и транзакций в Plinko, топ стейкинга. Базовый цвет в style.base.css — rgba(4,13,28,.56), то есть тёмно-синий; в чёрно-золотой теме он выбивается. */ .history-item, .list-item, .admin-item { background: rgba(20, 20, 20, .78) !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; } .history-meta { color: rgba(236, 236, 236, .58) !important; } /* ========================================================================== 9. Кнопки истории во всех режимах — чёрные, а не серые ========================================================================== Раньше они красились токеном --yak-neutral (серый), чтобы не спорить с кнопкой «Играть». Теперь вся аппка чёрно-золотая, и серый выбивается. */ #solo-arena-panel .arena-history-launch, #solo-pvp-panel .pvp-history-launch, #solo-arena-panel .yak-chat-btn, #solo-pvp-panel .yak-chat-btn, #solo-crash-panel .crash-history-launch, #solo-lucky-panel .lucky-history-launch, #solo-mines-panel .mines-history-btn, #solo-riskbar-panel .riskbar-history-btn, #solo-squid-panel .squid-history-btn, #solo-plinko-panel .plinko-history-launch { background: linear-gradient(180deg, rgba(26, 26, 26, .96), rgba(12, 12, 12, .98)) !important; background-image: linear-gradient(180deg, rgba(26, 26, 26, .96), rgba(12, 12, 12, .98)) !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: #ececec !important; } /* У Risk Bar иконка часов нарисована в ::before со своей заливкой. */ #solo-riskbar-panel .riskbar-history-btn::before { background: transparent !important; background-image: none !important; color: #ececec !important; box-shadow: none !important; } /* ========================================================================== 10. Всплывающие уведомления (мультиаккаунт, ошибки, подсказки) — чёрные ========================================================================== */ .toast, #toast { background: linear-gradient(180deg, rgba(24, 24, 24, .98), rgba(12, 12, 12, .99)) !important; background-image: linear-gradient(180deg, rgba(24, 24, 24, .98), rgba(12, 12, 12, .99)) !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .5) !important; color: #f2f2f2 !important; } /* ========================================================================== 11. Кнопка «Активировать» промокод — золотая только когда поле заполнено ========================================================================== Класс is-ready вешает static/js/withdraw_ready.js (там же живёт логика кнопки вывода). Пустое поле — чёрная кнопка, введён код — золотая. */ /* Специфичность подобрана под конкурента из style.profile.v2.css: `#free-screen #applyPromoBtn.promo-v2-apply-btn` — два id + класс. */ #free-screen #applyPromoBtn.promo-v2-apply-btn, #profile-screen #applyPromoBtn.promo-v2-apply-btn, #free-screen #applyPromoBtn, #profile-screen #applyPromoBtn, #applyPromoBtn { background: linear-gradient(180deg, rgba(26, 26, 26, .96), rgba(12, 12, 12, .98)) !important; background-image: linear-gradient(180deg, rgba(26, 26, 26, .96), rgba(12, 12, 12, .98)) !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; color: rgba(236, 236, 236, .55) !important; -webkit-text-fill-color: rgba(236, 236, 236, .55) !important; text-shadow: none !important; font-weight: 900 !important; } #free-screen #applyPromoBtn.promo-v2-apply-btn.is-ready, #profile-screen #applyPromoBtn.promo-v2-apply-btn.is-ready, #free-screen #applyPromoBtn.is-ready, #profile-screen #applyPromoBtn.is-ready, #applyPromoBtn.is-ready { background: var(--yak-blk-gold-fill) !important; background-image: var(--yak-blk-gold-fill) !important; border-color: var(--yak-blk-gold-line) !important; color: var(--yak-blk-gold-ink) !important; -webkit-text-fill-color: var(--yak-blk-gold-ink) !important; } /* ========================================================================== 12. Поле промокода не должно синеть при тапе ========================================================================== Системное автозаполнение WebView красит поле своим светло-синим и своё background в этом состоянии игнорирует — перебить можно только внутренней тенью на всю высоту. Здесь селекторы БЕЗ привязки к #profile-screen, чтобы правило работало и когда поле уезжает в модалку. */ .promo-input:-webkit-autofill, .promo-input:-webkit-autofill:hover, .promo-input:-webkit-autofill:focus, .promo-input:-webkit-autofill:active, #promoCodeInput:-webkit-autofill, #promoCodeInput:-webkit-autofill:hover, #promoCodeInput:-webkit-autofill:focus, #promoCodeInput:-webkit-autofill:active, #promoCodeInput:autofill { -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff !important; -webkit-box-shadow: 0 0 0 1000px #0b0b0b inset !important; box-shadow: 0 0 0 1000px #0b0b0b inset !important; background-color: #0b0b0b !important; background-image: none !important; transition: background-color 9999s ease-out 0s !important; } /* Фокус и выделение — тёмные, без системной синевы. */ #profile-screen #promoCodeInput, #profile-screen #promoCodeInput:focus, #profile-screen #promoCodeInput:focus-visible, #free-screen #promoCodeInput, #free-screen #promoCodeInput:focus, #promoCodeInput, #promoCodeInput:focus, #promoCodeInput:focus-visible, #promoCodeInput:active { outline: 0 !important; background: #0f0f0f !important; background-image: none !important; background-color: #0f0f0f !important; color: #fff !important; -webkit-text-fill-color: #fff !important; -webkit-tap-highlight-color: transparent !important; } #promoCodeInput::selection { background: rgba(214, 184, 113, .34); color: #fff; } /* ========================================================================== 13. Рефералка: «Топ недели» и поле ссылки — без лишних прямоугольников ========================================================================== В прошлом проходе я залил чёрным с обводкой все блоки подряд, и вокруг заголовка топа и строки ссылки появились рамки, которых там быть не должно. Возвращаем им прозрачность — плашками остаются только карточки статистики. */ .profile-action-modal[data-mode="referral"] .referral-top-week, .profile-action-modal[data-mode="referral"] .referral-link-block, .profile-action-modal[data-mode="referral"] .referral-top-head, .profile-action-modal .referral-top-week, .profile-action-modal .referral-link-block, .referral-top-week, .referral-link-block { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Само поле ссылки остаётся читаемой плашкой — это инпут, а не контейнер. */ .profile-action-modal[data-mode="referral"] .referral-link-input, .profile-action-modal .referral-link-input, .referral-link-input { background: #141414 !important; background-image: none !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; } /* ========================================================================== 14. Стейкинг — открывается окном, как рефералка, а не во всю страницу ========================================================================== */ .profile-action-modal[data-mode="staking"] { place-items: center; } .profile-action-modal[data-mode="staking"] .profile-action-card { padding: 10px 10px 12px; margin-top: 0; border-radius: 20px !important; border: 1px solid var(--yak-blk-line) !important; background: #101010 !important; background-image: none !important; box-shadow: 0 22px 48px rgba(0, 0, 0, .45) !important; } .profile-action-modal[data-mode="staking"] .profile-action-head { margin-bottom: 4px; } .profile-action-modal[data-mode="staking"] .profile-action-body { gap: 0; } /* Секция стейкинга внутри окна: без отступов «на весь экран» и с прокруткой внутри карточки, а не всей страницы. */ .profile-action-modal[data-mode="staking"] #staking-screen { padding: 0 !important; min-height: 0 !important; height: auto !important; background: transparent !important; } .profile-action-modal[data-mode="staking"] #staking-screen .staking-screen-stack { padding: 2px 4px 6px !important; gap: 8px !important; } /* Заголовок экрана дублирует заголовок окна — прячем. */ .profile-action-modal[data-mode="staking"] #staking-screen .redesign-screen-head, .profile-action-modal[data-mode="staking"] #staking-screen .screen-title { display: none !important; } /* ========================================================================== 15. Карточка промокода — всегда своя тёмная подложка ========================================================================== На iOS при открытии клавиатуры блок промокода становился синим. Причина не в самом поле: карточке в профиле проставлен background:transparent (правило `#profile-screen .panel-card` в style.screens.css), и сквозь неё просвечивал синий .glass-soft из style.base.css, который всплывал при перерисовке во время подъёма клавиатуры. Даём карточке собственный непрозрачный фон — тогда просвечивать нечему ни в каком состоянии. */ #profile-screen .redesign-promo-card, #profile-screen .redesign-promo-card.promo-card-v2, #profile-screen .redesign-promo-card.glass-soft, #profile-screen .redesign-promo-card:focus-within, #free-screen .redesign-promo-card, #free-screen .redesign-promo-card:focus-within, .redesign-promo-card, .redesign-promo-card:focus-within, html.is-keyboard-open #profile-screen .redesign-promo-card, html.is-keyboard-open #profile-screen .redesign-promo-card:focus-within, html.is-keyboard-open .redesign-promo-card { background: #121212 !important; background-image: none !important; background-color: #121212 !important; border: 1px solid var(--yak-blk-line) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Строка с телеграм-каналом внутри карточки — тоже без синевы. */ #profile-screen .redesign-promo-card .panel-head, #profile-screen .redesign-promo-card .promo-tg-row, .redesign-promo-card .panel-head { background: transparent !important; background-image: none !important; } /* Раньше здесь стояло `.glass-soft { background-image: none }` — так гасился синий градиент из style.base.css. Теперь базовый градиент сам нейтрально чёрный, а обнуление картинки делало карточки полностью прозрачными (у shorthand background цвет остаётся transparent). Правило убрано. */ /* ========================================================================== 16. Промокод при открытой клавиатуре — чёрный, а не синий ========================================================================== ВОТ ГДЕ БЫЛА СИНЕВА. В daily_bonus.css есть правило: при открытой клавиатуре и фокусе в поле карточка промокода становится position:fixed и всплывает над контентом, получая СВОЙ непрозрачный фон — `linear-gradient(180deg, #101a33, #0a1124)` с синей рамкой. Именно его было видно на скриншоте. Правило срабатывает только при `html.is-keyboard-open` + `:focus`, поэтому в десктопном браузере оно не воспроизводится, и мои прошлые попытки красили карточку в обычном состоянии — там она и так была чёрной. Селектор ниже повторён ОДИН В ОДИН: у оригинала очень высокая специфичность (html + body:has(#promoCodeInput:focus) + #profile-screen + два класса), меньшим её не перебить. Файл грузится позже — выигрываем. */ html.is-keyboard-open body:has(#promoCodeInput:focus) #profile-screen .redesign-promo-card.promo-card-v2 { background: linear-gradient(180deg, #161616, #0d0d0d) !important; border: 1px solid rgba(255, 255, 255, .16) !important; box-shadow: 0 -12px 32px rgba(0, 0, 0, .55) !important; } /* Тот же случай для экрана «Бесплатно», если карточка всплывает и там. */ html.is-keyboard-open body:has(#promoCodeInput:focus) #free-screen .redesign-promo-card.promo-card-v2, html.is-keyboard-open body:has(#promoCodeInput:focus) .redesign-promo-card { background: linear-gradient(180deg, #161616, #0d0d0d) !important; border: 1px solid rgba(255, 255, 255, .16) !important; }