changes to font color

app.py

@@ -60,6 +60,34 @@ custom_css += """
 }
 """
 
+# CSS for the page
+css = """
+/* Additional style to ensure text color in textareas is black */
+textarea, input, textarea[data-testid="textbox"] {
+    color: #000000 !important;
+}
+
+/* Fix for block labels in gradio */
+span[data-testid="block-info"] {
+    color: #000000 !important;
+    background-color: transparent !important;
+}
+
+/* Additional style to ensure text color in textareas and inputs is black */
+textarea, input, textarea[data-testid="textbox"] {
+    color: #000000 !important;
+}
+
+/* Force black text color for search textbox */
+.search-panel textarea,
+textarea.scroll-hide,
+textarea.svelte-173056l,
+textarea[data-testid="textbox"] {
+    color: #000000 !important;
+    caret-color: #000000 !important;
+}
+"""
+
 def strip_timestamp(name):
     """Remove the timestamp portion from the model name."""
     parts = name.split('-')
@@ -354,7 +382,7 @@ def update_leaderboard(selected_mwoz, selected_tau_airline, selected_tau_retail,
 # Create our custom theme instance
 custom_theme = CustomTheme()
 
-with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo:
+with gr.Blocks(css=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>')
     
@@ -582,5 +610,72 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
 
     demo.load(fn=update_leaderboard, inputs=[cb_mwoz, cb_tau_airline, cb_tau_retail, hidden_sort_state, search_input], outputs=leaderboard_display)
 
+# JavaScript to change panel backgrounds
+searchpanel_js = """
+function applyStyles() {
+    // Add a style tag to the head to ensure textarea text color
+    var styleElement = document.createElement('style');
+    styleElement.textContent = `
+        textarea, 
+        textarea[data-testid="textbox"], 
+        textarea.scroll-hide, 
+        textarea.svelte-173056l {
+            color: #000000 !important;
+            caret-color: #000000 !important;
+        }
+    `;
+    document.head.appendChild(styleElement);
+
+    // Wait for the DOM to be fully loaded
+    var searchPanel = document.querySelector('.search-panel');
+    if (searchPanel) {
+        searchPanel.style.backgroundColor = '#F0F0F0';
+        searchPanel.style.padding = '10px';
+        searchPanel.style.borderRadius = '8px';
+        searchPanel.style.marginBottom = '20px';
+        
+        // Target input elements in search panel
+        var searchInput = searchPanel.querySelector('input[type="text"]');
+        if (searchInput) {
+            var parent = searchInput.parentElement;
+            if (parent) parent.style.backgroundColor = 'transparent';
+            searchInput.style.backgroundColor = '#FFFFFF';
+            // Ensure the border is visible and matches text color
+            searchInput.style.border = '2px solid #000000';
+            searchInput.style.color = '#000000';
+        }
+        
+        // Also target textarea elements which are often used for input
+        var searchTextarea = searchPanel.querySelector('textarea[data-testid="textbox"]');
+        if (searchTextarea) {
+            var parent = searchTextarea.parentElement;
+            if (parent) parent.style.backgroundColor = 'transparent';
+            searchTextarea.style.backgroundColor = '#FFFFFF';
+            searchTextarea.style.border = '2px solid #000000';
+            searchTextarea.style.color = '#000000';
+            
+            // Force the color to remain black through inline style with !important
+            searchTextarea.setAttribute('style', 'color: #000000 !important; background-color: #FFFFFF !important; border: 2px solid #000000 !important;');
+        }
+        
+        // Make any span labels black for readability
+        var spans = searchPanel.querySelectorAll('span');
+        spans.forEach(function(span) {
+            span.style.color = '#000000';
+        });
+    }
+    
+    // ... rest of the function remains the same ...
+}
+
+// Call the function when page loads
+document.addEventListener('DOMContentLoaded', applyStyles);
+// Also call it after a short delay to catch elements that might load later
+setTimeout(applyStyles, 500);
+// And set an interval to catch any dynamically loaded elements
+setInterval(applyStyles, 2000);
+"""
+
 if __name__ == "__main__":
+    demo.load(js=searchpanel_js)
     demo.launch()

styles.css

@@ -194,6 +194,19 @@ input[type="text"]:focus {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
+/* Target the textarea used for search input */
+textarea[data-testid="textbox"],
+.scroll-hide,
+.svelte-173056l {
+    color: #000000 !important;
+    background-color: #FFFFFF !important;
+}
+
+/* Apply the style when typing and focused */
+textarea[data-testid="textbox"]:focus {
+    color: #000000 !important;
+}
+
 /* ------------------------------------------------------------------
    No‐results Message
    ------------------------------------------------------------------ */
@@ -262,7 +275,8 @@ div[class*="block"] {
 }
 
 /* Make the textbox border visible with the same color as the text */
-.search-panel input[type="text"] {
+.search-panel input[type="text"],
+.search-panel textarea[data-testid="textbox"] {
     border: 2px solid #000000 !important;
     background-color: #FFFFFF !important;
     color: #000000 !important;
@@ -270,7 +284,9 @@ div[class*="block"] {
 
 /* Ensure input text and placeholder have consistent styling */
 .search-panel input[type="text"],
-.search-panel input[type="text"]::placeholder {
+.search-panel input[type="text"]::placeholder,
+.search-panel textarea[data-testid="textbox"],
+.search-panel textarea[data-testid="textbox"]::placeholder {
     color: rgba(0,0,0,0.7) !important;
 }
 
@@ -291,7 +307,10 @@ div[id="search-panel"] label,
 /* Make sure the input text is black when user types */
 #search-panel input[type="text"],
 div[id="search-panel"] input[type="text"],
-.search-panel input[type="text"] {
+.search-panel input[type="text"],
+#search-panel textarea,
+div[id="search-panel"] textarea,
+.search-panel textarea {
     color: #000000 !important;
 }
 
@@ -330,4 +349,20 @@ span.svelte-1gfkn6j,
 #search-panel span,
 div[id="search-panel"] span {
     color: #000000 !important;
+}
+
+/* Target the specific search input by ID */
+#search-input,
+#search-input label,
+#search-input span,
+[id="search-input"] + div label,
+[id="search-input"] ~ div span,
+[id="search-input"] + label {
+    color: #000000 !important;
+}
+
+/* Ultra-specific selector targeting the label span */
+div[id="search-panel"] span[data-testid="block-info"] {
+    color: #000000 !important;
+    font-weight: bold !important;
 }