/* ============================================================ * BMK 38-42 · Тач-стандарт киоска — общий кит (зона координатора) * Подключение из прототипа: * * Все величины — CSS-переменные: прототип использует их в своих * стилях, а не хардкодит числа. Канон чисел — COORDINATION.md → * «Тач-стандарт киоска». Панель 49″ 3840×2160, палец ≈ 15 мм ≈ 53 px. * ============================================================ */ :root { /* ---- Два независимых масштаба (ставит kiosk-core из настроек) ---- * Разделены намеренно: крупный интерфейс съедает место у контента, а * крупный контент — у кнопок. Одним общим множителем всегда что-то * одно оказывается плохо видно. * --ui-scale — хром киоска: кнопки, чипы, подписи контролов * --content-scale — содержимое сцен: карточки, подписи на картах, тексты * В сцене свой кегль масштабируйте так: * font-size: calc(38px * var(--content-scale)); */ --ui-scale: 1; --content-scale: 1; /* Прежнее имя множителя контента — сцены и прототипы уже на него завязаны. */ --a11y-scale: var(--content-scale); /* Тач-таргеты (растут вместе с интерфейсом) */ --touch-min: calc(64px * var(--ui-scale)); /* минимум для любого интерактива */ --touch-primary: calc(96px * var(--ui-scale)); /* основные контролы (навигация, режимы) */ --touch-gap: calc(16px * var(--ui-scale)); /* зазор между соседними таргетами */ /* Безопасные отступы от кромки тач-панели (рамка + ладонь). * НЕ масштабируются: это физика панели, а не размер шрифта. */ --edge-safe: 64px; --edge-safe-bottom: 80px; /* нижняя кромка — хуже всего доступна */ /* Видимый скролл */ --scrollbar-w: calc(18px * var(--ui-scale)); /* Кегли на 3840 (для clamp-формул прототипов) */ --type-min-label: calc(24px * var(--ui-scale)); /* подписи, легенды */ --type-min-ui: calc(32px * var(--ui-scale)); /* текст на кнопках/чипах */ /* ---- Каналы брендовых цветов, для rgba() ---- * Сами цвета берутся как var(--brass, #D2B773) — так их переопределяет * приложение. Но полупрозрачным нужен доступ к каналам, а зашитый * rgba(210,183,115,…) молча разъезжается с токеном при смене палитры * (на этом уже поймали серое «окно»: 157,163,166 против 157,163,168). * ПЕРЕОПРЕДЕЛЯЕШЬ --brass — ПЕРЕОПРЕДЕЛИ И --brass-rgb. * Значения — брендбук (COORDINATION → «Шрифтово-цветовые правила»). */ --paper-rgb: 247, 249, 239; --brass-rgb: 210, 183, 115; --red-rgb: 160, 33, 40; --blue-grey-rgb: 93, 137, 112; --window-rgb: 157, 163, 168; --graphite-rgb: 67, 80, 89; --telegrey-rgb: 207, 208, 207; --amber-black-rgb: 0, 0, 0; } /* ---- Режим слабовидящих (класс .a11y на , ставит kiosk-core) ---- * Размеры сюда БОЛЬШЕ НЕ ВХОДЯТ: их поднимает kiosk-core, домножая * --ui-scale и --content-scale на a11y.uiBoost / a11y.contentBoost * (деф. ×1.25 и ×1.5 — канон Киоск-стандарта v2). Иначе фиксированные px * здесь затирали бы масштабы, выставленные оператором. * Здесь остаётся только контраст-тема. */ :root.a11y { /* Латунь уходит в чистый жёлтый, полупрозрачности убираются */ --a11y-accent: #FFD24A; /* жёлтый контраст-темы: в брендбуке его нет */ --a11y-bg: #000000; } /* Приглушённые анимации — часть режима, а не только системная настройка. */ :root.a11y * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } /* ---- Утилиты (опциональны — можно брать только переменные) ---- */ /* Контейнер контента с безопасными полями от кромки */ .kiosk-safe { padding: var(--edge-safe); padding-bottom: var(--edge-safe-bottom); } /* Минимальный тач-таргет (вешать на кнопки/чипы/точки) */ .kiosk-touch { min-width: var(--touch-min); min-height: var(--touch-min); touch-action: manipulation; } .kiosk-touch--primary { min-width: var(--touch-primary); min-height: var(--touch-primary); } /* Всегда видимая полоса прокрутки (Chromium-киоск). * Вешать на КАЖДЫЙ скроллируемый контейнер: class="kiosk-scroll" * * Стандартные scrollbar-width / scrollbar-color — ТОЛЬКО там, где нет * ::-webkit-scrollbar (Firefox). Chrome с 121-й версии, увидев любое из них * не в auto, ИГНОРИРУЕТ все ::-webkit-scrollbar-правила ниже — и вместо * латунной полосы --scrollbar-w рисовал системную: на Windows-столах тонкую * серую, на Mac — оверлейную, невидимую в покое (1.29.2, находка МТК 41). */ @supports not selector(::-webkit-scrollbar) { .kiosk-scroll { scrollbar-width: auto; scrollbar-color: rgba(var(--brass-rgb, 210, 183, 115), 0.75) rgba(var(--paper-rgb, 247, 249, 239), 0.08); } } .kiosk-scroll::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); } .kiosk-scroll::-webkit-scrollbar-track { background: rgba(var(--paper-rgb, 247, 249, 239), 0.08); border-radius: calc(var(--scrollbar-w) / 2); } .kiosk-scroll::-webkit-scrollbar-thumb { background: rgba(var(--brass-rgb, 210, 183, 115), 0.75); /* латунь */ border-radius: calc(var(--scrollbar-w) / 2); border: 3px solid rgba(var(--amber-black-rgb, 0, 0, 0), 0.35); min-height: 96px; } .kiosk-scroll::-webkit-scrollbar-thumb:active { background: var(--brass, #D2B773); }