Fix dropdown menu readability
Browse files
app.py
CHANGED
|
@@ -480,6 +480,61 @@ body::after {
|
|
| 480 |
min-height: 250px !important;
|
| 481 |
}
|
| 482 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 483 |
"""
|
| 484 |
|
| 485 |
|
|
|
|
| 480 |
min-height: 250px !important;
|
| 481 |
}
|
| 482 |
}
|
| 483 |
+
/* ===== FIX GRADIO 6 DROPDOWN MENUS ===== */
|
| 484 |
+
|
| 485 |
+
/* Dropdown field itself */
|
| 486 |
+
.gradio-container [role="combobox"] {
|
| 487 |
+
background: #f8fbff !important;
|
| 488 |
+
color: #15233b !important;
|
| 489 |
+
}
|
| 490 |
+
|
| 491 |
+
/* Open dropdown popover / list */
|
| 492 |
+
.gradio-container [role="listbox"],
|
| 493 |
+
body [role="listbox"] {
|
| 494 |
+
background: #ffffff !important;
|
| 495 |
+
color: #15233b !important;
|
| 496 |
+
border: 1px solid #bcd1ec !important;
|
| 497 |
+
border-radius: 12px !important;
|
| 498 |
+
}
|
| 499 |
+
|
| 500 |
+
/* Dropdown options */
|
| 501 |
+
.gradio-container [role="option"],
|
| 502 |
+
body [role="option"] {
|
| 503 |
+
background: #ffffff !important;
|
| 504 |
+
color: #15233b !important;
|
| 505 |
+
}
|
| 506 |
+
|
| 507 |
+
/* Text/elements nested inside options */
|
| 508 |
+
.gradio-container [role="option"] *,
|
| 509 |
+
body [role="option"] * {
|
| 510 |
+
color: #15233b !important;
|
| 511 |
+
}
|
| 512 |
+
|
| 513 |
+
/* Hovered / keyboard-highlighted option */
|
| 514 |
+
.gradio-container [role="option"]:hover,
|
| 515 |
+
body [role="option"]:hover,
|
| 516 |
+
.gradio-container [role="option"]:focus,
|
| 517 |
+
body [role="option"]:focus {
|
| 518 |
+
background: #dff3ff !important;
|
| 519 |
+
color: #08213e !important;
|
| 520 |
+
}
|
| 521 |
+
|
| 522 |
+
/* Selected option */
|
| 523 |
+
.gradio-container [role="option"][aria-selected="true"],
|
| 524 |
+
body [role="option"][aria-selected="true"] {
|
| 525 |
+
background: #cbeeff !important;
|
| 526 |
+
color: #08213e !important;
|
| 527 |
+
font-weight: 700 !important;
|
| 528 |
+
}
|
| 529 |
+
|
| 530 |
+
/* Keep nested selected/hovered option text dark */
|
| 531 |
+
.gradio-container [role="option"]:hover *,
|
| 532 |
+
body [role="option"]:hover *,
|
| 533 |
+
.gradio-container [role="option"][aria-selected="true"] *,
|
| 534 |
+
body [role="option"][aria-selected="true"] * {
|
| 535 |
+
color: #08213e !important;
|
| 536 |
+
}
|
| 537 |
+
|
| 538 |
"""
|
| 539 |
|
| 540 |
|