fix(nav): align header bar height with zibll main.css

Drop forced 34px CTA chips and container min-height:50 that inflated
or shrank the bar vs zibll. Restore .navbar-but .but to 0.8em / 0.3em
1em / margin 0.4em; keep logo 36px, header pad 8px 20px, fixed reserve 88px.
This commit is contained in:
2026-07-25 11:27:31 +08:00
parent ab3d361d46
commit 8a6f6feafb
3 changed files with 81 additions and 113 deletions
+50 -82
View File
@@ -108,10 +108,11 @@
position: relative; position: relative;
} }
/* --- CTA (发布 / 会员): fixed chip size (matches header-menu-buttons 34px) --- /*
* Live markup is NOT inside .navbar-but-cluster — it's * CTA (发布 / 会员) — zibll main.css .navbar-top .navbar-but .but
* .navbar-form.navbar-but > a.but.navbar-cta / .navbar-vip > a.payvip-icon. * font-size 0.8em; padding 0.3em 1em; margin 0.4em; line-height 1.44
* Do not use height:auto or em vertical padding here (causes grow on press). * Live markup: .navbar-form.navbar-but > a.but.navbar-cta (no cluster wrapper).
* Lock the SAME metrics on :active so ripple/focus cannot stretch the chip.
*/ */
.navbar-top .navbar-but .but, .navbar-top .navbar-but .but,
.navbar-top .navbar-but a.but, .navbar-top .navbar-but a.but,
@@ -120,19 +121,19 @@
.navbar-top a.navbar-newposts.navbar-cta, .navbar-top a.navbar-newposts.navbar-cta,
.navbar-top a.payvip-icon.navbar-cta, .navbar-top a.payvip-icon.navbar-cta,
.navbar-top .navbar-vip a.navbar-cta { .navbar-top .navbar-vip a.navbar-cta {
font-size: 13px !important; font-size: 0.8em !important;
padding: 0 14px !important; padding: 0.3em 1em !important;
margin: 0 4px !important; margin: 0.4em !important;
display: inline-flex !important; display: inline-flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
line-height: 1 !important; line-height: 1.44 !important;
vertical-align: middle; vertical-align: middle;
box-sizing: border-box !important; box-sizing: border-box !important;
gap: 6px !important; gap: 0.25em;
height: 34px !important; height: auto !important;
min-height: 34px !important; min-height: 0 !important;
max-height: 34px !important; max-height: 50px !important; /* zibll .navbar-nav li max-height */
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
min-width: 0 !important; min-width: 0 !important;
@@ -149,7 +150,7 @@
.navbar-top a.newadd-btns.navbar-cta > i, .navbar-top a.newadd-btns.navbar-cta > i,
.navbar-top a.navbar-newposts.navbar-cta > i, .navbar-top a.navbar-newposts.navbar-cta > i,
.navbar-top a.payvip-icon.navbar-cta > i { .navbar-top a.payvip-icon.navbar-cta > i {
margin: 0 !important; margin: 0 0.25em 0 0 !important;
line-height: 1 !important; line-height: 1 !important;
position: static !important; position: static !important;
transform: none !important; transform: none !important;
@@ -157,16 +158,18 @@
flex-shrink: 0; flex-shrink: 0;
vertical-align: 0 !important; vertical-align: 0 !important;
display: inline-block; display: inline-block;
width: 1em; }
height: 1em; .navbar-top .navbar-but .but > i:last-child,
font-size: 1em; .navbar-top a.navbar-cta.but > i:only-child,
.navbar-top a.newadd-btns.navbar-cta > i:only-child {
margin-right: 0 !important;
} }
.navbar-top .navbar-but .but > .navbar-cta-text, .navbar-top .navbar-but .but > .navbar-cta-text,
.navbar-top a.navbar-cta.but > .navbar-cta-text, .navbar-top a.navbar-cta.but > .navbar-cta-text,
.navbar-top a.newadd-btns.navbar-cta > .navbar-cta-text, .navbar-top a.newadd-btns.navbar-cta > .navbar-cta-text,
.navbar-top a.navbar-newposts.navbar-cta > .navbar-cta-text, .navbar-top a.navbar-newposts.navbar-cta > .navbar-cta-text,
.navbar-top a.payvip-icon.navbar-cta > .navbar-cta-text { .navbar-top a.payvip-icon.navbar-cta > .navbar-cta-text {
line-height: 1 !important; line-height: 1.44 !important;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
@@ -364,45 +367,6 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
} }
/* Direct single-type publish / VIP CTA — lock chip box (no height:auto growth) */
.navbar-top a.newadd-btns.navbar-cta,
.navbar-top a.navbar-newposts.navbar-cta,
.navbar-top a.payvip-icon.navbar-cta,
.navbar-top .navbar-but .but.navbar-cta,
.navbar-top .navbar-vip a.navbar-cta {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
padding: 0 14px !important;
margin: 0 4px !important;
width: fit-content !important;
max-width: fit-content !important;
white-space: nowrap;
box-sizing: border-box !important;
transform: none !important;
}
.navbar-top a.newadd-btns.navbar-cta > i,
.navbar-top a.navbar-newposts.navbar-cta > i,
.navbar-top a.payvip-icon.navbar-cta > i {
margin: 0 !important;
line-height: 1 !important;
position: static !important;
transform: none !important;
flex-shrink: 0;
}
.navbar-top a.newadd-btns.navbar-cta > .navbar-cta-text,
.navbar-top a.navbar-newposts.navbar-cta > .navbar-cta-text,
.navbar-top a.payvip-icon.navbar-cta > .navbar-cta-text {
line-height: 1 !important;
display: inline-block;
vertical-align: middle;
margin: 0 !important;
}
/* Final FA baseline: never vertical-align in the top bar (flex/abs centering only). */ /* Final FA baseline: never vertical-align in the top bar (flex/abs centering only). */
.navbar-top .fa, .navbar-top .fa,
.navbar-top .fas, .navbar-top .fas,
@@ -413,25 +377,28 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
vertical-align: 0 !important; vertical-align: 0 !important;
} }
/* Keep every right-side control row on the same optical midline as the brand. */ /*
* Header row height — 1:1 zibll (demo.zibll.com / main.css)
* Natural stack: .header padding 8px 20px + brand pad 7px + logo 36px
* → content row ~50px, bar ~66px. Senior submenu top: 59px. Fixed reserve 88px.
* Do NOT force min-height:50 on the flex row (over-tall vs zibll).
*/
.navbar-top .container-header { .navbar-top .container-header {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
min-height: 50px; min-height: 0;
height: auto;
} }
.navbar-top .navbar-form, .navbar-top .navbar-form,
.navbar-top .navbar-right, .navbar-top .navbar-right,
.navbar-top .navbar-header { .navbar-top .navbar-header {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
min-height: 36px; min-height: 0;
height: auto;
} }
/* Kill fluid min-height / radius em-padding that made chips grow on press */ /* Hover/active: same box as rest (prevent press stretch; ripple is absolute) */
.navbar-top a.navbar-cta.but,
.navbar-top .navbar-but .but,
.navbar-top a.newadd-btns.navbar-cta,
.navbar-top a.payvip-icon.navbar-cta,
.navbar-top a.navbar-cta.but:hover, .navbar-top a.navbar-cta.but:hover,
.navbar-top a.navbar-cta.but:focus, .navbar-top a.navbar-cta.but:focus,
.navbar-top a.navbar-cta.but:focus-visible, .navbar-top a.navbar-cta.but:focus-visible,
@@ -448,27 +415,26 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
.navbar-top a.payvip-icon.navbar-cta:focus, .navbar-top a.payvip-icon.navbar-cta:focus,
.navbar-top a.payvip-icon.navbar-cta:focus-visible, .navbar-top a.payvip-icon.navbar-cta:focus-visible,
.navbar-top a.payvip-icon.navbar-cta:active { .navbar-top a.payvip-icon.navbar-cta:active {
height: 34px !important; font-size: 0.8em !important;
min-height: 34px !important; padding: 0.3em 1em !important;
max-height: 34px !important; margin: 0.4em !important;
padding: 0 14px !important; line-height: 1.44 !important;
margin: 0 4px !important; height: auto !important;
line-height: 1 !important; min-height: 0 !important;
font-size: 13px !important; max-height: 50px !important;
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transform: none !important; transform: none !important;
/* .but:active inset shadow only — no layout change */
box-shadow: none !important;
} }
/* radius modifier from buttons.css sets padding: 0.3em 1em — override */
/* .but.radius in buttons.css also uses 0.3em 1em — keep zibll metrics + pill radius */
.navbar-top a.but.radius.navbar-cta, .navbar-top a.but.radius.navbar-cta,
.navbar-top a.navbar-cta.radius, .navbar-top a.navbar-cta.radius,
.navbar-top a.newadd-btns.radius, .navbar-top a.newadd-btns.radius,
.navbar-top a.payvip-icon.radius { .navbar-top a.payvip-icon.radius {
padding: 0 14px !important; padding: 0.3em 1em !important;
border-radius: var(--navbar-cta-radius, 20px) !important; border-radius: var(--navbar-cta-radius, 50px) !important;
} }
/* ========================================================================== /* ==========================================================================
@@ -508,18 +474,20 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
.navbar-top .navbar-toggle:active { .navbar-top .navbar-toggle:active {
transform: none !important; transform: none !important;
} }
/* Keep CTA chip geometry stable on press (no height/padding jump) */ /* Keep CTA geometry stable on press — same zibll metrics, no stretch */
.navbar-top .navbar-but .but:hover, .navbar-top .navbar-but .but:hover,
.navbar-top .navbar-but .but:focus, .navbar-top .navbar-but .but:focus,
.navbar-top .navbar-but .but:active, .navbar-top .navbar-but .but:active,
.navbar-top a.navbar-cta.but:hover, .navbar-top a.navbar-cta.but:hover,
.navbar-top a.navbar-cta.but:focus, .navbar-top a.navbar-cta.but:focus,
.navbar-top a.navbar-cta.but:active { .navbar-top a.navbar-cta.but:active {
margin: 0 4px !important; margin: 0.4em !important;
padding: 0 14px !important; padding: 0.3em 1em !important;
height: 34px !important; height: auto !important;
min-height: 34px !important; min-height: 0 !important;
max-height: 34px !important; max-height: 50px !important;
font-size: 0.8em !important;
line-height: 1.44 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
transform: none !important; transform: none !important;
} }
+24 -24
View File
@@ -1,13 +1,13 @@
/** /**
* Header multi-function publish cluster + VIP CTA + hover VIP cards. * Header multi-function publish cluster + VIP CTA + hover VIP cards.
* *
* Live header often uses .navbar-form.navbar-but / .navbar-vip WITHOUT * CTA metrics 1:1 zibll main.css:
* .navbar-but-cluster. Mirror the 34px chip lock for those roots too. * .navbar-top .navbar-but .but { font-size:.8em; padding:.3em 1em; margin:.4em; }
* *
* @package AKSRT * @package AKSRT
*/ */
/* Shared CTA chip (cluster OR bare navbar-but / navbar-vip forms) */ /* Shared CTA (cluster OR bare navbar-but / navbar-vip forms) */
.navbar-but-cluster a.navbar-cta, .navbar-but-cluster a.navbar-cta,
.navbar-but-cluster a.btn-primary, .navbar-but-cluster a.btn-primary,
.navbar-but-cluster a.but.btn-primary, .navbar-but-cluster a.but.btn-primary,
@@ -25,17 +25,17 @@
display: inline-flex !important; display: inline-flex !important;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; gap: 0.25em;
padding: 0 14px !important; padding: 0.3em 1em !important;
height: 34px !important; height: auto !important;
min-height: 34px !important; min-height: 0 !important;
max-height: 34px !important; max-height: 50px !important;
border-radius: var(--navbar-cta-radius, 20px); border-radius: var(--navbar-cta-radius, 50px);
color: #fff !important; color: #fff !important;
text-decoration: none; text-decoration: none;
border: 0; border: 0;
font-size: 13px !important; font-size: 0.8em !important;
line-height: 1 !important; line-height: 1.44 !important;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box !important; box-sizing: border-box !important;
vertical-align: middle; vertical-align: middle;
@@ -43,7 +43,7 @@
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
min-width: 0 !important; min-width: 0 !important;
margin: 0 4px !important; margin: 0.4em !important;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
@@ -51,7 +51,7 @@
transform: none !important; transform: none !important;
} }
/* Paint for publish / VIP when not already gradient-colored by jb-* */ /* Paint for publish when not already gradient-colored by jb-* */
.navbar-but-cluster a.navbar-cta, .navbar-but-cluster a.navbar-cta,
.navbar-but-cluster a.btn-primary, .navbar-but-cluster a.btn-primary,
.navbar-but-cluster a.but.btn-primary, .navbar-but-cluster a.but.btn-primary,
@@ -123,7 +123,7 @@
max-width: fit-content !important; max-width: fit-content !important;
min-width: 0 !important; min-width: 0 !important;
flex: 0 0 auto !important; flex: 0 0 auto !important;
height: 34px; height: auto;
} }
.navbar-but-cluster .payvip-icon.but, .navbar-but-cluster .payvip-icon.but,
@@ -131,7 +131,7 @@
background: linear-gradient(90deg, #ff6b6b, #f04494); background: linear-gradient(90deg, #ff6b6b, #f04494);
color: #fff; color: #fff;
padding: 0 12px !important; padding: 0 12px !important;
height: 34px !important; height: auto !important;
border-radius: var(--navbar-cta-radius, 20px); border-radius: var(--navbar-cta-radius, 20px);
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13px;
@@ -155,7 +155,7 @@
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
min-width: 0 !important; min-width: 0 !important;
height: 34px !important; height: auto !important;
flex: 0 0 auto !important; flex: 0 0 auto !important;
position: relative; position: relative;
overflow: visible !important; overflow: visible !important;
@@ -170,8 +170,8 @@ div.newadd-btns.hover-show {
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
min-width: 0 !important; min-width: 0 !important;
height: 34px !important; height: auto !important;
max-height: 34px !important; max-height: 50px !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
border: 0 !important; border: 0 !important;
@@ -193,10 +193,10 @@ div.newadd-btns.hover-show {
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
gap: 6px !important; gap: 6px !important;
height: 34px !important; height: auto !important;
min-height: 34px !important; min-height: 0 !important;
max-height: 34px !important; max-height: 50px !important;
padding: 0 14px !important; padding: 0.3em 1em !important;
margin: 0 !important; margin: 0 !important;
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
@@ -218,8 +218,8 @@ div.newadd-btns.hover-show {
width: fit-content !important; width: fit-content !important;
max-width: fit-content !important; max-width: fit-content !important;
min-width: 0 !important; min-width: 0 !important;
padding: 0 14px !important; padding: 0.3em 1em !important;
height: 34px !important; height: auto !important;
transform: none !important; transform: none !important;
flex: 0 0 auto !important; flex: 0 0 auto !important;
} }
+7 -7
View File
@@ -293,17 +293,17 @@ badge.top,
} }
.navbar-top .navbar-but .but { .navbar-top .navbar-but .but {
font-size: 13px; font-size: 0.8em;
padding: 0 14px !important; padding: 0.3em 1em !important;
margin: 0 4px; margin: 0.4em;
display: inline-flex !important; display: inline-flex !important;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1; line-height: 1.44;
vertical-align: middle; vertical-align: middle;
height: 34px; height: auto;
min-height: 34px; min-height: 0;
max-height: 34px; max-height: 50px;
box-sizing: border-box; box-sizing: border-box;
width: fit-content; width: fit-content;
} }