Spaces:
Running on Zero
Running on Zero
| # Gradio theme + CSS for the OEV Space demo. One place for the look. | |
| import gradio as gr | |
| theme = gr.themes.Soft( | |
| primary_hue="orange", | |
| neutral_hue="slate", | |
| font=[gr.themes.GoogleFont("IBM Plex Sans"), "ui-sans-serif", "system-ui", "sans-serif"], | |
| font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"], | |
| ).set( | |
| body_background_fill="#171412", | |
| body_background_fill_dark="#171412", | |
| body_text_color="#f5eee8", | |
| body_text_color_dark="#f5eee8", | |
| body_text_color_subdued="#b9aa9f", | |
| body_text_color_subdued_dark="#b9aa9f", | |
| block_background_fill="#211d1a", | |
| block_background_fill_dark="#211d1a", | |
| block_border_color="#3a2f28", | |
| block_border_color_dark="#3a2f28", | |
| border_color_primary="#3a2f28", | |
| border_color_primary_dark="#3a2f28", | |
| color_accent="#e8b48c", | |
| color_accent_soft="#5a4032", | |
| color_accent_soft_dark="#5a4032", | |
| border_color_accent="#e8b48c", | |
| border_color_accent_dark="#e8b48c", | |
| input_background_fill="#1b1816", | |
| input_background_fill_dark="#1b1816", | |
| input_border_color="#4a3b32", | |
| input_border_color_dark="#4a3b32", | |
| input_border_color_focus="#e8b48c", | |
| input_border_color_focus_dark="#e8b48c", | |
| button_primary_background_fill="#e8b48c", | |
| button_primary_background_fill_dark="#e8b48c", | |
| button_primary_background_fill_hover="#dca47a", | |
| button_primary_background_fill_hover_dark="#dca47a", | |
| button_primary_border_color="#e8b48c", | |
| button_primary_border_color_dark="#e8b48c", | |
| button_primary_border_color_hover="#dca47a", | |
| button_primary_border_color_hover_dark="#dca47a", | |
| button_primary_text_color="#2b1d16", | |
| button_primary_text_color_dark="#2b1d16", | |
| button_primary_text_color_hover="#2b1d16", | |
| button_primary_text_color_hover_dark="#2b1d16", | |
| button_secondary_background_fill="#2a2420", | |
| button_secondary_background_fill_dark="#2a2420", | |
| button_secondary_background_fill_hover="#352c26", | |
| button_secondary_background_fill_hover_dark="#352c26", | |
| button_secondary_border_color="#4a3b32", | |
| button_secondary_border_color_dark="#4a3b32", | |
| button_secondary_border_color_hover="#5a4639", | |
| button_secondary_border_color_hover_dark="#5a4639", | |
| button_secondary_text_color="#f5eee8", | |
| button_secondary_text_color_dark="#f5eee8", | |
| button_secondary_text_color_hover="#ffffff", | |
| button_secondary_text_color_hover_dark="#ffffff", | |
| block_border_width="1px", | |
| block_radius="0px", | |
| button_large_radius="0px", | |
| button_small_radius="0px", | |
| input_radius="0px", | |
| ) | |
| CSS = """ | |
| # page frame: centered column | |
| .gradio-container { width: 1020px !important; max-width: calc(100vw - 32px) !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 auto; } | |
| footer { visibility: hidden; } | |
| :root, .gradio-container { --primary-pastel: #e8b48c; --color-accent: var(--primary-pastel); --border-color-accent: var(--primary-pastel); } | |
| .gradio-container > main, | |
| .gradio-container .main, | |
| .tab-container, | |
| .tab-container > div, | |
| .tab-container .tab-panel, | |
| .tab-container .row { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } | |
| .tab-container .column { min-width: 0 !important; box-sizing: border-box !important; } | |
| .gradio-container { font-size: 14px; line-height: 1.5; } | |
| .gradio-container p, .gradio-container textarea, .gradio-container input { font-size: 14px; line-height: 1.5; } | |
| .gradio-container h1 { font-size: 24px; line-height: 1.25; font-weight: 600; } | |
| .gradio-container h2 { font-size: 18px; line-height: 1.25; font-weight: 600; } | |
| .gradio-container h3 { font-size: 16px; line-height: 1.25; font-weight: 600; } | |
| .gradio-container label, .gradio-container .form-label, .gradio-container .block-label { font-size: 12px; line-height: 1.4; font-weight: 500; } | |
| .gradio-container button, .tab-nav button { font-size: 13px; line-height: 1.25; } | |
| # everything square: override any gradio rounding | |
| .gradio-container * { border-radius: 0 !important; } | |
| #header { padding: 12px 0 16px; border-bottom: 1px solid var(--border-color-primary); | |
| margin-bottom: 16px; } | |
| #header h1 { margin: 0 0 8px; letter-spacing: -0.01em; } | |
| #header .prose p { color: var(--body-text-color-subdued); margin: 0 0 4px; } | |
| #header .metrics { font-family: var(--font-mono); font-size: 12px; | |
| color: var(--body-text-color-subdued); | |
| letter-spacing: 0.02em; } | |
| #header .metrics b { color: var(--body-text-color); font-weight: 600; } | |
| # preset buttons: equal width, one row | |
| #presets { gap: 8px; margin-bottom: 16px; } | |
| #presets button { flex: 1 1 0; min-width: 0; width: auto; height: 32px !important; | |
| min-height: 32px !important; padding: 0 12px !important; } | |
| #qs-help { margin: 12px 0; } | |
| #qs-help button { min-height: 32px !important; padding: 4px 12px !important; } | |
| # decide: full width, own row | |
| #decide-btn { width: 100%; min-height: 40px; margin-top: 16px; } | |
| .tab-container .row { gap: 16px; } | |
| .cm-editor, .cm-content, .cm-line, textarea.code, | |
| #state-box textarea, #qs-box textarea { | |
| font-family: var(--font-mono) !important; | |
| font-size: 12px !important; | |
| } | |
| .bars .qname { display: block; font-size: 12px; text-transform: uppercase; | |
| letter-spacing: 0.1em; color: var(--body-text-color-subdued); | |
| margin: 16px 0 8px; } | |
| .bars .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; } | |
| .bars .row .name { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; | |
| white-space: nowrap; font-size: 12px; } | |
| .bars .row .track { flex: 1 1 auto; height: 8px; | |
| background: var(--block-background-fill); | |
| border: 1px solid var(--border-color-primary); position: relative; } | |
| .bars .row .fill { position: absolute; inset: 0 auto 0 0; height: 100%; | |
| background: var(--color-accent); opacity: 0.75; } | |
| .bars .row.win .fill { background: var(--color-accent); opacity: 1; } | |
| .bars .row .val { flex: 0 0 52px; text-align: right; | |
| font-family: var(--font-mono); font-size: 12px; | |
| color: var(--body-text-color-subdued); } | |
| .bars .row.win .val { color: var(--body-text-color); font-weight: 600; } | |
| #statusline { font-family: var(--font-mono); font-size: 12px; | |
| color: var(--body-text-color-subdued); text-align: right; | |
| min-height: 1.4em; margin-top: 8px; } | |
| # error: red left rule | |
| #errorbox { margin: 12px 0; padding: 12px; | |
| border-left: 3px solid var(--color-danger) !important; } | |
| #state-box textarea:focus, #qs-box textarea:focus, #qs-box input:focus, | |
| .cm-editor.cm-focused, .cm-content:focus { | |
| outline: 2px solid var(--border-color-accent) !important; | |
| outline-offset: -1px; | |
| } | |
| .tab-nav { display: flex; width: 100%; gap: 8px; margin-bottom: 16px; } | |
| .tab-nav button { flex: 1 1 0; min-width: 0; min-height: 32px; padding: 6px 12px; font-size: 13px; letter-spacing: 0.04em; } | |
| .tab-nav button:hover, | |
| .tab-nav button:focus-visible, | |
| .tab-nav button[aria-selected="true"] { | |
| color: var(--color-accent) !important; | |
| -webkit-text-fill-color: var(--color-accent) !important; | |
| background: var(--color-accent-soft) !important; | |
| border-color: var(--color-accent) !important; | |
| box-shadow: inset 0 -2px 0 var(--color-accent) !important; | |
| } | |
| .tab-nav button:hover *, | |
| .tab-nav button:focus-visible *, | |
| .tab-nav button[aria-selected="true"] * { | |
| color: var(--color-accent) !important; | |
| -webkit-text-fill-color: var(--color-accent) !important; | |
| } | |
| # responsive: presets wrap on narrow screens | |
| @media (max-width: 640px) { | |
| #presets { flex-wrap: wrap; } | |
| #presets button { flex: 1 1 45%; width: auto; } | |
| } | |
| """ | |