// -------------------------------------------------- // Footer nav bar (displayed in DiscourseHub app and PWAs) // -------------------------------------------------- $footer-nav-height: 49px; body.footer-nav-visible { #main-outlet { padding-bottom: $footer-nav-height + 15; } #reply-control.draft { bottom: $footer-nav-height; margin-bottom: env(safe-area-inset-bottom); padding-bottom: 0px; } #topic-progress-wrapper:not(.docked) { margin-bottom: calc(#{$footer-nav-height} + env(safe-area-inset-bottom)); } .posts-filtered-notice { transition: all linear 0.1s; bottom: calc(#{$footer-nav-height} + env(safe-area-inset-bottom)); } } .footer-nav { background-color: rgba(var(--header_background-rgb), 0.9); box-shadow: shadow("footer-nav"); height: $footer-nav-height; position: fixed; bottom: -$footer-nav-height; left: 0; width: 100%; z-index: z("footer-nav"); transition: all linear 0.1s; .d-icon { color: var(--header_primary-medium); } &.visible { bottom: 0px; } .footer-nav-widget { display: flex; justify-content: "space-evenly"; @include unselectable; button { flex: 1; margin: 4px; border-radius: 2px; padding: 14px 18px; &:disabled { opacity: 0.6; } } } } @supports (padding: max(0px)) { .footer-nav.visible { padding-bottom: unquote("max(5px, env(safe-area-inset-bottom))"); } } @supports (-webkit-backdrop-filter: blur(10px)) { body:not(.footer-nav-ipad) .footer-nav { background-color: rgba(var(--header_background-rgb), 0.7); -webkit-backdrop-filter: blur(20px); } } body.footer-nav-ipad { padding-top: $footer-nav-height; .footer-nav { bottom: auto; top: 0px; background-color: var(--header_background); z-index: z("ipad-header-nav"); padding-bottom: 0; // resets safe-area-inset-bottom } #reply-control, #reply-control.fullscreen { z-index: z("ipad-header-nav") + 1; } &.docked .d-header-wrap { top: $footer-nav-height; } }