fix(nav): align navbar text and icon baselines with zibll

Center FA icons in toggle-radius/btn chips, restore menu-item title flex baseline, and match CTA/logo vertical alignment so top bar text and icons no longer drift.
This commit is contained in:
kate522 committed 2026-07-24 12:08:09 +08:00
1 parent 9aa0bd0755
commit f492174297
4 files changed
+197 -16

No files matched your search

+32 -13
View File
@@ -611,35 +611,47 @@ body.theme-dark body > .drop-newadd .newadd-btns__item {
color: #fff;
}
/* Theme toggle */
/* Theme toggle — zibll toggle-radius (29px) + absolute FA center, not flex+translate(-50%) */
.navbar-but-cluster .theme-toggle-desktop,
.navbar-but-cluster .toggle-theme {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
.navbar-but-cluster .toggle-theme,
.navbar-top .toggle-theme.toggle-radius {
display: inline-block;
align-items: unset;
justify-content: unset;
width: 29px;
height: 29px;
padding: 0;
border-radius: 999px;
border-radius: 100%;
flex: 0 0 auto;
position: relative;
overflow: hidden;
vertical-align: middle;
box-sizing: border-box;
}
.navbar-but-cluster .theme-toggle-desktop > i,
.navbar-but-cluster .toggle-theme > i {
.navbar-but-cluster .toggle-theme > i,
.navbar-top .toggle-theme.toggle-radius > i {
margin: 0 !important;
line-height: 1;
line-height: 1 !important;
position: absolute;
left: 50%;
left: 0 !important;
right: 0 !important;
top: 50%;
transform: translate(-50%, -50%);
transform: translateY(-50%);
width: 1em;
height: 1em;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.theme-toggle-desktop,
.theme-toggle-mobile,
.toggle-theme {
position: relative;
overflow: hidden;
}
.theme-toggle-desktop .theme-icon-moon,
@@ -649,11 +661,18 @@ body.theme-dark body > .drop-newadd .newadd-btns__item {
.toggle-theme .theme-icon-moon,
.toggle-theme .theme-icon-sun {
margin: 0 !important;
line-height: 1;
line-height: 1 !important;
width: 1em;
height: 1em;
text-align: center;
}
/* Hide inactive sun/moon without leaving layout shift */
.toggle-theme .theme-icon-sun[style*="display:none"],
.toggle-theme .theme-icon-moon[style*="display:none"] {
display: none !important;
}
/* float commerce */
.float-btn-shop-cart {
position: relative;