From 77150afe38fdd095862b63552cca5c7b5417a6ee Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 25 Jul 2026 10:38:23 +0800 Subject: [PATCH] fix(nav): hard-lock CTA chips at 34px for bare navbar-but markup Live header uses .navbar-form.navbar-but without .navbar-but-cluster; remove em padding/height:auto/min-height calc that grew chips on press and override .but.radius padding so publish/VIP stay fixed size. --- assets/css/frontend/nav.css | 127 ++++++++++++++---- .../css/frontend/nav/header-menu-buttons.css | 95 +++++++------ assets/css/frontend/nav/zib-navbar-core.css | 13 +- 3 files changed, 168 insertions(+), 67 deletions(-) diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css index d213cde8..b73ad2df 100644 --- a/assets/css/frontend/nav.css +++ b/assets/css/frontend/nav.css @@ -108,27 +108,48 @@ position: relative; } -/* --- CTA (发布 / 会员): icon + label --- */ +/* --- 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). + */ .navbar-top .navbar-but .but, -.navbar-top a.navbar-cta.but { - font-size: 0.8em; - padding: 0.3em 1em !important; - margin: 0.4em; +.navbar-top .navbar-but a.but, +.navbar-top a.navbar-cta.but, +.navbar-top a.newadd-btns.navbar-cta, +.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; display: inline-flex !important; align-items: center !important; justify-content: center !important; - line-height: 1.44 !important; + line-height: 1 !important; vertical-align: middle; - box-sizing: border-box; - gap: 0; + box-sizing: border-box !important; + gap: 6px !important; + height: 34px !important; + min-height: 34px !important; + max-height: 34px !important; + width: fit-content !important; + max-width: fit-content !important; + min-width: 0 !important; + flex: 0 0 auto !important; + white-space: nowrap !important; + transform: none !important; } .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; +.navbar-top a.navbar-cta.but > .fas, +.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; @@ -136,13 +157,20 @@ flex-shrink: 0; vertical-align: 0 !important; display: inline-block; + width: 1em; + height: 1em; + font-size: 1em; } .navbar-top .navbar-but .but > .navbar-cta-text, -.navbar-top a.navbar-cta.but > .navbar-cta-text { - line-height: 1.44; +.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; display: inline-block; vertical-align: middle; white-space: nowrap; + margin: 0 !important; } /* --- Icon-only .btn chips (user / search) --- */ @@ -336,23 +364,31 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { } -/* Direct single-type publish CTA () — never line-height:0 */ +/* 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 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.44 !important; - height: auto !important; - min-height: 0 !important; - max-height: none !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 0.25em 0 0 !important; + margin: 0 !important; line-height: 1 !important; position: static !important; transform: none !important; @@ -361,9 +397,10 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { .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.44 !important; + 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). */ @@ -390,13 +427,48 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { min-height: 36px; } -/* Single-type CTA optical center with 0.3em padding (zibll) */ +/* 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 { - min-height: calc(1.44em + 0.6em) !important; /* line-height + vertical padding */ +.navbar-top a.payvip-icon.navbar-cta, +.navbar-top a.navbar-cta.but:hover, +.navbar-top a.navbar-cta.but:focus, +.navbar-top a.navbar-cta.but:focus-visible, +.navbar-top a.navbar-cta.but:active, +.navbar-top .navbar-but .but:hover, +.navbar-top .navbar-but .but:focus, +.navbar-top .navbar-but .but:focus-visible, +.navbar-top .navbar-but .but:active, +.navbar-top a.newadd-btns.navbar-cta:hover, +.navbar-top a.newadd-btns.navbar-cta:focus, +.navbar-top a.newadd-btns.navbar-cta:focus-visible, +.navbar-top a.newadd-btns.navbar-cta:active, +.navbar-top a.payvip-icon.navbar-cta:hover, +.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; + 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 */ +.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; } /* ========================================================================== @@ -443,8 +515,13 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { .navbar-top a.navbar-cta.but:hover, .navbar-top a.navbar-cta.but:focus, .navbar-top a.navbar-cta.but:active { - margin: 0.4em; - box-sizing: border-box; + margin: 0 4px !important; + padding: 0 14px !important; + height: 34px !important; + min-height: 34px !important; + max-height: 34px !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 75b0babf..44e13344 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -1,9 +1,66 @@ /** * 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. + * * @package AKSRT */ +/* Shared CTA chip (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, +.navbar-but-cluster a.navbar-newposts.but, +.navbar-but-cluster button.navbar-cta, +.navbar-but-cluster button.newadd-btns__toggle, +.navbar-but-cluster a.but:not(.newadd-btns__item), +.navbar-top .navbar-form.navbar-but a.but, +.navbar-top .navbar-form.navbar-but a.navbar-cta, +.navbar-top .navbar-form.navbar-vip a.navbar-cta, +.navbar-top .navbar-form.navbar-vip a.payvip-icon, +.navbar-top a.newadd-btns.navbar-cta, +.navbar-top a.navbar-newposts.but.navbar-cta, +.navbar-top a.payvip-icon.navbar-cta { + 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); + color: #fff !important; + text-decoration: none; + border: 0; + font-size: 13px !important; + line-height: 1 !important; + white-space: nowrap; + box-sizing: border-box !important; + vertical-align: middle; + flex: 0 0 auto !important; + width: fit-content !important; + max-width: fit-content !important; + min-width: 0 !important; + margin: 0 4px !important; + appearance: none; + -webkit-appearance: none; + cursor: pointer; + font-family: inherit; + transform: none !important; +} + +/* Paint for publish / VIP 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, +.navbar-but-cluster a.navbar-newposts.but, +.navbar-but-cluster button.navbar-cta, +.navbar-but-cluster button.newadd-btns__toggle { + background: var(--color-primary, #2f6df6); +} + .navbar-but-cluster { display: flex; align-items: center; @@ -25,44 +82,6 @@ max-width: none; } -/* CTA paint only on real controls — never on hover wrappers / menu items */ -.navbar-but-cluster a.navbar-cta, -.navbar-but-cluster a.btn-primary, -.navbar-but-cluster a.but.btn-primary, -.navbar-but-cluster a.navbar-newposts.but, -.navbar-but-cluster button.navbar-cta, -.navbar-but-cluster button.newadd-btns__toggle, -.navbar-but-cluster a.but:not(.newadd-btns__item) { - 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); - background: var(--color-primary, #2f6df6); - color: #fff !important; - text-decoration: none; - border: 0; - font-size: 13px; - line-height: 1; - white-space: nowrap; - box-sizing: border-box; - vertical-align: middle; - flex: 0 0 auto !important; - /* fit-content: chip hugs label; never stretch to parent/menu */ - width: fit-content !important; - max-width: fit-content !important; - min-width: 0 !important; - margin: 0 !important; - appearance: none; - -webkit-appearance: none; - cursor: pointer; - font-family: inherit; -} - .navbar-but-cluster a.navbar-cta > i, .navbar-but-cluster a.but > i, .navbar-but-cluster a.btn-primary > i, diff --git a/assets/css/frontend/nav/zib-navbar-core.css b/assets/css/frontend/nav/zib-navbar-core.css index 5021895c..92a87846 100644 --- a/assets/css/frontend/nav/zib-navbar-core.css +++ b/assets/css/frontend/nav/zib-navbar-core.css @@ -293,14 +293,19 @@ badge.top, } .navbar-top .navbar-but .but { - font-size: 0.8em; - padding: 0.3em 1em !important; - margin: 0.4em; + font-size: 13px; + padding: 0 14px !important; + margin: 0 4px; display: inline-flex !important; align-items: center; justify-content: center; - line-height: 1.44; + line-height: 1; vertical-align: middle; + height: 34px; + min-height: 34px; + max-height: 34px; + box-sizing: border-box; + width: fit-content; } .navbar-top .navbar-but .but.hover-show {