/** * Bottom navigation shown only when the site runs as an installed * standalone PWA (`.is-pwa-standalone` on ). Zero effect on normal * browser visits. */ .af-pwa-bottom-nav { display: none; } .is-pwa-standalone .af-pwa-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990; background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Reserve space so page content/footer isn't hidden behind the fixed bar. */ .is-pwa-standalone body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .af-pwa-bottom-nav__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; color: #666; text-decoration: none; -webkit-tap-highlight-color: transparent; } .af-pwa-bottom-nav__item .dashicons { font-size: 22px; width: 22px; height: 22px; } .af-pwa-bottom-nav__label { font-size: 11px; font-weight: 500; line-height: 1.2; } .af-pwa-bottom-nav__item--active { color: #0073aa; } /* ========================================================================= Relocated notification bell (moved here by pwa-bottom-nav.js) ========================================================================= */ .af-pwa-bottom-nav .af-notification-bell { position: static; flex: 1 1 0; z-index: auto; } .af-pwa-bottom-nav .af-notification-bell__trigger { width: 100%; height: auto; border-radius: 0; background: transparent; box-shadow: none; color: #666; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; } .af-pwa-bottom-nav .af-notification-bell__trigger:hover { background: transparent; transform: none; } .af-pwa-bottom-nav .af-notification-bell__label { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; } .af-pwa-bottom-nav .af-notification-bell__badge { top: 2px; right: 8px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; } .af-pwa-bottom-nav .af-notification-bell__dropdown { position: fixed; bottom: calc(64px + env(safe-area-inset-bottom) + 8px); left: 8px; right: 8px; width: auto; }