changes to font color

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import pandas as pd
 import json
 import os
+from gradio.themes.utils import colors
 
 # Load external CSS from the file "styles.css"
 try:
@@ -25,6 +26,53 @@ div.gradio-container [class*="block"] .search-panel {
 """
 custom_css += additional_css
 
+# Create a custom theme with green for our panels
+class CustomTheme(gr.themes.Base):
+    def __init__(self):
+        super().__init__(
+            primary_hue=colors.red,
+            secondary_hue=colors.green,
+            neutral_hue=colors.gray,
+            text_size=gr.themes.sizes.text_lg
+        )
+        # Set up theme-level CSS variables
+        self.block_background_fill = "transparent"
+        self.block_border_width = "0px"
+        self.block_shadow = "none"
+        # Set color variables for all panel backgrounds
+        self.background_fill_secondary = "green"  # Used for panels
+
+# Add additional CSS for the new styles
+custom_css += """
+/* Override Gradio theme variables */
+:root {
+    --block-background-fill: transparent !important;
+    --background-fill-primary: transparent !important;
+    --background-fill-secondary: transparent !important;
+}
+
+/* Target Gradio's internal structure directly */
+.dark .block, .dark .gradio-container, .gradio-container .dark {
+    color-scheme: dark;
+}
+
+.block.block.block, 
+[id="checkbox-panel"],
+[id="search-panel"],
+[class*="block"] [class*="checkbox-panel"],
+[class*="block"] [class*="search-panel"] {
+    background-color: green !important;
+}
+
+/* Force all child elements to be transparent */
+[id="checkbox-panel"] *, 
+[id="search-panel"] *,
+.checkbox-panel *, 
+.search-panel * {
+    background-color: transparent !important;
+}
+"""
+
 def strip_timestamp(name):
     """Remove the timestamp portion from the model name."""
     parts = name.split('-')
@@ -314,7 +362,10 @@ def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail,
         {html_table}
         """
 
-with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
+# Create our custom theme instance
+custom_theme = CustomTheme()
+
+with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo:
     gr.Markdown("# 🏆 TD-EVAL Model Evaluation Leaderboard")
     gr.HTML('<div class="subtitle">This leaderboard displays aggregated model performance across multiple evaluation metrics.</div>')
     
@@ -327,26 +378,50 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
         var checkboxPanels = document.querySelectorAll('.checkbox-panel');
         for (var i = 0; i < checkboxPanels.length; i++) {
             checkboxPanels[i].style.backgroundColor = 'green';
+            
+            // Find ALL child elements and make their backgrounds transparent
+            var children = checkboxPanels[i].querySelectorAll('*');
+            for (var j = 0; j < children.length; j++) {
+                children[j].style.backgroundColor = 'transparent';
+            }
         }
         
         // Fix search panel
         var searchPanels = document.querySelectorAll('.search-panel');
         for (var i = 0; i < searchPanels.length; i++) {
             searchPanels[i].style.backgroundColor = 'green';
+            
+            // Find ALL child elements and make their backgrounds transparent
+            var children = searchPanels[i].querySelectorAll('*');
+            for (var j = 0; j < children.length; j++) {
+                children[j].style.backgroundColor = 'transparent';
+            }
         }
         
         // Also try to find parent blocks and set their background
-        checkboxPanels.forEach(function(panel) {
-            var parent = panel.closest('.block');
-            if (parent) {
-                parent.style.backgroundColor = 'green';
+        var blocks = document.querySelectorAll('.block');
+        blocks.forEach(function(block) {
+            if (block.querySelector('.checkbox-panel') || block.classList.contains('checkbox-panel')) {
+                block.style.backgroundColor = 'green';
+                
+                // Make all direct children transparent
+                var children = block.children;
+                for (var j = 0; j < children.length; j++) {
+                    if (!children[j].classList.contains('checkbox-panel')) {
+                        children[j].style.backgroundColor = 'transparent';
+                    }
+                }
             }
-        });
-        
-        searchPanels.forEach(function(panel) {
-            var parent = panel.closest('.block');
-            if (parent) {
-                parent.style.backgroundColor = 'green';
+            if (block.querySelector('.search-panel') || block.classList.contains('search-panel')) {
+                block.style.backgroundColor = 'green';
+                
+                // Make all direct children transparent
+                var children = block.children;
+                for (var j = 0; j < children.length; j++) {
+                    if (!children[j].classList.contains('search-panel')) {
+                        children[j].style.backgroundColor = 'transparent';
+                    }
+                }
             }
         });
     }
@@ -372,11 +447,19 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
       </div>
     ''')
     
+    # Add a direct HTML wrapper with inline style for the checkboxes
+    gr.HTML('<div style="background-color: green; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
+    
     with gr.Row(elem_classes="checkbox-panel", elem_id="checkbox-panel"):
         cb_mwoz        = gr.Checkbox(label="mwoz",        value=True)
         cb_tau_airline = gr.Checkbox(label="tau-airline", value=True)
         cb_tau_retail  = gr.Checkbox(label="tau-retail",  value=True)
-
+    
+    gr.HTML('</div>')
+    
+    # Add a direct HTML wrapper with inline style for the search
+    gr.HTML('<div style="background-color: green; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
+    
     with gr.Row(elem_classes="search-panel", elem_id="search-panel"):
         search_input = gr.Textbox(
             label="Search models",
@@ -384,6 +467,8 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard") as demo:
             elem_classes="search-input"
         )
     
+    gr.HTML('</div>')
+    
     hidden_sort_state = gr.State(value={"sort_by": "Average Score", "ascending": False})
     
     # Add sorting buttons

styles.css

@@ -190,32 +190,90 @@ input[type="text"]:focus {
    Checkbox Panel and Search Panel - High Specificity Rules
    ------------------------------------------------------------------ */
 
-/* Target all possible Gradio wrappers for checkbox-panel */
-div[class*="gradio-container"] div[class*="checkbox-panel"],
-div[class*="block"] div[class*="checkbox-panel"],
-div[class*="row"] div[class*="checkbox-panel"],
-.gradio-container .checkbox-panel,
-[data-testid*="row"] .checkbox-panel,
-.checkbox-panel {
+/* Global resets for all panel elements */
+.checkbox-panel *,
+.search-panel * {
+    background-color: transparent !important;
+}
+
+/* Target all possible Gradio wrappers for checkbox-panel with maximum specificity */
+body div.gradio-container div[class*="block"] div.checkbox-panel,
+body div.gradio-container [data-testid*="block"] div.checkbox-panel,
+body div.gradio-container [class*="row"] div.checkbox-panel, 
+div[class*="gradio-container"] div.checkbox-panel,
+div.gradio-container [class*="row"] div.checkbox-panel,
+div.checkbox-panel,
+.checkbox-panel,
+#checkbox-panel {
     background-color: green !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
 }
 
-/* Target all possible Gradio wrappers for search-panel */
-div[class*="gradio-container"] div[class*="search-panel"],
-div[class*="block"] div[class*="search-panel"],
-div[class*="row"] div[class*="search-panel"],
-.gradio-container .search-panel,
-[data-testid*="row"] .search-panel,
-.search-panel {
+/* Target all possible Gradio wrappers for search-panel with maximum specificity */
+body div.gradio-container div[class*="block"] div.search-panel,
+body div.gradio-container [data-testid*="block"] div.search-panel,
+body div.gradio-container [class*="row"] div.search-panel,
+div[class*="gradio-container"] div.search-panel,
+div.gradio-container [class*="row"] div.search-panel,
+div.search-panel,
+.search-panel,
+#search-panel {
     background-color: green !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
 }
 
+/* Target gradio blocks that contain our panels */
+div[class*="block"] div.checkbox-panel,
+div.checkbox-panel[class*="block"],
+div[class*="block"].checkbox-panel,
+div[class*="block"] div.search-panel,
+div.search-panel[class*="block"],
+div[class*="block"].search-panel {
+    background-color: green !important;
+}
+
+/* Target the gradio block wrapper directly */
+div[class*="block"][id*="checkbox-panel"],
+div[class*="block"][id*="search-panel"] {
+    background-color: green !important;
+}
+
+/* Target any div inside these panels to ensure children are transparent */
+.checkbox-panel div,
+.search-panel div {
+    background-color: transparent !important;
+}
+
+/* Force all internal container elements to be transparent */
+.checkbox-panel [class*="container"],
+.search-panel [class*="container"],
+.checkbox-panel [class*="wrap"],
+.search-panel [class*="wrap"],
+.checkbox-panel [class*="form"],
+.search-panel [class*="form"] {
+    background-color: transparent !important;
+}
+
+/* Additional style overrides for specific Gradio elements */
+.checkbox-panel .form,
+.checkbox-panel .form div,
+.checkbox-panel .block,
+.checkbox-panel .block div,
+.checkbox-panel .container,
+.checkbox-panel .container div,
+.search-panel .form,
+.search-panel .form div,
+.search-panel .block,
+.search-panel .block div,
+.search-panel .container,
+.search-panel .container div {
+    background-color: transparent !important;
+}
+
 /* ------------------------------------------------------------------
    Override any Gradio-specific styles that might be interfering
    ------------------------------------------------------------------ */