Update app.py

app.py

@@ -131,143 +131,14 @@ CUSTOM_CSS = """
     background: var(--background-fill-primary) !important;
 }
 
-/* AGGRESSIVE FIXES FOR DROPDOWN VISIBILITY - Target all possible elements */
-
-/* Universal dropdown item fixes - cast wide net */
-.gradio-container div[class*="dropdown"] div,
-.gradio-container div[class*="dropdown"] span,
-.gradio-container div[class*="dropdown"] p,
-.gradio-container div[class*="dropdown"] li,
-.gradio-container ul[class*="dropdown"] li,
-.gradio-container [role="listbox"] div,
-.gradio-container [role="listbox"] span,
-.gradio-container [role="option"],
-.gradio-container [role="option"] span,
-.gradio-container [role="option"] div {
-    color: #1f2937 !important;  /* Dark text for light mode */
-    background: white !important;
-}
-
-/* Dark mode specific overrides */
-@media (prefers-color-scheme: dark) {
-    .gradio-container div[class*="dropdown"] div,
-    .gradio-container div[class*="dropdown"] span,
-    .gradio-container div[class*="dropdown"] p,
-    .gradio-container div[class*="dropdown"] li,
-    .gradio-container ul[class*="dropdown"] li,
-    .gradio-container [role="listbox"] div,
-    .gradio-container [role="listbox"] span,
-    .gradio-container [role="option"],
-    .gradio-container [role="option"] span,
-    .gradio-container [role="option"] div {
-        color: #f9fafb !important;  /* Light text for dark mode */
-        background: #374151 !important;
-    }
-}
-
-/* Force text visibility for Gradio dark theme */
-.dark .gradio-container div[class*="dropdown"] div,
-.dark .gradio-container div[class*="dropdown"] span,
-.dark .gradio-container div[class*="dropdown"] p,
-.dark .gradio-container div[class*="dropdown"] li,
-.dark .gradio-container ul[class*="dropdown"] li,
-.dark .gradio-container [role="listbox"] div,
-.dark .gradio-container [role="listbox"] span,
-.dark .gradio-container [role="option"],
-.dark .gradio-container [role="option"] span,
-.dark .gradio-container [role="option"] div {
-    color: #f9fafb !important;
-    background: #374151 !important;
-}
-
-/* Additional specific targeting for HuggingfaceHubSearch */
-.gradio-container .gr-dropdown-item,
-.gradio-container .gr-dropdown .gr-dropdown-item,
-.gradio-container .gr-dropdown li,
-.gradio-container .gr-dropdown div[role="option"] {
-    background: white !important;
-    color: #1f2937 !important;
-    border-bottom: 1px solid #e5e7eb !important;
-    padding: 8px 12px !important;
-}
-
-.gradio-container .gr-dropdown-item:hover,
-.gradio-container .gr-dropdown .gr-dropdown-item:hover,
-.gradio-container .gr-dropdown li:hover,
-.gradio-container .gr-dropdown div[role="option"]:hover {
-    background: #f3f4f6 !important;
-    color: #1f2937 !important;
-}
-
-/* Dark mode for specific dropdown items */
-@media (prefers-color-scheme: dark) {
-    .gradio-container .gr-dropdown-item,
-    .gradio-container .gr-dropdown .gr-dropdown-item,
-    .gradio-container .gr-dropdown li,
-    .gradio-container .gr-dropdown div[role="option"] {
-        background: #374151 !important;
-        color: #f9fafb !important;
-        border-bottom: 1px solid #4b5563 !important;
-    }
-    
-    .gradio-container .gr-dropdown-item:hover,
-    .gradio-container .gr-dropdown .gr-dropdown-item:hover,
-    .gradio-container .gr-dropdown li:hover,
-    .gradio-container .gr-dropdown div[role="option"]:hover {
-        background: #4b5563 !important;
-        color: #f9fafb !important;
-    }
-}
-
-.dark .gradio-container .gr-dropdown-item,
-.dark .gradio-container .gr-dropdown .gr-dropdown-item,
-.dark .gradio-container .gr-dropdown li,
-.dark .gradio-container .gr-dropdown div[role="option"] {
-    background: #374151 !important;
-    color: #f9fafb !important;
-    border-bottom: 1px solid #4b5563 !important;
-}
-
-.dark .gradio-container .gr-dropdown-item:hover,
-.dark .gradio-container .gr-dropdown .gr-dropdown-item:hover,
-.dark .gradio-container .gr-dropdown li:hover,
-.dark .gradio-container .gr-dropdown div[role="option"]:hover {
-    background: #4b5563 !important;
-    color: #f9fafb !important;
-}
-
-/* Nuclear option - force all text elements to be visible */
-.gradio-container * {
-    text-shadow: none !important;
-}
-
-.gradio-container [class*="dropdown"] * {
-    color: inherit !important;
-}
-
-/* Fix dropdown container backgrounds */
-.gradio-container .gr-dropdown,
-.gradio-container [role="listbox"],
-.gradio-container div[class*="dropdown"] {
-    background: white !important;
-    border: 1px solid #d1d5db !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
-}
-
-@media (prefers-color-scheme: dark) {
-    .gradio-container .gr-dropdown,
-    .gradio-container [role="listbox"],
-    .gradio-container div[class*="dropdown"] {
-        background: #374151 !important;
-        border: 1px solid #4b5563 !important;
-    }
+/* Make sure search results are visible */
+.gradio-container .gr-dropdown-item {
+    color: var(--body-text-color) !important;
+    background: var(--background-fill-primary) !important;
 }
 
-.dark .gradio-container .gr-dropdown,
-.dark .gradio-container [role="listbox"],
-.dark .gradio-container div[class*="dropdown"] {
-    background: #374151 !important;
-    border: 1px solid #4b5563 !important;
+.gradio-container .gr-dropdown-item:hover {
+    background: var(--background-fill-secondary) !important;
 }
 """