Hugging Face's logo

Spaces:
optimum
/
neuron-export
Running

App Files Community
1
badaoui HF Staff commited on
Commit
54760e3
·
verified ·
1 Parent(s): 7fb2842

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +117 -45
app.py CHANGED
@@ -131,71 +131,143 @@ CUSTOM_CSS = """
131
  background: var(--background-fill-primary) !important;
132
  }
133
 
134
- /* Make sure search results are visible - comprehensive dropdown fixes */
135
- .gradio-container .gr-dropdown-item {
136
- color: var(--body-text-color) !important;
137
- background: var(--background-fill-primary) !important;
 
 
 
 
 
 
 
 
 
 
 
138
  }
139
 
140
- .gradio-container .gr-dropdown-item:hover {
141
- background: var(--background-fill-secondary) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  }
143
 
144
- /* Additional fixes for HuggingfaceHubSearch dropdown results */
145
- .gradio-container [data-testid="dropdown"] > div,
146
- .gradio-container [data-testid="dropdown"] .gr-box {
147
- background: var(--background-fill-primary) !important;
148
- color: var(--body-text-color) !important;
 
 
 
 
 
 
 
 
149
  }
150
 
151
- /* Fix for search results list items */
152
- .gradio-container .gr-dropdown div[role="option"],
153
  .gradio-container .gr-dropdown .gr-dropdown-item,
154
- .gradio-container .gr-dropdown li {
155
- background: var(--background-fill-primary) !important;
156
- color: var(--body-text-color) !important;
157
- border-bottom: 1px solid var(--border-color-primary) !important;
 
 
158
  }
159
 
160
- .gradio-container .gr-dropdown div[role="option"]:hover,
161
  .gradio-container .gr-dropdown .gr-dropdown-item:hover,
162
- .gradio-container .gr-dropdown li:hover {
163
- background: var(--background-fill-secondary) !important;
164
- color: var(--body-text-color) !important;
 
165
  }
166
 
167
- /* Fix for any ul/li dropdown elements */
168
- .gradio-container ul.gr-dropdown,
169
- .gradio-container .gr-dropdown ul {
170
- background: var(--background-fill-primary) !important;
171
- border: 1px solid var(--border-color-primary) !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  }
173
 
174
- /* Comprehensive fix for all dropdown text */
175
- .gradio-container .gr-dropdown *,
176
- .gradio-container [data-testid="dropdown"] *,
177
- .gradio-container .gr-dropdown-container * {
178
- color: var(--body-text-color) !important;
 
 
179
  }
180
 
181
- /* Fix for HuggingfaceHubSearch specific selectors */
182
- .gradio-container .gradio-huggingfacehub-search .gr-dropdown,
183
- .gradio-container .gradio-huggingfacehub-search [data-testid="dropdown"] {
184
- background: var(--background-fill-primary) !important;
 
 
185
  }
186
 
187
- .gradio-container .gradio-huggingfacehub-search .gr-dropdown-item,
188
- .gradio-container .gradio-huggingfacehub-search div[role="option"] {
189
- background: var(--background-fill-primary) !important;
190
- color: var(--body-text-color) !important;
191
  }
192
 
193
- /* Force visibility with !important for stubborn elements */
194
- .gradio-container .gr-dropdown .gr-dropdown-item span,
195
- .gradio-container .gr-dropdown div[role="option"] span,
196
- .gradio-container [data-testid="dropdown"] span {
197
- color: var(--body-text-color) !important;
198
- background: transparent !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  }
200
  """
201
 
 
131
  background: var(--background-fill-primary) !important;
132
  }
133
 
134
+ /* AGGRESSIVE FIXES FOR DROPDOWN VISIBILITY - Target all possible elements */
135
+
136
+ /* Universal dropdown item fixes - cast wide net */
137
+ .gradio-container div[class*="dropdown"] div,
138
+ .gradio-container div[class*="dropdown"] span,
139
+ .gradio-container div[class*="dropdown"] p,
140
+ .gradio-container div[class*="dropdown"] li,
141
+ .gradio-container ul[class*="dropdown"] li,
142
+ .gradio-container [role="listbox"] div,
143
+ .gradio-container [role="listbox"] span,
144
+ .gradio-container [role="option"],
145
+ .gradio-container [role="option"] span,
146
+ .gradio-container [role="option"] div {
147
+ color: #1f2937 !important; /* Dark text for light mode */
148
+ background: white !important;
149
  }
150
 
151
+ /* Dark mode specific overrides */
152
+ @media (prefers-color-scheme: dark) {
153
+ .gradio-container div[class*="dropdown"] div,
154
+ .gradio-container div[class*="dropdown"] span,
155
+ .gradio-container div[class*="dropdown"] p,
156
+ .gradio-container div[class*="dropdown"] li,
157
+ .gradio-container ul[class*="dropdown"] li,
158
+ .gradio-container [role="listbox"] div,
159
+ .gradio-container [role="listbox"] span,
160
+ .gradio-container [role="option"],
161
+ .gradio-container [role="option"] span,
162
+ .gradio-container [role="option"] div {
163
+ color: #f9fafb !important; /* Light text for dark mode */
164
+ background: #374151 !important;
165
+ }
166
  }
167
 
168
+ /* Force text visibility for Gradio dark theme */
169
+ .dark .gradio-container div[class*="dropdown"] div,
170
+ .dark .gradio-container div[class*="dropdown"] span,
171
+ .dark .gradio-container div[class*="dropdown"] p,
172
+ .dark .gradio-container div[class*="dropdown"] li,
173
+ .dark .gradio-container ul[class*="dropdown"] li,
174
+ .dark .gradio-container [role="listbox"] div,
175
+ .dark .gradio-container [role="listbox"] span,
176
+ .dark .gradio-container [role="option"],
177
+ .dark .gradio-container [role="option"] span,
178
+ .dark .gradio-container [role="option"] div {
179
+ color: #f9fafb !important;
180
+ background: #374151 !important;
181
  }
182
 
183
+ /* Additional specific targeting for HuggingfaceHubSearch */
184
+ .gradio-container .gr-dropdown-item,
185
  .gradio-container .gr-dropdown .gr-dropdown-item,
186
+ .gradio-container .gr-dropdown li,
187
+ .gradio-container .gr-dropdown div[role="option"] {
188
+ background: white !important;
189
+ color: #1f2937 !important;
190
+ border-bottom: 1px solid #e5e7eb !important;
191
+ padding: 8px 12px !important;
192
  }
193
 
194
+ .gradio-container .gr-dropdown-item:hover,
195
  .gradio-container .gr-dropdown .gr-dropdown-item:hover,
196
+ .gradio-container .gr-dropdown li:hover,
197
+ .gradio-container .gr-dropdown div[role="option"]:hover {
198
+ background: #f3f4f6 !important;
199
+ color: #1f2937 !important;
200
  }
201
 
202
+ /* Dark mode for specific dropdown items */
203
+ @media (prefers-color-scheme: dark) {
204
+ .gradio-container .gr-dropdown-item,
205
+ .gradio-container .gr-dropdown .gr-dropdown-item,
206
+ .gradio-container .gr-dropdown li,
207
+ .gradio-container .gr-dropdown div[role="option"] {
208
+ background: #374151 !important;
209
+ color: #f9fafb !important;
210
+ border-bottom: 1px solid #4b5563 !important;
211
+ }
212
+
213
+ .gradio-container .gr-dropdown-item:hover,
214
+ .gradio-container .gr-dropdown .gr-dropdown-item:hover,
215
+ .gradio-container .gr-dropdown li:hover,
216
+ .gradio-container .gr-dropdown div[role="option"]:hover {
217
+ background: #4b5563 !important;
218
+ color: #f9fafb !important;
219
+ }
220
  }
221
 
222
+ .dark .gradio-container .gr-dropdown-item,
223
+ .dark .gradio-container .gr-dropdown .gr-dropdown-item,
224
+ .dark .gradio-container .gr-dropdown li,
225
+ .dark .gradio-container .gr-dropdown div[role="option"] {
226
+ background: #374151 !important;
227
+ color: #f9fafb !important;
228
+ border-bottom: 1px solid #4b5563 !important;
229
  }
230
 
231
+ .dark .gradio-container .gr-dropdown-item:hover,
232
+ .dark .gradio-container .gr-dropdown .gr-dropdown-item:hover,
233
+ .dark .gradio-container .gr-dropdown li:hover,
234
+ .dark .gradio-container .gr-dropdown div[role="option"]:hover {
235
+ background: #4b5563 !important;
236
+ color: #f9fafb !important;
237
  }
238
 
239
+ /* Nuclear option - force all text elements to be visible */
240
+ .gradio-container * {
241
+ text-shadow: none !important;
 
242
  }
243
 
244
+ .gradio-container [class*="dropdown"] * {
245
+ color: inherit !important;
246
+ }
247
+
248
+ /* Fix dropdown container backgrounds */
249
+ .gradio-container .gr-dropdown,
250
+ .gradio-container [role="listbox"],
251
+ .gradio-container div[class*="dropdown"] {
252
+ background: white !important;
253
+ border: 1px solid #d1d5db !important;
254
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
255
+ }
256
+
257
+ @media (prefers-color-scheme: dark) {
258
+ .gradio-container .gr-dropdown,
259
+ .gradio-container [role="listbox"],
260
+ .gradio-container div[class*="dropdown"] {
261
+ background: #374151 !important;
262
+ border: 1px solid #4b5563 !important;
263
+ }
264
+ }
265
+
266
+ .dark .gradio-container .gr-dropdown,
267
+ .dark .gradio-container [role="listbox"],
268
+ .dark .gradio-container div[class*="dropdown"] {
269
+ background: #374151 !important;
270
+ border: 1px solid #4b5563 !important;
271
  }
272
  """
273