| |
| |
| |
| OKABE_ITO = { |
| "black": "#000000", |
| "orange": "#E69F00", |
| "sky_blue": "#56B4E9", |
| "bluish_green": "#009E73", |
| "yellow": "#F0E442", |
| "blue": "#0072B2", |
| "vermilion": "#D55E00", |
| "reddish_purple": "#CC79A7", |
| "grey": "#999999" |
| } |
|
|
| PALETTE = { |
| "bg": "#0B1220", |
| "panel": "#121A2A", |
| "panel_alt": "#0F1624", |
| "text": "#E6EEF9", |
| "muted": "#9FB3C8", |
| "accent": OKABE_ITO["sky_blue"], |
| "good": OKABE_ITO["bluish_green"], |
| "warn": OKABE_ITO["orange"], |
| "bad": OKABE_ITO["vermilion"] |
| } |
|
|
| GLOBAL_CSS = """ |
| :root { |
| --bg: %(bg)s; |
| --panel: %(panel)s; |
| --panel-alt: %(panel_alt)s; |
| --text: %(text)s; |
| --muted: %(muted)s; |
| --accent: %(accent)s; |
| --good: %(good)s; |
| --warn: %(warn)s; |
| --bad: %(bad)s; |
| } |
| |
| body, .gradio-container, .block, .gradio-app { |
| background-color: var(--bg) !important; |
| color: var(--text) !important; |
| } |
| |
| button, .btn, .gr-button { |
| border-radius: 10px !important; |
| border: 1px solid rgba(255,255,255,0.08) !important; |
| } |
| |
| label, .label, .gradio-input label { |
| color: var(--muted) !important; |
| } |
| |
| input, textarea, select { |
| background: #0E1626 !important; |
| color: var(--text) !important; |
| border: 1px solid rgba(255,255,255,0.06) !important; |
| } |
| |
| a { color: var(--accent) !important; } |
| |
| .kpi-card { |
| background: var(--panel); |
| border: 1px solid rgba(255,255,255,0.06); |
| border-radius: 14px; |
| padding: 14px; |
| } |
| |
| .kpi-value { |
| font-weight: 700; |
| font-size: 20px; |
| } |
| |
| .kpi-label { |
| color: var(--muted); |
| font-size: 12px; |
| } |
| |
| .panel { |
| background: var(--panel); |
| border: 1px solid rgba(255,255,255,0.06); |
| border-radius: 12px; |
| padding: 16px; |
| } |
| """ |
