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:
@@ -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
|
||||
================================================================ */
|
||||
|
||||
Reference in New Issue
Block a user