Nischal Subedi commited on
Commit
0eef14e
·
1 Parent(s): e66972a

UI update:

Browse files
Files changed (1) hide show
  1. app.py +23 -11
app.py CHANGED
@@ -309,7 +309,7 @@ Answer:"""
309
  :root {
310
  --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
311
  --primary-hover: #E07B00; /* Slightly darker orange for hover */
312
- --background-primary: hsl(30, 100%, 99.8%); /* Almost pure white, with a very subtle warm tint */
313
  --background-secondary: hsl(30, 100%, 96%); /* Clear, light, warm peach/cream */
314
  --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
315
  --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
@@ -338,6 +338,13 @@ Answer:"""
338
  --error-text: #FF6666;
339
  }
340
 
 
 
 
 
 
 
 
341
  /* Ensure the very outer body background is also set, overriding any Gradio defaults */
342
  body, html {
343
  background-color: var(--background-secondary) !important;
@@ -452,6 +459,7 @@ Answer:"""
452
  align-items: center !important;
453
  width: 100% !important;
454
  flex-direction: column !important; /* Ensure content stacks vertically if needed */
 
455
  }
456
 
457
  /* NEW: Class for the solid color title bar within each card */
@@ -503,28 +511,33 @@ Answer:"""
503
  color: var(--primary-color) !important; /* Highlight strong text with primary color */
504
  }
505
 
506
- /* Overrides for common Gradio internal elements that might have default backgrounds */
507
- /* These ensure transparency or explicit primary background for common Gradio containers */
508
- .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel, .gr-columns, .gr-column,
 
509
  .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
510
- background-color: transparent !important;
511
  color: var(--text-primary) !important; /* Ensure text color is consistent */
512
- /* Ensure text wrapping for markdown as well */
513
- white-space: normal !important;
514
  overflow-wrap: break-word;
515
  word-break: break-word;
516
  }
 
 
 
 
 
 
 
517
 
518
 
519
  /* Improved input styling with clear boundaries and focus */
520
  .gradio-textbox {
521
- background-color: transparent !important; /* Ensure parent container is transparent */
522
  margin-bottom: 0.75rem !important;
523
  }
524
  /* Target the actual input elements for background color */
525
  .gradio-textbox textarea,
526
  .gradio-textbox input {
527
- background-color: var(--background-primary) !important; /* Pure white for content area */
528
  border: 2px solid var(--border-color) !important; /* Clear border */
529
  border-radius: 8px !important;
530
  padding: 0.85rem 1rem !important; /* Slightly more padding */
@@ -548,7 +561,6 @@ Answer:"""
548
 
549
  /* Styling for the radio button group (state selection) */
550
  .gradio-radio {
551
- background-color: transparent !important; /* Ensure parent container is transparent */
552
  padding: 0 !important; /* Remove any default padding */
553
  margin-top: 1rem !important; /* Add a little space above */
554
  }
@@ -565,7 +577,7 @@ Answer:"""
565
  padding: 0.75rem 1rem !important;
566
  border: 2px solid var(--border-color) !important;
567
  border-radius: 8px !important;
568
- background-color: var(--background-primary) !important; /* Matches card background (white) */
569
  color: var(--text-primary) !important;
570
  font-weight: 500 !important;
571
  cursor: pointer !important;
 
309
  :root {
310
  --primary-color: #FF8C00; /* Darker Orange for buttons/accents */
311
  --primary-hover: #E07B00; /* Slightly darker orange for hover */
312
+ --background-primary: hsl(30, 100%, 99.9%); /* Almost pure white, with a very subtle warm tint */
313
  --background-secondary: hsl(30, 100%, 96%); /* Clear, light, warm peach/cream */
314
  --text-primary: #4A3C32; /* Dark warm brown/charcoal for main text */
315
  --text-secondary: #8C7B6F; /* Muted warm gray/brown for secondary text */
 
338
  --error-text: #FF6666;
339
  }
340
 
341
+ /* Universal reset for backgrounds to ensure no default grey */
342
+ *, *::before, *::after {
343
+ /* This is a soft reset. Specific overrides below will take precedence. */
344
+ /* background-color: initial; /* Resets to default, which for many is transparent */
345
+ /* box-sizing: border-box; */
346
+ }
347
+
348
  /* Ensure the very outer body background is also set, overriding any Gradio defaults */
349
  body, html {
350
  background-color: var(--background-secondary) !important;
 
459
  align-items: center !important;
460
  width: 100% !important;
461
  flex-direction: column !important; /* Ensure content stacks vertically if needed */
462
+ background-color: transparent !important; /* Ensure this wrapper is transparent */
463
  }
464
 
465
  /* NEW: Class for the solid color title bar within each card */
 
511
  color: var(--primary-color) !important; /* Highlight strong text with primary color */
512
  }
513
 
514
+ /* Aggressive Overrides for all Gradio internal containers and text blocks */
515
+ /* These ensure transparency or explicit primary background for common Gradio elements */
516
+ .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
517
+ .gr-columns, .gr-column, /* Ensure columns themselves are transparent */
518
  .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
519
+ background-color: transparent !important; /* Force transparent or specific primary background */
520
  color: var(--text-primary) !important; /* Ensure text color is consistent */
521
+ white-space: normal !important; /* Allow text to wrap */
 
522
  overflow-wrap: break-word;
523
  word-break: break-word;
524
  }
525
+ /* Specific elements that MUST have background-primary to look white/clean */
526
+ .gradio-textbox textarea,
527
+ .gradio-textbox input,
528
+ .gradio-radio label,
529
+ .placeholder {
530
+ background-color: var(--background-primary) !important; /* These are input/output content areas */
531
+ }
532
 
533
 
534
  /* Improved input styling with clear boundaries and focus */
535
  .gradio-textbox {
 
536
  margin-bottom: 0.75rem !important;
537
  }
538
  /* Target the actual input elements for background color */
539
  .gradio-textbox textarea,
540
  .gradio-textbox input {
 
541
  border: 2px solid var(--border-color) !important; /* Clear border */
542
  border-radius: 8px !important;
543
  padding: 0.85rem 1rem !important; /* Slightly more padding */
 
561
 
562
  /* Styling for the radio button group (state selection) */
563
  .gradio-radio {
 
564
  padding: 0 !important; /* Remove any default padding */
565
  margin-top: 1rem !important; /* Add a little space above */
566
  }
 
577
  padding: 0.75rem 1rem !important;
578
  border: 2px solid var(--border-color) !important;
579
  border-radius: 8px !important;
580
+ /* background-color: var(--background-primary) !important; Set in general rule for input types */
581
  color: var(--text-primary) !important;
582
  font-weight: 500 !important;
583
  cursor: pointer !important;