ZhouChuYue commited on
Commit
8795fbb
·
1 Parent(s): 4c6fb44

fix: increase contrast for input fields and labels

Browse files
Files changed (1) hide show
  1. app.py +23 -15
app.py CHANGED
@@ -229,39 +229,47 @@ body {
229
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
230
  }
231
 
232
- /* Inputs & Textareas */
233
- /* Target specific Gradio input classes and generic elements */
234
  .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
235
  font-family: 'JetBrains Mono', monospace !important;
236
- background-color: rgba(15, 23, 42, 0.8) !important;
237
- border: 1px solid rgba(148, 163, 184, 0.2) !important;
238
- color: #ffffff !important;
 
 
 
 
 
 
 
239
  }
240
 
241
- /* Override default block backgrounds that might be light */
242
  .gradio-container .block, .gradio-container .panel {
243
- background-color: rgba(30, 41, 59, 0.2) !important;
244
- border-color: rgba(255, 255, 255, 0.1) !important;
245
- border-radius: 8px !important;
246
  }
247
 
248
  /* Fix for dropdown options background */
249
  ul.options, .gr-dropdown-options {
250
  background-color: #1e293b !important;
251
  color: #ffffff !important;
 
252
  }
253
 
254
- /* Markdown prose - Gradio uses typography plugin which sets dark colors */
255
  .prose, .prose p, .prose h1, .prose h2, .prose h3, .prose strong, .prose li {
256
  color: var(--text-light) !important;
257
  }
258
 
259
- /* Labels */
260
  label span, .gr-form label span {
261
- color: #93c5fd !important; /* Light blue for better contrast */
262
- font-weight: 600 !important;
263
- font-size: 0.95rem !important;
264
- background-color: transparent !important;
 
 
265
  }
266
 
267
  /* Buttons */
 
229
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
230
  }
231
 
232
+ /* Inputs & Textareas - Force Dark Background */
 
233
  .gr-input, textarea, input, .gr-box, .gr-check-radio, .gr-dropdown {
234
  font-family: 'JetBrains Mono', monospace !important;
235
+ background-color: #020617 !important; /* Very dark blue/black */
236
+ border: 1px solid #475569 !important; /* Lighter border for visibility */
237
+ color: #f8fafc !important; /* White text */
238
+ box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3) !important;
239
+ }
240
+
241
+ /* Focus state */
242
+ .gr-input:focus, textarea:focus, input:focus {
243
+ border-color: #818cf8 !important;
244
+ background-color: #0f172a !important;
245
  }
246
 
247
+ /* Override default block backgrounds */
248
  .gradio-container .block, .gradio-container .panel {
249
+ background-color: transparent !important;
250
+ border: none !important;
 
251
  }
252
 
253
  /* Fix for dropdown options background */
254
  ul.options, .gr-dropdown-options {
255
  background-color: #1e293b !important;
256
  color: #ffffff !important;
257
+ border: 1px solid #475569 !important;
258
  }
259
 
260
+ /* Markdown prose */
261
  .prose, .prose p, .prose h1, .prose h2, .prose h3, .prose strong, .prose li {
262
  color: var(--text-light) !important;
263
  }
264
 
265
+ /* Labels - High Contrast */
266
  label span, .gr-form label span {
267
+ color: #38bdf8 !important; /* Bright Cyan */
268
+ font-weight: 700 !important;
269
+ font-size: 1rem !important;
270
+ letter-spacing: 0.02em !important;
271
+ margin-bottom: 0.5rem !important;
272
+ text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
273
  }
274
 
275
  /* Buttons */