| """ |
| CSS styles and themes |
| """ |
|
|
| 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; |
| } |
| |
| h1 { |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| margin-bottom: 10px !important; |
| } |
| |
| /* Buttons */ |
| .gradio-button.primary { |
| background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important; |
| color: white !important; |
| border: none !important; |
| font-weight: 600 !important; |
| padding: 12px 24px !important; |
| border-radius: 8px !important; |
| transition: transform 0.2s, box-shadow 0.2s !important; |
| } |
| |
| .gradio-button.primary:hover { |
| transform: translateY(-2px) !important; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important; |
| } |
| |
| .gradio-button.secondary { |
| background: linear-gradient(90deg, #4ECDC4 0%, #44A08D 100%) !important; |
| color: white !important; |
| border: none !important; |
| font-weight: 600 !important; |
| padding: 12px 24px !important; |
| border-radius: 8px !important; |
| } |
| |
| /* Tabs */ |
| .gradio-tab { |
| border-bottom: 2px solid transparent !important; |
| padding: 12px 24px !important; |
| font-weight: 500 !important; |
| } |
| |
| .gradio-tab.selected { |
| border-bottom: 2px solid #667eea !important; |
| color: #667eea !important; |
| font-weight: 600 !important; |
| } |
| |
| /* JSON |
