| :root { |
| --bg-primary: #09090b; |
| --bg-secondary: #18181b; |
| --bg-tertiary: #27272a; |
| --border: #3f3f46; |
| --text-primary: #f4f4f5; |
| --text-secondary: #a1a1aa; |
| --accent: #10b981; |
| --accent-hover: #059669; |
| --danger: #ef4444; |
| --warning: #f59e0b; |
| } |
|
|
| * { box-sizing: border-box; font-family: 'Inter', sans-serif; } |
| body { background-color: var(--bg-primary); color: var(--text-primary); margin: 0; } |
|
|
| |
| .gradio-container { max-width: 100% !important; padding: 0 !important; background: var(--bg-primary) !important; } |
| #header, #footer { padding: 20px 40px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } |
| .hidden { display: none !important; } |
|
|
| |
| .btn-primary { |
| background-color: var(--accent) !important; |
| color: white !important; |
| border: none !important; |
| padding: 10px 20px !important; |
| border-radius: 6px !important; |
| font-weight: 600 !important; |
| cursor: pointer !important; |
| transition: 0.2s !important; |
| } |
| .btn-primary:hover { background-color: var(--accent-hover) !important; } |
|
|
| .card { |
| background-color: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 24px; |
| margin-bottom: 16px; |
| } |
|
|
| |
| .skeleton { |
| background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%); |
| background-size: 200% 100%; |
| animation: skeleton-loading 1.5s infinite; |
| height: 20px; |
| border-radius: 4px; |
| margin-bottom: 10px; |
| } |
| @keyframes skeleton-loading { |
| 0% { background-position: 200% 0; } |
| 100% { background-position: -200% 0; } |
| } |
|
|
| |
| .icon { width: 20px; height: 20px; fill: currentColor; display: inline-block; vertical-align: middle; margin-right: 8px; } |
