/* ============================================================ * BMK 38-42 · kiosk-core.css — хром киоск-ядра (зона kiosk-core) * * Подключать ПОСЛЕ kiosk.css (оттуда берутся тач-токены): * * * * Здесь только слои и контролы ядра: подложка, сцена, навигация, сплэш. * Бренд-токены НЕ объявляются — берутся через var(...) с фолбэком, чтобы * не переопределить палитру приложения. * ============================================================ */ /* Китайский (zh): грани Noto Sans SC вставляет kiosk-core.js (injectCjkFaces) — * они должны идти ПОСЛЕ @font-face приложений, из CSS ядра так не выходит. */ :root { --kiosk-core-css: 1; /* маячок: ядро проверяет, что стили подключены */ /* Каналы брендовых цветов (--brass-rgb и т.д.) объявлены в kiosk.css: * они нужны и прототипам, которые ядро не подключают. * Ниже — только собственные цвета хрома, которых в брендбуке нет: * подложка панелей (почти чёрный янтарь) и сигнал аварии в журнале. */ --kiosk-ink-rgb: 12, 16, 18; --kiosk-ink-deep-rgb: 8, 11, 13; --kiosk-alert: #E8737A; --a11y-fg: #FFFFFF; --kiosk-fade: 350ms; /* длительность кроссфейда (ядро ставит инлайном) */ --kiosk-nav-size: var(--touch-primary, 96px); --kiosk-nav-opacity: 0.92; --kiosk-stripe-angle: 105deg; /* канон бренда */ --stripe-opacity: 1; /* яркость косой подложки; крутится из настроек МТК */ /* Полосы, занятые хромом ядра. Ядро пересчитывает их при каждой правке * настроек; СЦЕНА ОБЯЗАНА верстаться от них, а не от --edge-safe, иначе * её контент уедет под навигацию или под переключатель языков. * Здесь — значения на случай, если JS ещё не отработал. */ --chrome-top: var(--edge-safe, 64px); --chrome-bottom: var(--edge-safe-bottom, 80px); --chrome-left: var(--edge-safe, 64px); --chrome-right: var(--edge-safe, 64px); /* Прежние имена — синонимы: сцены, свёрстанные от них, ломать нельзя. */ --kiosk-safe-top: var(--chrome-top); --kiosk-safe-bottom: var(--chrome-bottom); --kiosk-safe-left: var(--chrome-left); --kiosk-safe-right: var(--chrome-right); } /* ------------------------------------------------------------ каркас */ /* Поле вокруг рабочей области обязано быть чёрным: на киоске белая полоса по краю видна за версту. */ html.kiosk-runtime, html.kiosk-runtime body { background: var(--amber-black, #000); /* КИОСК-КАНОН: браузер не зумит и не скроллит страницу. touch-action:none на корне — жест на фоне ничего браузерного не запускает. Конкретные поверхности НИЖЕ переопределяют: скроллеры панятся, канвы отдают жест сцене. Скролл всей страницы добивает overscroll-behavior + fixed. */ touch-action: none; overscroll-behavior: none; -ms-content-zooming: none; -ms-touch-action: none; } /* Скроллеры сцен панятся одним пальцем и не зумятся. Явно, а не в наследство от html (touch-action не наследуется): без своего правила скроллер остался бы none и палец бы его не скроллил. ОБЕ ОСИ (1.29.3). До 1.29.3 здесь было pan-y, и палец не листал ни одной горизонтальной ленты: «Свод» и «Гербарий» у 39, авторы у 41, фото музея у 42 (замер 4K тачем: 0 px; мышь и колесо листали, поэтому не всплыло). А selftest «Видимый скролл» сам требует .kiosk-scroll на любом overflow-x. Вертикальному списку pan-x ничего не добавляет: вбок ему листать нечего, жест уходит вверх по цепочке, где корень держит overscroll-behavior: none. Пинча в значении нет — зум по-прежнему запрещён. overscroll-behavior: contain здесь НЕ ставить: у вложенного скроллера он рвёт цепочку — свайп вбок, начатый на колонке автора 41 (вертикальный .kiosk-scroll внутри горизонтальной ленты), переставал двигать ленту (2014 → 0 px). Нужен contain — ставьте у себя, по одной оси (как 42 у фото). Значение через переменную, как у канвы ниже: сузить до одной оси зона может без войны специфичности — `.my-list { --kiosk-scroll-touch: pan-y }`. */ html.kiosk-runtime .kiosk-scroll { touch-action: var(--kiosk-scroll-touch, pan-x pan-y); } /* КАНВА СЦЕНЫ — touch-action:none, и это ОТДАЁТ жест сцене, а не отнимает. При none браузер не пытается сам зумить/скроллить по канве, и весь двухпальцевый жест уходит в JS-слушатели сцены — она зумит СВОЙ контент (глобус, карта). Одно-пальцевый drag-to-rotate так же уходит в сцену. Статичная канва просто не слушает — и нативного зума страницы по ней тоже нет. ЗНАЧЕНИЕ ЧЕРЕЗ ПЕРЕМЕННУЮ, а не голое none: перебить голое none сцена не могла бы — селектор ядра (0,2,2) специфичнее её `.m41-map__canvas` (0,1,0), и «переопределите touch-action у себя» из README было НЕВЫПОЛНИМО без !important (нашёл МТК 41). Через переменную сцена меняет ЗНАЧЕНИЕ, а не борется с каскадом: `.m41-map__canvas { --kiosk-canvas-touch: pan-y }` — и палец скроллит канву. Дыра закрыта по конструкции, а не документацией. */ html.kiosk-runtime .kiosk-stage canvas { touch-action: var(--kiosk-canvas-touch, none); } /* Приложение всегда во весь экран. Поджимается не оно, а поле контента внутри сцены — см. .kiosk-content ниже. */ .kiosk-app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 120% 85% at 50% 42%, rgba(var(--graphite-rgb, 67, 80, 89), 0.34), rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.96)), var(--graphite, #435059); color: var(--paper, #F7F9EF); -webkit-tap-highlight-color: transparent; } /* Косая подложка. Геометрия — канон прототипов (полосы держатся кромок, * контент не пересекают): широкая красная у правого края, серое «окно» * у левого, латунная волосяная линия рядом с красной. */ .kiosk-stripes { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--stripe-opacity, 1); transition: opacity 200ms ease; background: linear-gradient(var(--kiosk-stripe-angle), transparent 0, transparent 95.4%, rgba(var(--red-rgb, 160, 33, 40), 0.62) 95.4%, rgba(var(--red-rgb, 160, 33, 40), 0.62) 99%, transparent 99.2%), linear-gradient(var(--kiosk-stripe-angle), transparent 0, transparent 1.5%, rgba(var(--window-rgb, 157, 163, 168), 0.1) 1.5%, rgba(var(--window-rgb, 157, 163, 168), 0.1) 9%, transparent 9.2%), linear-gradient(var(--kiosk-stripe-angle), transparent 0, transparent 93.6%, rgba(var(--brass-rgb, 210, 183, 115), 0.6) 93.6%, rgba(var(--brass-rgb, 210, 183, 115), 0.6) 93.75%, transparent 93.95%); } .kiosk-stripes[hidden] { display: none; } .kiosk-stage { position: absolute; inset: 0; z-index: 1; } /* Готовое поле контента для сцены: ширина/высота из настроек, по центру. Применяйте ВНУТРИ своей области с отступами — проценты считаются от того контейнера, в который вы это положили. */ .kiosk-content { width: var(--kiosk-content-w, 100%); /* max-height, а не height: поле почти всегда лежит во flex-колонке сцены, и там flex-basis перебивает height — регулятор высоты просто не работал бы. Потолок же переживает и flex: 1. */ max-height: var(--kiosk-content-h, 100%); /* margin: auto центрирует по ОБЕИМ осям (во flex/grid), а не только по горизонтали: поля должны быть симметричны и сверху-снизу. */ margin: auto; } /* Границу поля видно, только пока открыта сервис-панель — иначе оператор крутит «Ширину поля» вслепую. */ .kiosk-app.is-service .kiosk-content { outline: 2px dashed rgba(var(--brass-rgb, 210, 183, 115), 0.55); outline-offset: 4px; } /* ------------------------------------------------------------- слои сцен * Каждая сцена получает свой слой. Невидимые слои сняты с композитинга * (visibility + content-visibility) — браузер их не рисует, а сцена в это * время обязана быть на pause() (0 rAF / 0 таймеров). Кроссфейд идёт * между двумя слоями: уходящий и входящий одновременно видимы только * на время перехода. */ .kiosk-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; content-visibility: hidden; pointer-events: none; transition: opacity var(--kiosk-fade) ease; will-change: opacity; } .kiosk-layer.is-visible { visibility: visible; content-visibility: visible; } .kiosk-layer.is-active { opacity: 1; pointer-events: auto; } /* --------------------------------------------------------- навигация сцен * Тач-стандарт: стрелки 96 px (--touch-primary), зазор 16 px, * отступ от нижней кромки 80 px (--edge-safe-bottom). */ .kiosk-nav { position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--touch-gap, 16px); opacity: var(--kiosk-nav-opacity, 0.92); pointer-events: none; /* фон бара не перехватывает касания */ } .kiosk-nav[data-position="bottom"] { bottom: var(--edge-safe-bottom, 80px); } .kiosk-nav[data-position="top"] { top: var(--edge-safe, 64px); } .kiosk-nav[hidden] { display: none; } .kiosk-nav__row { display: flex; align-items: center; gap: var(--touch-gap, 16px); padding: 10px 18px; border-radius: 999px; background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); backdrop-filter: blur(6px); pointer-events: auto; } .kiosk-nav__arrow { width: var(--kiosk-nav-size); height: var(--kiosk-nav-size); display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%; background: rgba(var(--paper-rgb, 247, 249, 239), 0.06); color: var(--brass, #D2B773); cursor: pointer; touch-action: manipulation; transition: background 160ms ease, color 160ms ease, transform 120ms ease; } .kiosk-nav__arrow svg { width: 52%; height: 52%; } .kiosk-nav__arrow:active { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); color: var(--paper, #F7F9EF); transform: scale(0.94); } .kiosk-nav__arrow[hidden] { display: none; } .kiosk-nav__title { min-width: 22ch; padding: 0 12px; text-align: center; line-height: 1.15; } .kiosk-nav__app { display: block; font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--brass-rgb, 210, 183, 115), 0.8); } .kiosk-nav__scene { display: block; margin-top: 4px; font-family: "21 Cent", Georgia, serif; font-size: calc(var(--type-min-ui, 32px) * 1.1); color: var(--paper, #F7F9EF); } .kiosk-nav__dots { display: flex; align-items: center; gap: var(--touch-gap, 16px); pointer-events: auto; } .kiosk-nav__dot { width: var(--touch-min, 64px); height: var(--touch-min, 64px); display: grid; place-items: center; border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; } .kiosk-nav__dot i { display: block; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--paper-rgb, 247, 249, 239), 0.28); border: 2px solid transparent; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; } .kiosk-nav__dot.is-active i { background: var(--brass, #D2B773); border-color: rgba(var(--paper-rgb, 247, 249, 239), 0.55); transform: scale(1.35); } /* Спрятанные части хрома (состав из настроек МТК) */ .kiosk-nav .is-hidden { display: none; } .kiosk-nav__arrow.is-hidden { display: none; } /* ---- раскладка «стрелки по бокам» (как в прежнем хабе) ---- * Ядро переносит кнопки из бара прямо в корень приложения, поэтому * селектор по прямому потомку. В баре остаются титул и точки. */ .kiosk-app > .kiosk-nav__arrow { position: absolute; z-index: 30; top: var(--kiosk-nav-side-y, 50%); transform: translateY(-50%); width: var(--kiosk-nav-size, 96px); height: var(--kiosk-nav-size, 96px); opacity: var(--kiosk-nav-opacity, 0.92); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); backdrop-filter: blur(6px); } .kiosk-app > .kiosk-nav__arrow--prev { left: var(--kiosk-nav-side-x, 64px); } .kiosk-app > .kiosk-nav__arrow--next { right: var(--kiosk-nav-side-x, 64px); } .kiosk-app > .kiosk-nav__arrow:active { transform: translateY(-50%) scale(0.94); background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); color: var(--paper, #F7F9EF); } .kiosk-app.is-standby > .kiosk-nav__arrow { opacity: 0; pointer-events: none; } /* Бар без стрелок — компактнее и не должен выглядеть пустой плашкой. */ .kiosk-nav[data-layout="sides"] .kiosk-nav__row { padding: 10px 28px; } /* ---- раскладка «карточки» (заявка МТК-29, с 1.24.0) ---------------------- * Третья раскладка рядом с bar/sides: ряд подписанных карточек-разделов * вместо точек и стрелок. Маркер (номер-буквица) + название сцены, активная * залита латунью, «домой» первой. Высота ряда ≥ --touch-primary, ширина * равная (flex). При упоре карточки ужимаются до min-width, дальше усекается * ПОДПИСЬ (ellipsis) — ни скролла, ни переноса: тач-полоса под пальцем * теряет попадаемость, перенос ломает высоту и уносит цель под кромку. */ .kiosk-nav__cards { display: none; /* виден только в раскладке cards */ align-items: stretch; gap: var(--touch-gap, 16px); /* Ширина задана (не по контенту): иначе flex:1 нечего распределять и * карточки схлопываются к центру. Полоса тянется между боковыми * safe-отступами — карточки делят её поровну (у 29 ~480px на 8 карт/3840). */ width: calc(100vw - 2 * var(--edge-safe, 64px)); pointer-events: auto; } .kiosk-nav[data-layout="cards"] .kiosk-nav__row { display: none; } .kiosk-nav[data-layout="cards"] .kiosk-nav__cards { display: flex; } .kiosk-nav__card { flex: 1 1 0; min-width: var(--kiosk-card-min, 128px); /* упор → усечение подписи */ min-height: var(--touch-primary, 96px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 16px; border-radius: 20px; border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); backdrop-filter: blur(6px); color: var(--paper, #F7F9EF); cursor: pointer; touch-action: manipulation; transition: background 160ms ease, border-color 160ms ease, transform 120ms ease; } .kiosk-nav__card:active { transform: scale(0.97); } .kiosk-nav__card.is-active { background: rgba(var(--brass-rgb, 210, 183, 115), 0.92); border-color: var(--brass, #D2B773); color: var(--kiosk-ink, #0C1012); } .kiosk-nav__card-mark { font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); line-height: 1; letter-spacing: 0.06em; color: rgba(var(--brass-rgb, 210, 183, 115), 0.85); } .kiosk-nav__card.is-active .kiosk-nav__card-mark { color: var(--kiosk-ink, #0C1012); } .kiosk-nav__card-mark svg { width: 1em; height: 1em; display: block; } /* Битая nav.homeIcon (с 1.24.1): маркер ошибки виден, не тихий фолбэк. */ .kiosk-nav__card-mark.is-icon-broken { color: #E5484D; } .kiosk-nav__card-title { font-family: "21 Cent", Georgia, serif; font-size: var(--type-min-ui, 32px); line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; /* усечение при упоре в min-width */ white-space: nowrap; } /* Контраст-тема слабовидящих: карточка как бар — плоско, латунь → жёлтый. */ :root.a11y .kiosk-nav__card { background: var(--a11y-bg, #000); border-color: var(--a11y-accent, #FFD24A); backdrop-filter: none; color: var(--a11y-fg, #FFF); } :root.a11y .kiosk-nav__card-mark { color: var(--a11y-accent, #FFD24A); } :root.a11y .kiosk-nav__card.is-active { background: var(--a11y-accent, #FFD24A); color: var(--a11y-bg, #000); } :root.a11y .kiosk-nav__card.is-active .kiosk-nav__card-mark { color: var(--a11y-bg, #000); } /* --------------------------------------------------------------- standby * Аттрактор простоя. Общий (ядро рисует дуги на canvas) либо «голый» * .is-bare — когда сцена ведёт собственную петлю через standby(). */ .kiosk-standby { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(var(--amber-black-rgb, 0, 0, 0), 0.82); opacity: 0; transition: opacity 500ms ease; pointer-events: none; /* касание идёт сцене, выход ловит window */ } .kiosk-standby.is-on { opacity: 1; } .kiosk-standby.is-bare { background: rgba(var(--amber-black-rgb, 0, 0, 0), 0.28); } .kiosk-standby.is-bare .kiosk-standby__canvas { display: none; } .kiosk-standby__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .kiosk-standby__call { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; transform: translateY(-8vh); /* совпасть с центром дуг аттрактора */ } /* В простое навигация не нужна — экран должен читаться как заставка. */ .kiosk-app.is-standby .kiosk-nav { opacity: 0; pointer-events: none; transition: opacity 500ms ease; } .kiosk-standby__icon { width: 160px; height: 160px; color: var(--brass, #D2B773); } .kiosk-standby__icon svg { width: 100%; height: 100%; animation: kioskStandbyPulse 3.2s ease-in-out infinite; } .kiosk-standby__label { font-family: "Nolde", "21 Cent", Georgia, serif; font-size: clamp(36px, 3.4vw, 84px); letter-spacing: 0.04em; color: var(--paper, #F7F9EF); } @keyframes kioskStandbyPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(0.92); opacity: 1; } } /* ---------------------------------------------------------------- сплэш */ .kiosk-splash { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--amber-black, #000); opacity: 0; pointer-events: none; transition: opacity 400ms ease; } .kiosk-splash.is-on { opacity: 1; pointer-events: auto; } .kiosk-splash__inner { width: min(64vw, 900px); text-align: center; } .kiosk-splash__title { font-family: "Nolde", "21 Cent", Georgia, serif; font-size: clamp(40px, 4vw, 96px); color: var(--paper, #F7F9EF); letter-spacing: 0.02em; } .kiosk-splash__bar { margin: 32px 0 18px; height: 6px; border-radius: 3px; background: rgba(var(--paper-rgb, 247, 249, 239), 0.12); overflow: hidden; } .kiosk-splash__bar i { display: block; width: 0; height: 100%; background: var(--brass, #D2B773); transition: width 220ms ease; } .kiosk-splash__note { font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--paper-rgb, 247, 249, 239), 0.62); } .kiosk-splash.is-error .kiosk-splash__bar i { background: var(--red, #A02128); } .kiosk-splash.is-error .kiosk-splash__note { color: var(--red, #A02128); } /* Технический режим (1.29.0): «МТК · XX» под именем раздела и текст исключения под нейтральной фразой — узлы [data-kiosk-tech], см. ниже. */ .kiosk-splash__tech { margin-top: 12px; font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--brass-rgb, 210, 183, 115), 0.8); } .kiosk-splash__err { margin-top: 12px; font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); color: var(--red, #A02128); overflow-wrap: anywhere; } /* ------------------------------------------ панель посетителя: язык, a11y */ .kiosk-tools { position: absolute; z-index: 45; display: flex; align-items: center; gap: var(--touch-gap, 16px); } .kiosk-tools[hidden] { display: none; } .kiosk-tools[data-position="top-left"] { top: var(--edge-safe, 64px); left: var(--edge-safe, 64px); } .kiosk-tools[data-position="top-right"] { top: var(--edge-safe, 64px); right: var(--edge-safe, 64px); } .kiosk-tools[data-position="bottom-left"] { bottom: var(--edge-safe-bottom, 80px); left: var(--edge-safe, 64px); } .kiosk-tools[data-position="bottom-right"] { bottom: var(--edge-safe-bottom, 80px); right: var(--edge-safe, 64px); } .kiosk-lang { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); } .kiosk-lang[hidden] { display: none; } .kiosk-lang__btn { min-width: var(--touch-primary, 96px); height: var(--touch-primary, 96px); padding: 0 22px; border: 0; border-radius: 999px; background: none; color: rgba(var(--paper-rgb, 247, 249, 239), 0.62); font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-ui, 32px); letter-spacing: 0.08em; cursor: pointer; touch-action: manipulation; transition: background 160ms ease, color 160ms ease; } .kiosk-lang__btn.is-on { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); color: var(--brass, #D2B773); } .kiosk-a11y { width: var(--touch-primary, 96px); height: var(--touch-primary, 96px); display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); color: rgba(var(--paper-rgb, 247, 249, 239), 0.7); cursor: pointer; touch-action: manipulation; } .kiosk-a11y[hidden] { display: none; } .kiosk-a11y svg { width: 56%; height: 56%; } .kiosk-a11y.is-on { background: var(--a11y-accent, #FFD24A); border-color: var(--a11y-accent, #FFD24A); color: var(--amber-black, #000); } .kiosk-app.is-standby .kiosk-tools { opacity: 0; pointer-events: none; } /* ---- контраст-тема режима слабовидящих для хрома ядра ---- * Полупрозрачности убираются, латунь → жёлтый, декор-слои прячутся: * посетителю остаётся только главный контент. */ :root.a11y .kiosk-stripes { display: none; } :root.a11y .kiosk-app { background: var(--a11y-bg, #000); } :root.a11y .kiosk-nav__row, :root.a11y .kiosk-lang, :root.a11y .kiosk-a11y, :root.a11y .kiosk-gear { background: var(--a11y-bg, #000); border-color: var(--a11y-accent, #FFD24A); backdrop-filter: none; } :root.a11y .kiosk-nav { opacity: 1; } :root.a11y .kiosk-nav__arrow, :root.a11y .kiosk-gear, :root.a11y .kiosk-nav__app { color: var(--a11y-accent, #FFD24A); } :root.a11y .kiosk-nav__arrow { background: none; border: 2px solid var(--a11y-accent, #FFD24A); } :root.a11y .kiosk-lang__btn { color: var(--a11y-fg, #FFFFFF); } /* Включённая кнопка режима должна остаться залитой — иначе общее правило контраст-темы гасит её в пустой кружок. */ :root.a11y .kiosk-a11y.is-on { background: var(--a11y-accent, #FFD24A); color: var(--amber-black, #000); } :root.a11y .kiosk-lang__btn.is-on { background: var(--a11y-accent, #FFD24A); color: #000; } :root.a11y .kiosk-nav__dot i { background: var(--a11y-fg, #FFFFFF); } :root.a11y .kiosk-nav__dot.is-active i { background: var(--a11y-accent, #FFD24A); border-color: var(--a11y-fg, #FFFFFF); } :root.a11y .kiosk-standby { background: var(--amber-black, #000); } :root.a11y .kiosk-standby__icon { color: var(--a11y-accent, #FFD24A); } /* ------------------------------------------------------- сервис-панель * Единый облик системных настроек для всех пяти МТК: сессия не рисует * свои переключатели, а добавляет строку в спецификацию (app.addSettings) * и получает те же контролы. */ .kiosk-gear { position: absolute; z-index: 45; top: var(--edge-safe, 64px); right: var(--edge-safe, 64px); width: var(--touch-primary, 96px); height: var(--touch-primary, 96px); display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); color: var(--brass, #D2B773); cursor: pointer; touch-action: manipulation; } .kiosk-gear svg { width: 54%; height: 54%; } .kiosk-gear:active { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); } .kiosk-gear[hidden] { display: none; } .kiosk-app.is-standby .kiosk-gear { opacity: 0; pointer-events: none; } .kiosk-service { position: absolute; z-index: 70; top: 0; right: 0; bottom: 0; width: min(720px, 46vw); display: flex; flex-direction: column; background: rgba(var(--kiosk-ink-deep-rgb, 8, 11, 13), 0.96); border-left: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); transform: translateX(102%); transition: transform 320ms ease; font-family: "21 Cent", Georgia, serif; } .kiosk-service.is-open { transform: none; } .kiosk-service__head, .kiosk-service__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px var(--edge-safe, 64px) 24px 32px; border-bottom: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.12); font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-ui, 32px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass, #D2B773); } .kiosk-service__foot { border-bottom: 0; border-top: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.12); font-size: var(--type-min-label, 24px); } .kiosk-service__ver { color: rgba(var(--paper-rgb, 247, 249, 239), 0.42); text-transform: none; } .kiosk-service__close { width: var(--touch-min, 64px); height: var(--touch-min, 64px); border: 0; border-radius: 50%; background: rgba(var(--paper-rgb, 247, 249, 239), 0.06); color: var(--paper, #F7F9EF); font-size: 30px; cursor: pointer; } .kiosk-service__reset { min-height: var(--touch-min, 64px); padding: 0 28px; border-radius: 999px; border: 1px solid rgba(var(--red-rgb, 160, 33, 40), 0.7); background: rgba(var(--red-rgb, 160, 33, 40), 0.16); color: var(--paper, #F7F9EF); font-family: inherit; font-size: var(--type-min-label, 24px); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .kiosk-service__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 32px 32px; } .kiosk-set__group { padding: 24px 0; border-bottom: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.08); } .kiosk-set__title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--brass-rgb, 210, 183, 115), 0.8); } .kiosk-set__mini { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.2); background: none; color: rgba(var(--paper-rgb, 247, 249, 239), 0.7); font-family: inherit; font-size: 20px; letter-spacing: 0.08em; cursor: pointer; } .kiosk-set-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; } .kiosk-set-row--toggle, .kiosk-set-row--choice, .kiosk-set-row--text { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } .kiosk-set-row__label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--type-min-ui, 32px); color: var(--paper, #F7F9EF); } .kiosk-set-row__val { font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); color: var(--brass, #D2B773); } .kiosk-set-row input[type="range"] { width: 100%; height: var(--touch-min, 64px); accent-color: var(--brass, #D2B773); touch-action: manipulation; } .kiosk-set__switch { width: 118px; height: var(--touch-min, 64px); padding: 0; border-radius: 999px; border: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.22); background: rgba(var(--paper-rgb, 247, 249, 239), 0.06); cursor: pointer; touch-action: manipulation; position: relative; } .kiosk-set__switch i { position: absolute; top: 50%; left: 6px; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--paper-rgb, 247, 249, 239), 0.45); transform: translateY(-50%); transition: left 180ms ease, background 180ms ease; } .kiosk-set__switch.is-on { background: rgba(var(--brass-rgb, 210, 183, 115), 0.28); border-color: var(--brass, #D2B773); } .kiosk-set__switch.is-on i { left: 60px; background: var(--brass, #D2B773); } .kiosk-set__choices { display: flex; flex-wrap: wrap; gap: var(--touch-gap, 16px); } .kiosk-set__choice { min-height: var(--touch-min, 64px); padding: 0 26px; border-radius: 999px; border: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.22); background: none; color: var(--paper, #F7F9EF); font-family: inherit; font-size: var(--type-min-label, 24px); cursor: pointer; touch-action: manipulation; } .kiosk-set__choice.is-on { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); border-color: var(--brass, #D2B773); color: var(--brass, #D2B773); } .kiosk-set__text { min-height: var(--touch-min, 64px); width: 200px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.22); background: rgba(var(--paper-rgb, 247, 249, 239), 0.04); color: var(--paper, #F7F9EF); font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); text-align: center; } /* ---- группа «Экраны»: состав и порядок ---- */ .kiosk-screen-row { display: flex; align-items: center; gap: var(--touch-gap, 16px); padding: 8px 0; } .kiosk-screen-row.is-off .kiosk-screen__name { opacity: 0.42; text-decoration: line-through; } .kiosk-screen__name { flex: 1; font-size: var(--type-min-ui, 32px); color: var(--paper, #F7F9EF); } /* Бейдж «обяз.» у required-сцены (заявка 29): видно, почему тумблер залочен. */ .kiosk-screen__req { font-size: 0.62em; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--brass-rgb, 210, 183, 115), 0.85); border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.4); border-radius: 6px; padding: 1px 6px; vertical-align: middle; white-space: nowrap; } .kiosk-screen__move { width: var(--touch-min, 64px); height: var(--touch-min, 64px); display: grid; place-items: center; padding: 0; border-radius: 12px; border: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.2); background: rgba(var(--paper-rgb, 247, 249, 239), 0.04); color: var(--brass, #D2B773); cursor: pointer; touch-action: manipulation; } .kiosk-screen__move:disabled { opacity: 0.25; cursor: default; } .kiosk-screen__move:active:not(:disabled) { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); } .kiosk-screen__chev { width: 14px; height: 14px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-3px) rotate(45deg); } .kiosk-screen__chev--up { transform: translateY(3px) rotate(-135deg); } .kiosk-set__switch:disabled { opacity: 0.45; cursor: default; } /* ---- настройки сцен: сворачиваемые группы ---- По описи у МТК 38 около 60 параметров. Развёрнутыми они превращают панель в ленту, где ничего не найти, — поэтому свёрнуто по умолчанию. */ .kiosk-set__group--scene { padding: 0; } .kiosk-set__fold { width: 100%; min-height: var(--touch-primary, 96px); display: flex; align-items: center; gap: 16px; padding: 0 4px; border: 0; background: none; color: rgba(var(--brass-rgb, 210, 183, 115), 0.85); font-family: "20 Kopeek", "Courier New", monospace; font-size: var(--type-min-label, 24px); letter-spacing: 0.1em; text-transform: uppercase; text-align: left; cursor: pointer; touch-action: manipulation; } .kiosk-set__fold-title { flex: 1; } .kiosk-set__fold-count { min-width: 3ch; padding: 2px 12px; border-radius: 999px; background: rgba(var(--paper-rgb, 247, 249, 239), 0.08); color: rgba(var(--paper-rgb, 247, 249, 239), 0.6); text-align: center; } .kiosk-set__fold-mark { width: 18px; height: 18px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); transition: transform 180ms ease; } .kiosk-set__group--scene.is-open .kiosk-set__fold-mark { transform: rotate(45deg); } .kiosk-set__fold-body { display: none; padding: 0 0 20px; } .kiosk-set__group--scene.is-open .kiosk-set__fold-body { display: block; } /* ---- перенос настроек ---- */ .kiosk-set__note { margin-bottom: 14px; font-size: var(--type-min-label, 24px); line-height: 1.4; color: rgba(var(--paper-rgb, 247, 249, 239), 0.6); } .kiosk-set__note b { color: var(--brass, #D2B773); font-weight: 400; } .kiosk-set__actions { display: flex; flex-wrap: wrap; gap: var(--touch-gap, 16px); } .kiosk-set__btn { min-height: var(--touch-min, 64px); padding: 0 28px; border-radius: 999px; border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.55); background: rgba(var(--brass-rgb, 210, 183, 115), 0.12); color: var(--paper, #F7F9EF); font-family: inherit; font-size: var(--type-min-label, 24px); cursor: pointer; touch-action: manipulation; } .kiosk-set__btn:active { background: rgba(var(--brass-rgb, 210, 183, 115), 0.28); } /* ---- журнал ---- */ .kiosk-set__log { max-height: 40vh; overflow-y: auto; font-family: "20 Kopeek", "Courier New", monospace; font-size: 20px; line-height: 1.5; } .kiosk-set__log-row { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(var(--paper-rgb, 247, 249, 239), 0.06); color: rgba(var(--paper-rgb, 247, 249, 239), 0.72); } .kiosk-set__log-at { color: rgba(var(--paper-rgb, 247, 249, 239), 0.4); white-space: nowrap; } /* Записи прошлых запусков приглушены и помечены — чтобы чужие аварии не читались как свои. */ .kiosk-set__log-row.is-old { opacity: 0.45; } .kiosk-set__log-sid { color: rgba(var(--brass-rgb, 210, 183, 115), 0.75); white-space: nowrap; letter-spacing: 0.06em; } .kiosk-set__log-row[data-level="warn"] { color: var(--brass, #D2B773); } .kiosk-set__log-row[data-level="error"] { color: var(--kiosk-alert, #E8737A); } .kiosk-set__log-row[data-level="fatal"] { color: var(--kiosk-alert, #E8737A); font-weight: 700; } .kiosk-set__log-empty { color: rgba(var(--paper-rgb, 247, 249, 239), 0.4); } /* Повторы подряд (1.29.1): одна строка на серию, счётчик справа. */ .kiosk-set__log-n { margin-left: auto; padding-left: 14px; white-space: nowrap; color: rgba(var(--brass-rgb, 210, 183, 115), 0.9); font-weight: 700; } /* --------------------------------------------------- системные предпочтения */ @media (prefers-reduced-motion: reduce) { .kiosk-layer, .kiosk-splash, .kiosk-standby, .kiosk-nav__arrow, .kiosk-nav__dot i { transition-duration: 1ms !important; } .kiosk-standby__icon svg { animation: none; } } /* ------------------------------------------- технические надписи (1.29.0) Пометки для оператора — «МТК · XX», коды, заметки о данных — узлы с атрибутом data-kiosk-tech (ставит ядро или зона). Видны, только пока на стоит data-kiosk-tech="on" (настройка labels.tech, по умолчанию ВЫКЛ). Одно правило на всех: зоне не нужен ни JS, ни свой класс. */ html:not([data-kiosk-tech="on"]) [data-kiosk-tech] { display: none !important; } /* -------------------------------------------------- режим замера (opt-in №10) Заявка МТК-29. Оснастка приёмки меряет геометрию сцены в СКРЫТОЙ вкладке, где браузер душит rAF/таймеры и CSS-переход застревает навсегда → замер ловит промежуточный кадр (28 ложных дефектов подряд). Режим включается атрибутом [data-kiosk-measure] на — ядро ставит его методом setMeasureMode, либо оснастка ставит атрибут напрямую (атрибут — канонический контракт). Именно transition:none, а НЕ transition-duration:1ms как в reduced-motion: ядро не зависит от transitionend/transitionstart (проверено грепом по зоне), а none — единственное, что переживает скрытую вкладку («перехода нет» → элемент всегда в целевой геометрии). Правила инертны без атрибута → пятёрка, которая режим не включает, байт-в-байт (ни новых узлов, ни правок computed). animation:none — по просьбе потребителя (29): их проба глушит и то, и другое, а в скрытой вкладке анимации тоже не идут. В ядре ровно две CSS-анимации, обе декоративные и на геометрию не влияют: пульс иконки standby и мигание каретки финдера — в режиме замера они замирают (заставка и показ/скрытие standby идут transition'ом, не анимацией, и гаснут мгновенно, а не залипают). */ :root[data-kiosk-measure], :root[data-kiosk-measure] *, :root[data-kiosk-measure] *::before, :root[data-kiosk-measure] *::after { transition: none !important; animation: none !important; } /* ПРИЗНАК режима welded к атрибуту на псевдоэлементах :root (не отдельный DOM-узел): режим без видимого признака структурно невозможен — забытая на живом экране оснастка иначе неотличима от правки (признак важнее режима, слово 29). Оба псевдоэлемента position:fixed + pointer-events:none → НОЛЬ влияния на layout (getBoundingClientRect сцены не сдвигается, синтетические клики оснастки не перехватываются); z-index выше потолка шкалы ядра (70) — признак намеренно поверх всего, включая сервис-панель. */ :root[data-kiosk-measure]::before { /* янтарно-чёрная рамка по периметру */ content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; border: 8px solid transparent; border-image: repeating-linear-gradient( 45deg, #000 0 16px, var(--a11y-accent, #FFD24A) 16px 32px) 8; } :root[data-kiosk-measure]::after { /* плашка-подпись сверху по центру */ content: "⏱ РЕЖИМ ЗАМЕРА · MEASURE MODE"; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 2147483647; pointer-events: none; padding: 6px 20px; background: var(--a11y-accent, #FFD24A); color: #000; font: 700 clamp(13px, 1.15vw, 20px)/1.1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.08em; white-space: nowrap; border-radius: 0 0 10px 10px; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } /* ---------------------------------------------------------------- финдер Лупа стоит в ряду инструментов и потому уже учтена в замере зон хрома. Точка — число активных критериев: «почему так мало объектов» не должно быть загадкой для посетителя, который отбор уже забыл. */ /* Полный вид кнопки, как у .kiosk-a11y. Классов kiosk-touch мало: они задают минимумы таргета, а не облик — без этого блока лупа выходила белым прямоугольником UA-кнопки с чёрным svg и раздувала --chrome-top на 62 px, воруя их у сцены (возврат №1, блокер 1). */ .kiosk-find { position: relative; width: var(--touch-primary, 96px); height: var(--touch-primary, 96px); display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); color: rgba(var(--paper-rgb, 247, 249, 239), 0.7); cursor: pointer; touch-action: manipulation; } .kiosk-find.is-active { color: var(--brass, #D2B773); } .kiosk-find:active { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); } :root.a11y .kiosk-find { background: var(--a11y-bg, #000); border-color: var(--a11y-accent, #FFD24A); color: var(--a11y-accent, #FFD24A); } .kiosk-find svg { width: 54%; height: 54%; } .kiosk-find__dot { position: absolute; top: 4%; right: 4%; min-width: calc(30px * var(--ui-scale, 1)); height: calc(30px * var(--ui-scale, 1)); padding: 0 calc(7px * var(--ui-scale, 1)); border-radius: 999px; display: none; place-items: center; background: var(--brass, #D2B773); color: var(--amber-black, #000); font: 600 calc(17px * var(--ui-scale, 1)) / calc(30px * var(--ui-scale, 1)) "20 Kopeek", "Courier New", monospace; } .kiosk-find.is-active .kiosk-find__dot { display: grid; } .kiosk-find.is-active .kiosk-find__dot::after { content: attr(data-n); } /* «Сбросить отбор» рядом с лупой (1.28.1, слово dvn) — только при активном отборе. Высота ровно лупы (--touch-primary) и без переноса: ряд инструментов не растёт, --chrome-top тот же. Подложка — как у лупы: кнопка висит над сценой, контраст нужен на любом фоне. Рамка — латунь в полную силу, как у сброса в панели. */ .kiosk-find-reset { height: var(--touch-primary, 96px); padding: 0 calc(36px * var(--ui-scale, 1)); border-radius: 999px; border: 2px solid var(--brass, #D2B773); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.62); color: var(--paper, #F7F9EF); font-size: var(--type-min-ui, 32px); white-space: nowrap; cursor: pointer; touch-action: manipulation; } .kiosk-find-reset:active { background: rgba(var(--brass-rgb, 210, 183, 115), 0.22); } :root.a11y .kiosk-find-reset { background: var(--a11y-bg, #000); border-color: var(--a11y-accent, #FFD24A); color: var(--a11y-accent, #FFD24A); } /* ЛЮБОЙ ЭЛЕМЕНТ КИТА С [hidden] ОБЯЗАН ИСЧЕЗАТЬ — правило на КЛАСС, а не на экземпляр. [hidden] — всего лишь атрибут, и собственный display его перебивает. Это правило — СТРАХОВКА ПОВЕРХ ДЕВЯТИ ИСХОДНЫХ точечных: они лежат выше, верны, живут с первых коммитов ядра и никуда не уходят. Закрывает оно ровно то, чего они по природе не могут, — элементы, которых ещё нет, и два финдеровских, для которых я точечное правило просто ЗАБЫЛ добавить (отсюда три инстанса подряд: панель-кликоблокер, лупа на сцене без финдера, строка поиска на сцене без поиска). Смысл в том, чтобы не приходилось ПОМНИТЬ. Префикс класса вместо перечисления; чужую разметку сцен не трогаем. */ [class*="kiosk-"][hidden] { display: none !important; } .kiosk-finder { position: absolute; z-index: 46; /* От верхней КРОМКИ, а не от зоны хрома: панель — оверлей поверх сцены, и накрыть ряд языков ей можно, а вот навигацию внизу нельзя. При ui 1.25–1.5 зоны хрома съедали столько, что панель оставалась 384 и 284 px высотой — клавиатуре нужно 398 и 477, и она уходила за низ вместе со «стереть» и переключателем раскладки. */ top: var(--edge-safe, 64px); right: var(--edge-safe, 64px); /* ШИРИНА СЧИТАЕТСЯ ОТ КЛАВИАТУРЫ, а не выбрана на глаз: в самом длинном ряду 12 клавиш, каждая по тач-стандарту не мельче 64 px, плюс зазоры и поля — это 894 px при масштабе 1. С прежними 760 клавиши не помещались и ВЫЛЕЗАЛИ ЗА ПАНЕЛЬ на 47 px (поймано стендом приёмки: две клавиши оказывались ближе 64 px к кромке экрана). max() нужен из-за того же тач-пола: при масштабе 0.75 клавиши остаются 64, а пропорциональная ширина ужалась бы до 705 — и они снова вылезли бы. Пол по ширине идёт следом за полом по клавише. */ width: min(max(940px, calc(940px * var(--ui-scale, 1))), calc(100% - 2 * var(--edge-safe, 64px))); max-height: calc(100% - var(--edge-safe, 64px) - var(--chrome-bottom, 272px)); display: flex; flex-direction: column; border-radius: calc(28px * var(--ui-scale, 1)); border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.94); color: var(--paper, #F7F9EF); opacity: 0; transform: translateY(calc(-12px * var(--ui-scale, 1))); transition: opacity .22s ease, transform .22s ease; } .kiosk-finder.is-open { opacity: 1; transform: none; } /* Карточка поверх поиска (1.29.5): пока зона держит карточку открытой (app.setCard), панель спрятана, но НЕ закрыта — запрос, чипы, клавиатура и прокрутка ждут закрытия карточки. visibility, а не display: место в раскладке и scrollTop остаются. На потомков тоже и с !important: каретка ввода сама ставит себе visibility: visible и просвечивала бы сквозь карточку. */ html[data-kiosk-card="open"] .kiosk-finder, html[data-kiosk-card="open"] .kiosk-finder * { visibility: hidden !important; pointer-events: none !important; } /* Гасит 300-мс окно между снятием is-open и hidden на ВСЕХ путях закрытия: пробуждающий тап успевал доставить click в чип уже закрывающейся панели — и отбор ложился на сцену ПОСЛЕ idle-сброса. */ .kiosk-finder:not(.is-open) { pointer-events: none; } /* Клавиатура и служебные строки НЕ СЖИМАЮТСЯ, скроллится только тело с чипами. Без этого flex ужимал клавиатуру до 155 px при нужных 318 — рисовалось 2 ряда из 4, а «стереть», «⌫» и переключатель раскладки оказывались за низом панели (возврат №1, блокер 2). */ .kiosk-finder__q, .kiosk-finder__fields, .kiosk-finder__note, .kiosk-finder__foot { flex: none; } /* Клавиатура ужимается ПОСЛЕДНЕЙ и, если места всё равно нет, прокручивается сама — но служебный ряд при этом липнет к низу и остаётся под пальцем. Без этого при нехватке высоты недоступными оказывались ровно те клавиши, без которых из поля не выйти: ⌫, «стереть», переключатель раскладки. */ /* Клавиатура ужимается ПОСЛЕДНЕЙ: вес сжатия у тела чипов на два порядка больше, поэтому высоту отдаёт сначала оно. */ .kiosk-kbd { flex: 0 1 auto; min-height: 0; overflow-y: auto; } /* Аффорданс прокрутки: нижние 40 px гаснут — «ниже есть ещё». Маска учитывает липкий ряд: он рисуется поверх и обрезки под собой не показывает, поэтому затухание кончается ДО него. */ .kiosk-kbd[data-scrollable="1"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px * var(--ui-scale, 1)), rgba(0,0,0,.25) calc(100% - 72px * var(--ui-scale, 1)), #000 calc(100% - 68px * var(--ui-scale, 1))); mask-image: linear-gradient(to bottom, #000 calc(100% - 96px * var(--ui-scale, 1)), rgba(0,0,0,.25) calc(100% - 72px * var(--ui-scale, 1)), #000 calc(100% - 68px * var(--ui-scale, 1))); } .kiosk-kbd__row:last-child { position: sticky; bottom: calc(-1 * var(--ui-scale, 1) * 2px); margin-bottom: 0; background: rgba(var(--kiosk-ink-rgb, 12, 16, 18), 0.94); } .kiosk-finder__body { /* basis AUTO, а не 0: в колонке автоматической высоты нулевой базис не растёт — свободного места, которое можно раздать, там просто нет, и тело оставалось щелью в 48 px (свой паддинг) при 304 px чипов. ВСЕ чипы жили в прокрутке на любом масштабе, а центр первого по хит-тесту попадал в футер. Регресс моего же фикса возврата №1. Вес сжатия 100 — чтобы при нехватке высоты уступало тело, а не клавиатура: без букв поиск невозможен, без видимых чипов — только неудобен. */ flex: 1 100 auto; min-height: 0; padding: calc(24px * var(--ui-scale, 1)); overflow: auto; } .kiosk-finder__group { margin-bottom: calc(20px * var(--ui-scale, 1)); } .kiosk-finder__group h4 { margin: 0 0 calc(12px * var(--ui-scale, 1)); font: 400 calc(20px * var(--ui-scale, 1)) / 1.2 "20 Kopeek", "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--brass, #D2B773); } .kiosk-finder__chip { /* И по ШИРИНЕ тоже: чип «—» с коротким текстом при уменьшенном масштабе выходил уже 64 px — таргет мельче канона, хотя высота была в норме. */ min-width: max(64px, var(--touch-min, 64px)); min-height: max(64px, var(--touch-min, 64px)); padding: 0 calc(20px * var(--ui-scale, 1)); margin: 0 calc(8px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)) 0; border-radius: 999px; border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); background: transparent; color: var(--paper, #F7F9EF); font-size: max(var(--type-min-ui, 22px), calc(22px * var(--ui-scale, 1))); } .kiosk-finder__chip.is-on { background: var(--brass, #D2B773); color: var(--amber-black, #000); } /* «Сбросить отбор» — ПО ЦЕНТРУ панели и крупнее (1.28.1, слово dvn: «чтобы её было реально видно»). В углу, размером с чип и в бледной рамке она терялась среди чипов. Сетка 1fr auto 1fr держит кнопку ровно по центру при любой ширине счётчика; счётчик — в правой колонке, как был. */ .kiosk-finder__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--touch-gap, 16px); padding: calc(16px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)); border-top: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.22); } .kiosk-finder__reset { grid-column: 2; min-height: max(64px, var(--touch-primary, 96px)); padding: 0 calc(48px * var(--ui-scale, 1)); border-radius: 999px; border: 2px solid var(--brass, #D2B773); background: transparent; color: var(--paper, #F7F9EF); font-size: max(var(--type-min-ui, 22px), calc(40px * var(--ui-scale, 1))); white-space: nowrap; } .kiosk-finder__count { grid-column: 3; justify-self: end; min-width: 0; text-align: right; font: 400 calc(20px * var(--ui-scale, 1)) / 1.2 "20 Kopeek", "Courier New", monospace; color: var(--brass, #D2B773); } /* строка запроса и экранная клавиатура финдера */ .kiosk-finder__q { display: flex; align-items: center; gap: calc(6px * var(--ui-scale, 1)); min-height: max(64px, var(--touch-min, 64px)); margin: calc(20px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1)) 0; padding: 0 calc(18px * var(--ui-scale, 1)); border-radius: calc(16px * var(--ui-scale, 1)); border: 1px solid rgba(var(--brass-rgb, 210, 183, 115), 0.35); font: 400 max(var(--type-min-ui, 22px), calc(26px * var(--ui-scale, 1))) / 1.2 "20 Kopeek", "Courier New", monospace; color: var(--paper, #F7F9EF); /* Фон ОБЯЗАТЕЛЬНО объявлен: .kiosk-finder__q — это