/* «Приём v2» — дизайны страницы. * * Дизайн 1 «Лента» — это сам priem2.css, отдельных правил не имеет. * Дизайн 2 «Тетрис» — кладка ордеров: ТОЛЬКО раскладка и плотность, ни одного * нового класса и ни одной правки в рендерерах. Дизайн — это раскладка, а не * другой продукт: разметка карточки, store, окна и копирайт одинаковы в обоих. * * Скоуп — атрибут data-pv2-design на (ставит app.js до первого рендера * роутера), как data-theme: секцию раздела роутер пересоздаёт, а окна страницы * живут в вне секции. * * Файл подключается ПОСЛЕ priem2.css: дельта перекрывает базу очерёдностью и * специфичностью :root[data-pv2-design]. */ :root[data-pv2-design="tetris"] .pv2-grid { --pv-orders-min: 420px; } /* ===== 1 · КЛАДКА ===== Число полос считает браузер по ширине колонки — её тянет сплиттер. МНОГОКОЛОННИК — ВНУТРЕННЯЯ ЛЕНТА [data-list], А НЕ САМА .pv2-col. У многоколонника с ЗАДАННОЙ высотой колонки заполняются до этой высоты и продолжаются ВБОК: получилась бы горизонтальная прокрутка вместо кладки. Поэтому скроллером остаётся .pv2-col, а кладка живёт на ленте с height:auto. */ :root[data-pv2-design="tetris"] .pv2-col[data-orders] { padding-right: 8px; } :root[data-pv2-design="tetris"] .pv2-col[data-orders] [data-list] { column-width: 400px; column-gap: 12px; height: auto; min-height: 0; overflow: visible; } :root[data-pv2-design="tetris"] .pv2-col[data-orders] .pv2-ordCard { break-inside: avoid; margin: 0 0 12px; } :root[data-pv2-design="tetris"] .pv2-col[data-orders] .pv2-ordCard + .pv2-ordCard { margin-top: 0; } /* Пустое состояние — во всю ширину кладки, иначе уедет в первую полосу. */ :root[data-pv2-design="tetris"] .pv2-col[data-orders] .pv2-empty { column-span: all; } /* ===== 2 · ЖИВЫЕ СДЕЛКИ — ВСЕ НА ВИДУ, БЕЗ ВНУТРЕННИХ СКРОЛЛОВ ===== Активную сделку нельзя прятать за прокрутку: таймер тикает у всех сразу, и пятая сделка ничем не менее срочная, чем первая. Карточка растёт под список — в кладке это по карману: высоту балансируют полосы, а не одна лента. Сумма и круглая кнопка ✓ — ФИКСИРОВАННАЯ ПРАВАЯ КОЛОНКА: мишень денежного действия не имеет права ездить от строки к строке. Блок апелляции шире остальных примерно на 100px и раньше выталкивал сумму с кнопкой за край тайла — сжимаем гапы, таймер и колонку суммы. Слово «АПЕЛЛЯЦИЯ» остаётся: цвет не единственный носитель смысла. */ :root[data-pv2-design="tetris"] .pv2-ordCard__rows { max-height: none; overflow: visible; } :root[data-pv2-design="tetris"] .pv2-orow { gap: 8px; } :root[data-pv2-design="tetris"] .pv2-orow__timer { min-width: 42px; flex: none; } :root[data-pv2-design="tetris"] .pv2-orow__rate { flex: none; } :root[data-pv2-design="tetris"] .pv2-orow__appeal { min-width: 0; flex: 0 1 auto; overflow: hidden; } :root[data-pv2-design="tetris"] .pv2-orow__spacer { display: none; } :root[data-pv2-design="tetris"] .pv2-orow__sum { margin-left: auto; min-width: 92px; text-align: right; flex: none; } /* ПОЛОСЫ ПРОКРУТКИ ЗДЕСЬ НЕ ПРЯЧУТСЯ И НЕ ДОЛЖНЫ. Исходное ТЗ просило скрыть их у колонки и полосы площадок, но портал уже прячет их ГЛОБАЛЬНО: css/base.css, `* { scrollbar-width: none }` плюс `*::-webkit-scrollbar { width: 0 }`. Правило в дельте было бы мёртвым дублем, а спор «колонка или ещё и рельс» — спором ни о чём: видимой полосы нет ни у одного элемента портала и не было до кладки. Ширину полосы кладка тоже не теряет — терять нечего. */ /* ===== 3 · ТАЙЛ: раскладка и плотность узкой карточки ===== Включается, когда в колонке помещается ВТОРАЯ полоса (400 + 12 + 400 = 812 → порог 820). На одной полосе правила ниже не срабатывают, и карточка честно вырождается в дизайн 1. КОНТЕЙНЕР ОСТАЁТСЯ .pv2-colWrap — тот же, что у лестницы сужения priem2.css. Переносить container-type на карточку НЕЛЬЗЯ: базовая лестница начала бы мерить тайл в 400px и погасила бы подписи «осталось». Перекрываем её. */ @container (min-width: 820px) { /* Шапка тайла: номер → крупный остаток → факты. Три ряда вместо одной строки: в кладке места по горизонтали мало, по вертикали — с запасом. */ :root[data-pv2-design="tetris"] .pv2-ordCard__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 14px 11px; } :root[data-pv2-design="tetris"] .pv2-ordCard__head .pv2-ordCard__id { grid-column: 1; min-width: 0; flex: 0 1 auto; flex-wrap: wrap; gap: 6px 9px; } :root[data-pv2-design="tetris"] .pv2-ordCard__head .pv2-ordCard__rest { grid-column: 1; justify-self: start; align-self: baseline; } :root[data-pv2-design="tetris"] .pv2-ordCard__head .pv2-ordCard__facts { grid-column: 1; margin: 0; padding: 0; justify-content: flex-start; flex-wrap: wrap; } /* Плотность тайла: паддинги 14 вместо 18, живые строки — под значок банка. */ :root[data-pv2-design="tetris"] .pv2-acct { padding: 9px 14px 6px; } :root[data-pv2-design="tetris"] .pv2-req { padding: 10px 14px; } :root[data-pv2-design="tetris"] .pv2-ordCard__facts { padding: 9px 14px 11px; } :root[data-pv2-design="tetris"] .pv2-orow { padding: 0 14px 0 52px; } :root[data-pv2-design="tetris"] .pv2-mbar { width: 92px; } /* Мета-строка реквизита — ДВЕ СТРОКИ, а не эллипсис. Базовая .pv2-dim стоит nowrap: на 400px она отрезала ровно лимиты — второй по важности факт строки. Терять данные ради плотности нельзя, лишняя строка дешевле. */ :root[data-pv2-design="tetris"] .pv2-req__main .pv2-dim { white-space: normal; overflow: visible; text-overflow: clip; } } /* ===== 4 · Одна полоса — честное вырождение в дизайн 1 ===== Правила тайла не сработали, базовая лестница @container (max-width: 940px) из priem2.css работает как раньше. Своих правил здесь не нужно. */ /* ===== 5 · Мобильная раскладка: снятие потолка живых сделок ОТМЕНЯЕТСЯ ===== Предикат тот же, что у сетки в priem2.css, — на нём же спрятан переключатель дизайна. Раз вернуться в «Ленту» отсюда нечем, ни одно правило кладки не имеет права оставлять след, который человек не может отменить. Отмена ровно одна и именно эта. Снятый потолок — размен «карточка растёт под список, высоту балансируют полосы»; полос здесь нет, сетка в один столбец, и одна сделка снова выдавливает с экрана все остальные — ради чего потолок в базе и стоит. Остальные правила раздела 2 (выравнивание суммы и ✓ в колонку) на мобильной раскладке безвредны и полезны, их не трогаем. */ @media (max-width: 860px), (orientation: landscape) and (max-height: 520px) { :root[data-pv2-design="tetris"] .pv2-ordCard__rows { max-height: 231px; overflow-y: auto; } }