changes to font color

app.py

@@ -390,6 +390,31 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
                 labels.forEach(function(label) {
                     label.style.color = '#000000';
                 });
+                
+                // Apply custom styling for the checkbox to show orange checkmark
+                if (checkbox.checked) {
+                    checkbox.style.position = 'relative';
+                    checkbox.style.appearance = 'none';
+                    checkbox.style.backgroundColor = '#F0F0F0';
+                    checkbox.style.border = '1px solid #CCCCCC';
+                    checkbox.style.borderRadius = '3px';
+                    
+                    // Create or update the checkmark element
+                    var checkmark = checkbox.querySelector('.orange-checkmark');
+                    if (!checkmark) {
+                        checkmark = document.createElement('span');
+                        checkmark.className = 'orange-checkmark';
+                        checkmark.style.position = 'absolute';
+                        checkmark.style.left = '50%';
+                        checkmark.style.top = '50%';
+                        checkmark.style.transform = 'translate(-50%, -50%)';
+                        checkmark.style.color = '#c34700';
+                        checkmark.style.fontSize = '14px';
+                        checkmark.style.fontWeight = 'bold';
+                        checkmark.innerText = '✓';
+                        checkbox.appendChild(checkmark);
+                    }
+                }
             });
         }
         

styles.css

@@ -105,7 +105,7 @@ th, td {
    Buttons
    ------------------------------------------------------------------ */
 button {
-    background-color: #E0E0E0;   
+    background-color: #c34700b6;   
     color: #000000;
     border: none;
     padding: 8px 12px;
@@ -116,11 +116,36 @@ button {
 }
 
 button:hover {
-    background-color: #C0C0C0;
+    background-color: #c34800;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
+/* Style the checkbox to have an orange checkmark */
+input[type="checkbox"] {
+    accent-color: #F0F0F0;
+}
+
+/* Create a custom appearance for checked checkboxes */
+input[type="checkbox"]:checked {
+    position: relative;
+    appearance: none;
+    background-color: #F0F0F0;
+    border: 1px solid #CCCCCC;
+    border-radius: 3px;
+}
+
+input[type="checkbox"]:checked::before {
+    content: '✓';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #c34700; /* Orange color for the checkmark */
+    font-size: 14px;
+    font-weight: bold;
+}
+
 /* ------------------------------------------------------------------
    Sort‐info Banner
    ------------------------------------------------------------------ */