hanzoai/team
2
0
Fork 0
mirror of https://github.com/hanzoai/team.git synced 2026-09-30 01:57:35 +00:00
Code Issues Releases Activity

Fix low-contrast mobile nav sidebar text in light mode (#37695)

Browse Source 
The mobile navbar slide-out (.navbar-sidebar) always has a dark denim
background regardless of theme, but its menu links inherited the
light-mode --ifm-menu-color* values tuned for the light desktop
sidebar, rendering dark navy text on a dark navy panel. Scope the
dark-on-dark ("readable on dark") menu color values to .navbar-sidebar
unconditionally, and fix the "Back to main menu" button's text color
which was relying on the same now-changed background.

Co-authored-by: Hanzo Dev <[email protected]>
This commit is contained in:
Eva Sarafianou
2026-07-28 11:57:25 +03:00
committed by GitHub
co-authored by Hanzo Dev
parent 3cda68c5c7
commit 651e68ee68
1 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/site/src/css/custom.css
+22
View File
@@ -99,6 +99,21 @@
--ifm-color-content-secondary: var(--mm-text-secondary);
}
/* The mobile nav slide-out (.navbar-sidebar) always has a dark denim
* background, but its menu inherits the light-mode --ifm-menu-color*
* vars tuned for the light desktop sidebar — force the dark-mode values
* unconditionally so mobile text stays readable in light mode too. */
.navbar-sidebar {
--ifm-menu-color: rgba(255,255,255,0.78);
--ifm-menu-color-active: var(--mm-color-white);
--ifm-menu-color-background-active: var(--mm-denim-700);
--ifm-menu-color-background-hover: var(--mm-denim-700);
}
/* "Back to main menu" text color isn't covered by the vars above. */
.navbar-sidebar__back {
color: var(--ifm-menu-color-active);
}
/* === Type rhythm === */
html {
@@ -339,6 +354,13 @@ h2, h3, h4 {
padding-bottom: 0.4rem;
}
/* Category headers hardcode --mm-text-secondary above, so they don't
* pick up the .navbar-sidebar menu-color override — fix separately. */
.navbar-sidebar .menu .menu__list-item-collapsible > .menu__link,
.navbar-sidebar .menu > .menu__list > .menu__list-item > .menu__link {
color: var(--ifm-menu-color);
}
/* Endpoint leaves keep their natural case (e.g. "Login to Mattermost server"). */
.menu .menu__link.api-method {
font-family: var(--mm-font-sans);