colors

app.py

@@ -61,70 +61,106 @@ def create_ui():
         with gr.Group():
             # Progress/status message
             upload_progress = gr.HTML(
-                """<div class="progress-container">
-                     <div class="progress-status">Ready for validation</div>
-                   </div>""", visible=True)
+                """<div class="progress-status">Ready for validation</div>""", 
+                visible=True)
             
             # Validation results
             validation_results = gr.HTML(visible=False)
         
-        # Define CSS for the validation UI with extreme overrides
+        # Define CSS for the validation UI with improved results fields and hints
         gr.HTML("""
         <style>
-        /* 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 {
+        /* Set max width and center the app */
+        .gradio-container {
+            max-width: 650px !important;
+            margin: 0 auto !important;
+        }
+
+        /* Make basic containers transparent */
+        .gr-group, .gr-box, .gr-panel, .gradio-box, .gradio-group {
             background-color: var(--body-background-fill) !important;
-            border-color: var(--border-color-primary) !important;
+            border: none !important;
+            box-shadow: none !important;
         }
 
-        /* Only allow specific elements to have their own background */
-        button.primary, .status-success, .status-error, .status-waiting {
-            background-color: var(--primary-500) !important;
+        /* Style for expandable validation steps */
+        .validation-step {
+            margin-bottom: 12px;
+            border: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.2));
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .step-header {
+            padding: 10px 15px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            background-color: rgba(0, 0, 0, 0.03) !important;  /* Very subtle background */
+        }
+
+        .step-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .step-status {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
         }
 
-        /* Specific styling for status indicators */
         .status-success {
             background-color: #4caf50 !important;
         }
+
         .status-error {
             background-color: #f44336 !important;
         }
 
-        /* Set max width and center the app */
-        .gradio-container {
-            max-width: 650px !important;
-            margin: 0 auto !important;
+        .step-details {
+            padding: 12px 15px;
+            border-top: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
+            background-color: var(--body-background-fill) !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;
+        /* User hints styling - italic, smaller, no border */
+        .progress-status {
+            font-style: italic;
+            font-size: 0.9em;
+            color: var(--body-text-color-subdued);
+            padding: 8px 0;
+            width: 100%;
+            background: none !important;
+            border: none !important;
         }
 
-        /* Ensure good spacing */
-        .progress-container {
-            min-height: 50px;
-            padding: 12px;
-            margin-bottom: 10px;
+        /* Override input containers to match page background */
+        .gr-input-container, .gr-form, .gr-input, .gr-box, .gr-panel,
+        .file-preview, .file-preview > div {
+            background-color: var(--body-background-fill) !important;
         }
 
-        /* Override any other potential background settings */
-        .gr-panel, .gr-box, .gr-form {
-            background-image: none !important;
+        /* Ensure buttons have proper styling */
+        button.primary, button[data-testid="primary-button"] {
+            background-color: var(--primary-500) !important;
+            color: white !important;
         }
 
-        /* Tab styling */
-        .tabs > .tab-nav > button {
-            border-bottom: 2px solid transparent;
+        /* Arrow indicator for expandable sections */
+        .arrow-indicator {
+            font-size: 14px;
+            transition: transform 0.3s ease;
         }
-        .tabs > .tab-nav > button.selected {
-            border-bottom: 2px solid var(--primary-500);
+        .arrow-down {
+            transform: rotate(90deg);
         }
         </style>
         """)
@@ -133,29 +169,19 @@ def create_ui():
         def on_tab_change(evt: gr.SelectData):
             tab_id = evt.value
             if tab_id == "Upload File":
-                return "upload", """<div class="progress-container">
-                         <div class="progress-status">Ready for upload</div>
-                       </div>""", gr.update(visible=False)
+                return "upload", """<div class="progress-status">Ready for upload</div>""", gr.update(visible=False)
             else:
-                return "url", """<div class="progress-container">
-                         <div class="progress-status">Enter a URL to fetch</div>
-                       </div>""", gr.update(visible=False)
+                return "url", """<div class="progress-status">Enter a URL to fetch</div>""", gr.update(visible=False)
         
         def on_file_upload(file):
             if file is None:
-                return """<div class="progress-container">
-                         <div class="progress-status">Ready for upload</div>
-                       </div>""", gr.update(visible=False)
+                return """<div class="progress-status">Ready for upload</div>""", gr.update(visible=False)
             
-            return """<div class="progress-container">
-                     <div class="progress-status">✅ File uploaded successfully</div>
-                   </div>""", gr.update(visible=False)
+            return """<div class="progress-status">✅ File uploaded successfully</div>""", gr.update(visible=False)
         
         def fetch_from_url(url):
             if not url:
-                return """<div class="progress-container">
-                         <div class="progress-status">Please enter a URL</div>
-                       </div>""", gr.update(visible=False)
+                return """<div class="progress-status">Please enter a URL</div>""", gr.update(visible=False)
             
             try:
                 # Fetch JSON from URL
@@ -164,9 +190,7 @@ def create_ui():
                 json_data = response.json()
                 
                 # Show success message
-                progress_html = """<div class="progress-container">
-                                 <div class="progress-status">✅ JSON fetched successfully from URL</div>
-                               </div>"""
+                progress_html = """<div class="progress-status">✅ JSON fetched successfully from URL</div>"""
                 
                 # Validate the fetched JSON
                 results = []
@@ -185,19 +209,13 @@ def create_ui():
                 
             except requests.exceptions.RequestException as e:
                 error_message = f"❌ Error fetching URL: {str(e)}"
-                return f"""<div class="progress-container">
-                         <div class="progress-status">{error_message}</div>
-                       </div>""", gr.update(visible=False)
+                return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
             except json.JSONDecodeError as e:
                 error_message = f"❌ URL did not return valid JSON: {str(e)}"
-                return f"""<div class="progress-container">
-                         <div class="progress-status">{error_message}</div>
-                       </div>""", gr.update(visible=False)
+                return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
             except Exception as e:
                 error_message = f"❌ Unexpected error: {str(e)}"
-                return f"""<div class="progress-container">
-                         <div class="progress-status">{error_message}</div>
-                       </div>""", gr.update(visible=False)
+                return f"""<div class="progress-status">{error_message}</div>""", gr.update(visible=False)
         
         def build_results_html(results):
             # Build validation results HTML