fix: readable text in navbar user dropdown

The cascading "#navbar *" rule was forcing the cream nav-bar text color
onto dropdown popovers, which sit on a parchment background and were
nearly invisible. Override the popover surface to use dark text while
keeping the dark-on-hover highlight.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-09 03:13:43 -04:00
parent 9027449336
commit 77cf7c9a76
+33
View File
@@ -442,6 +442,39 @@ samp,
color: #ffffff !important;
}
/* Dropdown popovers inside the navbar use a parchment background, so the
cascading "#navbar *" cream text above leaves them unreadable. Restore
dark text on the popover and keep the dark-on-hover highlight. */
#navbar .ui.dropdown .menu,
.navbar .ui.dropdown .menu {
background-color: var(--color-menu) !important;
border-color: var(--color-secondary) !important;
}
#navbar .ui.dropdown .menu .item,
.navbar .ui.dropdown .menu .item,
#navbar .ui.dropdown .menu .header,
.navbar .ui.dropdown .menu .header,
#navbar .ui.dropdown .menu .text,
.navbar .ui.dropdown .menu .text {
color: var(--color-text) !important;
}
#navbar .ui.dropdown .menu .item:hover,
.navbar .ui.dropdown .menu .item:hover,
#navbar .ui.dropdown .menu .item.active,
.navbar .ui.dropdown .menu .item.active,
#navbar .ui.dropdown .menu .item.selected,
.navbar .ui.dropdown .menu .item.selected {
background-color: var(--color-nav-bg) !important;
color: var(--color-nav-text) !important;
}
#navbar .ui.dropdown .menu .divider,
.navbar .ui.dropdown .menu .divider {
border-top-color: var(--color-secondary) !important;
}
/* ================================================================
Footer — same dark bar as nav
================================================================ */