/* ============================================================================ * account_panel.css — right-side slide-in panel for /account (Yandex-style). * * Открывается из navbar (по клику на #navAccount / #navBalanceChip) через * data-pb-account-panel атрибут. Внутри — iframe на /account?embed=1. * Прямой переход на /account (F5, deep-link) продолжает работать как раньше. * * z-index: 9998 (backdrop) / 9999 (panel) — выше большинства всплывающих * элементов (banner, pwa chip 9996, help widget). Анимации 280ms/200ms, * cubic-bezier(.2,.8,.2,1) — те же кривые что у /account drawer. * ========================================================================== */ /* v0.25.94: solid backdrop (юзер: «не делать прозрачным основной экран»). Раньше rgba(7,8,11,0.55) + blur(12px) saturate(1.4) — было видно фон сквозь панель. Теперь почти-непрозрачный + сильнее blur — фон гарантированно не мешает. На maximize-режиме backdrop вообще скрывается (панель занимает 100%). */ .pb-account-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(7, 8, 11, 0.92); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); opacity: 0; transition: opacity 200ms ease; cursor: pointer; } .pb-account-panel.is-maximized + .pb-account-backdrop, body.pb-account-maximized .pb-account-backdrop { /* в полноэкранном режиме backdrop не нужен — панель занимает 100vw */ pointer-events: none; } .pb-account-backdrop[hidden] { display: none !important; } .pb-account-panel { position: fixed; top: 0; right: 0; height: 100dvh; /* fallback for older browsers without dvh */ height: 100vh; /* v0.25.90: расширено с 560 → 960px чтобы внутрь поместился sidebar (240px) + main-content. На 560px sidebar схлопывался в mobile-drawer и юзер видел только текущую секцию без навигации («где всё остальное?»). */ width: min(960px, 100vw); z-index: 9999; background: var(--surface-solid, #161a24); transform: translateX(100%); transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: -30px 0 60px -10px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; overflow: hidden; } .pb-account-panel[hidden] { display: none !important; } @supports (height: 100dvh) { .pb-account-panel { height: 100dvh; } } .pb-account-panel.is-open { transform: translateX(0); } .pb-account-panel iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--surface-solid, #161a24); } /* v0.27.8: close button — premium pill «← Назад» с glass-morphism. Раньше был дешёвый 36px circle, не выглядел red-carpet и накладывался на section-title. Сейчас pill 40px height с подложкой gradient + strong blur + inset-highlight на верхней грани (catches the light). Maximize остаётся circle 36px — он secondary action (desktop only), не должен конкурировать визуально с primary back-button. */ .pb-account-panel-close { position: static; height: 40px; padding: 0 16px 0 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(40, 45, 56, 0.85) 0%, rgba(20, 24, 32, 0.85) 100%); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); color: #f1f3f8; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 inherit; letter-spacing: -0.005em; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, gap 180ms ease; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); -webkit-tap-highlight-color: transparent; } .pb-account-panel-close-lbl { font-weight: 600; letter-spacing: 0; } .pb-account-panel-close svg { color: var(--accent, #ffc94a); transition: transform 180ms ease, color 180ms ease; flex-shrink: 0; } .pb-account-panel-close:hover { background: linear-gradient(180deg, rgba(56, 62, 76, 0.92) 0%, rgba(28, 32, 42, 0.92) 100%); border-color: rgba(var(--accent-rgb), 0.40); transform: translateY(-1px); gap: 10px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-rgb), 0.06) inset, inset 0 1px 0 0 rgba(255, 255, 255, 0.12); } .pb-account-panel-close:hover svg { transform: translateX(-2px); } .pb-account-panel-close:active { transform: translateY(0) scale(0.97); } .pb-account-panel-close:focus-visible { outline: 2px solid var(--accent, #ffc94a); outline-offset: 2px; } /* Maximize — secondary action, остался circle. */ .pb-account-panel-maximize { position: static; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #f1f3f8; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .pb-account-panel-maximize:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); } .pb-account-panel-maximize:active { transform: scale(0.94); } .pb-account-panel-maximize:focus-visible { outline: 2px solid var(--accent, #ffc94a); outline-offset: 2px; } /* v0.25.94: maximize-режим — панель занимает весь viewport. */ .pb-account-panel.is-maximized { width: 100vw !important; box-shadow: none !important; } /* Floating actions cluster: maximize + close stacked top-left of panel */ .pb-account-panel-actions { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; } /* Mobile: full-screen takeover, no rounded corners. */ @media (max-width: 720px) { .pb-account-panel { width: 100vw; box-shadow: none; } /* Maximize-кнопка не нужна на мобильнике — панель уже 100vw */ .pb-account-panel-maximize { display: none; } } /* Lock body scroll while panel is open. */ body.pb-account-panel-open { overflow: hidden; } /* prefers-reduced-motion: snap, don't slide. */ @media (prefers-reduced-motion: reduce) { .pb-account-backdrop { transition: none; } .pb-account-panel { transition: none; } }