changes to font color

app.py

@@ -35,41 +35,27 @@ class CustomTheme(gr.themes.Base):
             neutral_hue=colors.gray,
             text_size=gr.themes.sizes.text_lg
         )
-        # Set up theme-level CSS variables
-        self.block_background_fill = "transparent"
+        # Don't set any global background colors
         self.block_border_width = "0px"
         self.block_shadow = "none"
-        # Set color variables for all panel backgrounds
-        self.background_fill_secondary = "#27272A"  # Used for panels
 
-# Add additional CSS for the new styles
+# Add additional CSS for the new styles, being more specific
 custom_css += """
-/* Override Gradio theme variables */
-:root {
-    --block-background-fill: transparent !important;
-    --background-fill-primary: transparent !important;
-    --background-fill-secondary: transparent !important;
-    --panel-background-fill: #27272A !important;
-}
-
-/* Target Gradio's internal structure directly */
-.dark .block, .dark .gradio-container, .gradio-container .dark {
-    color-scheme: dark;
+/* Only override specific panels by ID */
+#checkbox-panel,
+#search-panel {
+    background-color: #27272A !important;
 }
 
-.block.block.block, 
-[id="checkbox-panel"],
-[id="search-panel"],
-[class*="block"] [class*="checkbox-panel"],
-[class*="block"] [class*="search-panel"] {
-    background-color: #27272A !important;
+/* Only affect immediate children of these specific panels */
+#checkbox-panel > *,
+#search-panel > * {
+    background-color: transparent !important;
 }
 
-/* Force all child elements to be transparent */
-[id="checkbox-panel"] *, 
-[id="search-panel"] *,
-.checkbox-panel *, 
-.search-panel * {
+/* Target checkbox inputs specifically */
+#checkbox-panel input[type="checkbox"],
+#search-panel input[type="text"] {
     background-color: transparent !important;
 }
 """
@@ -375,64 +361,38 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     <script>
     // Function to fix background colors
     function fixBackgrounds() {
-        // Fix checkbox panel
-        var checkboxPanels = document.querySelectorAll('.checkbox-panel');
-        for (var i = 0; i < checkboxPanels.length; i++) {
-            checkboxPanels[i].style.backgroundColor = '#27272A';
+        // Only fix specific panels by ID
+        var checkboxPanel = document.getElementById('checkbox-panel');
+        if (checkboxPanel) {
+            checkboxPanel.style.backgroundColor = '#27272A';
             
-            // 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';
-            }
+            // Only make checkboxes and their direct containers transparent
+            var checkboxes = checkboxPanel.querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(function(checkbox) {
+                var parent = checkbox.parentElement;
+                if (parent) parent.style.backgroundColor = 'transparent';
+                checkbox.style.backgroundColor = 'transparent';
+            });
         }
         
-        // Fix search panel
-        var searchPanels = document.querySelectorAll('.search-panel');
-        for (var i = 0; i < searchPanels.length; i++) {
-            searchPanels[i].style.backgroundColor = '#27272A';
+        var searchPanel = document.getElementById('search-panel');
+        if (searchPanel) {
+            searchPanel.style.backgroundColor = '#27272A';
             
-            // 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';
+            // Only make search input and its direct container transparent
+            var searchInput = searchPanel.querySelector('input[type="text"]');
+            if (searchInput) {
+                var parent = searchInput.parentElement;
+                if (parent) parent.style.backgroundColor = 'transparent';
+                searchInput.style.backgroundColor = 'transparent';
             }
         }
-        
-        // Also try to find parent blocks and set their background
-        var blocks = document.querySelectorAll('.block');
-        blocks.forEach(function(block) {
-            if (block.querySelector('.checkbox-panel') || block.classList.contains('checkbox-panel')) {
-                block.style.backgroundColor = '#27272A';
-                
-                // 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';
-                    }
-                }
-            }
-            if (block.querySelector('.search-panel') || block.classList.contains('search-panel')) {
-                block.style.backgroundColor = '#27272A';
-                
-                // 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';
-                    }
-                }
-            }
-        });
     }
     
-    // Run on page load and every second for 5 seconds to catch any delayed rendering
+    // Run on page load and every second for 3 seconds to catch any delayed rendering
     setTimeout(fixBackgrounds, 500);
     setTimeout(fixBackgrounds, 1000);
     setTimeout(fixBackgrounds, 2000);
-    setTimeout(fixBackgrounds, 3000);
-    setTimeout(fixBackgrounds, 4000);
     </script>
     """)
     
@@ -449,7 +409,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     ''')
     
     # Add a direct HTML wrapper with inline style for the checkboxes
-    gr.HTML('<div style="background-color: #27272A; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
+    gr.HTML('<div id="checkbox-wrapper" style="background-color: #27272A; 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)
@@ -459,7 +419,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     gr.HTML('</div>')
     
     # Add a direct HTML wrapper with inline style for the search
-    gr.HTML('<div style="background-color: #27272A; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
+    gr.HTML('<div id="search-wrapper" style="background-color: #27272A; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
     
     with gr.Row(elem_classes="search-panel", elem_id="search-panel"):
         search_input = gr.Textbox(

styles.css

@@ -190,135 +190,61 @@ input[type="text"]:focus {
    Checkbox Panel and Search Panel - High Specificity Rules
    ------------------------------------------------------------------ */
 
-/* Global resets for all panel elements */
-.checkbox-panel *,
-.search-panel * {
-    background-color: transparent !important;
+/* Reset the global styles to ensure we're only affecting what we want */
+html body .gradio-container {
+    /* Default background stays as is */
 }
 
-/* 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,
+/* Only target the specific checkbox and search panels */
+#checkbox-panel, 
 div.checkbox-panel,
-.checkbox-panel,
-#checkbox-panel {
+div[id="checkbox-panel"],
+.gradio-container div[id="checkbox-panel"],
+.gradio-container .checkbox-panel {
     background-color: #27272A !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
 }
 
-/* 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,
+#search-panel,
 div.search-panel,
-.search-panel,
-#search-panel {
+div[id="search-panel"],
+.gradio-container div[id="search-panel"],
+.gradio-container .search-panel {
     background-color: #27272A !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: #27272A !important;
-}
-
-/* Target the gradio block wrapper directly */
-div[class*="block"][id*="checkbox-panel"],
-div[class*="block"][id*="search-panel"] {
-    background-color: green !important;
+/* Make inner components transparent to let background show through */
+#checkbox-panel *, .checkbox-panel * {
+    background-color: transparent !important;
 }
 
-/* Target any div inside these panels to ensure children are transparent */
-.checkbox-panel div,
-.search-panel div {
+#search-panel *, .search-panel * {
     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;
+/* Override other styles that might be affecting the color */
+div[class*="block"] {
+    background-color: initial; /* Reset to default */
 }
 
-/* Additional style overrides for specific Gradio elements */
+/* Only make transparent what we need to be transparent */
 .checkbox-panel .form,
-.checkbox-panel .form div,
 .checkbox-panel .block,
-.checkbox-panel .block div,
 .checkbox-panel .container,
-.checkbox-panel .container div,
+.checkbox-panel input[type="checkbox"],
 .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
-   ------------------------------------------------------------------ */
-.gradio-container [class*="block"] {
-    background-color: inherit;
-}
-
-/* Force all checkbox-panel descendants to have white text */
-.checkbox-panel,
-.checkbox-panel *,
-.checkbox-panel label,
-.checkbox-panel input,
-.checkbox-panel .label-wrap,
-.checkbox-panel .label-wrap span {
-    color: #FFFFFF !important;
-}
-
-/* Force all search-panel descendants to have white text */
-.search-panel,
-.search-panel *,
-.search-panel label,
-.search-panel input,
-.search-panel .label-wrap,
-.search-panel .label-wrap span {
-    color: #FFFFFF !important;
-}
-
-/* Make the form elements inside transparent */
-.search-panel input[type="text"],
-.search-panel .gr-form-group,
-.search-panel .block,
-.checkbox-panel .checkbox-container,
-.checkbox-panel .block {
-    background-color: transparent !important;
-}
-
-/* Make the textbox border white */
 .search-panel input[type="text"] {
-    border: 1px solid #FFFFFF !important;
+    background-color: transparent !important;
 }
 
-/* Lighten the placeholder text */
-.search-panel input[type="text"]::placeholder {
-    color: rgba(255,255,255,0.7) !important;
-}
+/* Remove overly broad selectors affecting too many elements */
 
 /* Root level variable override */
 :root {