/* ===================================================================== VOLAGO — мобильная «рамка» (static/css/vlg_mobile.css), версия 2027 • Страница от края до края без серых полос • Эффект Glassmorphism для шапки и нижней панели • Плавающая панель-"остров" с вырезом под центральную кнопку • Аппаратная плавная анимация (GPU) при скролле ===================================================================== */ /* Цвет «вокруг» страницы строго совпадает с фоном сайта (убивает серые полосы в Safari) */ html { background-color: #f0f2f5; } html[data-bs-theme="dark"] { background-color: #18191a; } /* Страница рисуется под вырезами экрана — в альбомной ориентации отступаем от них */ body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } @media (max-width: 991.98px) { /* ---------- Шапка (Glassmorphism + Центрирование) ---------- */ nav.navbar.sticky-top { position: sticky !important; top: 0 !important; /* Отступы: 8px снизу, и 8px + челка сверху (идеально по центру) */ padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 8px !important; background: rgba(255, 255, 255, 0.65) !important; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; z-index: 1040; } [data-bs-theme="dark"] nav.navbar.sticky-top { background: rgba(36, 37, 38, 0.65) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } /* Скрытие шапки при скролле вниз */ nav.navbar.sticky-top.is-hidden { transform: translateY(-100%); } /* ---------- Нижняя панель (Плавающий "остров") ---------- */ .mobile-bottom-nav { left: 12px !important; right: 12px !important; bottom: calc(9px + env(safe-area-inset-bottom, 0px)) !important; /* Отступ от низа */ height: 72px !important; /* было 64 — массивнее, как таб-бар iPhone */ padding: 0 12px !important; border-radius: 28px !important; /* форма капсулы под новую высоту */ /* Тонкий тёмный контур — отделяет панель от светлого фона, но не бросается в глаза */ border: 1px solid rgba(15, 23, 42, 0.08) !important; background: rgba(255, 255, 255, 0.78) !important; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); /* Блик по верхней кромке + две мягкие тени: близкая (контур) и дальняя («парение») */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 32px -6px rgba(15, 23, 42, 0.18) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; transform: translateY(0); will-change: transform; } [data-bs-theme="dark"] .mobile-bottom-nav { /* Чуть светлее фона сайта — панель видна, но остаётся тёмной */ background: rgba(48, 49, 52, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.4), 0 14px 34px -8px rgba(0, 0, 0, 0.7) !important; } /* Иконки крупнее под новую высоту */ .mobile-bottom-nav .nav-icon-link { font-size: 1.35rem; } /* Скрытое состояние: уводим панель глубоко вниз, чтобы кнопка + гарантированно исчезла */ .mobile-bottom-nav.is-hidden { transform: translateY(calc(100% + 50px + env(safe-area-inset-bottom, 0px))) !important; pointer-events: none; } /* Отступ снизу страницы, чтобы контент не перекрывался доком */ #page-content { margin-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; } /* Активный раздел навигации */ .mobile-bottom-nav .nav-icon-link { position: relative; transition: color 0.2s ease, transform 0.15s ease; } .mobile-bottom-nav .nav-icon-link:active { transform: scale(0.9); } /* Без синей рамки и «залипшего» оранжевого после нажатия пальцем. Для управления с клавиатуры аккуратная рамка остаётся. */ .mobile-bottom-nav .nav-icon-link:focus { outline: none; box-shadow: none; } .mobile-bottom-nav .nav-icon-link:focus:not(.active) { color: #999; } .mobile-bottom-nav .nav-icon-link:focus-visible { outline: 2px solid rgba(255, 107, 0, 0.55); outline-offset: 2px; border-radius: 14px; } .mobile-bottom-nav .nav-icon-link { -webkit-tap-highlight-color: transparent; } .mobile-bottom-nav .nav-icon-link.active { color: #FF6B00; } .mobile-bottom-nav .nav-icon-link.active::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 52px; height: 44px; margin: -22px 0 0 -26px; border-radius: 16px; background: rgba(255, 107, 0, 0.12); } /* Центральная кнопка создания (Эффект "выреза" в стекле) */ .mobile-bottom-nav .btn-create-float { margin-top: -26px; width: 56px; height: 56px; font-size: 1.4rem; background: #FF6B00 !important; color: #fff !important; /* Цвет рамки совпадает с фоном сайта, создавая иллюзию выреза в стекле */ border: 4px solid #f0f2f5 !important; box-shadow: 0 8px 16px -6px rgba(255, 107, 0, 0.6) !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease; } .mobile-bottom-nav .btn-create-float:active { transform: scale(0.9); } [data-bs-theme="dark"] .mobile-bottom-nav .btn-create-float { border-color: #18191a !important; /* Рамка под темный фон сайта */ } /* Если открыта клавиатура — прячем док */ .mobile-bottom-nav.is-kb { transform: translateY(calc(100% + 50px + env(safe-area-inset-bottom, 0px))) !important; } /* ---------- Всплывающие элементы (тосты), опускаются вместе с доком ---------- */ .dd-bar { left: 12px !important; right: 12px !important; width: auto !important; bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 20px !important; border: 1px solid var(--bs-border-color) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; transform: translateY(0); } .vlg-mid { bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity .26s ease-out !important; transform: translateY(0); } .fc-toast, .dz-toast { bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s !important; transform: translateY(0); } .dd-toast { bottom: calc(178px + env(safe-area-inset-bottom, 0px)) !important; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; transform: translateY(0); } /* Когда панель скрыта — тосты плавно съезжают вниз на 90px */ :root.vlg-dock-hidden .dd-bar, :root.vlg-dock-hidden .vlg-mid, :root.vlg-dock-hidden .fc-toast, :root.vlg-dock-hidden .dz-toast, :root.vlg-dock-hidden .dd-toast { transform: translateY(98px); } } @media (max-width: 575.98px) { .modal-fullscreen-sm-down .modal-content { padding-top: env(safe-area-inset-top, 0px); } }