colors

app.py

@@ -71,32 +71,40 @@ def create_ui():
         # Define CSS for the validation UI with better borders and readability
         gr.HTML("""
         <style>
-        /* Reset the overly aggressive transparency */
-        .gradio-container *, 
-        .gradio-container *::before, 
-        .gradio-container *::after {
-            background-color: initial;  /* Remove the blanket transparency */
+        /* Set max width and center the app */
+        .gradio-container {
+            max-width: 700px !important;
+            margin: 0 auto !important;
         }
 
-        /* Make just the group containers transparent instead */
-        .gr-group {
+        /* 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;
         }
 
-        /* Fix tab container backgrounds */
-        .tabs > .tab-nav {
+        /* Clean up tab styling */
+        .tabs, .tabitem, .tab-nav {
             background-color: transparent !important;
+            border: none !important;
         }
 
-        /* Ensure buttons have proper backgrounds and text contrast */
-        .primary-button, [variant="primary"], button.primary {
+        /* Ensure buttons have proper styling */
+        button.primary, button[data-testid="primary-button"] {
             background-color: var(--primary-500) !important;
             color: white !important;
         }
 
-        /* Status indicator styles */
+        /* Status indicator styling */
         .status-success {
             background-color: #4caf50 !important;
             color: white !important;
@@ -105,74 +113,39 @@ def create_ui():
             background-color: #f44336 !important;
             color: white !important;
         }
-        .status-waiting {
-            background-color: #9e9e9e !important;
-            color: white !important;
-        }
 
-        /* Validation section styling */
-        .validation-step {
-            margin-bottom: 15px;
-            border: 1px solid var(--border-color-primary, #e0e0e0);
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        .step-header {
-            padding: 10px 15px;
-            background-color: var(--background-fill-secondary, #f5f5f5) !important;
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-        }
-        .step-left {
-            display: flex;
-            align-items: center;
-            flex-grow: 1;
-        }
-        .step-status {
-            margin-right: 10px;
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 16px;
-            text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
-        }
-
-        /* Progress status container with border */
+        /* Progress container styling */
         .progress-container {
-            min-height: 65px;
+            min-height: 50px;
             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;
+            background-color: transparent !important;
         }
         .progress-status {
             font-style: italic;
             width: 100%;
         }
 
-        /* Fix other UI elements */
-        .dark .step-header {
-            background-color: var(--background-fill-secondary, #2e2e2e) !important;
+        /* 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;
         }
-        .step-details {
+        .step-header {
             padding: 10px 15px;
-            background-color: var(--background-fill-primary) !important;
-        }
-        .arrow-indicator {
-            margin-left: 10px;
-            font-size: 16px;
-            transition: transform 0.3s ease;
+            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;
         }
-        .arrow-down {
-            transform: rotate(90deg);
+        .step-details {
+            padding: 10px 15px;
+            background-color: transparent !important;
         }
         </style>
         """)