/* ─── Pingo PWA UI ──────────────────────────────────────────────────────────── * * Оформление трёх элементов, которые создаёт js/pwa.js: полоска-предложение * (установка / обновление), индикатор offline и всплывашка ошибки сети. * * Отдельный файл, а не app.css: app.css приходит только с base.html, а PWA-снипет * подключается на всех страницах, включая те, у которых свой . * * Цвета берутся из палитры темы (snippets/_theme.html даёт --c-* как RGB-каналы). * У каждого var() есть фолбэк: на 500.html темы нет, а полоска offline там * как раз уместнее всего. */ .pingo-pwa-bar { position: fixed; left: 1rem; right: 1rem; /* Над нижней мобильной навигацией (h-16 = 4rem, см. snippets/_mobile_nav.html) и над «домашней» чёрточкой iPhone. */ bottom: calc(env(safe-area-inset-bottom) + 4.75rem); z-index: 200; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; max-width: 34rem; margin: 0 auto; padding: 0.75rem 0.875rem; border: 1px solid var(--c-rim, rgba(140, 155, 210, 0.12)); border-radius: 1rem; background: rgb(var(--c-surf, 17 20 37)); color: rgb(var(--c-ink, 228 232 255)); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); font-size: 0.8125rem; line-height: 1.4; font-weight: 600; } @media (min-width: 768px) { /* На десктопе нижней навигации нет — полоска садится ниже. */ .pingo-pwa-bar { bottom: calc(env(safe-area-inset-bottom) + 1rem); } } .pingo-pwa-bar > span { flex: 1 1 12rem; } .pingo-pwa-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; } .pingo-pwa-btn { flex: 0 0 auto; padding: 0.5rem 0.875rem; border: 1px solid var(--c-rim, rgba(140, 155, 210, 0.12)); border-radius: 0.75rem; background: transparent; color: rgb(var(--c-sub, 138 149 184)); font: inherit; font-size: 0.8125rem; cursor: pointer; } .pingo-pwa-btn:hover { color: rgb(var(--c-ink, 228 232 255)); } .pingo-pwa-btn--primary { border-color: transparent; background: rgb(var(--c-or, 255 90 20)); color: #fff; } .pingo-pwa-btn--primary:hover { color: #fff; opacity: 0.92; } /* Индикатор offline: тонкая полоса сверху. Выше липкой шапки (z-50) и мобильной навигации (z-150) — состояние сети важнее любого из них. */ .pingo-offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 300; padding: calc(env(safe-area-inset-top) + 0.375rem) 1rem 0.375rem; background: rgb(var(--c-err, 255 77 106)); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; letter-spacing: 0.01em; } .pingo-offline-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 4.75rem); transform: translateX(-50%); z-index: 400; max-width: calc(100vw - 2rem); padding: 0.625rem 1.25rem; border-radius: 0.75rem; background: rgb(var(--c-err, 255 77 106)); color: #fff; font-size: 0.8125rem; font-weight: 600; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } @media (min-width: 768px) { .pingo-offline-toast { bottom: calc(env(safe-area-inset-bottom) + 1.5rem); } } /* viewport-fit=cover + env(safe-area-inset-*) применяем ТОЧЕЧНО в компонентах, которым это нужно (нижняя навигация, поле ввода чата), а не глобально на : горизонтальный padding на body в установленном PWA сдвигал ширину и широкие блоки (сетка расписания, карта) вылезали за экран. */ /* Тактильный отклик нижней навигации в установленном приложении: иконка подрастает при нажатии (мобильный) и наведении (десктоп-PWA). Только в standalone — в браузерной вкладке нижняя панель ведёт себя как раньше. */ .pwa-standalone .pg-mobnav a { -webkit-tap-highlight-color: transparent; } .pwa-standalone .pg-mobnav a svg, .pwa-standalone .pg-mobnav a > span { transition: transform .13s cubic-bezier(.34, 1.56, .64, 1); } .pwa-standalone .pg-mobnav a:hover svg, .pwa-standalone .pg-mobnav a:active svg { transform: scale(1.22); } .pwa-standalone .pg-mobnav a:hover > span, .pwa-standalone .pg-mobnav a:active > span { transform: scale(1.12); }