Final 5.0.1

src/app.py

@@ -351,10 +351,10 @@ def create_interface():
         background-color: #ffffff !important;
     }
     
-    /* Fix all text elements */
-    .gradio-container *, 
-    .gradio-container *::before, 
-    .gradio-container *::after {
+    /* Fix all text elements EXCEPT buttons */
+    .gradio-container *:not(button):not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary), 
+    .gradio-container *:not(button):not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary)::before, 
+    .gradio-container *:not(button):not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary)::after {
         color: #333 !important;
     }
     
@@ -371,8 +371,8 @@ def create_interface():
     
     /* Paragraphs and text content */
     .gradio-container p,
-    .gradio-container div,
-    .gradio-container span,
+    .gradio-container div:not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary),
+    .gradio-container span:not(.gr-button):not(.gr-button-primary):not(.gr-button-secondary),
     .gradio-container label {
         color: #333 !important;
     }
@@ -385,20 +385,56 @@ def create_interface():
         border: 1px solid #ccc !important;
     }
     
-    /* Buttons */
-    .gradio-container .gr-button-primary {
+    /* Buttons - High specificity to override universal rules */
+    .gradio-container button,
+    .gradio-container .gr-button,
+    .gradio-container .gr-button-primary,
+    .gradio-container .gr-button-secondary,
+    .gradio-container button *,
+    .gradio-container .gr-button *,
+    .gradio-container .gr-button-primary *,
+    .gradio-container .gr-button-secondary * {
+        color: white !important;
+        font-weight: 500 !important;
+        text-shadow: none !important;
+    }
+    
+    .gradio-container .gr-button-primary,
+    .gradio-container button[variant="primary"] {
         background: #007bff !important;
         color: white !important;
         border: none !important;
+        padding: 8px 16px !important;
+        border-radius: 6px !important;
     }
     
-    .gradio-container .gr-button-secondary {
+    .gradio-container .gr-button-secondary,
+    .gradio-container button[variant="secondary"] {
         background: #6c757d !important;
         color: white !important;
         border: none !important;
+        padding: 8px 16px !important;
+        border-radius: 6px !important;
+    }
+    
+    .gradio-container button:not([variant]) {
+        background: #28a745 !important;
+        color: white !important;
+        border: none !important;
+        padding: 8px 16px !important;
+        border-radius: 6px !important;
+    }
+    
+    /* Button hover states */
+    .gradio-container button:hover,
+    .gradio-container .gr-button:hover,
+    .gradio-container .gr-button-primary:hover {
+        background: #0056b3 !important;
+        color: white !important;
     }
     
-    .gradio-container button {
+    .gradio-container .gr-button-secondary:hover {
+        background: #545b62 !important;
         color: white !important;
     }
     
@@ -456,7 +492,7 @@ def create_interface():
     .unit4-section h2,
     .unit4-section h3,
     .unit4-section p,
-    .unit4-section div {
+    .unit4-section div:not(button):not(.gr-button) {
         color: #1565c0 !important;
     }
     
@@ -484,20 +520,6 @@ def create_interface():
         font-weight: 600 !important;
     }
     
-    /* Override any white text */
-    .gradio-container [style*="color: white"],
-    .gradio-container [style*="color: #fff"],
-    .gradio-container [style*="color: #ffffff"] {
-        color: #333 !important;
-    }
-    
-    /* Ensure buttons keep white text */
-    .gradio-container button,
-    .gradio-container .gr-button-primary,
-    .gradio-container .gr-button-secondary {
-        color: white !important;
-    }
-    
     /* Examples and other interactive elements */
     .gradio-container .gr-examples,
     .gradio-container .gr-file,
@@ -521,6 +543,11 @@ def create_interface():
         color: #333 !important;
         background-color: #ffffff !important;
     }
+    
+    /* Override any problematic inline styles but preserve button colors */
+    .gradio-container [style*="color: white"]:not(button):not(.gr-button) {
+        color: #333 !important;
+    }
     """
     
     with gr.Blocks(css=css, title="GAIA Agent System", theme=gr.themes.Soft()) as interface: