diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css index c47573f3..f06e9a4a 100644 --- a/assets/css/frontend/nav.css +++ b/assets/css/frontend/nav.css @@ -7,4 +7,145 @@ @import url("nav/zib-nav-style.css"); @import url("nav/header-menu-buttons.css"); @import url("nav/header-userbox.css"); -@import url("nav/dark-mode-submenu.css"); \ No newline at end of file +@import url("nav/dark-mode-submenu.css"); + +/* === Inline critical nav icon/text alignment (bypass @import cache) === */ +/* zibll toggle-radius icon center */ +.navbar-top .toggle-radius, +.navbar-top a.toggle-theme.toggle-radius, +.navbar-but-cluster .toggle-theme { + position: relative; + width: 29px; + height: 29px; + display: inline-block; + overflow: hidden; + vertical-align: middle; + box-sizing: border-box; +} +.navbar-top .toggle-radius > i, +.navbar-top .toggle-radius .fa, +.navbar-top .toggle-radius .fas, +.navbar-top .toggle-theme > i { + position: absolute !important; + top: 50% !important; + left: 0 !important; + right: 0 !important; + margin: auto !important; + transform: translateY(-50%) !important; + line-height: 1 !important; + width: 1em; + height: 1em; + display: inline-flex !important; + align-items: center; + justify-content: center; + text-align: center; +} + +/* Icon-only .btn chips (user / search) */ +.navbar-top .list-inline > li > a.btn, +.navbar-top a.btn.signin-loader, +.navbar-top a.btn.nav-search-btn, +.navbar-top a.btn.main-search-btn { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 36px !important; + height: 36px !important; + min-height: 36px !important; + padding: 0 !important; + gap: 0 !important; + line-height: 1 !important; + box-sizing: border-box; + vertical-align: middle; +} +.navbar-top .list-inline > li > a.btn > i, +.navbar-top a.btn.signin-loader > i, +.navbar-top a.btn.nav-search-btn > i, +.navbar-top a.btn.main-search-btn > i { + margin: 0 !important; + line-height: 1 !important; + position: static !important; + transform: none !important; + top: auto !important; + width: 1em; + height: 1em; + display: inline-flex; + align-items: center; + justify-content: center; +} + +/* CTA icon + label baseline */ +.navbar-top a.navbar-cta.but, +.navbar-top .navbar-but .but { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + line-height: 1 !important; + vertical-align: middle; +} +.navbar-top a.navbar-cta.but > i, +.navbar-top .navbar-but .but > i { + margin: 0 0.25em 0 0 !important; + line-height: 1 !important; + position: static !important; + transform: none !important; + top: auto !important; + flex-shrink: 0; +} +.navbar-top a.navbar-cta.but > .navbar-cta-text, +.navbar-top .navbar-but .but > .navbar-cta-text { + line-height: 1.2; + display: inline-block; + vertical-align: middle; +} + +/* Menu text baseline */ +.navbar-top .nav > li > a { + display: inline-flex !important; + align-items: center !important; + line-height: 1.44; +} +.navbar-top .nav > li > a > .menu-item-title { + line-height: 1.44; + display: inline-block; + vertical-align: middle; +} +.navbar-top .nav > li > a > .menu-item-icon, +.navbar-top .nav > li > a > i.menu-item-icon { + margin-right: 0.25em; + line-height: 1 !important; + position: static !important; + transform: none !important; + flex-shrink: 0; +} + +/* FA baseline in bar */ +.navbar-top .fa, +.navbar-top .fas, +.navbar-top .far, +.navbar-top .fab { + line-height: 1; +} + +/* Logo */ +.navbar-top .navbar-brand { + display: flex; + align-items: center; + line-height: 1; +} +.navbar-logo { + display: inline-flex; + align-items: center; + line-height: 0; +} +.navbar-logo > img { + display: block; + height: 36px; +} + +/* Right clusters vertical center */ +.navbar-top .navbar-form, +.navbar-top .navbar-right { + display: flex; + align-items: center; +}