Update app.py

app.py

@@ -401,95 +401,135 @@ def parse_and_generate_plot(df_data: list, indices_str: str):
 
 def build_app() -> gr.Blocks:
     row_css = """
-    /* General Body */
-    body { background-color: #f5f7fa !important; }
-    .gradio-container { max-width: 100% !important; padding: 20px !important; background-color: #f5f7fa !important; }
+    /* ============================================================ */
+    /* GLOBAL RESET: Force Light Mode Colors Everywhere */
+    /* ============================================================ */
     
-    /* Headers and Text */
-    .gradio-container h1 { color: #24292e !important; font-weight: 700; margin-bottom: 24px; }
-    .gradio-container h3 { color: #24292e !important; font-weight: 600; margin-bottom: 16px; }
-    .gradio-container label, .gradio-container p, .gradio-container span, .gradio-container div { color: #24292e !important; }
+    /* 1. Main Backgrounds */
+    body, .gradio-container { 
+        background-color: #f5f7fa !important; 
+    }
+
+    /* 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 div,
+    .gradio-container .prose,
+    .gradio-container .prose * {
+        color: #24292e !important;
+    }
+
+    /* 3. Force Inputs (Search box) to be White with Dark Text */
+    .gradio-container input, 
+    .gradio-container textarea, 
+    .gradio-container select {
+        background-color: #ffffff !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 */
+    }
     
-    /* Input Fields & Blocks */
-    .gradio-container .block, .gradio-container .form, .gradio-container .gr-box, .gradio-container .gr-input {
-        background-color: white !important; border-color: #e1e4e8 !important;
+    /* The individual checkboxes */
+    .gradio-container label.svelte-1b8605, 
+    .gradio-container label {
+        background-color: white !important;
+        border-color: #e1e4e8 !important;
     }
-    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
+    
+    /* Force checkbox text to be visible */
+    .gradio-container label span {
+        color: #24292e !important;
+    }
+
+    /* ============================================================ */
+    /* COMPONENT SPECIFIC STYLING */
+    /* ============================================================ */
 
-    /* Search Box Styling */
+    /* 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;
     }
-    .search-box .block { background: transparent !important; border: none !important; padding: 0 !important; }
-    .search-box label span { color: #24292e !important; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
-    .search-box input.scroll-hide {
-        background-color: white !important; color: #24292e !important;
-        border: 1.5px solid #e1e4e8 !important; border-radius: 4px !important;
-        padding: 10px !important; box-shadow: none !important;
-    }
-    .search-box input.scroll-hide:focus { border-color: #0366d6 !important; outline: none !important; }
-
-    /* Filter Section Styling */
-    .filter-section {
-        background: white !important; padding: 0 !important; border-radius: 6px;
-        border: 2px solid #e1e4e8 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    }
-    .filter-section .wrap, .filter-section .block, .filter-section .container, .filter-section .group { background: transparent !important; }
-    .filter-section .wrap { padding: 20px !important; }
 
-    /* ACCORDION STYLING */
-    .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);
+    /* 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);
     }
-    .info-section { padding: 16px; background: white !important; }
-    .info-section a { color: #0366d6 !important; }
-
-    /* --- FIX FOR DARK MODE / NIGHT MODE --- */
-    /* This forces the accordion button text and icons to stay dark */
-    .gradio-container .accordion button, 
+    
+    /* Accordion Header - Fix for Day/Night button colors */
+    .gradio-container .accordion button,
     .gradio-container .accordion span {
+        background-color: white !important;
         color: #24292e !important;
     }
-    /* This forces the expand arrow to be dark */
     .gradio-container .accordion svg {
-        fill: #24292e !important;
-        color: #24292e !important;
+        fill: #24292e !important; /* Arrows */
     }
-    /* --------------------------------------- */
 
-    /* Table Container & Plot */
+    /* Info Section (The invisible text area) */
+    .info-section { padding: 16px; background: white !important; }
+    
+    /* 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; }
+
+    /* ============================================================ */
+    /* 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 .plot-container { width: 100% !important; }
 
-    /* Table Internal Styling */
-    .gradio-container table.metrics-table { border-collapse: collapse; width: 100%; background: white; }
-    .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 { 
+        border-collapse: collapse; width: 100%; background: white !important; 
+    }
+    
+    .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; 
+        background-color: white !important;
+        color: #24292e !important;
     }
+    
     .gradio-container table.metrics-table th {
-        background: linear-gradient(to bottom, #fafbfc, #f6f8fa);
+        background: #f6f8fa !important; /* Light grey header */
         font-weight: 600; 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 a { color: #0366d6 !important; text-decoration: none; }
-    .gradio-container table.metrics-table a:hover { text-decoration: underline; }
     
-    /* Row number column styling */
+    /* Row Number Column */
     .metrics-table th:first-child, .metrics-table td:first-child {
         width: 60px !important; text-align: center !important;
-        padding: 8px !important; font-weight: 600 !important;
         background-color: #f0f0f0 !important;
     }
+
+    /* Plot Container */
+    .gradio-container .plot-container { width: 100% !important; }
     """
 
     with gr.Blocks(title="MoE-CAP Dashboard", css=row_css, theme=gr.themes.Default()) as demo: