Update app.py

app.py

@@ -150,8 +150,7 @@ def get_zip_data_link():
     href = (
         f'<a href="data:application/zip;base64,{b64}" '
         'download="data.zip" '
-        'style="text-decoration: none; font-weight: bold; font-size: 1.1em; '
-        'color: inherit; font-family: \'Inter\', sans-serif;">Download Data</a>'
+        'style="text-decoration: none; font-weight: bold; font-size: 1.1em; color: inherit; font-family: \'Inter\', sans-serif;">Download Data</a>'
     )
     return href
 
@@ -278,11 +277,11 @@ global_header_html = f"""
 ### CUSTOM CSS for Dark Mode and Mobile Responsiveness ###
 custom_css = """
 /* Table and layout */
-.gr-dataframe table {
+.data-table {
     table-layout: fixed;
     width: 100%;
 }
-.gr-dataframe th, .gr-dataframe td {
+.data-table th, .data-table td {
     max-width: 150px;
     white-space: nowrap;
     overflow: hidden;
@@ -294,21 +293,29 @@ custom_css = """
     margin-right: auto;
 }
 
+/* Force header links to be black in light mode */
+.header-link {
+    color: black !important;
+}
+
 /* Dark mode styles */
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #121212;
         color: #e0e0e0;
     }
-    .gr-dataframe th {
+    .data-table thead {
         background-color: #333;
+    }
+    .data-table th {
         color: #e0e0e0;
     }
-    .gr-dataframe td {
+    .data-table td {
         color: #e0e0e0;
     }
-    a {
-        color: #bb86fc !important;
+    /* Non-header links in dark mode */
+    a:not(.header-link) {
+        color: #3fa45bff !important;
     }
 }
 
@@ -321,19 +328,18 @@ custom_css = """
 """
 
 ### GRADIO INTERFACE ###
-
 demo = gr.Blocks(css=custom_css)
 
 with demo:
     # --- Header Links ---
     gr.HTML(f"""
     <div style="display: flex; justify-content: space-evenly; align-items: center; margin-bottom: 20px;">
-        <a href="https://huggingface.co/spaces/AIEnergyScore/submission_portal" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Submission Portal</a>
-        <a href="https://huggingface.co/spaces/AIEnergyScore/Label" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Label Generator</a>
-        <a href="https://huggingface.github.io/AIEnergyScore/#faq" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">FAQ</a>
-        <a href="https://huggingface.github.io/AIEnergyScore/#documentation" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Documentation</a>
+        <a class="header-link" href="https://huggingface.co/spaces/AIEnergyScore/submission_portal" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Submission Portal</a>
+        <a class="header-link" href="https://huggingface.co/spaces/AIEnergyScore/Label" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Label Generator</a>
+        <a class="header-link" href="https://huggingface.github.io/AIEnergyScore/#faq" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">FAQ</a>
+        <a class="header-link" href="https://huggingface.github.io/AIEnergyScore/#documentation" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Documentation</a>
         {get_zip_data_link()}
-        <a href="https://huggingface.co/spaces/AIEnergyScore/README/discussions" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Community</a>
+        <a class="header-link" href="https://huggingface.co/spaces/AIEnergyScore/README/discussions" style="text-decoration: none; font-weight: bold; font-size: 1.1em;">Community</a>
     </div>
     """)