fix(theme): stop sun/moon overlap and restore dark float contrast
Drive toggle glyphs with html.dark/body theme classes only, drop inline display styles that lost to !important CSS, and give the float rail a solid surface + brighter ink in dark mode.
This commit is contained in:
1 parent
b5f13c4a1f
commit
2898922a17
7 files changed
+103
-30
No files matched your search
@@ -643,7 +643,6 @@ body.theme-dark body > .drop-newadd .newadd-btns__item {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -668,11 +667,39 @@ body.theme-dark body > .drop-newadd .newadd-btns__item {
|
||||
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"] {
|
||||
/* Light: moon only. Dark: sun only. (class-driven, not inline style) */
|
||||
.theme-toggle-desktop .theme-icon-sun,
|
||||
.theme-toggle-mobile .theme-icon-sun,
|
||||
.toggle-theme .theme-icon-sun {
|
||||
display: none !important;
|
||||
}
|
||||
.theme-toggle-desktop .theme-icon-moon,
|
||||
.theme-toggle-mobile .theme-icon-moon,
|
||||
.toggle-theme .theme-icon-moon {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
html.dark .theme-toggle-desktop .theme-icon-moon,
|
||||
html.dark .theme-toggle-mobile .theme-icon-moon,
|
||||
html.dark .toggle-theme .theme-icon-moon,
|
||||
body.theme-dark .theme-toggle-desktop .theme-icon-moon,
|
||||
body.theme-dark .theme-toggle-mobile .theme-icon-moon,
|
||||
body.theme-dark .toggle-theme .theme-icon-moon,
|
||||
body.dark-theme .theme-toggle-desktop .theme-icon-moon,
|
||||
body.dark-theme .theme-toggle-mobile .theme-icon-moon,
|
||||
body.dark-theme .toggle-theme .theme-icon-moon {
|
||||
display: none !important;
|
||||
}
|
||||
html.dark .theme-toggle-desktop .theme-icon-sun,
|
||||
html.dark .theme-toggle-mobile .theme-icon-sun,
|
||||
html.dark .toggle-theme .theme-icon-sun,
|
||||
body.theme-dark .theme-toggle-desktop .theme-icon-sun,
|
||||
body.theme-dark .theme-toggle-mobile .theme-icon-sun,
|
||||
body.theme-dark .toggle-theme .theme-icon-sun,
|
||||
body.dark-theme .theme-toggle-desktop .theme-icon-sun,
|
||||
body.dark-theme .theme-toggle-mobile .theme-icon-sun,
|
||||
body.dark-theme .toggle-theme .theme-icon-sun {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* float commerce */
|
||||
.float-btn-shop-cart {
|
||||
|
||||
@@ -298,6 +298,7 @@ body.mobile-navbar-show { overflow: hidden; }
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.navbar-top .navbar-form .toggle-theme.toggle-radius > i,
|
||||
.navbar-top a.toggle-theme.toggle-radius > i {
|
||||
@@ -308,6 +309,7 @@ body.mobile-navbar-show { overflow: hidden; }
|
||||
margin: auto;
|
||||
transform: translateY(-50%);
|
||||
line-height: 1;
|
||||
/* visibility handled by theme-class rules in nav.css / header-menu-buttons.css */
|
||||
}
|
||||
/* Menu item title + icon baseline (when menu is assigned) */
|
||||
.navbar-top .nav > li > a {
|
||||
|
||||
Reference in new issue
Block a user