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

fix(theme): stop sun/moon overlap and restore dark float contrast

Browse Source 
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:
kate522
2026-07-25 10:18:19 +08:00
parent b5f13c4a1f
commit 2898922a17
7 changed files with 103 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/nav.css
+29 -4
View File
@@ -235,17 +235,42 @@
line-height: 1 !important;
width: 1em !important;
height: 1em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
vertical-align: 0 !important;
}
/* Only one glyph visible */
.navbar-top .toggle-theme .theme-icon-sun[style*="display:none"],
.navbar-top .toggle-theme .theme-icon-moon[style*="display:none"] {
/*
* Theme glyph visibility is driven by html.dark / body.theme-dark.
* Light: moon (switch to dark). Dark: sun (switch to light).
* Never force both icons to display:inline-flex — that stacked them.
*/
.navbar-top .toggle-theme .theme-icon-moon,
.navbar-but-cluster .toggle-theme .theme-icon-moon,
.navbar-top .toggle-theme .theme-icon-sun,
.navbar-but-cluster .toggle-theme .theme-icon-sun {
display: none !important;
}
.navbar-top .toggle-theme .theme-icon-moon,
.navbar-but-cluster .toggle-theme .theme-icon-moon {
display: inline-flex !important;
}
html.dark .navbar-top .toggle-theme .theme-icon-moon,
html.dark .navbar-but-cluster .toggle-theme .theme-icon-moon,
body.theme-dark .navbar-top .toggle-theme .theme-icon-moon,
body.theme-dark .navbar-but-cluster .toggle-theme .theme-icon-moon,
body.dark-theme .navbar-top .toggle-theme .theme-icon-moon,
body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-moon {
display: none !important;
}
html.dark .navbar-top .toggle-theme .theme-icon-sun,
html.dark .navbar-but-cluster .toggle-theme .theme-icon-sun,
body.theme-dark .navbar-top .toggle-theme .theme-icon-sun,
body.theme-dark .navbar-but-cluster .toggle-theme .theme-icon-sun,
body.dark-theme .navbar-top .toggle-theme .theme-icon-sun,
body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun {
display: inline-flex !important;
}
/* --- Dropdown circular badges (header-user-href) keep 36px --- */
.navbar-top .header-user-href .toggle-radius,