Update app.py

app.py

@@ -271,191 +271,223 @@ def auto_refresh_from_dir(
 
 def build_app() -> gr.Blocks:
     row_css = """
-    /* Force light theme everywhere */
-    body, .gradio-container {
+    /* ==============================================
+       GLOBAL RESET & THEME
+       ============================================== */
+    body {
         background-color: #f5f7fa !important;
+    }
+
+    .gradio-container {
+        max-width: 100% !important;
+        padding: 20px !important;
+        background-color: #f5f7fa !important;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    }
+
+    /* Force all main text to be dark */
+    .gradio-container, 
+    .gradio-container label, 
+    .gradio-container p, 
+    .gradio-container span, 
+    .gradio-container div {
         color: #24292e !important;
     }
 
-    /* --------------------------------------
-       FIXED SEARCH BOX CSS STARTS HERE 
-       --------------------------------------
-    */
+    /* Explicitly force Headings to Black */
+    .gradio-container h1, 
+    .gradio-container h2, 
+    .gradio-container h3 {
+        color: #24292e !important;
+        font-weight: 700;
+    }
     
-    /* The outer Group container */
+    /* Fix h1 spacing */
+    .gradio-container h1 {
+        margin-bottom: 24px;
+    }
+
+    /* Override default Gradio component backgrounds to White */
+    .gradio-container .block,
+    .gradio-container .form,
+    .gradio-container fieldset,
+    .gradio-container .gr-box,
+    .gradio-container .gr-form,
+    .gradio-container .panel {
+        background-color: white !important;
+        border-color: #e1e4e8 !important;
+    }
+
+    /* Remove transparent wrapper backgrounds */
+    .gradio-container > div,
+    .gradio-container .container,
+    .gradio-container .wrap {
+        background-color: transparent !important;
+    }
+
+    /* ==============================================
+       SEARCH BOX (FIXED)
+       ============================================== */
     .search-box {
         background: white !important;
         padding: 16px !important;
-        border-radius: 6px;
+        border-radius: 8px;
         border: 2px solid #e1e4e8 !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
         margin-bottom: 16px;
     }
 
-    /* Reset the internal Gradio Block styles so they fit in the white box */
-    .search-box .block {
+    /* Reset internal block styles so they don't overlap */
+    .search-box .block, 
+    .search-box .form,
+    .search-box .wrap,
+    .search-box .container {
         background: transparent !important;
         border: none !important;
         padding: 0 !important;
+        margin: 0 !important;
     }
 
-    /* Style the Label Text (🔍 Search) */
+    /* Style the Label */
     .search-box label span {
         color: #24292e !important;
         font-weight: 600;
         font-size: 14px;
         margin-bottom: 8px;
-        background: transparent !important;
+        display: block;
     }
 
-    /* Style the actual Input Field */
-    .search-box input.scroll-hide {
+    /* Style the Input Field itself */
+    .search-box input {
         background-color: white !important;
         color: #24292e !important;
-        border: 1.5px solid #e1e4e8 !important;
-        border-radius: 4px !important;
+        border: 1.5px solid #d1d5da !important;
+        border-radius: 6px !important;
         padding: 10px !important;
         box-shadow: none !important;
     }
 
-    /* Fix focus state */
-    .search-box input.scroll-hide:focus {
+    .search-box input:focus {
         border-color: #0366d6 !important;
-        ring: 0 !important;
-        outline: none !important;
+        outline: 2px solid rgba(3, 102, 214, 0.3) !important;
     }
 
-    /* --------------------------------------
-       END FIXED SEARCH BOX CSS
-       --------------------------------------
-    */
-
-    /* Override all dark backgrounds (Global) */
-    .gradio-container .block,
-    .gradio-container .form,
-    .gradio-container fieldset,
-    .gradio-container .input-block,
-    .gradio-container .wrap,
-    .gradio-container .gr-box,
-    .gradio-container .gr-form {
-        background-color: white !important;
-    }
-    
-    /* Table styling */
-    .gradio-container table.metrics-table th,
-    .gradio-container table.metrics-table td {
-        padding: 10px 14px;
-        border: 1.5px solid #e1e4e8;
-        white-space: nowrap;
-        font-size: 13px;
-        text-align: left;
-        color: #24292e !important;
-    }
-    
-    .gradio-container table.metrics-table th {
-        background: linear-gradient(to bottom, #fafbfc, #f6f8fa);
-        font-weight: 600;
-        color: #24292e !important;
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        border-bottom: 2px solid #d1d5da;
-    }
-    
-    .gradio-container table.metrics-table tbody tr:nth-child(even) {
-        background-color: #f6f8fa;
-    }
-    
-    .gradio-container table.metrics-table tbody tr:hover {
-        background-color: #e1e4e8;
-    }
-    
-    .gradio-container table.metrics-table {
-        border-collapse: collapse;
-        width: 100%;
-        background: white;
-    }
-    
-    .gradio-container table.metrics-table a {
-        color: #0366d6 !important;
-        text-decoration: none;
-    }
-    
-    .gradio-container table.metrics-table a:hover {
-        color: #0366d6 !important;
-        text-decoration: underline;
-    }
-    
-    /* Scrollable table container */
-    .table-container {
-        overflow-x: auto;
-        overflow-y: auto;
-        max-height: 75vh;
-        border: 2px solid #e1e4e8;
-        border-radius: 6px;
-        background: white;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    }
-    
-    /* Filter section styling */
+    /* ==============================================
+       FILTERS SECTION
+       ============================================== */
     .filter-section {
         background: white !important;
         padding: 0 !important;
-        border-radius: 6px;
+        border-radius: 8px;
         border: 2px solid #e1e4e8 !important;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     }
-    
-    .filter-section * {
-        color: #24292e !important;
-    }
-    
+
     .filter-section .wrap {
         padding: 20px !important;
-    }
-    
-    .filter-section label {
         background: transparent !important;
-        color: #24292e !important;
     }
-    
-    .filter-section fieldset {
-        background: transparent !important;
-        border-color: #e1e4e8 !important;
+
+    /* Checkbox styling */
+    .gradio-container input[type="checkbox"] {
+        accent-color: #0366d6 !important;
+        margin-right: 6px;
     }
-    
-    /* Accordion styling */
+
+    /* ==============================================
+       ABOUT / INFO SECTION (ACCORDION)
+       ============================================== */
     .gradio-container .accordion {
         background: white !important;
         border: 2px solid #e1e4e8 !important;
-        border-radius: 6px !important;
+        border-radius: 8px !important;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
-    
-    .gradio-container .accordion label,
-    .gradio-container .accordion button,
-    .gradio-container .accordion span {
-        background: transparent !important;
-        color: #24292e !important;
-    }
-    
-    /* Info section */
+
+    /* Internal Info Section Content */
     .info-section {
         padding: 16px;
         background: white !important;
     }
+
+    /* Ensure all text inside About/Info is strictly black */
+    .info-section h3 { margin-top: 0; margin-bottom: 10px; }
+    .info-section ul { padding-left: 20px; margin-bottom: 15px; }
+    .info-section li { margin-bottom: 4px; }
     
-    .info-section * {
+    .info-section, 
+    .info-section p, 
+    .info-section li, 
+    .info-section strong,
+    .info-section span {
         color: #24292e !important;
     }
-    
+
     .info-section a {
         color: #0366d6 !important;
+        text-decoration: none;
     }
-    
-    /* Checkbox styling */
-    .gradio-container input[type="checkbox"] {
-        accent-color: #0366d6 !important;
+    .info-section a:hover { text-decoration: underline; }
+
+    /* ==============================================
+       DASHBOARD TABLE
+       ============================================== */
+    /* The Container - WIDER BORDER APPLIED HERE */
+    .table-container {
+        overflow-x: auto;
+        overflow-y: auto;
+        max-height: 75vh;
+        
+        /* Changed from 2px to 4px for a wider border */
+        border: 4px solid #e1e4e8; 
+        
+        border-radius: 8px;
+        background: white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    table.metrics-table {
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        font-size: 13px;
+    }
+
+    table.metrics-table th,
+    table.metrics-table td {
+        padding: 12px 16px;
+        border: 1px solid #e1e4e8;
+        white-space: nowrap;
+        text-align: left;
+        color: #24292e !important;
+    }
+
+    table.metrics-table th {
+        background: #f6f8fa;
+        font-weight: 700;
+        color: #24292e !important;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        border-bottom: 2px solid #d1d5da;
+    }
+
+    table.metrics-table tbody tr:nth-child(even) {
+        background-color: #fafbfc;
+    }
+
+    table.metrics-table tbody tr:hover {
+        background-color: #f1f8ff;
+    }
+
+    table.metrics-table a {
+        color: #0366d6 !important;
+        text-decoration: none;
+        font-weight: 500;
+    }
+
+    table.metrics-table a:hover {
+        text-decoration: underline;
     }
     """