/* ============================================================================ * bottom-nav — плавающая нижняя навигационная панель. * * Стили СКОПИРОВАНЫ 1:1 из live.daddy.by (themes/altum/assets/css/bottom-nav.css) * и адаптированы под docs.daddy.by: * • темная тема управляется классом `.dark` на (а не атрибутом * [data-theme-style="dark"], как в live.daddy.by); * • accent-color берётся из --primary, как в остальной теме BeDesk. * ========================================================================== */ .bottom-nav { /* Локальные значения переменных для docs.daddy.by (светлая тема) */ --card-bg: #ffffff; --button-bg: #3b82f6; --input-border: #e5e7eb; --text-muted: #6b7280; position: fixed; left: 0; right: 0; bottom: calc(20px + max(12px, env(safe-area-inset-bottom))); z-index: 1000; display: flex; justify-content: center; pointer-events: none; /* only the pill catches events */ padding: 0 12px; animation: bottom-nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .dark .bottom-nav { --card-bg: #1a1d21; --button-bg: #3b82f6; --input-border: #2a2e33; --text-muted: #9ca3af; } .bottom-nav-pill { pointer-events: auto; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-around; gap: 2px; width: 100%; max-width: 520px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--card-bg) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12); border: 1px solid color-mix(in srgb, var(--input-border) 70%, transparent); overflow: visible; /* tooltips may float above the dock */ isolation: isolate; } /* Subtle gradient sheen across the dock */ .bottom-nav-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50% ); pointer-events: none; z-index: 0; } /* Indicator kept in DOM for JS compat, but hidden in icon-only dock */ .bottom-nav-indicator { display: none; } /* Each tab wrapped in a flex cell so the tooltip can position relative to it */ .bottom-nav-item { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; } /* Base button — circular icon-only */ .bottom-nav-pill .nav-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: transparent; border: none; cursor: pointer; color: var(--text-muted, #8a8f9b); border-radius: 999px; padding: 0; transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; -webkit-tap-highlight-color: transparent; user-select: none; font-family: inherit; outline: none; text-decoration: none; } .bottom-nav-pill .nav-tab:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-bg) 60%, transparent); } .bottom-nav-pill .nav-tab:active { transform: scale(0.92); } /* Hover — soft highlight on the icon */ .bottom-nav-pill .nav-tab:hover { color: color-mix(in srgb, var(--button-bg) 70%, #ffffff 30%); background-color: color-mix(in srgb, var(--button-bg) 14%, transparent); } .bottom-nav-pill .nav-tab:hover .nav-icon { transform: translateY(-1px) scale(1.06); } /* Active — pill-shaped gradient + white icon */ .bottom-nav-pill .nav-tab.active { color: #ffffff; background: linear-gradient( 135deg, var(--button-bg) 0%, color-mix(in srgb, var(--button-bg) 70%, #ffffff 30%) 100% ); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--button-bg) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .bottom-nav-pill .nav-tab.active .nav-icon { transform: translateY(-1px) scale(1.06); } /* Icon container — renders the SVG */ .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; line-height: 1; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); } .nav-icon svg { width: 24px; height: 24px; display: block; } /* Legacy font-awesome .fa inside .nav-icon — safety no-op for new markup */ .nav-icon .fa { display: block; } /* Legacy .nav-label — kept harmless (empty span fallback) */ .nav-label { font-size: 10.5px; font-weight: 500; white-space: nowrap; line-height: 1.1; transition: font-weight 0.2s ease, letter-spacing 0.2s ease; } /* Tooltip above each tab — preline-style (HS) but pure CSS-driven */ .nav-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; line-height: 1; font-weight: 500; color: #ffffff; background: color-mix(in srgb, #000000 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 6px 9px; border-radius: 8px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } /* Tooltip arrow */ .nav-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: color-mix(in srgb, #000000 78%, transparent); } /* Show tooltip on hover, focus, or when item has .show class (Preline parity) */ .bottom-nav-item:hover .nav-tooltip, .bottom-nav-pill .nav-tab:focus-visible ~ .nav-tooltip, .bottom-nav-item.show .nav-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-2px); } @keyframes bottom-nav-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Reduced motion: keep functional look, drop animations */ @media (prefers-reduced-motion: reduce) { .bottom-nav, .bottom-nav-indicator, .nav-tab, .nav-icon, .nav-tooltip { transition: none !important; animation: none !important; } } /* На странице входа/регистрации панель не нужна (скрываем, если body помечен) */ body.fullscreen-app .bottom-nav, .fullscreen-map ~ .bottom-nav { display: none; }