/* ============================================================ plus-badge.css — значок Profile Plus (универсальный, вне чата). Чатовый значок (.chat_plus_badge) стилизован в chat-redesign.css. ============================================================ */ .hl-plus-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; vertical-align: middle; color: #9b6dff; cursor: pointer; position: relative; flex: 0 0 auto; } .hl-plus-badge svg { width: 100%; height: 100%; display: block; } .hl-plus-badge:hover, .hl-plus-badge:focus { color: #b794ff; } /* тултип */ .hl-plus-badge__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #15183a, #0a0a1a); border: 1px solid rgba(155, 109, 255, .35); border-radius: 10px; padding: 8px 12px; white-space: nowrap; z-index: 3000; display: none; flex-direction: column; gap: 2px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); pointer-events: none; } .hl-plus-badge:hover .hl-plus-badge__tip, .hl-plus-badge:focus .hl-plus-badge__tip { display: flex; } .hl-plus-badge__tip-t { color: #b794ff; font-weight: 700; font-size: .8rem; } .hl-plus-badge__tip-x { color: #888aa0; font-size: .74rem; } /* значок, вставленный plus-badge.js в карточки/списки: без инлайн-тултипа (его резал overflow:hidden родителей) — подсказка через .hl-plus-tipfix */ .hl-plus-badge--auto { vertical-align: -2px; } /* внутри карточек с гradient-ником значок не должен наследовать transparent */ .hl-plus-badge--auto, .hl-plus-badge--auto svg { -webkit-text-fill-color: #9b6dff; color: #9b6dff; background: none; } .hl-plus-badge--auto:hover, .hl-plus-badge--auto:hover svg { -webkit-text-fill-color: #b794ff; color: #b794ff; } /* глобальный тултип значка (fixed поверх всего, координаты ставит JS) */ .hl-plus-tipfix { position: fixed; display: none; flex-direction: column; gap: 2px; background: linear-gradient(135deg, #15183a, #0a0a1a); border: 1px solid rgba(155, 109, 255, .35); border-radius: 10px; padding: 8px 12px; white-space: nowrap; z-index: 99999; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); pointer-events: none; } .hl-plus-tipfix__t { color: #b794ff; font-weight: 700; font-size: .8rem; } .hl-plus-tipfix__x { color: #888aa0; font-size: .74rem; } /* ---------- фон профиля на весь экран (перк Plus) ---------- Ставится инлайном на из profile-extras.js (applyProfileBg): у html/body в mystyles/theme_dark стоит непрозрачный backfone.jpg, который рисуется ПОВЕРХ z-index:-1 слоёв — поэтому отдельный fixed-элемент не подходит, перебиваем фон самого body. */ /* ---------- медаль Plus в профиле (блок как 17.txt) ---------- */ .pp-plus-medals { display: flex; gap: 8px; justify-content: center; margin: 10px 0 0; } .pp-plus-medal { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, rgba(155, 109, 255, .25), rgba(109, 63, 204, .25)); border: 1px solid rgba(155, 109, 255, .45); color: #b794ff; cursor: help; position: relative; } .pp-plus-medal svg { width: 20px; height: 20px; } .pp-plus-medal .hl-plus-badge__tip { bottom: calc(100% + 8px); } .pp-plus-medal:hover .hl-plus-badge__tip, .pp-plus-medal:focus .hl-plus-badge__tip { display: flex; } /* значок Plus рядом с ником на странице профиля */ .pp-nick .hl-plus-badge, .pp-nick-plus { width: 18px; height: 18px; margin-left: 6px; } /* ---------- блок «Цвет ника» в настройках (#ppNickColor) ---------- */ .pp-nc-loading { color: #888aa0; font-size: .9rem; padding: 6px 0; } .pp-nc-locked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0; } .pp-nc-locked__t { color: #888aa0; font-size: .9rem; flex: 1 1 220px; } .pp-nc-locked__btn { display: inline-block; background: linear-gradient(135deg, #9b6dff, #6d3fcc); color: #fff !important; border-radius: 9px; padding: 8px 18px; font-size: .88rem; font-weight: 600; text-decoration: none !important; } .pp-nc-preview { text-align: center; background: rgba(10, 10, 26, .55); border: 1px solid rgba(155, 109, 255, .15); border-radius: 10px; padding: 14px 10px; margin-bottom: 14px; } .pp-nc-nick { font-size: 1.25rem; font-weight: 700; color: #fff; word-break: break-all; } .pp-nc-nick.is-grad { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .pp-nc-title { color: #c0c0e0; font-size: .85rem; font-weight: 600; margin: 10px 0 7px; } .pp-nc-list { display: flex; flex-wrap: wrap; gap: 8px; } /* ВАЖНО: settings-page.css красит ВСЕ кнопки настроек фиолетовым с !important (.pp-settings button[type="button"] { background: var(--ps-accent) !important; ... }). Поэтому свотчи перебиваем через ID #ppNickColor/#ppRoleColor (специфичность выше) + !important. */ #ppNickColor .pp-nc-btn, #ppRoleColor .pp-nc-btn, .pp-nc-btn { width: 30px !important; height: 30px !important; min-width: 0 !important; line-height: 1 !important; border-radius: 50% !important; border: 2px solid rgba(155, 109, 255, .25) !important; background: var(--nc, #555) !important; cursor: pointer; padding: 0 !important; box-shadow: none; transition: transform .15s, border-color .15s, box-shadow .15s; } #ppNickColor .pp-nc-btn--grad, #ppNickColor .pp-nc-btn--grad:hover, #ppRoleColor .pp-nc-btn--grad, #ppRoleColor .pp-nc-btn--grad:hover, .pp-nc-btn--grad { background: var(--ncg) !important; } #ppNickColor .pp-nc-btn--default, #ppNickColor .pp-nc-btn--default:hover, #ppRoleColor .pp-nc-btn--default, #ppRoleColor .pp-nc-btn--default:hover, .pp-nc-btn--default { background: linear-gradient(45deg, transparent 42%, #ff6b7a 44%, #ff6b7a 56%, transparent 58%), rgba(155, 109, 255, .12) !important; } #ppNickColor .pp-nc-btn:hover, #ppRoleColor .pp-nc-btn:hover, .pp-nc-btn:hover { background: var(--nc, #555) !important; /* не даём hover'у settings-page перекрасить свотч */ transform: scale(1.12) !important; border-color: rgba(155, 109, 255, .6) !important; } #ppNickColor .pp-nc-btn.is-active, #ppRoleColor .pp-nc-btn.is-active, .pp-nc-btn.is-active { border-color: #9b6dff !important; box-shadow: 0 0 0 3px rgba(155, 109, 255, .3) !important; } .pp-nc-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .pp-nc-msg { font-size: .85rem; } .pp-nc-msg--ok { color: #2ecc71; } .pp-nc-msg--err { color: #ff6b7a; } /* ---------- блок «Цвет плашки группы» в настройках (#ppRoleColor) ---------- */ /* переиспользует pp-nc-* (палитра/превью/кнопки); ниже — только своё */ /* превью плашки — как .chat_role_title в чате */ .pp-rc-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; line-height: 1.5; border: 1px solid; border-radius: 6px; vertical-align: 2px; white-space: nowrap; background: rgba(155, 109, 255, .07); } .pp-rc-badge.is-grad { background-clip: text; -webkit-background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } /* заголовок «Градиент» с замком для не-Plus */ .pp-rc-lockrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pp-rc-lockrow .pp-nc-title { margin: 10px 0 7px; } .pp-rc-plus { display: inline-block; background: linear-gradient(135deg, #9b6dff, #6d3fcc); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 6px; padding: 2px 7px; letter-spacing: .3px; } .pp-rc-lockhint { color: #888aa0; font-size: .82rem; margin: -2px 0 6px; } .pp-rc-lockhint a { color: #b794ff; text-decoration: none; } /* приглушённые недоступные градиенты (без Plus) */ #ppRoleColor .pp-nc-btn--grad.is-locked, #ppRoleColor .pp-nc-btn--grad.is-locked:hover { opacity: .35; filter: saturate(.5); cursor: not-allowed; transform: none !important; border-color: rgba(155, 109, 255, .25) !important; box-shadow: none !important; } /* ---------- блок «Подсветка сообщений в чате» (#ppChatColor) ---------- */ /* свотчи — те же перебивки, что и ppNickColor/ppRoleColor */ #ppChatColor .pp-nc-btn { width: 30px !important; height: 30px !important; min-width: 0 !important; line-height: 1 !important; border-radius: 50% !important; border: 2px solid rgba(155, 109, 255, .25) !important; background: var(--nc, #555) !important; padding: 0 !important; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; } #ppChatColor .pp-nc-btn--default, #ppChatColor .pp-nc-btn--default:hover { background: linear-gradient(45deg, transparent 42%, #ff6b7a 44%, #ff6b7a 56%, transparent 58%), rgba(155, 109, 255, .12) !important; } #ppChatColor .pp-nc-btn:hover { background: var(--nc, #555) !important; transform: scale(1.12) !important; border-color: rgba(155, 109, 255, .6) !important; } #ppChatColor .pp-nc-btn.is-active { border-color: #9b6dff !important; box-shadow: 0 0 0 3px rgba(155, 109, 255, .3) !important; } /* превью-сообщение (имитация строки чата) */ .pp-cc-preview { display: flex; flex-direction: column; gap: 3px; background: rgba(10, 10, 26, .55); border: 1px solid rgba(155, 109, 255, .15); border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; transition: box-shadow .15s, background .15s; } .pp-cc-prev-nick { font-weight: 700; font-size: .9rem; color: #b794ff; } .pp-cc-prev-text { color: #c0c0e0; font-size: .86rem; } /* ============================================================ Режим показа баннера (#ppBannerMode, под блоком «Баннер профиля»): две кнопки «Только в шапке» / «На весь экран». Кнопки перебиваем через ID: settings-page.css красит все button[type=button] внутри .pp-settings фиолетовым !important. ============================================================ */ #ppBannerMode { margin-top: 14px; } .pp-bm-title { color: #fff; font-weight: 600; font-size: .92rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .pp-bm-plus { display: inline-block; background: linear-gradient(135deg, #9b6dff, #6d3fcc); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 2px 7px; text-transform: uppercase; } .pp-bm-list { display: flex; gap: 8px; flex-wrap: wrap; } #ppBannerMode .pp-bm-btn, #ppBannerMode .pp-bm-btn:hover { flex: 1 1 160px; background: rgba(155, 109, 255, .06) !important; border: 2px solid rgba(155, 109, 255, .18) !important; border-radius: 10px !important; padding: 11px 14px !important; width: auto !important; height: auto !important; color: #c0c0e0 !important; font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .18s, background .18s, color .18s; } #ppBannerMode .pp-bm-btn:hover { border-color: rgba(155, 109, 255, .45) !important; color: #fff !important; } #ppBannerMode .pp-bm-btn.is-active, #ppBannerMode .pp-bm-btn.is-active:hover { border-color: #9b6dff !important; background: rgba(155, 109, 255, .16) !important; color: #fff !important; box-shadow: 0 0 0 3px rgba(155, 109, 255, .18); } .pp-bm-hint { color: #888aa0; font-size: .8rem; line-height: 1.45; margin-top: 8px; } /* ============================================================ Скрытие значка Plus (#ppPlusHideRow, в «Дополнительных настройках»): тумблер-переключатель в стиле 20.txt. ============================================================ */ .pp-hide-group { margin-top: 4px; } .pp-hide-label { display: block; color: #fff; font-size: .95rem; margin-bottom: 8px; } .pp-hide-switch { position: relative; display: inline-block; width: 46px; height: 24px; cursor: pointer; margin: 0; } .pp-hide-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .pp-hide-slider { position: absolute; inset: 0; background: rgba(155, 109, 255, .15); border: 1px solid rgba(155, 109, 255, .3); border-radius: 24px; transition: .2s; } .pp-hide-slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #b794ff; border-radius: 50%; transition: .2s; } .pp-hide-switch input:checked + .pp-hide-slider { background: rgba(155, 109, 255, .45); border-color: #9b6dff; } .pp-hide-switch input:checked + .pp-hide-slider::before { transform: translateX(22px); background: #fff; } .pp-hide-hint { color: #888aa0; font-size: .8rem; line-height: 1.45; margin-top: 8px; } /* ============================================================ Соц-иконки, переехавшие из скрытой полосы-баннера в карточку игрока (Plus-режим «баннер на весь экран»: profile-extras.js прячет #ppBanner и переносит .pp-socials в .pp-usercard__top с этим классом). Перебиваем absolute-позиционирование из profile-page.css. ============================================================ */ .pp-socials.pp-socials--card { position: static !important; right: auto; bottom: auto; display: flex; justify-content: center; gap: 8px; margin-top: 10px; } /* ========================================================================== Анимированные рамки аватара (Profile Plus) — js/plus-frames.js Поведение задаётся CSS-переменными на .hl-frame (ставит JS на каждом аватаре): --hlf-img url() спрайт-листа PNG (кадры в один ряд) --hlf-n число кадров --hlf-fd размер рамки в px (= размер аватара × 1.42) --hlf-dur длительность цикла (напр. .8s) --hlf-steps steps(N) — покадровая перемотка Тонировки нет — спрайт показывается в своих цветах. ========================================================================== */ @keyframes hlFrameRun { to { background-position: calc(var(--hlf-fd) * var(--hlf-n) * -1) 0; } } .hl-frame { position: relative; display: inline-block; vertical-align: middle; line-height: 0; } .hl-frame > img { display: block; } .hl-frame::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--hlf-fd); height: var(--hlf-fd); pointer-events: none; z-index: 6; background-repeat: no-repeat; background-image: var(--hlf-img); background-size: calc(var(--hlf-fd) * var(--hlf-n)) var(--hlf-fd); animation-name: hlFrameRun; animation-duration: var(--hlf-dur); animation-timing-function: var(--hlf-steps); animation-iteration-count: infinite; } /* Оверлей на сайте — абсолютный, НЕ оборачивает (js/plus-frames.js ставит left/top на центр аватара + --hlf-fd). Вёрстку карточек не трогаем. */ .hl-frame-ov { position: absolute; transform: translate(-50%, -50%); width: var(--hlf-fd); height: var(--hlf-fd); pointer-events: none; z-index: 6; background-repeat: no-repeat; background-image: var(--hlf-img); background-size: calc(var(--hlf-fd) * var(--hlf-n)) var(--hlf-fd); animation-name: hlFrameRun; animation-duration: var(--hlf-dur); animation-timing-function: var(--hlf-steps); animation-iteration-count: infinite; } /* ---- пикер рамок в настройках (#ppFrames) ---- */ .pp-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; margin-top: 4px; } .pp-frame-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 8px 12px; border-radius: 12px; background: rgba(155, 109, 255, .05); border: 1px solid rgba(155, 109, 255, .16); color: #c0c0e0; font: 600 12px/1.2 inherit; cursor: pointer; overflow: visible; transition: border-color .15s, background .15s; } .pp-frame-tile:hover { border-color: rgba(155, 109, 255, .5); } .pp-frame-tile.is-sel { border-color: #9b6dff; background: rgba(155, 109, 255, .14); box-shadow: inset 0 0 0 1px #9b6dff; } .pp-frame-demo { position: relative; display: inline-block; width: 60px; height: 60px; } .pp-frame-demo.hl-frame::after { z-index: 2; } .pp-frame-ava { display: block; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #d9c6ff 0 16%, transparent 17%), radial-gradient(ellipse 42% 34% at 50% 100%, #d9c6ff 0 60%, transparent 61%), linear-gradient(180deg, #5a4aa8, #2a2550); } .pp-frame-none { display: block; width: 60px; height: 60px; border-radius: 50%; border: 2px dashed rgba(155, 109, 255, .4); background: rgba(155, 109, 255, .04); } .pp-frame-name { color: #e0e3f0; } .pp-frame-locked { color: #888aa0; font-size: 13px; padding: 8px 2px; line-height: 1.5; } .pp-frame-locked b { color: #b794ff; } .pp-frame-getplus { color: #b794ff; font-weight: 700; text-decoration: none; margin-left: 4px; } .pp-frame-getplus:hover { text-decoration: underline; }