From 4f5430cdba7ac2f0359c4eeaa33838eb569d6834 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 24 Jul 2026 12:32:34 +0800 Subject: [PATCH] fix(nav): complete zibll top-bar text/icon alignment pass Rewrite inline nav.css alignment for logo, menu titles, CTA chips, theme toggle (29px), icon-only buttons, and user-href badges so FA glyphs and labels share zibll baselines. --- assets/css/frontend/nav.css | 381 +++++++++++++++++++++++------------- 1 file changed, 243 insertions(+), 138 deletions(-) diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css index fcbe8d93..d3dcaa2f 100644 --- a/assets/css/frontend/nav.css +++ b/assets/css/frontend/nav.css @@ -9,128 +9,47 @@ @import url("nav/header-userbox.css"); @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; +/* ========================================================================== + * Top navbar icon/text alignment — 1:1 zibll (demo.zibll.com / main.css) + * Kept INLINE in the aggregator so browsers cannot miss it via stale @import. + * ========================================================================== */ + +/* --- Shell row --- */ +.navbar-top { + margin: 0; + border-radius: 0 !important; + font-size: 15px; } -.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; +.navbar-top .navbar-form, +.navbar-top .navbar-right, +.navbar-top .navbar-form.flex.ac { + display: flex !important; + align-items: center !important; + margin-top: 0; + margin-bottom: 0; +} +.navbar-top .list-inline { + display: flex; align-items: center; - justify-content: center; - text-align: center; + margin: 0; + padding: 0; + list-style: none; } - -/* 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; +.navbar-top .list-inline > li { + display: 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; + margin: 0; 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; +.navbar-top .list-inline.splitters > li + li { + margin-left: 6px; } -/* 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 */ +/* --- Logo --- */ .navbar-top .navbar-brand { display: flex; align-items: center; + padding: 7px 10px; line-height: 1; } .navbar-logo { @@ -141,23 +60,205 @@ .navbar-logo > img { display: block; height: 36px; + padding: 0 30px; + width: auto; + max-height: 36px; } -/* Right clusters vertical center */ -.navbar-top .navbar-form, -.navbar-top .navbar-right { - display: flex; +/* --- Primary menu text/icons --- */ +.navbar-top .nav > li > a { + padding-left: 10px; + padding-right: 10px; + border-radius: 4px; + display: inline-flex !important; + align-items: center !important; + overflow: hidden; + 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; +} +.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, +.navbar-top .nav > li > a > .fas.menu-item-icon { + margin-right: 0.25em !important; + margin-left: 0 !important; + line-height: 1 !important; + position: static !important; + transform: none !important; + top: auto !important; + flex-shrink: 0; + vertical-align: 0 !important; +} +.navbar-top .nav > li > a > .fa-angle-down { + margin-left: 0.2em; + margin-right: 0 !important; + line-height: 1; + flex-shrink: 0; +} +.navbar-nav li a, +.navbar-nav li { + max-height: 50px; + position: relative; +} + +/* --- CTA (发布 / 会员): icon + label --- */ +.navbar-top .navbar-but .but, +.navbar-top a.navbar-cta.but { + font-size: 0.8em; + padding: 0.3em 1em !important; + margin: 0.4em; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + line-height: 1.44 !important; + vertical-align: middle; + box-sizing: border-box; + gap: 0; +} +.navbar-top .navbar-but .but > i, +.navbar-top a.navbar-cta.but > i, +.navbar-top .navbar-but .but > .fa, +.navbar-top .navbar-but .but > .fas, +.navbar-top a.navbar-cta.but > .fa, +.navbar-top a.navbar-cta.but > .fas { + margin: 0 0.25em 0 0 !important; + line-height: 1 !important; + position: static !important; + transform: none !important; + top: auto !important; + flex-shrink: 0; + vertical-align: 0 !important; + display: inline-block; +} +.navbar-top .navbar-but .but > .navbar-cta-text, +.navbar-top a.navbar-cta.but > .navbar-cta-text { + line-height: 1.44; + display: inline-block; + vertical-align: middle; + white-space: nowrap; +} + +/* --- 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-width: 36px !important; + min-height: 36px !important; + max-height: 36px !important; + padding: 0 !important; + gap: 0 !important; + line-height: 1 !important; + border-radius: 4px; + box-sizing: border-box; + vertical-align: middle; + font-size: 16px; +} +.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; + left: auto !important; + right: auto !important; + width: 1em; + height: 1em; + display: inline-flex !important; align-items: center; + justify-content: center; + vertical-align: 0 !important; } -/* Dropdown / user-href circular icon badges (zibll header-user-href) */ +/* Avatar trigger */ +.navbar-top a.navbar-avatar { + display: inline-flex !important; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 0 !important; + line-height: 0; +} +.navbar-top a.navbar-avatar img, +.navbar-top a.navbar-avatar .avatar { + width: 32px !important; + height: 32px !important; + border-radius: 50%; + display: block; + margin: 0 !important; +} + +/* --- Theme toggle (zibll toggle-radius 29px) --- */ +.navbar-top a.toggle-theme.toggle-radius, +.navbar-top .toggle-theme.toggle-radius, +.navbar-but-cluster .toggle-theme { + position: relative !important; + width: 29px !important; + height: 29px !important; + min-width: 29px !important; + min-height: 29px !important; + display: inline-block !important; + overflow: hidden !important; + vertical-align: middle; + border-radius: 100% !important; + box-sizing: border-box; + padding: 0 !important; + flex: 0 0 auto; + line-height: 1; +} +.navbar-top a.toggle-theme.toggle-radius > i, +.navbar-top .toggle-theme.toggle-radius > i, +.navbar-top a.toggle-theme.toggle-radius .fa, +.navbar-top a.toggle-theme.toggle-radius .fas { + 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 !important; + height: 1em !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + text-align: center; + vertical-align: 0 !important; +} +/* Only one glyph visible */ +.navbar-top .toggle-theme .theme-icon-sun[style*="display:none"], +.navbar-top .toggle-theme .theme-icon-moon[style*="display:none"] { + display: none !important; +} + +/* --- Dropdown circular badges (header-user-href) keep 36px --- */ .navbar-top .header-user-href .toggle-radius, .navbar-top .badg.toggle-radius { - position: relative; - display: inline-block; + position: relative !important; + width: 36px !important; + height: 36px !important; + display: inline-block !important; text-align: center; vertical-align: middle; overflow: hidden; + border-radius: 100%; + box-sizing: border-box; } .navbar-top .header-user-href .toggle-radius > i, .navbar-top .header-user-href .toggle-radius .fa, @@ -177,30 +278,34 @@ display: inline-flex !important; align-items: center; justify-content: center; -} - -/* Kill FA vertical-align drift inside flex chips */ -.navbar-top a.btn > i.fas, -.navbar-top a.btn > i.far, -.navbar-top a.navbar-cta > i.fas, -.navbar-top a.navbar-cta > i.far, -.navbar-top .toggle-theme > i.fas { vertical-align: 0 !important; } -/* Navbar form row height consistency */ -.navbar-top .navbar-form.flex.ac { - min-height: 36px; +/* --- FA general --- */ +.navbar-top .fa, +.navbar-top .fas, +.navbar-top .far, +.navbar-top .fab { + line-height: 1; + transition: 0.2s; } -.navbar-top .list-inline { - display: flex; +.navbar-top .css-icon { + width: 1em; + height: 1em; + vertical-align: -0.15em; + display: inline-block; + position: relative; +} + +/* Fold / bars but in mid widths */ +.navbar-top .show-nav-but .but { + display: inline-flex !important; align-items: center; - margin: 0; - padding: 0; - list-style: none; + justify-content: center; + line-height: 1; + padding: 0.3em 0.6em !important; } -.navbar-top .list-inline > li { - display: flex; - align-items: center; - vertical-align: middle; +.navbar-top .show-nav-but .but > i { + margin: 0 !important; + line-height: 1 !important; }