From 8a6f6feafb472e9a4a102fc633b2412aa6b5df91 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Sat, 25 Jul 2026 11:27:31 +0800
Subject: [PATCH] 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.
---
 assets/css/frontend/nav.css                   | 132 +++++++-----------
 .../css/frontend/nav/header-menu-buttons.css  |  48 +++----
 assets/css/frontend/nav/zib-navbar-core.css   |  14 +-
 3 files changed, 81 insertions(+), 113 deletions(-)

diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css
index d5014a1b..d5246c87 100644
--- a/assets/css/frontend/nav.css
+++ b/assets/css/frontend/nav.css
@@ -108,10 +108,11 @@
   position: relative;
 }
 
-/* --- CTA (发布 / 会员): fixed chip size (matches header-menu-buttons 34px) ---
- * Live markup is NOT inside .navbar-but-cluster — it's
- * .navbar-form.navbar-but > a.but.navbar-cta / .navbar-vip > a.payvip-icon.
- * Do not use height:auto or em vertical padding here (causes grow on press).
+/*
+ * CTA (发布 / 会员) — zibll main.css .navbar-top .navbar-but .but
+ * font-size 0.8em; padding 0.3em 1em; margin 0.4em; line-height 1.44
+ * 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 a.but,
@@ -120,19 +121,19 @@
 .navbar-top a.navbar-newposts.navbar-cta,
 .navbar-top a.payvip-icon.navbar-cta,
 .navbar-top .navbar-vip a.navbar-cta {
-  font-size: 13px !important;
-  padding: 0 14px !important;
-  margin: 0 4px !important;
+  font-size: 0.8em !important;
+  padding: 0.3em 1em !important;
+  margin: 0.4em !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  line-height: 1 !important;
+  line-height: 1.44 !important;
   vertical-align: middle;
   box-sizing: border-box !important;
-  gap: 6px !important;
-  height: 34px !important;
-  min-height: 34px !important;
-  max-height: 34px !important;
+  gap: 0.25em;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: 50px !important; /* zibll .navbar-nav li max-height */
   width: fit-content !important;
   max-width: fit-content !important;
   min-width: 0 !important;
@@ -149,7 +150,7 @@
 .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;
+  margin: 0 0.25em 0 0 !important;
   line-height: 1 !important;
   position: static !important;
   transform: none !important;
@@ -157,16 +158,18 @@
   flex-shrink: 0;
   vertical-align: 0 !important;
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  font-size: 1em;
+}
+.navbar-top .navbar-but .but > i:last-child,
+.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 a.navbar-cta.but > .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.payvip-icon.navbar-cta > .navbar-cta-text {
-  line-height: 1 !important;
+  line-height: 1.44 !important;
   display: inline-block;
   vertical-align: middle;
   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). */
 .navbar-top .fa,
 .navbar-top .fas,
@@ -413,25 +377,28 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
   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 {
   display: flex !important;
   align-items: center !important;
-  min-height: 50px;
+  min-height: 0;
+  height: auto;
 }
 .navbar-top .navbar-form,
 .navbar-top .navbar-right,
 .navbar-top .navbar-header {
   display: flex !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 */
-.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,
+/* Hover/active: same box as rest (prevent press stretch; ripple is absolute) */
 .navbar-top a.navbar-cta.but:hover,
 .navbar-top a.navbar-cta.but:focus,
 .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-visible,
 .navbar-top a.payvip-icon.navbar-cta:active {
-  height: 34px !important;
-  min-height: 34px !important;
-  max-height: 34px !important;
-  padding: 0 14px !important;
-  margin: 0 4px !important;
-  line-height: 1 !important;
-  font-size: 13px !important;
+  font-size: 0.8em !important;
+  padding: 0.3em 1em !important;
+  margin: 0.4em !important;
+  line-height: 1.44 !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: 50px !important;
   width: fit-content !important;
   max-width: fit-content !important;
   box-sizing: border-box !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.navbar-cta.radius,
 .navbar-top a.newadd-btns.radius,
 .navbar-top a.payvip-icon.radius {
-  padding: 0 14px !important;
-  border-radius: var(--navbar-cta-radius, 20px) !important;
+  padding: 0.3em 1em !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 {
   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:focus,
 .navbar-top .navbar-but .but:active,
 .navbar-top a.navbar-cta.but:hover,
 .navbar-top a.navbar-cta.but:focus,
 .navbar-top a.navbar-cta.but:active {
-  margin: 0 4px !important;
-  padding: 0 14px !important;
-  height: 34px !important;
-  min-height: 34px !important;
-  max-height: 34px !important;
+  margin: 0.4em !important;
+  padding: 0.3em 1em !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: 50px !important;
+  font-size: 0.8em !important;
+  line-height: 1.44 !important;
   box-sizing: border-box !important;
   transform: none !important;
 }
diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css
index 44e13344..bc384a1f 100644
--- a/assets/css/frontend/nav/header-menu-buttons.css
+++ b/assets/css/frontend/nav/header-menu-buttons.css
@@ -1,13 +1,13 @@
 /**
  * Header multi-function publish cluster + VIP CTA + hover VIP cards.
  *
- * Live header often uses .navbar-form.navbar-but / .navbar-vip WITHOUT
- * .navbar-but-cluster. Mirror the 34px chip lock for those roots too.
+ * CTA metrics 1:1 zibll main.css:
+ *   .navbar-top .navbar-but .but { font-size:.8em; padding:.3em 1em; margin:.4em; }
  *
  * @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.btn-primary,
 .navbar-but-cluster a.but.btn-primary,
@@ -25,17 +25,17 @@
   display: inline-flex !important;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: 0 14px !important;
-  height: 34px !important;
-  min-height: 34px !important;
-  max-height: 34px !important;
-  border-radius: var(--navbar-cta-radius, 20px);
+  gap: 0.25em;
+  padding: 0.3em 1em !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: 50px !important;
+  border-radius: var(--navbar-cta-radius, 50px);
   color: #fff !important;
   text-decoration: none;
   border: 0;
-  font-size: 13px !important;
-  line-height: 1 !important;
+  font-size: 0.8em !important;
+  line-height: 1.44 !important;
   white-space: nowrap;
   box-sizing: border-box !important;
   vertical-align: middle;
@@ -43,7 +43,7 @@
   width: fit-content !important;
   max-width: fit-content !important;
   min-width: 0 !important;
-  margin: 0 4px !important;
+  margin: 0.4em !important;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
@@ -51,7 +51,7 @@
   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.btn-primary,
 .navbar-but-cluster a.but.btn-primary,
@@ -123,7 +123,7 @@
   max-width: fit-content !important;
   min-width: 0 !important;
   flex: 0 0 auto !important;
-  height: 34px;
+  height: auto;
 }
 
 .navbar-but-cluster .payvip-icon.but,
@@ -131,7 +131,7 @@
   background: linear-gradient(90deg, #ff6b6b, #f04494);
   color: #fff;
   padding: 0 12px !important;
-  height: 34px !important;
+  height: auto !important;
   border-radius: var(--navbar-cta-radius, 20px);
   text-decoration: none;
   font-size: 13px;
@@ -155,7 +155,7 @@
   width: fit-content !important;
   max-width: fit-content !important;
   min-width: 0 !important;
-  height: 34px !important;
+  height: auto !important;
   flex: 0 0 auto !important;
   position: relative;
   overflow: visible !important;
@@ -170,8 +170,8 @@ div.newadd-btns.hover-show {
   width: fit-content !important;
   max-width: fit-content !important;
   min-width: 0 !important;
-  height: 34px !important;
-  max-height: 34px !important;
+  height: auto !important;
+  max-height: 50px !important;
   padding: 0 !important;
   margin: 0 !important;
   border: 0 !important;
@@ -193,10 +193,10 @@ div.newadd-btns.hover-show {
   align-items: center !important;
   justify-content: center !important;
   gap: 6px !important;
-  height: 34px !important;
-  min-height: 34px !important;
-  max-height: 34px !important;
-  padding: 0 14px !important;
+  height: auto !important;
+  min-height: 0 !important;
+  max-height: 50px !important;
+  padding: 0.3em 1em !important;
   margin: 0 !important;
   width: fit-content !important;
   max-width: fit-content !important;
@@ -218,8 +218,8 @@ div.newadd-btns.hover-show {
   width: fit-content !important;
   max-width: fit-content !important;
   min-width: 0 !important;
-  padding: 0 14px !important;
-  height: 34px !important;
+  padding: 0.3em 1em !important;
+  height: auto !important;
   transform: none !important;
   flex: 0 0 auto !important;
 }
diff --git a/assets/css/frontend/nav/zib-navbar-core.css b/assets/css/frontend/nav/zib-navbar-core.css
index 92a87846..30dbe3f4 100644
--- a/assets/css/frontend/nav/zib-navbar-core.css
+++ b/assets/css/frontend/nav/zib-navbar-core.css
@@ -293,17 +293,17 @@ badge.top,
 }
 
 .navbar-top .navbar-but .but {
-    font-size: 13px;
-    padding: 0 14px !important;
-    margin: 0 4px;
+    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;
+    line-height: 1.44;
     vertical-align: middle;
-    height: 34px;
-    min-height: 34px;
-    max-height: 34px;
+    height: auto;
+    min-height: 0;
+    max-height: 50px;
     box-sizing: border-box;
     width: fit-content;
 }