colooors

app.py

@@ -68,57 +68,49 @@ def create_ui():
             # Validation results
             validation_results = gr.HTML(visible=False)
         
-        # Define CSS for the validation UI - improved for dark mode compatibility
+        # Define CSS for the validation UI with better borders and readability
         gr.HTML("""
         <style>
-        /* Target ALL elements with background colors */
+        /* Reset the overly aggressive transparency */
         .gradio-container *, 
         .gradio-container *::before, 
         .gradio-container *::after {
-            background-color: transparent !important;
+            background-color: initial;  /* Remove the blanket transparency */
         }
 
-        /* Only preserve explicit backgrounds for specific UI elements */
-        .step-header,
-        .status-success,
-        .status-error,
-        .status-waiting {
-            background-color: var(--background-fill-secondary, #f5f5f5) !important;
+        /* Make just the group containers transparent instead */
+        .gr-group {
+            background-color: transparent !important;
+            border: none !important;
+            box-shadow: none !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;
+        /* Fix tab container backgrounds */
+        .tabs > .tab-nav {
+            background-color: transparent !important;
         }
-        .step-details {
-            background-color: var(--background-fill-primary, #ffffff) !important;
+
+        /* Ensure buttons have proper backgrounds and text contrast */
+        .primary-button, [variant="primary"], button.primary {
+            background-color: var(--primary-500) !important;
+            color: white !important;
         }
+
+        /* Status indicator styles */
         .status-success {
             background-color: #4caf50 !important;
+            color: white !important;
         }
         .status-error {
             background-color: #f44336 !important;
+            color: white !important;
         }
         .status-waiting {
             background-color: #9e9e9e !important;
+            color: white !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;
-        }
+        /* Validation section styling */
         .validation-step {
             margin-bottom: 15px;
             border: 1px solid var(--border-color-primary, #e0e0e0);
@@ -127,6 +119,7 @@ def create_ui():
         }
         .step-header {
             padding: 10px 15px;
+            background-color: var(--background-fill-secondary, #f5f5f5) !important;
             display: flex;
             align-items: center;
             cursor: pointer;
@@ -145,26 +138,33 @@ def create_ui():
             align-items: center;
             justify-content: center;
             font-weight: bold;
-            color: white !important;
             font-size: 16px;
             text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
         }
-        /* Style for the progress status container and text - fixed height and italics */
+
+        /* Progress status container with border */
         .progress-container {
             min-height: 65px;
             padding: 12px;
             display: flex;
             align-items: center;
             margin-bottom: 10px;
+            border: 1px solid var(--border-color-primary, #e0e0e0);
+            border-radius: 8px;
+            background-color: var(--background-fill-primary) !important;
         }
         .progress-status {
             font-style: italic;
             width: 100%;
         }
-        /* Add borders for visual separation */
-        .progress-container {
-            border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
-            border-radius: 8px;
+
+        /* Fix other UI elements */
+        .dark .step-header {
+            background-color: var(--background-fill-secondary, #2e2e2e) !important;
+        }
+        .step-details {
+            padding: 10px 15px;
+            background-color: var(--background-fill-primary) !important;
         }
         .arrow-indicator {
             margin-left: 10px;
@@ -174,9 +174,6 @@ def create_ui():
         .arrow-down {
             transform: rotate(90deg);
         }
-        .step-details {
-            padding: 10px 15px;
-        }
         </style>
         """)