colors

app.py

@@ -68,84 +68,63 @@ def create_ui():
             # Validation results
             validation_results = gr.HTML(visible=False)
         
-        # Define CSS for the validation UI with better borders and readability
+        # Define CSS for the validation UI with extreme overrides
         gr.HTML("""
         <style>
-        /* Set max width and center the app */
-        .gradio-container {
-            max-width: 700px !important;
-            margin: 0 auto !important;
-        }
-
-        /* Add better visual separation with borders instead of backgrounds */
-        .file-preview, .gr-file, .gr-form, .gr-panel, .gr-box, .gr-input, 
-        .gr-input-label, .gr-input-container, .progress-container {
-            border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.2)) !important;
-            border-radius: 8px !important;
-            background-color: rgba(255, 255, 255, 0.03) !important;
-        }
-
-        /* Make group containers transparent */
-        .gr-group, .gr-form {
-            background-color: transparent !important;
-            border: none !important;
-            box-shadow: none !important;
-        }
-
-        /* Clean up tab styling */
-        .tabs, .tabitem, .tab-nav {
-            background-color: transparent !important;
-            border: none !important;
+        /* Force ALL elements to have the same background as the page */
+        *, *::before, *::after,
+        .gradio-container, .gradio-container *, 
+        .dark .gradio-container, .dark .gradio-container *,
+        [class*="container"], [class*="panel"], [class*="box"], [class*="group"],
+        .tab-nav, .tabitem, .tab-panel,
+        .file-preview, .progress-container, .gr-form {
+            background-color: var(--body-background-fill) !important;
+            border-color: var(--border-color-primary) !important;
         }
 
-        /* Ensure buttons have proper styling */
-        button.primary, button[data-testid="primary-button"] {
+        /* Only allow specific elements to have their own background */
+        button.primary, .status-success, .status-error, .status-waiting {
             background-color: var(--primary-500) !important;
-            color: white !important;
         }
 
-        /* Status indicator styling */
+        /* Specific styling for status indicators */
         .status-success {
             background-color: #4caf50 !important;
-            color: white !important;
         }
         .status-error {
             background-color: #f44336 !important;
-            color: white !important;
         }
 
-        /* Progress container styling */
+        /* Set max width and center the app */
+        .gradio-container {
+            max-width: 650px !important;
+            margin: 0 auto !important;
+        }
+
+        /* Ensure borders for element definition */
+        .file-preview, .gr-box, .progress-container, .validation-step {
+            border: 1px solid var(--border-color-primary) !important;
+            border-radius: 8px !important;
+        }
+
+        /* Ensure good spacing */
         .progress-container {
             min-height: 50px;
             padding: 12px;
-            display: flex;
-            align-items: center;
             margin-bottom: 10px;
-            background-color: transparent !important;
-        }
-        .progress-status {
-            font-style: italic;
-            width: 100%;
         }
 
-        /* Validation results styling */
-        .validation-step {
-            margin-bottom: 15px;
-            border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.2));
-            border-radius: 8px;
-            overflow: hidden;
+        /* Override any other potential background settings */
+        .gr-panel, .gr-box, .gr-form {
+            background-image: none !important;
         }
-        .step-header {
-            padding: 10px 15px;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            border-bottom: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
-            background-color: transparent !important;
+
+        /* Tab styling */
+        .tabs > .tab-nav > button {
+            border-bottom: 2px solid transparent;
         }
-        .step-details {
-            padding: 10px 15px;
-            background-color: transparent !important;
+        .tabs > .tab-nav > button.selected {
+            border-bottom: 2px solid var(--primary-500);
         }
         </style>
         """)