Fix text visibility issues with explicit color declarations

shared_styling.py

@@ -42,6 +42,7 @@ def get_base_css():
     /* Main background styling */
     .stApp {{
         background: linear-gradient(135deg, {COLORS['background']} 0%, {COLORS['figure_background']} 100%);
+        color: {COLORS['text_primary']} !important;
     }}
     
     .main .block-container {{
@@ -51,6 +52,38 @@ def get_base_css():
         border-radius: 15px;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
         margin-top: 1rem;
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    /* Explicit text color styling for all elements */
+    .stApp, .stApp * {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    /* Main content text */
+    .main .block-container p {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .main .block-container div {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .main .block-container span {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    /* Streamlit markdown text */
+    .stMarkdown {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .stMarkdown p {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .stMarkdown div {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     /* Sidebar styling */
@@ -67,16 +100,23 @@ def get_base_css():
     section[data-testid="stSidebar"] {{
         background: linear-gradient(135deg, {COLORS['sidebar_bg_start']} 0%, {COLORS['sidebar_bg_end']} 100%);
         border-right: 2px solid {COLORS['border_light']};
+        color: {COLORS['text_primary']} !important;
     }}
     
     section[data-testid="stSidebar"] > div {{
         background: linear-gradient(135deg, {COLORS['sidebar_bg_start']} 0%, {COLORS['sidebar_bg_end']} 100%);
         padding-top: 2rem;
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    /* Sidebar text elements */
+    section[data-testid="stSidebar"] * {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     /* Sidebar title styling */
     section[data-testid="stSidebar"] h1 {{
-        color: {COLORS['text_primary']};
+        color: {COLORS['text_primary']} !important;
         border-bottom: 2px solid {COLORS['border_medium']};
         padding-bottom: 0.5rem;
         margin-bottom: 1rem;
@@ -88,7 +128,7 @@ def get_base_css():
         margin-top: 1rem;
         margin-bottom: 1rem;
         background: linear-gradient(45deg, {COLORS['button_bg_start']}, {COLORS['button_bg_end']});
-        color: white;
+        color: white !important;
         border: none;
         border-radius: 10px;
         padding: 0.75rem 1rem;
@@ -101,6 +141,7 @@ def get_base_css():
         background: linear-gradient(45deg, {COLORS['button_hover_start']}, {COLORS['button_hover_end']});
         transform: translateY(-2px);
         box-shadow: 0 4px 15px rgba(107, 107, 107, 0.3);
+        color: white !important;
     }}
     
     /* Input styling */
@@ -108,12 +149,13 @@ def get_base_css():
         background-color: {COLORS['background']};
         border: 2px solid {COLORS['border_light']};
         border-radius: 8px;
-        color: {COLORS['text_primary']};
+        color: {COLORS['text_primary']} !important;
     }}
     
     .stTextInput>div>div>input:focus {{
         border-color: {COLORS['button_bg_start']};
         box-shadow: 0 0 0 2px rgba(107, 107, 107, 0.1);
+        color: {COLORS['text_primary']} !important;
     }}
     
     /* Selectbox and multiselect styling */
@@ -121,12 +163,14 @@ def get_base_css():
         background-color: {COLORS['background']};
         border: 2px solid {COLORS['border_light']};
         border-radius: 8px;
+        color: {COLORS['text_primary']} !important;
     }}
     
     .stMultiSelect>div>div>div {{
         background-color: {COLORS['background']};
         border: 2px solid {COLORS['border_light']};
         border-radius: 8px;
+        color: {COLORS['text_primary']} !important;
     }}
     
     /* Radio button styling */
@@ -134,12 +178,18 @@ def get_base_css():
         background-color: {COLORS['background']};
         border-radius: 8px;
         padding: 10px;
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .stRadio label {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     /* Sidebar content styling */
     .sidebar .sidebar-content {{
         padding-top: 1rem;
         background-color: {COLORS['sidebar_bg_start']};
+        color: {COLORS['text_primary']} !important;
     }}
     
     hr {{
@@ -150,27 +200,32 @@ def get_base_css():
     h1 {{
         padding-bottom: 1rem;
         border-bottom: 3px solid {COLORS['border_medium']};
-        color: {COLORS['text_primary']};
+        color: {COLORS['text_primary']} !important;
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
     }}
     
     h2 {{
         margin-top: 2rem;
         padding-bottom: 0.5rem;
-        color: {COLORS['text_secondary']};
+        color: {COLORS['text_secondary']} !important;
         font-weight: 600;
     }}
     
     h3 {{
         margin-top: 1.5rem;
-        color: {COLORS['text_tertiary']};
+        color: {COLORS['text_tertiary']} !important;
         font-weight: 600;
     }}
     
+    /* Ensure all text elements have proper color */
+    p, span, div, label, li, td, th {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
     /* Alert box styling */
     .auth-alert {{
         background: linear-gradient(135deg, {COLORS['alert_error_bg']} 0%, #FFCCCC 100%);
-        color: {COLORS['alert_error_text']};
+        color: {COLORS['alert_error_text']} !important;
         padding: 15px;
         border-radius: 10px;
         margin: 15px 0;
@@ -180,7 +235,7 @@ def get_base_css():
     
     .auth-info {{
         background: linear-gradient(135deg, {COLORS['alert_info_bg']} 0%, #CCE7FF 100%);
-        color: {COLORS['alert_info_text']};
+        color: {COLORS['alert_info_text']} !important;
         padding: 15px;
         border-radius: 10px;
         margin: 15px 0;
@@ -193,6 +248,7 @@ def get_base_css():
         background: linear-gradient(135deg, {COLORS['alert_info_bg']} 0%, #CCE7FF 100%);
         border: 1px solid {COLORS['text_secondary']};
         border-radius: 8px;
+        color: {COLORS['text_primary']} !important;
     }}
     
     .info-box {{
@@ -202,6 +258,7 @@ def get_base_css():
         border-radius: 10px;
         margin: 20px 0;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+        color: {COLORS['text_primary']} !important;
     }}
     
     .warning-box {{
@@ -211,6 +268,7 @@ def get_base_css():
         border-radius: 10px;
         margin: 20px 0;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+        color: {COLORS['text_primary']} !important;
     }}
     
     .success-box {{
@@ -220,6 +278,7 @@ def get_base_css():
         border-radius: 10px;
         margin: 20px 0;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+        color: {COLORS['text_primary']} !important;
     }}
     
     .centered {{
@@ -233,7 +292,7 @@ def get_base_css():
     .footer {{
         text-align: center;
         font-size: 0.8rem;
-        color: {COLORS['text_light']};
+        color: {COLORS['text_light']} !important;
         margin-top: 2rem;
         padding-top: 1rem;
         border-top: 1px solid {COLORS['border_light']};
@@ -255,6 +314,7 @@ def get_home_page_css():
         background: linear-gradient(135deg, {COLORS['background']} 0%, {COLORS['figure_background']} 100%);
         transition: all 0.3s ease;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+        color: {COLORS['text_primary']} !important;
     }}
     
     .nav-button:hover {{
@@ -262,13 +322,18 @@ def get_home_page_css():
         transform: translateY(-3px);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
         border-color: {COLORS['text_secondary']};
+        color: {COLORS['text_primary']} !important;
     }}
     
     .nav-button h3 {{
-        color: {COLORS['text_secondary']};
+        color: {COLORS['text_secondary']} !important;
         margin-bottom: 0.5rem;
     }}
     
+    .nav-button * {{
+        color: {COLORS['text_primary']} !important;
+    }}
+    
     /* Description boxes */
     .description-box {{
         text-align: center;
@@ -278,13 +343,18 @@ def get_home_page_css():
         margin-top: -10px;
         background: linear-gradient(135deg, {COLORS['background']} 0%, {COLORS['figure_background']} 100%);
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+        color: {COLORS['text_primary']} !important;
     }}
     
     .description-box p {{
-        color: {COLORS['text_secondary']};
+        color: {COLORS['text_secondary']} !important;
         margin: 0;
         font-weight: 500;
     }}
+    
+    .description-box * {{
+        color: {COLORS['text_secondary']} !important;
+    }}
     </style>
     """
 
@@ -299,11 +369,16 @@ def get_documentation_page_css():
         margin-bottom: 20px;
         border: 2px solid {COLORS['border_medium']};
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .gaussian-explanation-container * {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     .caption {{
         font-size: 0.85rem;
-        color: {COLORS['text_light']};
+        color: {COLORS['text_light']} !important;
         text-align: center;
         margin-top: 5px;
         font-style: italic;
@@ -316,11 +391,16 @@ def get_documentation_page_css():
         border: 2px solid {COLORS['border_medium']};
         margin: 10px 0;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .metric-card * {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     .step-number {{
         background: linear-gradient(45deg, {COLORS['button_bg_start']}, {COLORS['button_bg_end']});
-        color: white;
+        color: white !important;
         border-radius: 50%;
         width: 30px;
         height: 30px;
@@ -340,12 +420,17 @@ def get_documentation_page_css():
         border-left: 4px solid {COLORS['text_secondary']};
         margin: 10px 0;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .glossary-term * {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     .term-title {{
         font-size: 1.2rem;
         font-weight: bold;
-        color: {COLORS['text_secondary']};
+        color: {COLORS['text_secondary']} !important;
         margin-bottom: 8px;
     }}
     
@@ -356,6 +441,11 @@ def get_documentation_page_css():
         margin: 20px 0;
         border-left: 4px solid {COLORS['text_tertiary']};
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .term-category * {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     .formula {{
@@ -365,7 +455,7 @@ def get_documentation_page_css():
         font-family: monospace;
         margin: 5px 0;
         border: 1px solid {COLORS['border_light']};
-        color: {COLORS['text_primary']};
+        color: {COLORS['text_primary']} !important;
     }}
     </style>
     """
@@ -379,7 +469,7 @@ def get_tool_page_css():
         background-color: {COLORS['figure_background']};
         border: 2px solid {COLORS['border_medium']};
         border-radius: 8px;
-        color: {COLORS['text_primary']};
+        color: {COLORS['text_primary']} !important;
         font-weight: 600;
     }}
     
@@ -387,6 +477,11 @@ def get_tool_page_css():
         background-color: {COLORS['background']};
         border: 1px solid {COLORS['border_light']};
         border-radius: 0 0 8px 8px;
+        color: {COLORS['text_primary']} !important;
+    }}
+    
+    .streamlit-expanderContent * {{
+        color: {COLORS['text_primary']} !important;
     }}
     
     /* Tooltip styles */
@@ -394,12 +489,13 @@ def get_tool_page_css():
         position: relative;
         display: inline-block;
         width: 100%;
+        color: {COLORS['text_primary']} !important;
     }}
     
     .tooltip-content {{
         visibility: hidden;
         background-color: {COLORS['background']};
-        color: {COLORS['text_primary']};
+        color: {COLORS['text_primary']} !important;
         text-align: left;
         padding: 10px;
         border-radius: 8px;
@@ -421,6 +517,7 @@ def get_tool_page_css():
         display: flex;
         align-items: center;
         margin: 5px 0;
+        color: {COLORS['text_primary']} !important;
     }}
 
     .color-box {{
@@ -446,6 +543,7 @@ def get_tool_page_css():
         background: linear-gradient(45deg, {COLORS['generate_button_hover']}, #7CFC00) !important;
         transform: translateY(-3px) !important;
         box-shadow: 0 5px 20px rgba(34, 139, 34, 0.4) !important;
+        color: white !important;
     }}
     </style>
     """