kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix(nav): hard-lock CTA chips at 34px for bare navbar-but markup' (#277) from worktree-fix-theme-toggle-overlap into main

Browse Source 
Reviewed-on: CYL/wordpress-theme-aksrt#277
This commit is contained in:
kate522
2026-07-25 10:50:42 +08:00
parent 3169d4c4db 77150afe38
commit 6143e7103a
3 changed files with 168 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/nav.css
+102 -25
View File
@@ -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 (<a class="newadd-btns ... navbar-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;
}
/* ==========================================================================
assets/css/frontend/nav/header-menu-buttons.css
+57 -38
View File
@@ -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,
assets/css/frontend/nav/zib-navbar-core.css
+9 -4
View File
@@ -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 {