/** * layout.css — единый layout для всех страниц приложения. * Подключается первым. Отступы и max-width задаются через CSS-переменные * в зависимости от платформы (data-platform на ). * * Платформы: * - webapp: Telegram Mini App — шапка 56px + safe-area сверху/снизу. * - mobile-web: ЛК в мобильном браузере — только safe-area (iOS/Android). * - desktop: ЛК в десктопе (>= 1024px) — контент 1024px, без safe-area. */ /* --- Layout variables (defaults: mobile-web–safe) --- */ /* Дефолты темы: без них таббар и контент в ЛК (без Telegram) без фона */ :root { --layout-safe-area-top: env(safe-area-inset-top, 0px); --layout-safe-area-bottom: env(safe-area-inset-bottom, 0px); --layout-header-offset: 0; --layout-tabbar-height: calc(60px + var(--layout-safe-area-bottom)); --layout-nav-block-height: calc(56px + var(--layout-safe-area-bottom)); --layout-content-max-width: 600px; --layout-content-padding-top: 0; --layout-content-padding-bottom: 0; --tg-theme-bg-color: #ffffff; --tg-theme-secondary-bg-color: #e5e5ea; --tg-theme-text-color: #000000; --tg-theme-hint-color: #8e8e93; --tg-theme-button-color: #2481cc; --tg-theme-button-text-color: #ffffff; } /* --- Base layout (shared) --- */ body { margin: 0; padding-top: var(--layout-content-padding-top); padding-bottom: var(--layout-content-padding-bottom); width: 100%; max-width: 100%; min-height: 100vh; overflow-x: hidden; box-sizing: border-box; } .container { max-width: var(--layout-content-max-width); margin: 0 auto; padding: 0; min-height: 100vh; display: flex; flex-direction: column; width: 100%; overflow-x: hidden; box-sizing: border-box; } /* Контент над таббаром */ .content-with-tabbar { padding-bottom: calc(var(--layout-tabbar-height) + 20px); } /* Контент над фиксированной панелью навигации (Назад/Далее) */ .content-with-nav { padding-bottom: var(--layout-nav-block-height); } /* --- [data-platform="webapp"] — Telegram Mini App --- */ [data-platform="webapp"] { --layout-header-offset: 56px; --layout-tabbar-height: calc(60px + var(--layout-safe-area-bottom)); --layout-nav-block-height: calc(56px + var(--layout-safe-area-bottom)); } [data-platform="webapp"] body { --layout-content-padding-top: calc(var(--layout-safe-area-top) + var(--layout-header-offset)); padding-top: var(--layout-content-padding-top); } [data-platform="webapp"] .container { padding-bottom: 0; } [data-platform="webapp"] .container.content-with-tabbar { padding-bottom: calc(var(--layout-tabbar-height) + 24px); } [data-platform="webapp"] .navigation { padding-bottom: calc(12px + var(--layout-safe-area-bottom)); } [data-platform="webapp"] .form-wrapper { padding-bottom: calc(100px + var(--layout-safe-area-bottom)); } [data-platform="webapp"] .progress-bar { top: calc(var(--layout-safe-area-top) + var(--layout-header-offset)); } /* --- [data-platform="mobile-web"] — веб ЛК, мобильный браузер --- */ [data-platform="mobile-web"] { --layout-header-offset: 0; --layout-tabbar-height: calc(60px + var(--layout-safe-area-bottom)); --layout-nav-block-height: calc(56px + var(--layout-safe-area-bottom)); } [data-platform="mobile-web"] body { --layout-content-padding-top: var(--layout-safe-area-top); padding-top: var(--layout-content-padding-top); } [data-platform="mobile-web"] .container { padding-bottom: 0; } [data-platform="mobile-web"] .container.content-with-tabbar { padding-bottom: calc(var(--layout-tabbar-height) + 24px); } [data-platform="mobile-web"] .form-wrapper { padding-bottom: calc(100px + var(--layout-safe-area-bottom)); } [data-platform="mobile-web"] .navigation { padding-bottom: calc(12px + var(--layout-safe-area-bottom)); } [data-platform="mobile-web"] .progress-bar { top: var(--layout-safe-area-top); } /* --- [data-platform="desktop"] — веб ЛК, десктоп (брейкпоинт 1024px) --- */ [data-platform="desktop"] { --layout-safe-area-top: 0px; --layout-safe-area-bottom: 0px; --layout-header-offset: 0; --layout-tabbar-height: 60px; --layout-nav-block-height: 56px; --layout-content-max-width: 1024px; } [data-platform="desktop"] body { padding-top: 0; padding-bottom: 0; } [data-platform="desktop"] .form-wrapper { padding-bottom: 100px; } [data-platform="desktop"] .navigation { padding-bottom: 12px; }