Enhanced CSS - comprehensive high contrast for all elements
Browse files
app.py
CHANGED
|
@@ -322,6 +322,61 @@ th, td {
|
|
| 322 |
.footer strong {
|
| 323 |
color: #FFFFFF !important;
|
| 324 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 325 |
"""
|
| 326 |
|
| 327 |
# ============================================================================
|
|
|
|
| 322 |
.footer strong {
|
| 323 |
color: #FFFFFF !important;
|
| 324 |
}
|
| 325 |
+
|
| 326 |
+
/* Dropdowns - CRITICAL for visibility */
|
| 327 |
+
.gr-dropdown, [data-testid="dropdown"], .dropdown-container, .options {
|
| 328 |
+
background: var(--bg-input) !important;
|
| 329 |
+
border: 1px solid var(--border) !important;
|
| 330 |
+
}
|
| 331 |
+
.gr-dropdown span, .gr-dropdown label, [data-testid="dropdown"] span {
|
| 332 |
+
color: #FFFFFF !important;
|
| 333 |
+
}
|
| 334 |
+
.gr-dropdown ul, .gr-dropdown li, .dropdown-item {
|
| 335 |
+
background: var(--bg-input) !important;
|
| 336 |
+
color: #FFFFFF !important;
|
| 337 |
+
}
|
| 338 |
+
.gr-dropdown li:hover { background: var(--bg-panel) !important; }
|
| 339 |
+
|
| 340 |
+
/* Radio & Checkboxes */
|
| 341 |
+
.gr-radio label, .gr-radio span, .gr-checkbox-group label {
|
| 342 |
+
color: #FFFFFF !important;
|
| 343 |
+
}
|
| 344 |
+
|
| 345 |
+
/* Number inputs */
|
| 346 |
+
.gr-number input, .gr-number span { color: #FFFFFF !important; }
|
| 347 |
+
|
| 348 |
+
/* Table/Dataframe */
|
| 349 |
+
table, th, td { color: #FFFFFF !important; background: var(--bg-panel) !important; }
|
| 350 |
+
th { background: var(--bg-input) !important; }
|
| 351 |
+
|
| 352 |
+
/* Info text & descriptions */
|
| 353 |
+
.gr-info, .info-text, .description, [class*="description"], [class*="info"] {
|
| 354 |
+
color: #B0B0B0 !important;
|
| 355 |
+
}
|
| 356 |
+
|
| 357 |
+
/* SVG icons */
|
| 358 |
+
svg { fill: #FFFFFF !important; color: #FFFFFF !important; }
|
| 359 |
+
|
| 360 |
+
/* Audio player */
|
| 361 |
+
.gr-audio, .audio-player { background: var(--bg-panel) !important; }
|
| 362 |
+
.gr-audio span { color: #FFFFFF !important; }
|
| 363 |
+
|
| 364 |
+
/* Progress bars */
|
| 365 |
+
.progress-bar { background: var(--bg-input) !important; }
|
| 366 |
+
.progress-bar-fill { background: var(--accent) !important; }
|
| 367 |
+
|
| 368 |
+
/* Textbox labels & info */
|
| 369 |
+
.gr-text-input label, .gr-textbox label { color: #FFFFFF !important; }
|
| 370 |
+
.gr-textbox span, .gr-text-input span { color: #FFFFFF !important; }
|
| 371 |
+
|
| 372 |
+
/* Block labels */
|
| 373 |
+
.block-label, .label-wrap, .label-wrap span { color: #FFFFFF !important; }
|
| 374 |
+
|
| 375 |
+
/* ALL spans and labels as fallback */
|
| 376 |
+
span:not([class*="logo"]):not([class*="gradient"]) { color: #FFFFFF !important; }
|
| 377 |
+
|
| 378 |
+
/* Form info text */
|
| 379 |
+
.form-info, .gr-form p, .gr-box p { color: #B0B0B0 !important; }
|
| 380 |
"""
|
| 381 |
|
| 382 |
# ============================================================================
|