update

app.py

@@ -473,28 +473,11 @@ js_scrub = """(val) => {
     return val;
 }"""
 
-# Updated CSS with stricter selectors to force text colors in alert boxes
 custom_css = """
 footer {visibility: hidden}
 h1.header-title { text-align: center; font-family: 'Segoe UI', sans-serif; font-weight: 700; color: var(--body-text-color); margin-bottom: 2rem; }
-.alert-box { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.5; }
-
-/* Fix for Dark Mode: 
-   Use !important and target children (*, strong, div) to override Gradio's global dark theme text colors.
-   This ensures text remains dark even if the user is in Dark Mode, because these boxes have fixed light backgrounds.
-*/
-
-/* Blue Info Box */
-.info-box { background-color: #eff6ff; border-left: 4px solid #3b82f6; }
-.info-box, .info-box * { color: #1e40af !important; }
 
-/* Yellow Warning Box */
-.warning-box { background-color: #fefce8; border-left: 4px solid #eab308; }
-.warning-box, .warning-box * { color: #854d0e !important; }
-
-/* Green Tip Box */
-.tip-box { background-color: #f0fdf4; border-left: 4px solid #22c55e; }
-.tip-box, .tip-box * { color: #15803d !important; }
+.alert-box { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.5; }
 
 .viewer-container { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color-primary); background: var(--background-fill-secondary); }
 #run-btn { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); border: none; color: white; font-weight: bold; transition: all 0.2s; }
@@ -520,9 +503,9 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", radius_size="md"), css
                     end_time = gr.Slider(minimum=0, maximum=10, value=3, step=0.01, label="End Time (s)")
             
             gr.HTML("""
-            <div class="alert-box tip-box">
-                <strong>💡 Use Tips:</strong>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; font-size: 0.85em; line-height: 1.4;">
+            <div class="alert-box" style="background-color: #f0fdf4; border-left: 4px solid #22c55e; color: #15803d;">
+                <strong style="color: #15803d;">💡 Use Tips:</strong>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; font-size: 0.85em; line-height: 1.4; color: #15803d;">
                     <div>1. Contain only a <strong>single person</strong>.</div>
                     <div>2. <strong>No occlusion</strong> (self-occlusion is fine).</div>
                     <div>3. Keep the <strong>full body</strong> mostly visible.</div>
@@ -553,12 +536,12 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", radius_size="md"), css
                 )
             
             gr.HTML("""
-            <div class="alert-box warning-box">
-                <strong>⚡ Performance Note:</strong><br>
+            <div class="alert-box" style="background-color: #fefce8; border-left: 4px solid #eab308; color: #854d0e;">
+                <strong style="color: #854d0e;">⚡ Performance Note:</strong><br>
                 Inference (feed-forward) is very fast, but generating visualization assets (meshing & rendering) takes up most of the processing time.
             </div>
-            <div class="alert-box info-box">
-                <strong>👁️ Visual Quality:</strong><br>
+            <div class="alert-box" style="background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af;">
+                <strong style="color: #1e40af;">👁️ Visual Quality:</strong><br>
                 The displayed results are downsampled for better web rendering performance.
             </div>
             """)