Update app.py

app.py

@@ -402,111 +402,133 @@ def parse_and_generate_plot(df_data: list, indices_str: str):
 def build_app() -> gr.Blocks:
     row_css = """
     /* ============================================================ */
-    /* 1. CLEAN WHITE THEME (No Grey Backgrounds) */
+    /* GLOBAL RESET: Force Light Mode Colors Everywhere */
     /* ============================================================ */
     
-    /* Force main page to be white */
+    /* 1. Main Backgrounds */
     body, .gradio-container { 
-        background-color: #ffffff !important; 
-        color: #000000 !important;
+        background-color: #f5f7fa !important; 
     }
 
-    /* ============================================================ */
-    /* 2. FIX THE DARK BLOCKS IN SCREENSHOT (Checkboxes & Inputs) */
-    /* ============================================================ */
-
-    /* Force all input labels (the checkboxes) to be white */
+    /* 2. Force ALL Text to be Dark (overrides Dark Mode white text) */
+    .gradio-container, 
+    .gradio-container p, 
+    .gradio-container h1, .gradio-container h2, .gradio-container h3, 
+    .gradio-container span, 
     .gradio-container label, 
-    .gradio-container .wrap,
-    .gradio-container .block,
-    .gradio-container fieldset {
-        background-color: #ffffff !important;
-        background: #ffffff !important;
-        color: #000000 !important;
-    }
-
-    /* Force the text inside checkboxes to be black */
-    .gradio-container label span {
-        color: #000000 !important;
-        background-color: transparent !important;
+    .gradio-container div,
+    .gradio-container .prose,
+    .gradio-container .prose * {
+        color: #24292e !important;
     }
 
-    /* Force search bar and text inputs to be white */
+    /* 3. Force Inputs (Search box) to be White with Dark Text */
     .gradio-container input, 
-    .gradio-container textarea {
+    .gradio-container textarea, 
+    .gradio-container select {
         background-color: #ffffff !important;
-        color: #000000 !important;
-        border: 1px solid #e5e7eb !important;
+        color: #24292e !important;
+        border-color: #e1e4e8 !important;
+    }
+
+    /* 4. Fix Checkbox Groups (The dark rectangles in your screenshot) */
+    .gradio-container .wrap.default,
+    .gradio-container .block {
+        background-color: transparent !important; /* Removes blocky grey backgrounds */
+    }
+    
+    /* The individual checkboxes */
+    .gradio-container label.svelte-1b8605, 
+    .gradio-container label {
+        background-color: white !important;
+        border-color: #e1e4e8 !important;
+    }
+    
+    /* Force checkbox text to be visible */
+    .gradio-container label span {
+        color: #24292e !important;
     }
 
     /* ============================================================ */
-    /* 3. LAYOUT & BORDERS */
+    /* COMPONENT SPECIFIC STYLING */
     /* ============================================================ */
 
-    /* Add light borders so white boxes are still visible against white bg */
-    .search-box, .filter-section, .accordion, .table-container {
-        border: 1px solid #e5e7eb !important;
-        border-radius: 8px !important;
-        padding: 15px !important;
-        margin-bottom: 15px !important;
-        box-shadow: none !important; /* Removed shadow for cleaner look */
+    /* Search Box Container */
+    .search-box {
+        background: white !important; padding: 16px !important;
+        border-radius: 6px; border: 2px solid #e1e4e8 !important;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); margin-bottom: 16px;
     }
 
-    /* Headings */
-    .gradio-container h1, .gradio-container h2, .gradio-container h3 { 
-        color: #000000 !important; 
+    /* Filter Section & Accordion Container */
+    .filter-section, .gradio-container .accordion {
+        background: white !important; 
+        border: 2px solid #e1e4e8 !important; 
+        border-radius: 6px !important; 
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
-
-    /* Accordion Button (About Tasks) */
+    
+    /* Accordion Header - Fix for Day/Night button colors */
     .gradio-container .accordion button,
     .gradio-container .accordion span {
-        color: #000000 !important;
-        background-color: #ffffff !important;
+        background-color: white !important;
+        color: #24292e !important;
     }
     .gradio-container .accordion svg {
-        fill: #000000 !important;
+        fill: #24292e !important; /* Arrows */
     }
+
+    /* Info Section (The invisible text area) */
+    .info-section { padding: 16px; background: white !important; }
     
-    /* Links */
-    .gradio-container a { color: #2563eb !important; text-decoration: none; }
+    /* Links should remain Blue */
+    .gradio-container a, .gradio-container .prose a { 
+        color: #0366d6 !important; 
+        text-decoration: none;
+    }
     .gradio-container a:hover { text-decoration: underline; }
 
+    /* Checkbox Accent Color */
+    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
+
     /* ============================================================ */
-    /* 4. TABLE STYLING */
+    /* TABLE STYLING */
     /* ============================================================ */
     
     .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);
     }
 
     .gradio-container table.metrics-table { 
-        width: 100%; border-collapse: collapse; 
+        border-collapse: collapse; width: 100%; background: white !important; 
     }
     
     .gradio-container table.metrics-table th, 
     .gradio-container table.metrics-table td {
-        padding: 10px; 
-        border: 1px solid #e5e7eb; 
-        color: #000000 !important;
-        background-color: #ffffff !important;
-        font-size: 13px;
+        padding: 10px 14px; 
+        border: 1.5px solid #e1e4e8; 
+        white-space: nowrap;
+        font-size: 13px; 
+        text-align: left; 
+        background-color: white !important;
+        color: #24292e !important;
     }
     
-    /* Header row - subtle grey just to distinguish headers */
     .gradio-container table.metrics-table th {
-        background-color: #f9fafb !important; 
-        font-weight: bold;
-        position: sticky; top: 0; z-index: 10;
+        background: #f6f8fa !important; /* Light grey header */
+        font-weight: 600; position: sticky; top: 0; z-index: 10;
+        border-bottom: 2px solid #d1d5da;
     }
     
     /* Row Number Column */
     .metrics-table th:first-child, .metrics-table td:first-child {
-        width: 50px; text-align: center;
-        background-color: #f9fafb !important;
-        font-weight: bold;
+        width: 60px !important; text-align: center !important;
+        background-color: #f0f0f0 !important;
     }
-    
-    /* Plot container */
+
+    /* Plot Container */
     .gradio-container .plot-container { width: 100% !important; }
     """