From f49217429799843da78893af7d643c49d46cb9cb Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 24 Jul 2026 12:08:09 +0800 Subject: [PATCH] fix(nav): align navbar text and icon baselines with zibll Center FA icons in toggle-radius/btn chips, restore menu-item title flex baseline, and match CTA/logo vertical alignment so top bar text and icons no longer drift. --- assets/css/core/buttons.css | 20 +++- .../css/frontend/nav/header-menu-buttons.css | 45 +++++--- assets/css/frontend/nav/zib-navbar-core.css | 45 +++++++- assets/css/frontend/nav/zib-utilities.css | 103 ++++++++++++++++++ 4 files changed, 197 insertions(+), 16 deletions(-) diff --git a/assets/css/core/buttons.css b/assets/css/core/buttons.css index c0cd3c2c..b5882604 100644 --- a/assets/css/core/buttons.css +++ b/assets/css/core/buttons.css @@ -253,7 +253,7 @@ .active.badg.hollow, .active > .hollow:not(.vip-tag) { --this-color: var(--focus-color); } -/* toggle-radius (round 29px toggle) */ +/* toggle-radius (round 29px toggle) — zibll 1:1 */ .toggle-radius { background: var(--this-bg); width: 29px; @@ -265,8 +265,24 @@ vertical-align: text-top; --this-bg: var(--main-border-color); } +/* zibll groups these with abs-* : absolute + vertical center; then pin left/right 0 */ .toggle-radius .fa, -.toggle-radius .icon { right: 0 !important; left: 0 !important; margin: auto; } +.toggle-radius .icon, +.toggle-radius > i { + position: absolute; + top: 50%; + right: 0 !important; + left: 0 !important; + margin: auto; + transform: translateY(-50%); + line-height: 1; + width: 1em; + height: 1em; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} /* solid color modifiers — set --this-bg; default --this-color white */ .b-gray, .b-theme, .b-red, .b-yellow, .b-blue, .b-blue-2, .b-black, diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css index 189b5527..b007f281 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -611,35 +611,47 @@ body.theme-dark body > .drop-newadd .newadd-btns__item { color: #fff; } -/* Theme toggle */ +/* Theme toggle — zibll toggle-radius (29px) + absolute FA center, not flex+translate(-50%) */ .navbar-but-cluster .theme-toggle-desktop, -.navbar-but-cluster .toggle-theme { - display: inline-flex; - align-items: center; - justify-content: center; - width: 34px; - height: 34px; +.navbar-but-cluster .toggle-theme, +.navbar-top .toggle-theme.toggle-radius { + display: inline-block; + align-items: unset; + justify-content: unset; + width: 29px; + height: 29px; padding: 0; - border-radius: 999px; + border-radius: 100%; flex: 0 0 auto; position: relative; overflow: hidden; + vertical-align: middle; + box-sizing: border-box; } .navbar-but-cluster .theme-toggle-desktop > i, -.navbar-but-cluster .toggle-theme > i { +.navbar-but-cluster .toggle-theme > i, +.navbar-top .toggle-theme.toggle-radius > i { margin: 0 !important; - line-height: 1; + line-height: 1 !important; position: absolute; - left: 50%; + left: 0 !important; + right: 0 !important; top: 50%; - transform: translate(-50%, -50%); + transform: translateY(-50%); + width: 1em; + height: 1em; + text-align: center; + display: inline-flex; + align-items: center; + justify-content: center; } .theme-toggle-desktop, .theme-toggle-mobile, .toggle-theme { position: relative; + overflow: hidden; } .theme-toggle-desktop .theme-icon-moon, @@ -649,11 +661,18 @@ body.theme-dark body > .drop-newadd .newadd-btns__item { .toggle-theme .theme-icon-moon, .toggle-theme .theme-icon-sun { margin: 0 !important; - line-height: 1; + line-height: 1 !important; width: 1em; + height: 1em; text-align: center; } +/* Hide inactive sun/moon without leaving layout shift */ +.toggle-theme .theme-icon-sun[style*="display:none"], +.toggle-theme .theme-icon-moon[style*="display:none"] { + display: none !important; +} + /* float commerce */ .float-btn-shop-cart { position: relative; diff --git a/assets/css/frontend/nav/zib-navbar-core.css b/assets/css/frontend/nav/zib-navbar-core.css index 6ec5c82d..5021895c 100644 --- a/assets/css/frontend/nav/zib-navbar-core.css +++ b/assets/css/frontend/nav/zib-navbar-core.css @@ -296,6 +296,11 @@ badge.top, font-size: 0.8em; padding: 0.3em 1em !important; margin: 0.4em; + display: inline-flex !important; + align-items: center; + justify-content: center; + line-height: 1.44; + vertical-align: middle; } .navbar-top .navbar-but .but.hover-show { @@ -304,11 +309,22 @@ badge.top, .navbar-top .navbar-brand { padding: 7px 10px; + display: flex; + align-items: center; + line-height: 1; +} + +.navbar-logo { + display: inline-flex; + align-items: center; + line-height: 0; } .navbar-logo > img { height: 36px; padding: 0 30px; + display: block; + vertical-align: middle; } .navbar-top .nav > li > a { @@ -318,12 +334,16 @@ badge.top, display: inline-flex !important; overflow: hidden; align-items: center; + line-height: 1.44; } .navbar-top .nav > li > a > .menu-item-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + line-height: 1.44; + display: inline-block; + vertical-align: middle; } .menu-item > a > .but { @@ -338,8 +358,31 @@ badge.top, color: var(--focus-color); } -.navbar-top .fa { +.navbar-top .fa, +.navbar-top .fas, +.navbar-top .far, +.navbar-top .fab { transition: 0.2s; + line-height: 1; +} + +/* Override AKSRT .btn chrome when used as pure icon hit-targets in the bar */ +.navbar-top a.btn.signin-loader, +.navbar-top a.btn.nav-search-btn, +.navbar-top a.btn.main-search-btn { + height: 36px !important; + width: 36px !important; + min-height: 36px !important; + padding: 0 !important; + gap: 0 !important; + line-height: 1 !important; + border-radius: 4px; + font-size: 16px; +} + +.navbar-top .navbar-form { + display: flex; + align-items: center; } .navbar-collapse .search-input { diff --git a/assets/css/frontend/nav/zib-utilities.css b/assets/css/frontend/nav/zib-utilities.css index 69d9333a..7cc2fc04 100644 --- a/assets/css/frontend/nav/zib-utilities.css +++ b/assets/css/frontend/nav/zib-utilities.css @@ -242,6 +242,109 @@ body.mobile-navbar-show { overflow: hidden; } justify-content: center; width: 36px; height: 36px; + padding: 0 !important; + line-height: 1; + gap: 0; + vertical-align: middle; +} +/* Icon-only nav chips: neutralize .btn padding/height so FA sits dead-center */ +.navbar-top .list-inline > li > a.btn > i, +.navbar-top .list-inline > li > a.btn > .fa, +.navbar-top .list-inline > li > a.btn > .fas, +.navbar-top .list-inline > li > a.btn > .far, +.navbar-top a.btn.nav-search-btn > i, +.navbar-top a.btn.main-search-btn > i, +.navbar-top a.btn.signin-loader > i { + margin: 0 !important; + line-height: 1 !important; + width: 1em; + height: 1em; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: 0; + position: relative; + top: 0; + transform: none; +} +/* Navbar CTA: icon + text baseline (zibll .navbar-but .but) */ +.navbar-top .navbar-but .but, +.navbar-top a.navbar-cta.but { + display: inline-flex !important; + align-items: center; + justify-content: center; + line-height: 1; + vertical-align: middle; +} +.navbar-top .navbar-but .but > i, +.navbar-top a.navbar-cta.but > i { + margin: 0 0.25em 0 0 !important; + line-height: 1 !important; + position: relative; + top: 0; + transform: none; + vertical-align: 0; +} +.navbar-top .navbar-but .but > i:last-child, +.navbar-top a.navbar-cta.but > i:only-child { + margin-right: 0 !important; +} +/* Theme toggle in navbar-form (not only cluster) */ +.navbar-top .navbar-form .toggle-theme.toggle-radius, +.navbar-top a.toggle-theme.toggle-radius { + display: inline-block; + width: 29px; + height: 29px; + overflow: hidden; + vertical-align: middle; + flex-shrink: 0; +} +.navbar-top .navbar-form .toggle-theme.toggle-radius > i, +.navbar-top a.toggle-theme.toggle-radius > i { + position: absolute; + top: 50%; + left: 0; + right: 0; + margin: auto; + transform: translateY(-50%); + line-height: 1; +} +/* Menu item title + icon baseline (when menu is assigned) */ +.navbar-top .nav > li > a { + display: inline-flex !important; + align-items: center; + line-height: 1.44; +} +.navbar-top .nav > li > a > .menu-item-icon, +.navbar-top .nav > li > a > i.menu-item-icon, +.navbar-top .nav > li > a > .fa.menu-item-icon { + margin-right: 0.25em; + line-height: 1; + flex-shrink: 0; + position: relative; + top: 0; + transform: none; + vertical-align: 0; +} +.navbar-top .nav > li > a > .menu-item-title { + line-height: 1.44; + display: inline-block; + vertical-align: middle; +} +/* FA in header: kill common FA vertical drift vs flex centers */ +.navbar-top .fa, +.navbar-top .fas, +.navbar-top .far, +.navbar-top .fab { + line-height: 1; + vertical-align: -0.05em; +} +.navbar-top .css-icon { + width: 1em; + height: 1em; + vertical-align: -0.15em; + display: inline-block; + position: relative; } /* Sub-user-box width */ .navbar-top .navbar-right .sub-menu {