/* «Приём v2» — слои вместо рамок. * * Полный редизайн «Приёма» при другой единице показа: КАРТОЧКА — ЭТО ОРДЕР * BYBIT, под ней строками лежат реквизиты всех аккаунтов, работавших под этим * ордером, а под каждым реквизитом — его живые сделки. Старая страница * группировала по значению реквизита, и один ордер, залитый через два * реквизита, разъезжался по двум карточкам. * * ПОЧЕМУ СВОЙ ПРЕФИКС pv2-, А НЕ priem-. * css/pages/priem.css объявляет .priem-btn, .priem-pill, .priem-input, * .priem-select, .priem-switch, .priem-platforms ГЛОБАЛЬНО (без скоупа .priem). * Возьми v2 те же имена — правила легли бы друг на друга в обе стороны, и * правка старой страницы ломала бы новую. Ни одного общего класса: v2 — * отдельная страница, старый «Приём» доживает своё рядом. * * ТОКЕНЫ НА КОРНЕ (.pv2 и .pv2-layer), А НЕ НА СТРАНИЦЕ. * Окна и поповер живут в , вне секции раздела: переменных страницы они * не получают — грабля, на которой в проекте обжигались трижды (см. шапки * bybit.css, chat-templates.css, detecto-check.css). Поэтому весь набор * продублирован на .pv2-layer. * * ГЛУБИНА — СЛОЯМИ ФОНА, А НЕ РАМКАМИ: карточка (--pv-card) → строка/поле * (--pv-inset) → hover и трек шкалы (--pv-inset-2), плюс мягкая тень и * волосяные разделители --pv-line. Декоративных border в файле нет. * * ЦВЕТ НИКОГДА НЕ ЕДИНСТВЕННЫЙ НОСИТЕЛЬ СМЫСЛА: перелив подписан числом, * состояние ордера — словом, аккаунт — названием (правило CLAUDE.md). */ [hidden] { display: none !important; } /* ===== токены ===== */ .pv2, .pv2-layer { --pv-text: var(--text); --pv-muted: var(--muted); --pv-dim: color-mix(in srgb, var(--text) 45%, transparent); --pv-accent: var(--primary); --pv-accent-2: var(--primary-2); --pv-danger: #ff6464; --pv-warn: #ffb020; --pv-over: #ff6464; --pv-card: #14171b; --pv-inset: #1a1e24; --pv-inset-2: #20252c; --pv-line: rgba(255, 255, 255, .06); --pv-accent-soft: rgba(43, 213, 118, .14); --pv-danger-soft: rgba(255, 100, 100, .13); --pv-warn-soft: rgba(255, 176, 32, .13); /* Тон живой сделки: строка обязана отличаться от тела карточки с одного взгляда — оператор ищет её глазами при каждом снимке. */ --pv-live-bg: rgba(43, 213, 118, .07); --pv-live-bg-h: rgba(43, 213, 118, .11); /* Оттенки аккаунтов площадок. Смысл ВСЕГДА дублируется словом рядом: цвет здесь — ускоритель узнавания, а не сам признак. */ --pv-ikra: #f0a63a; --pv-deora: #58a6ff; --pv-zavod: #a78bfa; --pv-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .28); --pv-shadow-pop: 0 24px 80px rgba(0, 0, 0, .5); --pv-r: 16px; --pv-r-s: 10px; --pv-rail-w: 380px; --pv-orders-min: 480px; --pv-splitter-w: 14px; } [data-theme="light"] .pv2, [data-theme="light"] .pv2-layer { --pv-danger: #d94747; --pv-over: #d94747; --pv-warn: #a86400; --pv-card: #ffffff; --pv-inset: #f3f1ec; --pv-inset-2: #ebe8e1; --pv-line: rgba(18, 23, 20, .08); --pv-accent-soft: rgba(23, 184, 98, .14); --pv-danger-soft: rgba(217, 71, 71, .12); --pv-warn-soft: rgba(168, 100, 0, .12); --pv-live-bg: rgba(23, 184, 98, .08); --pv-live-bg-h: rgba(23, 184, 98, .13); --pv-ikra: #c07c14; --pv-deora: #2f6fd0; --pv-zavod: #7c5cd6; --pv-shadow: 0 1px 2px rgba(20, 24, 20, .06), 0 10px 28px rgba(20, 24, 20, .08); --pv-shadow-pop: 0 24px 70px rgba(20, 24, 20, .18); } /* ===== корень страницы ===== */ .pv2 { color: var(--pv-text); font-family: var(--font-ui); font-size: 13px; line-height: 1.45; /* Страница-приложение: скроллятся колонки, а не контейнер оболочки (.content[data-route="priem2"] { overflow: hidden } в dashboard.css). */ height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-x: hidden; } /* Табличные цифры: таймер тикает раз в секунду, суммы меняются снимком — без tnum строки «пляшут» по ширине. Отдельный моноширинный шрифт не нужен. */ .pv2 .num, .pv2-layer .num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; } .pv2 *, .pv2-layer * { box-sizing: border-box; } /* ===== кнопки ===== */ .pv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: none; border-radius: var(--pv-r-s); background: var(--pv-inset); color: var(--pv-text); font: 600 13px var(--font-ui); white-space: nowrap; cursor: pointer; transition: background var(--transition), color var(--transition), transform 120ms ease; } .pv2-btn:hover { background: var(--pv-inset-2); } .pv2-btn:active { transform: translateY(1px); } .pv2-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-btn--primary { background: var(--pv-accent); color: #07130c; } .pv2-btn--primary:hover { background: var(--pv-accent-2); } .pv2-btn--danger { background: var(--pv-danger); color: #fff; } .pv2-btn--ghost { background: none; color: var(--pv-muted); } .pv2-btn--ghost:hover { background: var(--pv-inset); color: var(--pv-text); } .pv2-btn[disabled] { opacity: .45; pointer-events: none; } .pv2-btn--sm { height: 30px; padding: 0 13px; } .pv2-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: none; color: var(--pv-muted); cursor: pointer; flex: none; transition: background var(--transition), color var(--transition); } .pv2-ib:hover { background: var(--pv-inset-2); color: var(--pv-text); } .pv2-ib:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-ib[disabled] { opacity: .4; pointer-events: none; } .pv2-ib--danger:hover { background: var(--pv-danger-soft); color: var(--pv-danger); } .pv2-ib--on { color: var(--pv-accent); } .pv2-ib.is-busy svg { animation: pv2-spin .6s linear infinite; } .pv2-ib.is-success { color: var(--pv-accent); animation: pv2-pulse .9s ease 1; } .pv2-ok { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 999px; background: var(--pv-accent); color: #07130c; cursor: pointer; flex: none; transition: background var(--transition), transform 120ms ease; } .pv2-ok:hover { background: var(--pv-accent-2); } .pv2-ok:active { transform: scale(.94); } .pv2-ok:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-ok[disabled] { opacity: .45; pointer-events: none; } /* Отправка в полёте. Кнопка в это время `disabled` (замок в requisiteForm.js), поэтому гасить её ещё и прозрачностью нельзя: спиннер — единственный признак работы, и он обязан быть виден. Кольцо на currentColor, без color-mix: значение здесь тёмное на зелёном и в подмешивании не нуждается. */ .pv2-ok.is-busy { opacity: 1; } .pv2-ok.is-busy svg { opacity: 0; } .pv2-ok.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; animation: pv2-spin .7s linear infinite; } .pv2-icon { width: 15px; height: 15px; flex: none; } .pv2-icon--sm { width: 12px; height: 12px; } /* Шкалы — это КНОПКИ (клик открывает сделки), а mobile.css поднимает всем кнопкам min-height до 40px ради тач-целей. Полосе в 3–5 px это ломает вид целиком: она превращалась в зелёный блок в пол-экрана. Отбиваем адресно и вне media-запроса — специфичность .pv2 .pv2-gauge (0,2,0) выше, чем у `button` (0,0,1), поэтому порядок подключения файлов роли не играет. Тач-цель тут не нужна: у шкалы вся ширина карточки. */ .pv2 .pv2-gauge { min-height: 0; } .pv2 .pv2-mbar { min-height: 0; } /* Скрепка апелляции — по той же причине. Она 24×24 в плотной строке сделки, а с 24.08.2026 у неё есть подложка (итог проверки чека): растянутая до 40 px она стала бы цветным блоком поверх строки. Тач-цель обеспечивает сама строка — по её фону открывается список сделок. */ .pv2 .pv2-orow__appeal .pv2-ib { min-height: 0; } /* Сегмент режима показа в шапке колонки и ссылка «показать все» — по той же причине. Сегмент 18 px высотой заведён ровно для того, чтобы не отнимать высоту у карточек; раздутый до 40 px он съел бы её вдвойне. */ .pv2 .pv2-flt__btn { min-height: 0; } .pv2 .pv2-empty__more { min-height: 0; } /* ===== банк: картинка, фолбэк — маска ===== */ /* Логотип банка. По умолчанию БЕЗ подложки: фирменный знак читается на карточке сам. До 24.08.2026 фоном стоял --pv-inset (почти цвет карточки) — тогда логотипы с прозрачным фоном и тёмной графикой пропадали целиком; но светлая плашка ВСЕМ подряд огрубляла и Сбер, и Т-Банк, и Ozon. Кому она нужна, решает PLATE_FILES в js/ui/bankIcons.js. */ .pv2-bank { width: 26px; height: 26px; border-radius: 8px; flex: none; object-fit: contain; } /* Плашка — точечно (и всегда у монограммы: её буква тёмная). Отступ внутрь обязателен: логотипы нарисованы впритык к краю холста. */ .pv2-bank--plate, .pv2-bank--mono { background: var(--bank-plate); border: 1px solid var(--bank-plate-edge); padding: 2px; } /* Банк без своего файла: буква вместо одинакового домика у всех сорока. */ .pv2-bank--mono { display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 var(--font-ui); color: var(--bank-c, var(--bank-ink)); text-transform: uppercase; user-select: none; } /* Банк не определён вовсе — глиф маской, БЕЗ плашки: маска отрезала бы её вместе с фоном. Цвет берётся у темы, поэтому виден в обеих. */ .pv2-bank--fallback { display: inline-block; background: var(--pv-muted); border: 0; padding: 0; -webkit-mask: url("../../img/bank/logo-bank.svg") center / 68% no-repeat; mask: url("../../img/bank/logo-bank.svg") center / 68% no-repeat; } /* ===== текстовые роли вместо пилюль ===== */ .pv2-dim { font: 500 11.5px var(--font-ui); color: var(--pv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv2-cap { font: 600 10px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--pv-dim); } /* Данные замерли: молчат и поток, и поллинг. Спокойная строка, а не тревога: список на экране прежний, изменилось только то, что он перестал обновляться, — и это оператор должен знать, потому что решения принимаются по деньгам и живым сделкам. Красная здесь только точка. */ .pv2-conn { display: inline-flex; align-items: center; /* Как у сегмента режимов: шапка выравнивает детей по baseline, а у строки первым идёт кружок — своё выравнивание держит её на месте. */ align-self: center; gap: 5px; min-width: 0; font-size: 11px; color: var(--pv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv2-conn[hidden] { display: none; } .pv2-conn::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pv-danger); } .pv2-hint { border-bottom: 1px dotted var(--pv-dim); cursor: help; white-space: nowrap; } .pv2-acctTag { font: 600 10.5px var(--font-ui); letter-spacing: .05em; color: var(--pv-muted); } .pv2-acctTag.is-ikra { color: var(--pv-ikra); } .pv2-acctTag.is-deora { color: var(--pv-deora); } .pv2-acctTag.is-zavod { color: var(--pv-zavod); } .pv2-adot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--pv-dim); } .pv2-adot.is-ikra { background: var(--pv-ikra); } .pv2-adot.is-deora { background: var(--pv-deora); } .pv2-adot.is-zavod { background: var(--pv-zavod); } .pv2-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--font-ui); border-radius: 999px; padding: 4px 11px; background: var(--pv-inset); color: var(--pv-muted); white-space: nowrap; } .pv2-pill--ok { background: var(--pv-accent-soft); color: var(--pv-accent); } .pv2-pill--warn { background: var(--pv-warn-soft); color: var(--pv-warn); } .pv2-pill--danger { background: var(--pv-danger-soft); color: var(--pv-danger); } /* Пилюля-переключатель фильтра площадок в рельсе. */ .pv2-pill--btn { border: none; cursor: pointer; font-family: var(--font-ui); } .pv2-pill--btn:hover { background: var(--pv-inset-2); color: var(--pv-text); } .pv2-pill--btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-pill--btn.is-on { background: var(--pv-accent-soft); color: var(--pv-accent); } /* ===== состояние ордера: точка + слово ===== */ .pv2-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pv-dim); } .pv2-dot.is-found { background: var(--pv-accent); box-shadow: 0 0 8px var(--pv-accent-soft); } .pv2-dot.is-missing { background: var(--pv-danger); } .pv2-dot.is-bind { background: none; box-shadow: inset 0 0 0 2px var(--pv-accent); } .pv2-ordNum { border: none; background: none; padding: 0; color: var(--pv-text); font: 600 15px var(--font-ui); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv2-ordNum:hover { color: var(--pv-accent); } .pv2-ordNum:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); border-radius: 6px; } .pv2-ordNum.is-plain { cursor: default; color: var(--pv-muted); } .pv2-ordNum.is-plain:hover { color: var(--pv-muted); } .pv2-ordState { font: 500 11px var(--font-ui); color: var(--pv-muted); white-space: nowrap; } .pv2-ordState.is-missing { color: var(--pv-danger); } .pv2-bindBtn { border: none; background: none; padding: 0; color: var(--pv-accent); font: 600 13px var(--font-ui); cursor: pointer; border-bottom: 1px dashed var(--pv-accent); } .pv2-bindBtn:hover { color: var(--pv-accent-2); } .pv2-bindBtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); border-radius: 4px; } /* ===== карточка ордера — единственный контейнер ===== */ .pv2-ordCard { background: var(--pv-card); border-radius: var(--pv-r); box-shadow: var(--pv-shadow); overflow: hidden; } .pv2-ordCard + .pv2-ordCard { margin-top: 14px; } /* ШАПКА — ОДНА СТРОКА: опознание → два факта → остаток. Была тремя полосами по вертикали (крупное «осталось» столбиком + отдельная полоса фактов под шкалой): 71 px шапки и 140 px до первого реквизита. Стало 37 px и 71 px — 69 px экономии на карточку. Высота НЕ фиксируется: карточка с пилюлями имеет право на второй ряд. */ .pv2-ordCard__head { display: flex; align-items: center; gap: 6px 16px; padding: 9px 18px; flex-wrap: nowrap; } /* Блок опознания не сжимаем: без этого пилюли складываются в столбик и наезжают на факты. Вместо сжатия факты уходят на второй ряд. */ .pv2-ordCard__id { display: flex; align-items: center; gap: 8px 10px; min-width: min(100%, 280px); flex: 1 1 280px; flex-wrap: wrap; } .pv2-ordCard__rest { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .pv2-ordCard__rest b { font: 600 16px var(--font-ui); } .pv2-ordCard__rest span { font: 500 10.5px var(--font-ui); color: var(--pv-muted); } .pv2-ordCard__rest.is-over b { color: var(--pv-over); } .pv2-ordCard__rest.is-unknown b { font: 500 13px var(--font-ui); color: var(--pv-muted); } /* Клик по фону шапки открывает сделки карточки — шкала в 5 px слишком тонкая мишень. Меняется только фон: рост высоты в прокручиваемом списке даёт самоподдерживающийся каскад (ловушка CLAUDE.md №4). */ .pv2-ordCard__head.is-clickable { cursor: pointer; transition: background 120ms ease; } .pv2-ordCard__head.is-clickable:hover { background: var(--pv-inset); } /* Шкала во всю ширину карточки: полоса, а не «плашка с числом внутри» — подпись вынесена в строку фактов, поэтому читаемость не зависит ни от заполнения, ни от темы. */ .pv2-gauge { display: flex; width: 100%; height: 5px; border: none; padding: 0; background: var(--pv-inset-2); cursor: pointer; } .pv2-gauge:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-gauge.is-plain { cursor: default; } .pv2-gauge__fill { background: var(--pv-accent); } .pv2-gauge__tick { width: 2px; background: var(--pv-card); flex: none; } .pv2-gauge__over { background: var(--pv-over); } .pv2-ordCard__facts { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 10px 18px 12px; font: 500 11.5px var(--font-ui); color: var(--pv-muted); } .pv2-ordCard__facts b { color: var(--pv-text); font-weight: 600; } .pv2-ordCard__facts .is-over { color: var(--pv-over); font-weight: 600; } /* Один класс на два места: вне шапки это полоса с паддингами, внутри — прижатая вправо группа без них. Второй класс заводить не надо. */ .pv2-ordCard__head .pv2-ordCard__facts { padding: 0; margin-left: auto; justify-content: flex-end; flex: 0 1 auto; min-width: 0; } /* ЛЕСТНИЦА СУЖЕНИЯ — на @container, а не @media: колонку тянет сплиттер при неизменном окне, и медиазапрос здесь просто врёт (колонка может быть 500 px при экране 1920). Контейнером назначена обёртка колонки ордеров. */ @container (max-width: 940px) { /* Узко — два ряда ГРИДОМ, а не случайным переносом: третьего ряда не бывает, и «осталось» никогда не остаётся на строке одно. */ .pv2-ordCard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; } .pv2-ordCard__head .pv2-ordCard__id { grid-column: 1 / -1; flex-wrap: wrap; min-width: 0; } .pv2-ordCard__head .pv2-ordCard__facts { grid-column: 1; margin-left: 0; justify-content: flex-start; } .pv2-ordCard__head .pv2-ordCard__rest { grid-column: 2; justify-self: end; align-self: center; } } @container (max-width: 420px) { /* Остаётся только число: смысл — в title у самого блока. */ .pv2-ordCard__head .pv2-ordCard__rest span { display: none; } } /* Заголовок аккаунта — волосок, а не плашка. */ .pv2-acct { display: flex; align-items: center; gap: 8px; padding: 10px 18px 6px; font: 600 10px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--pv-dim); } .pv2-acct::after { content: ""; flex: 1; height: 1px; background: var(--pv-line); } /* ===== строка реквизита ===== */ .pv2-req { display: flex; align-items: center; gap: 12px; padding: 11px 18px; transition: background 120ms ease; } .pv2-req:hover { background: var(--pv-inset); } .pv2-req + .pv2-req { box-shadow: inset 0 1px 0 var(--pv-line); } /* Фон строки открывает её сделки: мини-шкала — полоса в 3 px. Меняется только курсор и подсветка, размеры строки — никогда (ловушка CLAUDE.md №4). */ .pv2-req.is-clickable { cursor: pointer; } .pv2-req__main { min-width: 0; flex: 1; display: grid; gap: 3px; } .pv2-req__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; } .pv2-req__num { font: 600 14px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv2-req__vol { text-align: right; white-space: nowrap; display: grid; gap: 4px; justify-items: end; } .pv2-req__vol .num { font: 500 11.5px var(--font-ui); color: var(--pv-muted); } .pv2-req__vol .num b { font: 600 12.5px var(--font-ui); color: var(--pv-text); } .pv2-req__vol .num b.is-over { color: var(--pv-over); } .pv2-req__volcap { font: 500 9.5px var(--font-ui); color: var(--pv-dim); } /* Мини-шкала строки — ВСЕГДА мир реквизита (объём реквизита против его же сделок). Шкала карточки может считать по ордеру: смешивать миры нельзя (shared/volume_scale.ts). */ .pv2-mbar { display: flex; width: 120px; height: 3px; border-radius: 2px; background: var(--pv-inset-2); overflow: hidden; border: none; padding: 0; cursor: pointer; } .pv2-mbar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-mbar span { background: var(--pv-accent); } .pv2-mbar .over { background: var(--pv-over); } /* ===== строка живой сделки: высота 42 всегда ===== Живая сделка подкрашена зелёным тоном и несёт тонкую зелёную кромку слева: на карточке с историей она обязана выделяться из тела карточки сразу, без вчитывания. Цвет не единственный носитель — рядом таймер и сумма. */ .pv2-orow { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 18px 0 56px; background: var(--pv-live-bg); box-shadow: inset 0 1px 0 var(--pv-line), inset 2px 0 0 var(--pv-accent); transition: background 120ms ease; } .pv2-orow:hover { background: var(--pv-live-bg-h); } .pv2-orow__timer { font: 600 13px var(--font-ui); min-width: 46px; } .pv2-orow.is-warn .pv2-orow__timer { color: var(--pv-warn); } .pv2-orow.is-dead .pv2-orow__timer { color: var(--pv-danger); } /* Апелляция главнее «живая»: и фон, и кромка становятся предупреждающими. */ .pv2-orow--appeal { background: var(--pv-warn-soft); box-shadow: inset 0 1px 0 var(--pv-line), inset 2px 0 0 var(--pv-warn); } .pv2-orow--appeal:hover { background: var(--pv-warn-soft); } .pv2-orow__rate { font: 500 12px var(--font-ui); color: var(--pv-muted); } .pv2-orow__sum { font: 600 13.5px var(--font-ui); white-space: nowrap; } .pv2-orow__spacer { margin-left: auto; } .pv2-orow__appeal { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font-ui); letter-spacing: .06em; color: var(--pv-warn); } .pv2-orow__appeal .pv2-ib { width: 24px; height: 24px; color: var(--pv-warn); } .pv2-orow__appeal .pv2-ib:hover { background: var(--pv-warn-soft); color: var(--pv-warn); } /* Итог внешней проверки чека на самой скрепке. Селектор с ТРЕМЯ классами намеренно: у правила выше вес такой же, как у `.pv2-ib--docBad` в одиночку, и цвет зависел бы от порядка строк в файле. Подложка нужна не для красоты — сама строка апелляции янтарная, и один лишь цвет глифа на ней читается плохо. */ .pv2-orow__appeal .pv2-ib.pv2-ib--docOk, .pv2-orow__appeal .pv2-ib.pv2-ib--docOk:hover { color: var(--pv-accent); background: var(--pv-accent-soft); } .pv2-orow__appeal .pv2-ib.pv2-ib--docBad, .pv2-orow__appeal .pv2-ib.pv2-ib--docBad:hover { color: var(--pv-danger); background: var(--pv-danger-soft); } /* 5+ живых — скролл внутри карточки, чтобы одна сделка не выдавила остальные. */ .pv2-ordCard__rows { max-height: 231px; overflow-y: auto; overscroll-behavior: contain; } /* ===== полоса площадок ===== */ /* Шапка НЕ переносится: у команды бывает пять-шесть аккаунтов площадок, и на переносе полоса балансов забирала всю строку, а «＋ Реквизит» с выбором дизайна уезжали под неё. Лишние площадки уходят в горизонтальный скролл самой полосы (скроллбары в портале скрыты глобально — base.css), кнопки остаются на месте. Перенос возвращается только в мобильной раскладке, где действия и должны занимать свою строку. */ .pv2-head { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; flex: none; } .pv2-platforms { display: flex; align-items: stretch; background: var(--pv-card); border-radius: var(--pv-r-s); box-shadow: var(--pv-shadow); overflow-x: auto; overscroll-behavior-x: contain; /* Ужимается именно полоса: `min-width: 0` снимает автоматический минимум flex-элемента, иначе она распирала бы шапку по ширине всех плиток. */ flex: 0 1 auto; min-width: 0; } .pv2-platform { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 46px; flex: none; white-space: nowrap; } .pv2-platform + .pv2-platform { box-shadow: inset 1px 0 0 var(--pv-line); } .pv2-platform__name { display: flex; align-items: center; gap: 7px; font: 600 12px var(--font-heading); letter-spacing: .03em; white-space: nowrap; } .pv2-platform__addr, .pv2-platform__bal, .pv2-platform__frz { background: none; border: none; cursor: pointer; padding: 1px 4px; margin: 0 -4px; border-radius: 6px; font-family: var(--font-ui); transition: background 160ms, color 160ms; } .pv2-platform__addr { font: 500 11px var(--font-ui); color: var(--pv-muted); display: inline-flex; align-items: center; gap: 5px; } .pv2-platform__bal { font: 600 14px var(--font-ui); color: var(--pv-text); } .pv2-platform__bal small { font: 500 10px var(--font-ui); color: var(--pv-muted); margin-left: 3px; } .pv2-platform__frz { font: 500 11px var(--font-ui); color: var(--pv-muted); display: inline-flex; align-items: center; gap: 4px; } .pv2-platform__addr:hover, .pv2-platform__bal:hover, .pv2-platform__frz:hover { background: var(--pv-inset-2); color: var(--pv-text); } .pv2-platform__addr:focus-visible, .pv2-platform__bal:focus-visible, .pv2-platform__frz:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-platform__addr[disabled] { opacity: .4; pointer-events: none; } .pv2-platform.is-updated .pv2-platform__bal { color: var(--pv-accent); transition: color .3s ease; } /* Числа подняты из памяти прошлого открытия и ещё не подтверждены площадкой. Приглушаем ровно цифры — имя площадки и адрес от возраста не портятся, а гасить плитку целиком значило бы прятать то, ради чего её и показали. */ .pv2-platform.is-stale .pv2-platform__bal, .pv2-platform.is-stale .pv2-platform__frz { opacity: .55; transition: opacity .25s ease; } /* Действия не сжимаются и не переносятся: «＋ Реквизит» — постоянная мишень, и её ширина не имеет права зависеть от числа площадок у команды. */ .pv2-head__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; } .pv2-head__actions .pv2-btn { height: 40px; border-radius: 12px; } /* ===== выбор дизайна страницы ===== Сегмент на две раскладки. Живёт в БАЗЕ, а не в дельте дизайна: кнопка одинакова в обоих дизайнах и рисуется всегда — без неё оператор, выбравший кладку, не смог бы вернуться. Габарит тот же, что у «＋ Реквизит»: 40px. Подсветка держится на aria-pressed, а не на классе: состояние обязано быть доступно диктору, а не только глазу. */ .pv2-dsw { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px; border-radius: 12px; background: var(--pv-card); box-shadow: var(--pv-shadow); flex: none; } .pv2-dsw__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 34px; border: none; border-radius: 9px; background: none; color: var(--pv-muted); cursor: pointer; transition: background var(--transition), color var(--transition); } .pv2-dsw__btn:hover { background: var(--pv-inset); color: var(--pv-text); } .pv2-dsw__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-dsw__btn[aria-pressed="true"] { background: var(--pv-accent-soft); color: var(--pv-accent); } .pv2-dsw__btn[aria-pressed="true"]:hover { background: var(--pv-accent-soft); } /* Глиф раскладки — не значок: своя геометрия 22×16, слева блоки ордеров, справа узкий рельс. Схема, а не слово: подпись живёт в title. */ .pv2-dswGlyph { width: 22px; height: 16px; flex: none; display: block; } /* ===== сетка страницы ===== */ .pv2-grid { display: grid; grid-template-columns: minmax(var(--pv-orders-min), 1fr) var(--pv-splitter-w) var(--pv-rail-w); /* minmax(0,1fr), а НЕ 1fr: голое 1fr — это minmax(auto,1fr), и ряд распухает под содержимое колонки. Колонка теряет свою прокрутку, карточки уезжают за пределы оболочки и обрезаются её overflow:hidden. В кладке видно всегда. */ grid-template-rows: minmax(0, 1fr); align-items: start; flex: 1; min-height: 0; } /* container-type — ради лестницы сужения шапки карточки (@container выше): ширину колонки задаёт сплиттер, а не окно. Обёртка, а не сама .pv2-col: контейнер не должен быть ещё и прокручиваемым элементом. */ /* ===== масштаб зон (лупа — общий виджет, css/ui/zoom.css) ===== Свой масштаб, не браузерный: `zoom` меняет РАСКЛАДКУ, поэтому в уменьшенную колонку честно влезает больше карточек, а прокрутка и попадание мышью остаются в своих координатах. Зумируются грид-ДЕТИ, а не сама .pv2-grid: сетку зумировать нельзя — ширину рельса ведёт сплиттер, и она живёт в ФИЗИЧЕСКИХ пикселях (у раздела Bybit деление ширины на масштаб уже пробовали — полосу дёргало рывком на ровно этот множитель). По той же причине --pv-orders-min здесь ни на что не умножается: минимум колонки остаётся физическим. `container-type` на .pv2-colWrap НЕ переносим — он тут и остаётся, просто этот же узел теперь ещё и зумируется: лестница сужения шапки карточки считается в масштабированных единицах, то есть при 85% в колонку влезает более широкая раскладка. Это и требуется. */ .pv2-colWrap { position: relative; min-width: 0; min-height: 0; height: 100%; container-type: inline-size; zoom: var(--pv2-zoom-orders, 1); } .pv2-col[data-rail-col] { zoom: var(--pv2-zoom-rail, 1); } /* Окно реквизита (создание и правка) — одна форма на оба случая, она же открывается из карточки ордера Bybit. Конверту-подложке zoom не даём: масштабируется содержимое, иначе окно уезжало бы от центра. */ .pv2-dlg--req { zoom: var(--pv2-zoom-dlg, 1); } .pv2-col { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .pv2-colHead { display: flex; align-items: baseline; gap: 10px; /* Нижний отступ 10 → 6: ровно на столько строка выросла, приняв в себя сегмент режима (было ~14 px текста, стало 18 px кнопки). Итог тот же 24 px — колонка карточек не потеряла ни пикселя рабочей высоты. */ margin: 0 4px 6px; } /* ===== сегмент «что показывать» ===== Три режима показа колонки. В отличие от сегмента дизайна он ГОЛЫЙ — без подложки и тени: тот стоит в шапке страницы рядом с кнопкой 40 px, а этот живёт в строке подписи высотой в один текст, и любая лишняя обвязка отнимала бы высоту у самих карточек — ровно то, чего просили не делать. Подсветка держится на aria-pressed, а не на классе: состояние обязано быть доступно диктору, а не только глазу. */ .pv2-flt { display: inline-flex; align-items: center; align-self: center; gap: 1px; flex: none; } .pv2-flt__btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--pv-dim); cursor: pointer; transition: background var(--transition), color var(--transition); } .pv2-flt__btn:hover { background: var(--pv-inset); color: var(--pv-text); } .pv2-flt__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-flt__btn[aria-pressed="true"] { background: var(--pv-accent-soft); color: var(--pv-accent); } .pv2-flt__btn[aria-pressed="true"]:hover { background: var(--pv-accent-soft); } /* Глиф режима — 14 px: у общего .pv2-icon 15 px, и в кнопке 18 px он упирался бы в края. Три состояния различаются силуэтом, а не цветом. */ .pv2-fltGlyph { width: 14px; height: 14px; flex: none; display: block; } /* Сплиттер: жёлоб 14px с ручкой посередине (ui/splitter.js). */ .pv2-splitter { display: flex; justify-content: center; align-items: center; align-self: stretch; cursor: col-resize; background: none; border: none; padding: 0; } .pv2-splitter__bar { position: relative; width: 2px; height: 100%; background: var(--pv-line); border-radius: 2px; } .pv2-splitter__bar::after { content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: 8px; height: 44px; border-radius: 5px; background: var(--pv-inset-2); box-shadow: inset 0 0 0 1px var(--pv-line); } .pv2-splitter:hover .pv2-splitter__bar, .pv2-splitter:focus-visible .pv2-splitter__bar { background: var(--pv-accent); } .pv2-splitter:hover .pv2-splitter__bar::after, .pv2-splitter:focus-visible .pv2-splitter__bar::after { background: var(--pv-accent); box-shadow: none; } .pv2-splitter:focus-visible { outline: none; } /* ===== рельс «Мои реквизиты» ===== */ .pv2-rail { background: var(--pv-card); border-radius: var(--pv-r); box-shadow: var(--pv-shadow); /* Плиткой в 2–3 ряда: при широком рельсе одна колонка строк тратила бы полэкрана на воздух (правка прототипа). */ display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 10px; align-content: start; padding: 0 12px 12px; } .pv2-rail__head, .pv2-rail .pv2-acct, .pv2-rail__empty { grid-column: 1 / -1; } .pv2-rail__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 -12px; padding: 12px 14px; box-shadow: inset 0 -1px 0 var(--pv-line); } .pv2-rail__filters { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .pv2-rail__empty { padding: 20px; text-align: center; color: var(--pv-muted); font-size: 12px; } .pv2-rrow { padding: 11px 12px; max-width: 420px; border-radius: 12px; background: var(--pv-inset); transition: background 120ms ease, opacity var(--transition); } .pv2-rrow:hover { background: var(--pv-inset-2); } .pv2-rrow__top { display: flex; align-items: center; gap: 10px; } .pv2-rrow__num { font: 600 13.5px var(--font-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv2-rrow__meta { margin: 3px 0 0 36px; } .pv2-rrow__bot { display: flex; align-items: center; gap: 14px; margin: 7px 0 0 36px; font: 500 11px var(--font-ui); color: var(--pv-muted); flex-wrap: wrap; } .pv2-rrow__bot span { white-space: nowrap; } .pv2-rrow__bot b { color: var(--pv-text); font: 600 11.5px var(--font-ui); } .pv2-rrow__actions { margin-left: auto; display: flex; gap: 2px; align-items: center; } .pv2-rrow .pv2-bank { width: 24px; height: 24px; } .pv2-rrow.is-off { opacity: .55; } /* ===== тумблер ===== */ .pv2-switch { position: relative; width: 40px; height: 22px; flex: none; cursor: pointer; } .pv2-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .pv2-switch__ui { position: absolute; inset: 0; border-radius: 999px; background: var(--pv-inset-2); transition: background var(--transition); pointer-events: none; } .pv2-switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--pv-muted); transition: transform var(--transition), background var(--transition); } .pv2-switch input:checked + .pv2-switch__ui { background: var(--pv-accent); } .pv2-switch input:checked + .pv2-switch__ui::after { transform: translateX(18px); background: #07130c; } .pv2-switch input:focus-visible + .pv2-switch__ui { box-shadow: 0 0 0 3px var(--input-focus); } .pv2-switch.is-busy .pv2-switch__ui::after { animation: pv2-blink .8s ease infinite; } .pv2-switch.is-disabled { opacity: .45; pointer-events: none; } /* ===== поля: заливка вместо рамки ===== */ .pv2-field { display: grid; gap: 6px; min-width: 0; } .pv2-field__label { font: 600 10px var(--font-ui); letter-spacing: .1em; color: var(--pv-dim); text-transform: uppercase; } .pv2-field__hint { font: 400 11px var(--font-ui); color: var(--pv-muted); } /* ВАЖНО: фон полей задаётся и переключается ТОЛЬКО через background-color, а не через шорткат `background`. Шорткат сбрасывает background-image в none и background-position в 0 0, а `transition: background` честно анимирует этот переезд — нарисованный градиентами шеврон уезжал в левый верхний угол при каждом наведении (жалоба владельца 23.08.2026). */ .pv2-input, .pv2-select { height: 40px; box-sizing: border-box; width: 100%; padding: 0 13px; border: none; border-radius: var(--pv-r-s); background-color: var(--pv-inset); color: var(--pv-text); font: 500 13px var(--font-ui); transition: background-color var(--transition), box-shadow var(--transition); } /* Селект — НАТИВНЫЙ с opt-out data-hc-select="1": портал меню customSelect живёт на z 90, а окна страницы — в стеке layers.js от z 10020, и улучшенный список открывался бы ПОД окном (ui/order-card/layers.js). Поверх него работает свой виджет (pages/priem2/dialogs/select.js) — он и рисует шеврон; эти правила остаются для случая, когда виджет не поднялся. */ .pv2-select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } .pv2-select option { background: var(--pv-card); color: var(--pv-text); } .pv2-input::placeholder { color: var(--pv-dim); } .pv2-input:hover, .pv2-select:hover { background-color: var(--pv-inset-2); } .pv2-input:focus, .pv2-select:focus { outline: none; background-color: var(--pv-inset-2); box-shadow: 0 0 0 3px var(--input-focus); } .pv2-input[readonly] { background: none; box-shadow: inset 0 -1px 0 var(--pv-line); border-radius: 0; padding: 0 2px; color: var(--pv-muted); } .pv2-input[disabled], .pv2-select[disabled] { opacity: .55; } .pv2-formError { font: 500 12px var(--font-ui); color: var(--pv-danger); min-height: 16px; } /* ===== выпадающий список окон (pages/priem2/dialogs/select.js) ===== */ .pv2sel { position: relative; width: 100%; min-width: 0; } /* Нативный селект остаётся в разметке носителем значения: форма пишет в него `.value` и перечитывает `selectedOptions`. Поэтому не display:none, а прозрачный слой поверх кнопки, как у глобального customSelect. */ .pv2sel__native { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; } /* Кнопка наследует классы поля (.pv2-select), поэтому заливка, радиус и шрифт приходят оттуда. Свой шеврон — ::after: он умеет поворачиваться, а нарисованный градиентами фон при hover уезжал в угол. */ .pv2sel__btn { position: relative; width: 100%; text-align: left; padding-right: 36px; /* !important, а не порядок правил: класс .pv2-select приезжает на кнопку вместе с оформлением поля и несёт свой градиентный шеврон. */ background-image: none !important; cursor: pointer; } .pv2sel__label { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv2sel__btn::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .5; /* translateY постоянен в обоих состояниях: меняется ТОЛЬКО угол, поэтому стрелка разворачивается на месте, а не переезжает. */ transform: translateY(-50%) rotate(45deg); transition: transform var(--transition); pointer-events: none; } .pv2sel__btn.is-open::after { transform: translateY(-50%) rotate(-135deg); } .pv2sel__btn[disabled] { opacity: .55; cursor: default; } .pv2sel__menu { position: fixed; background: var(--pv-card); border-radius: 14px; box-shadow: var(--pv-shadow-pop); padding: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; animation: pv2-in 160ms cubic-bezier(.2, .8, .2, 1) both; } .pv2sel__list { padding: 6px; } /* Набранное показываем: список НЕ фильтруется, он подсвечивает совпадение — без пузыря непонятно, почему подсветка прыгает. */ .pv2sel__type { display: none; position: sticky; top: 0; z-index: 2; padding: 9px 12px; background: var(--pv-inset); color: var(--pv-text); font: 600 12px var(--font-ui); border-radius: 14px 14px 0 0; box-shadow: inset 0 -1px 0 var(--pv-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv2sel__type.is-on { display: block; } .pv2sel__type::before { content: "Поиск: "; color: var(--pv-muted); font-weight: 500; } /* Высота строки постоянна: растущая при наведении строка в прокручиваемом списке даёт самоподдерживающийся каскад (ловушка CLAUDE.md №4). */ .pv2sel__opt { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; cursor: pointer; user-select: none; font: 500 12.5px var(--font-ui); color: var(--pv-text); } .pv2sel__opt:hover { background: var(--pv-inset); } .pv2sel__opt.is-active { background: var(--pv-inset-2); } /* Выбранный отмечен ЗАЛИВКОЙ и галочкой, а не цветом текста: --primary один на обе темы (#2bd576), и зелёная подпись на белом фоне светлой темы читается плохо. Цвет остаётся у галочки — это значок, а не текст. */ .pv2sel__opt.is-selected { background: var(--pv-accent-soft); } .pv2sel__opt.is-selected.is-active { background: var(--pv-accent-soft); box-shadow: inset 0 0 0 1px var(--pv-accent); } .pv2sel__opt.is-disabled { opacity: .45; cursor: default; } .pv2sel__opt.is-disabled:hover { background: none; } .pv2sel__check { width: 14px; flex: none; text-align: center; color: var(--pv-accent); font-weight: 700; } .pv2sel__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== окна ===== */ .pv2-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: flex-start; padding: 12px; overflow-y: auto; overscroll-behavior: contain; animation: pv2-fade 160ms ease both; } [data-theme="light"] .pv2-backdrop { background: rgba(30, 34, 30, .35); } .pv2-dlg { background: var(--pv-card); border-radius: 18px; box-shadow: var(--pv-shadow-pop); padding: 20px; color: var(--pv-text); width: 100%; max-width: 640px; box-sizing: border-box; /* Центрирование по обеим осям — именно `margin: auto`, а не `align-items: center` у подложки. Разница видна на высоком окне («Сделки ордера» с длинным списком): центрирование флексом при переполнении срезает ВЕРХ панели, и до шапки с крестиком уже не доскроллить. Авто-поля же центрируют, пока есть место, и честно прижимают к краю, когда места нет. */ margin: auto; animation: pv2-pop 180ms cubic-bezier(.2, .8, .2, 1) both; } .pv2-dlg--narrow { max-width: 440px; } .pv2-dlg--wide { max-width: 820px; padding: 20px 0 8px; } /* Отдельно от --wide: у того обнулены боковые паддинги ради строк во всю ширину, а просмотрщику нужны обычные поля. Ширина рассчитана на ДВЕ колонки: слева документ, справа разбор и проверка. В одну колонку скан паспорта и дословный ответ бота не помещаются вместе — приходилось прокручивать окно, теряя из виду то, что сверяешь. */ .pv2-dlg--docs { max-width: min(1720px, 96vw); } .pv2-dlg__head { display: flex; align-items: center; gap: 12px; } .pv2-dlg__title { font: 600 16px var(--font-heading); } .pv2-dlg__spacer { margin-left: auto; } .pv2-dlg__state { font: 500 11px var(--font-ui); color: var(--pv-muted); } .pv2-dlg__meta { font: 500 11.5px var(--font-ui); color: var(--pv-muted); margin: 6px 0 0; } .pv2-dlg__text { margin: 10px 0 0; font-size: 13.5px; } .pv2-dlg__warn { margin: 10px 0 0; font: 500 11.5px var(--font-ui); color: var(--pv-warn); } .pv2-dlg__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .pv2-dlg__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 16px; } .pv2-dlg__grid .pv2-field--wide { grid-column: 1 / -1; } .pv2-dlg--wide .pv2-dlg__head, .pv2-dlg--wide .pv2-dlg__meta, .pv2-dlg--wide .pv2-dlg__note { padding-left: 20px; padding-right: 20px; } /* Сумма в эхо-подтверждении: цифры крупно, курс рядом словом. */ .pv2-sum { display: flex; align-items: baseline; gap: 10px; background: var(--pv-inset); border-radius: 12px; padding: 12px 14px; margin-top: 12px; flex-wrap: wrap; } .pv2-sum b { font-size: 16px; } .pv2-sum__usdt { color: var(--pv-accent); font-weight: 600; font-size: 12px; } .pv2-sum__rate { color: var(--pv-muted); font-size: 11px; } /* ===== поповер подсказки ордеров (в ) ===== */ .pv2-ordPick { position: fixed; background: var(--pv-card); border-radius: 14px; box-shadow: var(--pv-shadow-pop); padding: 6px; width: 440px; max-width: calc(100vw - 16px); max-height: 320px; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; animation: pv2-in 180ms cubic-bezier(.2, .8, .2, 1) both; } .pv2-ordPick__cap { font: 600 9.5px var(--font-ui); letter-spacing: .12em; color: var(--pv-dim); text-transform: uppercase; padding: 8px 10px 6px; } /* Высота строки постоянна: список прокручиваемый, а растущая при наведении строка даёт самоподдерживающийся каскад (ловушка CLAUDE.md №4). */ .pv2-ordPick__row { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer; font: 500 12px var(--font-ui); color: var(--pv-text); background: none; border: none; width: 100%; text-align: left; } .pv2-ordPick__row:hover { background: var(--pv-inset); } .pv2-ordPick__row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); } .pv2-ordPick__time { color: var(--pv-muted); font-size: 10.5px; min-width: 74px; } .pv2-ordPick__sum { margin-left: auto; font-weight: 600; } .pv2-ordPick__nick { color: var(--pv-muted); font-size: 10.5px; min-width: 86px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv2-ordPick__busy { font: 600 9px var(--font-ui); color: var(--pv-warn); background: var(--pv-warn-soft); border-radius: 5px; padding: 2px 6px; } .pv2-ordPick__note { font: 400 10.5px var(--font-ui); color: var(--pv-muted); padding: 8px 10px; box-shadow: inset 0 1px 0 var(--pv-line); margin-top: 4px; } /* ===== окно «Сделки ордера» ===== */ .pv2-deal { display: flex; align-items: center; gap: 14px; padding: 12px 20px; box-shadow: inset 0 1px 0 var(--pv-line); flex-wrap: wrap; } .pv2-deal__id { min-width: 210px; } .pv2-deal__id b { font: 600 13px var(--font-ui); display: block; } .pv2-deal__id span { font: 400 10.5px var(--font-ui); color: var(--pv-muted); } .pv2-deal__money { margin-left: auto; text-align: right; } .pv2-deal__money b { font: 600 13px var(--font-ui); display: block; } .pv2-deal__money span { font: 500 10.5px var(--font-ui); color: var(--pv-accent); } .pv2-deal__money span i { color: var(--pv-muted); font-style: normal; } .pv2-deal__req { font: 500 10.5px var(--font-ui); color: var(--pv-muted); } .pv2-notes { padding: 12px 20px; background: var(--pv-inset); } /* Список существующих заметок раскрыт всегда; форма добавления встаёт под ним по кнопке. Когда обе видны — не дублируем верхний отступ, читается как одна секция. */ .pv2-notes--list:not([hidden]) + .pv2-notes--add { padding-top: 4px; } .pv2-notes__row { display: flex; gap: 10px; margin-top: 8px; align-items: baseline; flex-wrap: wrap; } .pv2-notes__who { font: 500 10.5px var(--font-ui); color: var(--pv-muted); } .pv2-notes__text { font-size: 12.5px; } .pv2-notes__add { display: flex; gap: 8px; margin-top: 10px; } .pv2-notes__add .pv2-input { height: 34px; background: var(--pv-inset-2); } .pv2-notes__add .pv2-btn { height: 34px; background: var(--pv-inset-2); } .pv2-dlg__note { margin: 10px 20px; font: 400 11px var(--font-ui); color: var(--pv-muted); } .pv2-dlg__list { margin-top: 14px; } /* ===== просмотрщик документов ===== 280 px в окне на 640 px — скан паспорта нечитаем, а именно за ним сюда и заходят. Высота идёт от экрана, ширина — от своего модификатора окна. Сетка стоит на ВНУТРЕННЕМ контейнере, а не на панели окна: панель держит ещё шапку, мета-строку, счётчик и пейджер, и они разъехались бы по колонкам. Прецедент этого приёма в этом же файле — `.pv2-dlg__grid` у формы реквизита. Высота строки задана ЯВНО. У грида высота строки по умолчанию — по содержимому, и правая колонка с длинным ответом бота растянула бы её, вытянув документ вслед за собой на три экрана. */ .pv2-docs { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); /* 80vh, а не больше: над сеткой и под ней живут шапка, мета-строка, счётчик «проверено N из M» и пейджер — около 160 px. На экране 1080 сетка в 88vh вместе с ними давала бы 1110 px, и пейджер уходил бы за нижний край. */ grid-template-rows: min(80vh, 1040px); gap: 14px; margin-top: 12px; } /* Файлов нет — правой колонки тоже: дорожки заданы явно, поэтому одна колонка тут не «схлопывание сетки», а её нормальное состояние. */ .pv2-docs.is-alone { grid-template-columns: minmax(0, 1fr); } .pv2-docs.is-alone .pv2-docs__side { display: none; } /* Обеим колонкам min-height: 0 — без него ребёнок грида не может быть НИЖЕ своего содержимого, и внутренняя прокрутка не включается вовсе. */ .pv2-docs > * { min-height: 0; } .pv2-docs__side { overflow: auto; /* Докрутил разбор до конца — прокрутка не перескакивает на страницу под окном: там живая лента, и уехать по ней посреди сверки очень легко. */ overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; } .pv2-doc { height: 100%; border-radius: 12px; background: var(--pv-inset); display: flex; align-items: center; justify-content: center; overflow: hidden; } .pv2-doc img { max-width: 100%; max-height: 100%; object-fit: contain; } .pv2-doc iframe { width: 100%; height: 100%; border: none; background: #fff; } .pv2-doc__msg { color: var(--pv-muted); font-size: 12px; padding: 12px; text-align: center; } .pv2-doc__cap { display: flex; align-items: center; gap: 10px; min-height: 30px; } .pv2-doc__name { font: 500 12px var(--font-ui); color: var(--pv-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv2-doc__cap .pv2-btn { margin-left: auto; flex: none; } /* «Проверено N из M» — над пейджером. Зелёная скрепка означает «всё, что проверено, чисто», а не «проверено всё»: без этой строки непроверенный чек прячется за чужой зеленью. */ .pv2-doc__count { margin-top: 12px; text-align: center; font: 500 11.5px var(--font-ui); color: var(--pv-muted); } .pv2-doc__pager { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; } .pv2-doc__pager .is-current { background: var(--pv-accent-soft); color: var(--pv-accent); } /* ===== короткое сообщение вместо разбора ===== Осталось от прежнего разбора ровно то, что окно говорит САМО: «этот файл не PDF» и «документ наш». Всё остальное — вердикт, сверка, нюансы, раскрытия — переехало в общую панель (`ui/detecto/docReport.js` и `css/ui/detecto-doc.css`): она нужна ещё в просмотрщике вложений и в окне под лупой, а `--pv-*` там нет. `overflow-wrap` остаётся и здесь: имя файла и текст сообщения приходят от третьей стороны, и длинная строка без пробелов увела бы окно вбок. */ .pv2-chk { border-radius: 10px; padding: 10px 12px; background: var(--pv-inset); border-left: 3px solid var(--pv-line); overflow-wrap: anywhere; } .pv2-chk--none { color: var(--pv-muted); } /* ===== пустые состояния ===== */ .pv2-empty { background: var(--pv-card); border-radius: 12px; box-shadow: var(--pv-shadow); padding: 20px; text-align: center; color: var(--pv-muted); font-size: 12px; } /* Выход из отфильтрованной пустоты. Кнопка, а не ссылка: никуда не ведёт, а меняет вид — но выглядеть обязана ссылкой, иначе её не найдут глазами. */ .pv2-empty__more { border: 0; padding: 0; background: none; font: inherit; color: var(--pv-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .pv2-empty__more:hover { color: var(--pv-text); } .pv2-empty__more:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--input-focus); border-radius: 4px; } /* ===== подсказка «скопировано» ===== Сдвиг по вертикали — на ВСЮ высоту подсказки (-100%), а не на несколько пикселей: JS ставит top по краю элемента, и коробка росла вниз, накрывая собой то, что скопировали. У верха экрана JS вешает .is-below — там подсказка уходит под элемент. */ .pv2-copyHint { position: fixed; z-index: 100001; padding: 5px 10px; border-radius: 8px; background: var(--primary); color: #07130c; font: 600 11px var(--font-ui); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0; transform: translate(-50%, -100%); transition: opacity 140ms, transform 140ms; } .pv2-copyHint.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); } .pv2-copyHint.is-below { transform: translate(-50%, -4px); } .pv2-copyHint.is-below.is-on { transform: translate(-50%, 8px); } /* ===== анимации ===== */ @keyframes pv2-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes pv2-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pv2-pop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } @keyframes pv2-out { from { opacity: 1; } to { opacity: 0; } } @keyframes pv2-flash { 0% { background: var(--pv-accent-soft); } 100% { background: transparent; } } @keyframes pv2-pulse { 0% { box-shadow: 0 0 0 0 var(--pv-accent-soft); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes pv2-spin { to { transform: rotate(360deg); } } @keyframes pv2-blink { 50% { opacity: .4; } } .pv2 .p-enter { animation: pv2-in 180ms cubic-bezier(.2, .8, .2, 1) both; } .pv2 .is-flash { animation: pv2-flash .7s ease 1; } /* Слой ухода: клон удаляемой карточки гаснет поверх колонки, поэтому соседи не прыгают вверх рывком. */ .pv2-leaveLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; } .pv2-leaveLayer > * { position: absolute; animation: pv2-out 160ms ease both; } /* Системная настройка «меньше движения» — гасим всё, что двигается. */ @media (prefers-reduced-motion: reduce) { .pv2 *, .pv2-layer * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ===== мобильная раскладка ===== Предикат тот же, что у mobile.css: одна колонка, рельс под лентой, общий скролл страницы (внутренние исчезают — иначе на телефоне два скролла). */ @media (max-width: 860px), (orientation: landscape) and (max-height: 520px) { .pv2 { height: auto; min-height: 0; } .pv2-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 12px; } .pv2-splitter { display: none; } .pv2-col { height: auto; overflow: visible; padding-right: 0; } .pv2-colWrap { height: auto; } /* На телефоне действия занимают свою строку — здесь перенос нужен. */ .pv2-head { flex-wrap: wrap; } .pv2-platforms { flex-basis: 100%; } .pv2-head__actions { margin-left: 0; width: 100%; } .pv2-head__actions .pv2-btn { width: 100%; } /* Раскладка здесь одна на оба дизайна (сетка в один столбец, кладка гаснет сама) — переключателю нечего переключать. Правило стоит ВНУТРИ этого блока, а не своим @media: предикат не имеет права разъехаться с сеткой. */ .pv2-dsw { display: none; } /* Длинные числа (19-значный ордер, счёт из 20 цифр) не должны распирать экран. */ .pv2-ordNum, .pv2-req__num, .pv2-rrow__num { white-space: normal; overflow-wrap: anywhere; } /* Шапку здесь НЕ трогаем: узкая колонка и так попадает в @container (max-width:940px), а прежние flex-wrap/text-align спорили бы с гридом. */ /* Живые строки теряют отступ под текст реквизита: места нет. */ .pv2-orow { padding-left: 18px; gap: 10px; } .pv2-req { flex-wrap: wrap; } .pv2-req__vol { justify-items: start; text-align: left; } .pv2-rail { grid-template-columns: 1fr; } .pv2-rrow { max-width: none; } .pv2-dlg__grid { grid-template-columns: 1fr; } /* Окно документов — в один столбец ТЕМ ЖЕ предикатом, что и страница: свой @media тут разъехался бы с сеткой при первой же правке. Просмотрщик уходит НИЖЕ разбора: на телефоне сначала читают вердикт и сверку, а картинку открывают отдельной вкладкой. */ .pv2-docs { grid-template-columns: 1fr; grid-template-rows: auto auto; } .pv2-docs .pv2-doc { order: 2; height: min(60vh, 420px); } .pv2-docs__side { order: 1; overflow: visible; } /* Потолок высоты у раскрытого сырья теперь свой у панели (`.drep-pre`): она живёт ещё в двух окнах, и правило обязано ехать вместе с ней. */ .pv2-backdrop { padding: 10px; } }