Update ui/styles.py

ui/styles.py

@@ -1,126 +1,189 @@
 """
-CSS styles and themes - FIXED VERSION
+CSS styles for the demo
 """
 
-# IMPORT gradio at the top of the file
-import gradio as gr
-
 CUSTOM_CSS = """
-/* Main container */
 .gradio-container {
-    max-width: 1400px !important;
-    margin: 0 auto !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-}
-
-/* Headers */
-h1, h2, h3, h4 {
-    color: #1a365d !important;
-    font-weight: 600 !important;
+    max-width: 1800px !important;
+    margin: auto !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
 }
 
+/* Header styles */
 h1 {
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(90deg, #1a365d 0%, #2d3748 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    margin-bottom: 10px !important;
+    font-weight: 800 !important;
+    font-size: 2.5rem !important;
+    margin-bottom: 0.5rem !important;
+    line-height: 1.2 !important;
 }
 
-/* Buttons */
-button.primary {
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
-    color: white !important;
-    border: none !important;
+h2 {
+    color: #4a5568 !important;
     font-weight: 600 !important;
-    padding: 12px 24px !important;
-    border-radius: 8px !important;
+    font-size: 1.5rem !important;
+    margin-bottom: 1rem !important;
 }
 
-button.secondary {
-    background: linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%) !important;
-    color: white !important;
-    border: none !important;
+h3 {
+    color: #2d3748 !important;
+    font-weight: 700 !important;
+    font-size: 1.25rem !important;
+    margin-bottom: 0.75rem !important;
+}
+
+h4 {
+    color: #4a5568 !important;
     font-weight: 600 !important;
-    padding: 12px 24px !important;
-    border-radius: 8px !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 0.5rem !important;
+}
+
+/* Status indicators */
+.critical {
+    color: #FF6B6B !important;
+    font-weight: 700 !important;
+}
+
+.warning {
+    color: #FFA726 !important;
+    font-weight: 700 !important;
 }
 
-/* JSON displays */
-.gr-json {
+.success {
+    color: #4ECDC4 !important;
+    font-weight: 700 !important;
+}
+
+.info {
+    color: #42A5F5 !important;
+    font-weight: 700 !important;
+}
+
+/* Cards and containers */
+.metric-card {
+    background: white !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
     border: 1px solid #e2e8f0 !important;
-    border-radius: 8px !important;
-    padding: 15px !important;
-    background: #f8fafc !important;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
-    font-size: 13px !important;
+    margin-bottom: 15px !important;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
 }
 
-/* Custom classes */
-.critical-metric {
-    background: linear-gradient(135deg, rgba(255,107,107,0.1) 0%, rgba(255,107,107,0.2) 100%) !important;
-    border-left: 4px solid #FF6B6B !important;
+/* Plot containers */
+.plot-container {
+    background: white !important;
+    border-radius: 12px !important;
     padding: 15px !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
+    border: 1px solid #e2e8f0 !important;
+    margin-bottom: 20px !important;
+}
+
+/* Data tables */
+.dataframe {
+    background: white !important;
     border-radius: 8px !important;
-    margin: 10px 0 !important;
-    font-weight: bold !important;
+    border: 1px solid #e2e8f0 !important;
 }
 
-.success-metric {
-    background: linear-gradient(135deg, rgba(78,205,196,0.1) 0%, rgba(78,205,196,0.2) 100%) !important;
-    border-left: 4px solid #4ECDC4 !important;
-    padding: 15px !important;
+.dataframe th {
+    background: #f8fafc !important;
+    color: #4a5568 !important;
+    font-weight: 600 !important;
+    padding: 12px !important;
+    border-bottom: 2px solid #e2e8f0 !important;
+}
+
+.dataframe td {
+    padding: 10px 12px !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+}
+
+/* Buttons */
+button {
     border-radius: 8px !important;
-    margin: 10px 0 !important;
-    font-weight: bold !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
 }
 
-.roi-highlight {
-    font-size: 2.5em !important;
-    font-weight: 900 !important;
-    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    text-align: center !important;
-    margin: 20px 0 !important;
+button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
 }
 
-.presenter-guidance {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+button.primary {
+    background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%) !important;
     color: white !important;
-    padding: 20px !important;
-    border-radius: 10px !important;
-    margin: 15px 0 !important;
-    border-left: 5px solid #4ECDC4 !important;
+    border: none !important;
 }
 
-/* Footer */
-.footer {
-    margin-top: 40px !important;
-    padding-top: 20px !important;
-    border-top: 1px solid #e2e8f0 !important;
-    color: #718096 !important;
-    font-size: 14px !important;
+button.secondary {
+    background: white !important;
+    color: #4a5568 !important;
+    border: 1px solid #e2e8f0 !important;
 }
-"""
 
-# Now gr is defined, so this won't cause an error
-THEME = gr.themes.Soft(
-    primary_hue="purple",
-    secondary_hue="teal",
-    neutral_hue="gray",
-    font=["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"]
-).set(
-    button_primary_background_fill="linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
-    button_primary_background_fill_hover="linear-gradient(90deg, #764ba2 0%, #667eea 100%)",
-    button_primary_text_color="white",
-    button_primary_border_color="#667eea",
-    button_secondary_background_fill="linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%)",
-    button_secondary_background_fill_hover="linear-gradient(90deg, #44A08D 0%, #4ECDC4 100%)",
-    button_secondary_text_color="white",
-    background_fill_primary="#f8fafc",
-    background_fill_secondary="#ffffff",
-    border_color_primary="#e2e8f0",
-    border_color_secondary="#cbd5e0"
-)
+button.secondary:hover {
+    background: #f8fafc !important;
+    border-color: #cbd5e0 !important;
+}
+
+button.stop {
+    background: linear-gradient(135deg, #FF6B6B 0%, #C53030 100%) !important;
+    color: white !important;
+    border: none !important;
+}
+
+/* Inputs and controls */
+input, textarea, select {
+    border-radius: 8px !important;
+    border: 1px solid #e2e8f0 !important;
+    padding: 10px 12px !important;
+    background: white !important;
+}
+
+input:focus, textarea:focus, select:focus {
+    border-color: #4ECDC4 !important;
+    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1) !important;
+    outline: none !important;
+}
+
+/* Tabs */
+.tab-nav {
+    background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%) !important;
+    border-radius: 12px !important;
+    padding: 8px !important;
+    margin-bottom: 25px !important;
+    border: 1px solid #e2e8f0 !important;
+}
+
+.tab-button {
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    padding: 10px 20px !important;
+}
+
+.tab-button.selected {
+    background: white !important;
+    color: #4ECDC4 !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
+    border: 1px solid #e2e8f0 !important;
+}
+
+/* JSON display */
+.json-container {
+    background: #f8fafc !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    border: 1px solid #e2e8f0 !important;
+    font-family: 'Monaco', '