/* * Fixed bottom navigation bar shown only when the site is running as an * installed/standalone PWA (see js/pwa-app-shell.js, which adds the * `pwa-standalone` class to and un-hides #pwaBottomBar). * Kept inert in a regular browser tab, where native back/forward/refresh/ * share controls already exist. */ .pwa-bottom-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; grid-template-columns: repeat(5, 1fr); background: var(--muistio); border-top: 1px solid var(--kulta80); box-shadow: 0 -1px 3px rgba(0, 0, 0, .15); padding-bottom: env(safe-area-inset-bottom, 0); transform: translateY(0); transition: transform 0.25s ease; } html.pwa-standalone .pwa-bottom-bar { display: grid; } /* Collapsed while scrolling down through content, mirroring the header's scroll-hide behavior on library_item.php (see js/pwa-app-shell.js). */ .pwa-bottom-bar.pwa-bottom-bar-hidden { transform: translateY(100%); } html.pwa-standalone body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); } /* The bottom bar's own menu button replaces the header's hamburger in standalone mode, so hide the header one to avoid two menu toggles. */ html.pwa-standalone .menu-icon { display: none !important; } /* Floating chevron shown once the bottom bar has auto-collapsed (see js/pwa-app-shell.js), so it's never impossible to bring the toolbars back. Reveals the bottom bar and, on library_item.php, the header too. */ .pwa-reveal-btn { display: none; position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0)); z-index: 1002; width: 40px; height: 40px; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--muistio); color: var(--taivaansini); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } html.pwa-standalone .pwa-reveal-btn:not([hidden]) { display: flex; } /* Dev-only: force-reload button, rendered only on the test host (testikirjasto.bahai.fi - see elements/pwa_bottom_bar.php) so testers don't have to delete and re-add the installed PWA to pick up a new service worker or cached assets after a deploy. */ .pwa-dev-reload-btn { position: fixed; right: 1rem; bottom: calc(3.5rem + env(safe-area-inset-bottom, 0)); z-index: 1003; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--puolukka); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .pwa-dev-reload-btn:active { background: var(--pakkasyo); } .pwa-dev-reload-btn:disabled { opacity: 0.6; } .pwa-bottom-bar-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border: none; background: none; color: var(--taivaansini); font-size: 0.7rem; line-height: 1; } .pwa-bottom-bar-btn i { font-size: 1.1rem; } .pwa-bottom-bar-btn:disabled { color: var(--kulta80); opacity: 0.6; } .pwa-bottom-bar-btn[hidden] { display: none; } .pwa-bottom-bar-btn:active { color: var(--taivaansini); } .pwa-bottom-bar-label { font-family: inherit; } /* Hamburger-to-X icon for the menu button, animated the same way as the header's .menu-icon (blocks/whale_manual_nav/templates/header_nav). */ .pwa-hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 20px; height: 16px; } .pwa-hamburger span { display: block; width: 100%; height: 2px; border-radius: 9999px; background-color: currentColor; transform-origin: center; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .pwa-bottom-bar-btn.active .pwa-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pwa-bottom-bar-btn.active .pwa-hamburger span:nth-child(2) { opacity: 0; } .pwa-bottom-bar-btn.active .pwa-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }