Fix selectbox dropdown colors — dark bg + light text for popover menu options
Browse files- src/styles/dark_theme.py +46 -0
src/styles/dark_theme.py
CHANGED
|
@@ -130,6 +130,33 @@ DARK_THEME_CSS = """
|
|
| 130 |
color: var(--text-primary) !important;
|
| 131 |
border-color: var(--border) !important;
|
| 132 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 133 |
|
| 134 |
/* ── Button ── */
|
| 135 |
.stButton > button,
|
|
@@ -328,6 +355,25 @@ DARK_THEME_CSS = """
|
|
| 328 |
padding: 0 8px !important;
|
| 329 |
font-size: 18px !important;
|
| 330 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 331 |
form[data-testid="stForm"] .stSelectbox label {
|
| 332 |
font-size: 13px !important;
|
| 333 |
margin-bottom: 4px !important;
|
|
|
|
| 130 |
color: var(--text-primary) !important;
|
| 131 |
border-color: var(--border) !important;
|
| 132 |
}
|
| 133 |
+
/* Selectbox trigger and dropdown — dark theme */
|
| 134 |
+
.stSelectbox div[data-baseweb="select"] > div {
|
| 135 |
+
background-color: var(--bg-primary) !important;
|
| 136 |
+
color: var(--text-primary) !important;
|
| 137 |
+
border-color: var(--border) !important;
|
| 138 |
+
}
|
| 139 |
+
.stSelectbox div[data-baseweb="select"] > div:hover {
|
| 140 |
+
border-color: var(--accent) !important;
|
| 141 |
+
}
|
| 142 |
+
[data-baseweb="popover"] {
|
| 143 |
+
background-color: var(--bg-card) !important;
|
| 144 |
+
border: 1px solid var(--border) !important;
|
| 145 |
+
border-radius: 8px !important;
|
| 146 |
+
}
|
| 147 |
+
[data-baseweb="popover"] li[role="option"] {
|
| 148 |
+
background-color: var(--bg-card) !important;
|
| 149 |
+
color: var(--text-primary) !important;
|
| 150 |
+
font-size: 16px !important;
|
| 151 |
+
}
|
| 152 |
+
[data-baseweb="popover"] li[role="option"]:hover {
|
| 153 |
+
background-color: var(--bg-card-open) !important;
|
| 154 |
+
color: var(--text-primary) !important;
|
| 155 |
+
}
|
| 156 |
+
[data-baseweb="popover"] li[role="option"][aria-selected="true"] {
|
| 157 |
+
background-color: var(--accent) !important;
|
| 158 |
+
color: #ffffff !important;
|
| 159 |
+
}
|
| 160 |
|
| 161 |
/* ── Button ── */
|
| 162 |
.stButton > button,
|
|
|
|
| 355 |
padding: 0 8px !important;
|
| 356 |
font-size: 18px !important;
|
| 357 |
}
|
| 358 |
+
/* Dropdown popover menu — dark bg + light text */
|
| 359 |
+
form[data-testid="stForm"] [data-baseweb="popover"] {
|
| 360 |
+
background-color: var(--bg-card) !important;
|
| 361 |
+
border: 1px solid var(--border) !important;
|
| 362 |
+
border-radius: 8px !important;
|
| 363 |
+
}
|
| 364 |
+
form[data-testid="stForm"] [data-baseweb="popover"] li[role="option"] {
|
| 365 |
+
background-color: var(--bg-card) !important;
|
| 366 |
+
color: var(--text-primary) !important;
|
| 367 |
+
font-size: 16px !important;
|
| 368 |
+
}
|
| 369 |
+
form[data-testid="stForm"] [data-baseweb="popover"] li[role="option"]:hover {
|
| 370 |
+
background-color: var(--bg-card-open) !important;
|
| 371 |
+
color: var(--text-primary) !important;
|
| 372 |
+
}
|
| 373 |
+
form[data-testid="stForm"] [data-baseweb="popover"] li[role="option"][aria-selected="true"] {
|
| 374 |
+
background-color: var(--accent) !important;
|
| 375 |
+
color: #ffffff !important;
|
| 376 |
+
}
|
| 377 |
form[data-testid="stForm"] .stSelectbox label {
|
| 378 |
font-size: 13px !important;
|
| 379 |
margin-bottom: 4px !important;
|