bg color

app.py

@@ -71,16 +71,54 @@ def create_ui():
         # Define CSS for the validation UI - improved for dark mode compatibility
         gr.HTML("""
         <style>
+        /* Target ALL elements with background colors */
+        .gradio-container *, 
+        .gradio-container *::before, 
+        .gradio-container *::after {
+            background-color: transparent !important;
+        }
+
+        /* Only preserve explicit backgrounds for specific UI elements */
+        .step-header,
+        .status-success,
+        .status-error,
+        .status-waiting {
+            background-color: var(--background-fill-secondary, #f5f5f5) !important;
+        }
+
+        /* Reset specific important element backgrounds */
+        .dark .step-header {
+            background-color: var(--background-fill-secondary, #2e2e2e) !important;
+        }
+        .dark .step-details {
+            background-color: var(--background-fill-primary, #1f1f1f) !important;
+        }
+        .step-details {
+            background-color: var(--background-fill-primary, #ffffff) !important;
+        }
+        .status-success {
+            background-color: #4caf50 !important;
+        }
+        .status-error {
+            background-color: #f44336 !important;
+        }
+        .status-waiting {
+            background-color: #9e9e9e !important;
+        }
+
+        /* Specifically target tab panels */
+        .tabitem, 
+        .tab-panel, 
+        [data-testid="tabitem"],
+        [data-testid="tab-panel"] {
+            background-color: transparent !important;
+        }
+
+        /* Keep original styling for other elements */
         .gradio-container {
             max-width: 800px;
             margin: 0 auto;
         }
-        /* Make group boxes background transparent/match page background */
-        .gr-group {
-            background-color: transparent !important;
-            border: none !important;
-            box-shadow: none !important;
-        }
         .validation-step {
             margin-bottom: 15px;
             border: 1px solid var(--border-color-primary, #e0e0e0);
@@ -89,7 +127,6 @@ def create_ui():
         }
         .step-header {
             padding: 10px 15px;
-            background-color: var(--background-fill-secondary, #f5f5f5);
             display: flex;
             align-items: center;
             cursor: pointer;
@@ -114,42 +151,17 @@ def create_ui():
         }
         /* Style for the progress status container and text - fixed height and italics */
         .progress-container {
-            min-height: 65px;  /* Increased height to prevent scrolling */
+            min-height: 65px;
             padding: 12px;
             display: flex;
             align-items: center;
             margin-bottom: 10px;
-            background-color: transparent !important;  /* Force transparency */
         }
         .progress-status {
             font-style: italic;
             width: 100%;
         }
-        /* Fix for any other elements that might have backgrounds */
-        .gradio-container .prose, 
-        .gradio-container [class*="message"],
-        .gradio-container [class*="container"],
-        .gradio-container [class*="wrap"],
-        .gradio-container [class*="panel"],
-        .gradio-container [class*="box"] {
-            background-color: transparent !important;
-        }
-        /* Ensure the validation results have the same background as the page */
-        .validation-results {
-            background-color: transparent !important;
-        }
-        /* Fix for tab container backgrounds */
-        .tabs > .tab-nav {
-            background-color: transparent !important;
-        }
-        .tabs > .tabitem {
-            background-color: transparent !important;
-        }
-        /* Ensure HTML components don't get unwanted backgrounds */
-        .gradio-html {
-            background-color: transparent !important;
-        }
-        /* Add slight border for visual separation instead of background color */
+        /* Add borders for visual separation */
         .progress-container {
             border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
             border-radius: 8px;
@@ -162,32 +174,8 @@ def create_ui():
         .arrow-down {
             transform: rotate(90deg);
         }
-        .status-success {
-            background-color: #4caf50;
-        }
-        .status-error {
-            background-color: #f44336;
-        }
-        .status-waiting {
-            background-color: #9e9e9e;
-        }
-        /* Dark mode specific styles */
-        .dark .step-header {
-            background-color: var(--background-fill-secondary, #2e2e2e);
-            color: var(--body-text-color, #ffffff);
-        }
-        .dark .step-title {
-            color: var(--body-text-color, #ffffff);
-        }
-        .dark .step-details {
-            color: var(--body-text-color, #ffffff);
-            background-color: var(--background-fill-primary, #1f1f1f);
-            padding: 10px 15px;
-        }
-        /* Add this to ensure details are also styled for light mode */
         .step-details {
             padding: 10px 15px;
-            background-color: var(--background-fill-primary, #ffffff);
         }
         </style>
         """)