Spaces:
Paused
Paused
| /* ML Science Lab — minimal blue theme. Loaded by app.py at launch. */ | |
| .gradio-container { | |
| --lab-blue: #2563eb; | |
| --lab-ink: #142c4e; | |
| --lab-muted: #52657e; | |
| --lab-border: #dce5f0; | |
| --lab-surface: #ffffff; | |
| --lab-background: #f5f8fc; | |
| max-width: 1320px ; | |
| margin: 0 auto ; | |
| padding: 40px 32px ; | |
| background: var(--lab-background); | |
| color: var(--lab-ink); | |
| line-height: 1.6; | |
| } | |
| #lab-header { | |
| border-top: 3px solid var(--lab-blue); | |
| padding: 24px 0 12px; | |
| margin-bottom: 8px; | |
| } | |
| #lab-header h1 { | |
| color: var(--lab-ink); | |
| font-size: clamp(1.8rem, 4vw, 2.5rem); | |
| font-weight: 650; | |
| letter-spacing: -0.045em; | |
| line-height: 1.15; | |
| margin-bottom: 12px; | |
| } | |
| #lab-header p, .lab-note p { | |
| color: var(--lab-muted); | |
| max-width: 85ch; | |
| } | |
| .lab-note { | |
| border-left: 3px solid var(--lab-border); | |
| padding: 4px 16px; | |
| margin-bottom: 20px; | |
| } | |
| #lab-controls, #lab-results { | |
| background: var(--lab-surface); | |
| border: 1px solid var(--lab-border); | |
| border-radius: 12px; | |
| padding: 22px; | |
| gap: 18px; | |
| min-width: min(100%, 300px); | |
| } | |
| .gradio-container .block { | |
| border-color: var(--lab-border); | |
| border-radius: 8px; | |
| box-shadow: none; | |
| } | |
| .gradio-container h3 { | |
| color: var(--lab-ink); | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| margin-top: 20px; | |
| } | |
| .gradio-container button.primary { | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| min-height: 44px; | |
| font-weight: 600; | |
| box-shadow: none; | |
| transition: background-color 150ms ease; | |
| } | |
| .gradio-container :is(button, input, textarea, select, [tabindex]):focus-visible { | |
| outline: 3px solid #60a5fa ; | |
| outline-offset: 3px; | |
| } | |
| .gradio-container input[type="range"] { | |
| accent-color: var(--lab-blue); | |
| } | |
| .gradio-container table { | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .gradio-container th { | |
| background: var(--lab-background); | |
| color: var(--lab-ink); | |
| font-weight: 600; | |
| } | |
| .gradio-container a { | |
| color: var(--lab-blue); | |
| text-underline-offset: 3px; | |
| } | |
| .dark .gradio-container { | |
| --lab-blue: #60a5fa; | |
| --lab-ink: #e2ecfb; | |
| --lab-muted: #a5b6cf; | |
| --lab-border: #2a3d58; | |
| --lab-surface: #142035; | |
| --lab-background: #0e1829; | |
| } | |
| @media (max-width: 640px) { | |
| .gradio-container { padding: 20px 14px ; } | |
| #lab-controls, #lab-results { padding: 16px; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .gradio-container button.primary { transition: none; } | |
| } | |