Spaces:
Running on Zero
Running on Zero
| """CSS for the BioLM-NET Workbench, translating the "Industry" design system | |
| (``_ds/industry-…/styles.css`` in the design handoff bundle) onto Gradio's | |
| Blocks DOM. Tokens, spacing and component shapes are taken from the design | |
| system; selectors are written against Gradio's real markup (native inputs, | |
| the ``primary``/``secondary`` button variant classes, ``:has()`` on real | |
| ``<label>``/``<input>`` pairs) rather than any custom component. | |
| """ | |
| CSS = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); | |
| :root { | |
| --color-bg: #f2f2f3; | |
| --color-surface: #e9e9ea; | |
| --color-text: #1d1f20; | |
| --color-accent: #5980a6; | |
| --color-accent-100: #eef6ff; | |
| --color-accent-200: #d6ebff; | |
| --color-accent-600: #597ea3; | |
| --color-accent-700: #416180; | |
| --color-accent-800: #2c455d; | |
| --color-accent-900: #1d2d3d; | |
| --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); | |
| --color-row-rule: color-mix(in srgb, #1d1f20 10%, transparent); | |
| --color-muted: color-mix(in srgb, #1d1f20 62%, transparent); | |
| --color-muted-2: color-mix(in srgb, #1d1f20 52%, transparent); | |
| --color-error: oklch(0.52 0.14 27); | |
| --color-error-fill: color-mix(in srgb, oklch(0.52 0.14 27) 6%, transparent); | |
| --font-heading: "Barlow Condensed", system-ui, sans-serif; | |
| --font-body: "Barlow", system-ui, sans-serif; | |
| --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; | |
| --space-1: 3.4px; | |
| --space-2: 6.8px; | |
| --space-3: 10.2px; | |
| --space-4: 13.6px; | |
| --space-6: 20.4px; | |
| --space-8: 27.2px; | |
| --radius-sm: 2px; | |
| --radius-md: 4px; | |
| } | |
| /* ── neutralize Gradio's own theme ──────────────────────────────────────── | |
| Gradio's Base theme ships its own light AND dark variable sets (the dark | |
| ones activated by a `.dark` class Gradio's frontend adds on | |
| `prefers-color-scheme: dark` or `?__theme=dark`), and every unstyled | |
| component — blocks, panels, tables, checkboxes, the primary button — reads | |
| colors from those variables, not from ours. Selector-by-selector overrides | |
| below only reach the elements we thought to target; this instead | |
| overwrites Gradio's variables directly, for both plain and `.dark`-classed | |
| roots, so nothing can fall back to Gradio's blue/dark palette. `!important` | |
| is required: CSS custom properties still cascade normally, and Gradio's | |
| `.dark` rule is otherwise free to out-order this one depending on where | |
| the frontend happens to inject each stylesheet. */ | |
| :root, .dark, :root .dark { | |
| --body-background-fill: #f2f2f3 !important; | |
| --body-text-color: #1d1f20 !important; | |
| --body-text-color-subdued: color-mix(in srgb, #1d1f20 55%, transparent) !important; | |
| --background-fill-primary: #f2f2f3 !important; | |
| --background-fill-secondary: #e9e9ea !important; | |
| --border-color-primary: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --border-color-accent: #5980a6 !important; | |
| --border-color-accent-subdued: #5980a6 !important; | |
| --color-accent: #5980a6 !important; | |
| --color-accent-soft: #eef6ff !important; | |
| --link-text-color: #416180 !important; | |
| --link-text-color-hover: #2c455d !important; | |
| --link-text-color-active: #2c455d !important; | |
| --link-text-color-visited: #416180 !important; | |
| --block-background-fill: transparent !important; | |
| --block-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --block-label-background-fill: transparent !important; | |
| --block-label-border-color: transparent !important; | |
| --block-label-text-color: #1d1f20 !important; | |
| --block-title-text-color: #1d1f20 !important; | |
| --block-info-text-color: color-mix(in srgb, #1d1f20 62%, transparent) !important; | |
| --panel-background-fill: transparent !important; | |
| --panel-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --code-background-fill: #e9e9ea !important; | |
| --input-background-fill: #ffffff !important; | |
| --input-background-fill-hover: #ffffff !important; | |
| --input-background-fill-focus: #ffffff !important; | |
| --input-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --input-border-color-hover: #5980a6 !important; | |
| --input-border-color-focus: #5980a6 !important; | |
| --input-placeholder-color: color-mix(in srgb, #1d1f20 40%, transparent) !important; | |
| --checkbox-background-color: #ffffff !important; | |
| --checkbox-background-color-hover: #ffffff !important; | |
| --checkbox-background-color-focus: #ffffff !important; | |
| --checkbox-background-color-selected: #5980a6 !important; | |
| --checkbox-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --checkbox-border-color-hover: #5980a6 !important; | |
| --checkbox-border-color-focus: #5980a6 !important; | |
| --checkbox-border-color-selected: #5980a6 !important; | |
| --checkbox-border-radius: 2px !important; | |
| --checkbox-label-background-fill: transparent !important; | |
| --checkbox-label-background-fill-hover: transparent !important; | |
| --checkbox-label-background-fill-selected: transparent !important; | |
| --checkbox-label-border-color: transparent !important; | |
| --checkbox-label-border-color-hover: transparent !important; | |
| --checkbox-label-border-color-selected: transparent !important; | |
| --checkbox-label-text-color: #1d1f20 !important; | |
| --checkbox-label-text-color-selected: #1d1f20 !important; | |
| --error-background-fill: color-mix(in srgb, oklch(0.52 0.14 27) 6%, transparent) !important; | |
| --error-border-color: oklch(0.52 0.14 27) !important; | |
| --error-text-color: oklch(0.52 0.14 27) !important; | |
| --error-icon-color: oklch(0.52 0.14 27) !important; | |
| --table-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --table-even-background-fill: transparent !important; | |
| --table-odd-background-fill: transparent !important; | |
| --table-row-focus: color-mix(in srgb, #5980a6 10%, transparent) !important; | |
| --table-text-color: #1d1f20 !important; | |
| --button-primary-background-fill: #5980a6 !important; | |
| --button-primary-background-fill-hover: #597ea3 !important; | |
| --button-primary-border-color: #5980a6 !important; | |
| --button-primary-border-color-hover: #597ea3 !important; | |
| --button-primary-text-color: #f2f2f3 !important; | |
| --button-primary-text-color-hover: #f2f2f3 !important; | |
| --button-secondary-background-fill: transparent !important; | |
| --button-secondary-background-fill-hover: color-mix(in srgb, #1d1f20 7%, transparent) !important; | |
| --button-secondary-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --button-secondary-border-color-hover: color-mix(in srgb, #1d1f20 30%, transparent) !important; | |
| --button-secondary-text-color: #1d1f20 !important; | |
| --button-secondary-text-color-hover: #1d1f20 !important; | |
| --button-cancel-background-fill: transparent !important; | |
| --button-cancel-background-fill-hover: color-mix(in srgb, #1d1f20 7%, transparent) !important; | |
| --button-cancel-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important; | |
| --button-cancel-text-color: #1d1f20 !important; | |
| --slider-color: #5980a6 !important; | |
| --loader-color: #5980a6 !important; | |
| --accordion-text-color: #1d1f20 !important; | |
| --shadow-drop: none !important; | |
| --shadow-drop-lg: none !important; | |
| } | |
| /* ── base ─────────────────────────────────────────────────────────────── */ | |
| body, .gradio-container { | |
| background: var(--color-bg) !important; | |
| color: var(--color-text) !important; | |
| font-family: var(--font-body) !important; | |
| } | |
| .gradio-container { | |
| max-width: none !important; | |
| min-height: 100vh; | |
| padding: 0 !important; | |
| } | |
| .gradio-container footer, | |
| .gradio-container .footer, | |
| .gradio-container .built-with { | |
| display: none !important; | |
| } | |
| .gradio-container * { box-sizing: border-box; } | |
| .gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4 { | |
| font-family: var(--font-heading); | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| margin: 0; | |
| } | |
| .gradio-container label, .gradio-container .label-wrap span { color: var(--color-text) !important; } | |
| .gradio-container .info, .gradio-container .prose, .gradio-container p { color: var(--color-muted) !important; } | |
| .mono { | |
| font: 500 10.5px/1.3 var(--font-mono); | |
| letter-spacing: .1em; | |
| text-transform: uppercase; | |
| color: var(--color-muted-2); | |
| } | |
| .num { font: 500 12px/1 var(--font-mono); color: var(--color-text); } | |
| /* ── blueprint frame (registration-marked wireframe objects) ────────────── */ | |
| .blueprint { position: relative; border: 1px solid var(--color-divider); } | |
| .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); } | |
| .blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; } | |
| .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } | |
| .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } | |
| .blueprint > .corner.tl { top: -6px; left: -6px; } | |
| .blueprint > .corner.tr { top: -6px; right: -6px; } | |
| .blueprint > .corner.bl { bottom: -6px; left: -6px; } | |
| .blueprint > .corner.br { bottom: -6px; right: -6px; } | |
| .corner-overlay { position: absolute; inset: 0; pointer-events: none; } | |
| /* ── shell: rail + workspace ─────────────────────────────────────────── */ | |
| .app-shell { | |
| align-items: stretch !important; | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| gap: 0 !important; | |
| width: 100% !important; | |
| min-height: 100vh !important; | |
| } | |
| .rail-col { | |
| min-width: 236px !important; | |
| max-width: 236px !important; | |
| width: 236px !important; | |
| flex: 0 0 236px !important; | |
| align-self: flex-start !important; | |
| } | |
| .rail { | |
| height: 100vh; | |
| min-height: 100vh; | |
| padding: 22px 0 18px; | |
| border-right: 1px solid var(--color-divider); | |
| display: flex; | |
| flex-direction: column; | |
| position: sticky; | |
| top: 0; | |
| } | |
| .rail-brand { padding: 0 20px; } | |
| .rail-brand .name { font: 600 25px/1 var(--font-heading); color: var(--color-text); } | |
| .rail-kicker { padding: 0 20px 9px; margin-top: 34px; } | |
| .rail-nav { display: flex; flex-direction: column; } | |
| .rail-nav > *, | |
| .rail-row-wrap { | |
| flex: 0 0 auto !important; | |
| } | |
| .rail-spacer { margin-top: auto; } | |
| .rail-plate-wrap { padding: 0 20px; } | |
| .rail-footnote { | |
| margin-top: 14px; | |
| font: 500 9px/1.6 var(--font-mono); | |
| letter-spacing: .06em; | |
| color: color-mix(in srgb, var(--color-text) 42%, transparent); | |
| } | |
| .workspace-col { | |
| min-width: 0 !important; | |
| max-width: none !important; | |
| padding: 0 !important; | |
| flex: 1 1 auto !important; | |
| width: calc(100% - 236px) !important; | |
| } | |
| /* rail row (overlay: visible .rr under an invisible full-size button) */ | |
| .rail-row-wrap { position: relative; } | |
| .rail-row-wrap .rail-row-click { | |
| position: absolute !important; inset: 0 !important; z-index: 2; | |
| min-height: 0 !important; height: 100% !important; width: 100% !important; | |
| padding: 0 !important; margin: 0 !important; border: 0 !important; | |
| background: transparent !important; box-shadow: none !important; | |
| opacity: 0 !important; cursor: pointer; | |
| } | |
| .rail-row-wrap .rail-row-click:disabled { cursor: default; } | |
| .rr { display: flex; align-items: center; gap: 11px; padding: 9px 20px 9px 17px; border-left: 3px solid transparent; font-size: 13.5px; } | |
| .rr .rn { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1px solid var(--color-divider); font: 500 10.5px/1 var(--font-mono); } | |
| .rr .lb { flex: 1; } | |
| .rr .st { font: 500 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-2); } | |
| .rr.done .rn { border-color: var(--color-accent); color: var(--color-accent-700); } | |
| .rr.done .st { color: var(--color-accent-700); } | |
| .rr.on { border-left-color: var(--color-accent); background: var(--color-accent-100); } | |
| .rr.on .lb { font-weight: 600; } | |
| .rr.on .rn { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } | |
| .rr.on .st { color: var(--color-accent-700); } | |
| .rr.next { background: color-mix(in srgb, var(--color-text) 4%, transparent); } | |
| .rr.next .rn { border-color: var(--color-accent); color: var(--color-accent-700); } | |
| .rr.next .st { color: var(--color-accent-700); } | |
| .rr.off { opacity: .42; } | |
| /* run-state plate */ | |
| .plate { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; } | |
| .kv { display: flex; justify-content: space-between; gap: 10px; } | |
| .kv span:first-child { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-2); } | |
| .kv .accent { color: var(--color-accent-700) !important; } | |
| .kv .error { color: var(--color-error) !important; } | |
| .kv .muted { color: var(--color-muted) !important; } | |
| /* plain-text-key kv row (paper-faithful defaults, etc. — no mono kicker) */ | |
| .kv-plain { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-row-rule); font-size: 12.5px; } | |
| .kv-plain.last { border-bottom: none; } | |
| /* ── topbar / page head / action bar ─────────────────────────────────── */ | |
| .topbar-host { | |
| position: relative; | |
| display: block !important; | |
| padding: 0 !important; | |
| gap: 0 !important; | |
| } | |
| .topbar-host > .block:first-child { width: 100% !important; } | |
| .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 132px 13px 30px; border-bottom: 1px solid var(--color-divider); } | |
| .intro-open-btn { | |
| position: absolute !important; | |
| right: 30px; | |
| top: 8px; | |
| z-index: 5; | |
| } | |
| .intro-open-btn button { | |
| font-size: 11.5px !important; | |
| min-height: 28px !important; | |
| padding: 0 8px !important; | |
| } | |
| .pghd { padding: 26px 30px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } | |
| .pghd h2 { font-size: 34px; line-height: 1; color: var(--color-text); } | |
| .pghd .desc { margin-top: 5px; max-width: 640px; color: var(--color-muted); font-size: 13.5px; line-height: 1.5; } | |
| .pghd .meta-right { text-align: right; font: 500 9.5px/1.7 var(--font-mono); color: var(--color-muted-2); white-space: nowrap; } | |
| .stage-grid { padding: 24px 30px 0 !important; gap: 26px !important; align-items: flex-start !important; } | |
| .stat-grid { padding: 22px 30px 0 !important; gap: 12px !important; } | |
| .results-stat-row { padding: 22px 30px 0 !important; } | |
| .metric-strip { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| width: 100%; | |
| } | |
| .results-grid { padding: 26px 30px 0 !important; gap: 26px !important; align-items: flex-start !important; } | |
| .sect { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--color-text); } | |
| .sect-spaced { margin-top: 26px !important; } | |
| .actbar-row { margin-top: auto !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 20px !important; padding: 16px 30px !important; border-top: 1px solid var(--color-divider) !important; background: color-mix(in srgb, var(--color-text) 3%, transparent) !important; } | |
| .actbar-note { font: 500 10px/1.4 var(--font-mono); color: var(--color-muted-2); } | |
| .actbar-note.error { color: var(--color-error); } | |
| .actbar-buttons { | |
| align-items: center !important; | |
| justify-content: flex-end !important; | |
| flex-wrap: nowrap !important; | |
| gap: 10px !important; | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| } | |
| .actbar-buttons > *, | |
| .actbar-buttons .form, | |
| .actbar-buttons .block { | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| min-width: 0 !important; | |
| } | |
| .actbar-buttons button { | |
| width: auto !important; | |
| min-height: 36px !important; | |
| padding: 0 16px !important; | |
| white-space: nowrap !important; | |
| } | |
| .actbar-secondary-btn button { min-width: 108px !important; } | |
| .actbar-primary-btn { position: relative; } | |
| .actbar-primary-btn button { min-width: 170px !important; } | |
| .actbar-primary-btn::before, | |
| .actbar-primary-btn::after { | |
| content: ""; | |
| position: absolute; | |
| top: -5px; | |
| bottom: -5px; | |
| width: 11px; | |
| pointer-events: none; | |
| border-color: color-mix(in srgb, var(--color-text) 58%, transparent); | |
| } | |
| .actbar-primary-btn::before { | |
| left: -5px; | |
| border-left: 1px solid; | |
| border-top: 1px solid; | |
| border-bottom: 1px solid; | |
| } | |
| .actbar-primary-btn::after { | |
| right: -5px; | |
| border-right: 1px solid; | |
| border-top: 1px solid; | |
| border-bottom: 1px solid; | |
| } | |
| /* ── spec rows ────────────────────────────────────────────────────────── */ | |
| .srow-label { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); padding: 10px 0; } | |
| .srow-label .sub { display: block; font: 500 9px/1.4 var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--color-muted-2); margin-top: 2px; } | |
| .srow-control { padding: 3px 0 !important; } | |
| .srow-row { border-top: 1px solid var(--color-row-rule) !important; align-items: center !important; } | |
| .srow-row.first { border-top: none !important; } | |
| .srow-row.last { border-bottom: 1px solid var(--color-row-rule) !important; } | |
| .srow-value-row { justify-content: space-between !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; } | |
| .srow-value-row > *:first-child { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } | |
| .srow-value-row > *:first-child .num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } | |
| .srow-value-row > *:last-child { flex: none !important; } | |
| .section-heading-row { align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 11px !important; } | |
| .field-pair { gap: 14px !important; align-items: flex-start !important; } | |
| .field-pair > * { max-width: none !important; } | |
| .field-label { | |
| margin-bottom: 6px; | |
| color: var(--color-muted); | |
| font-size: 12.5px; | |
| line-height: 1.2; | |
| } | |
| .static-field { | |
| min-height: 34px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 11px; | |
| background: #fff; | |
| border: 1px solid var(--color-divider); | |
| border-radius: var(--radius-md); | |
| font-size: 14px; | |
| color: var(--color-text); | |
| } | |
| /* ── stat / metric plates ─────────────────────────────────────────────── */ | |
| .stat { padding: 13px 14px; } | |
| .stat .v { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1; } | |
| .stat .k { font: 500 8.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-2); margin-top: 6px; } | |
| /* ── bars, plots, confusion matrix ───────────────────────────────────── */ | |
| .bar { flex: 1; height: 3px; background: color-mix(in srgb, var(--color-text) 15%, transparent); position: relative; } | |
| .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); } | |
| .plot-slot { position: relative; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--color-accent) 13%, transparent) 6px 7px); border: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: center; } | |
| .plot-slot span { font: 500 9px/1 var(--font-mono); background: var(--color-bg); padding: 3px 6px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted-2); } | |
| .cm { display: grid; grid-template-columns: repeat(var(--cm-n, 4), 1fr); gap: 2px; } | |
| .cm > div { aspect-ratio: 1.6; display: grid; place-items: center; font: 500 11.5px/1 var(--font-mono); } | |
| /* ── HTML tables (.tbl) ───────────────────────────────────────────────── */ | |
| .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } | |
| .tbl th, .tbl td { border: 0 !important; } | |
| .tbl th { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--color-muted-2); padding: 0 10px 6px 0; border-bottom: 1px solid var(--color-divider) !important; background: transparent !important; } | |
| .tbl td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--color-row-rule) !important; vertical-align: baseline; } | |
| .tbl td.n { font: 400 12px/1 var(--font-mono); } | |
| .tbl .accent { color: var(--color-accent-700); } | |
| .tbl .error { color: var(--color-error); } | |
| /* ── status / error strips ───────────────────────────────────────────── */ | |
| .strip { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; } | |
| .strip.status { border: 1px solid var(--color-divider); } | |
| .strip.error { border: 1px solid var(--color-error); border-left-width: 3px; background: var(--color-error-fill); } | |
| .strip .strip-kicker { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } | |
| .strip.error .strip-kicker { color: var(--color-error); } | |
| .strip .strip-body { margin-top: 4px; font-size: 12.5px; line-height: 1.5; } | |
| .empty-note { padding: 14px 0; color: var(--color-muted); font-size: 13px; } | |
| /* ── slots (one-line gr.File) ─────────────────────────────────────────── */ | |
| .file-slot .file-preview { border: 1px solid var(--color-divider) !important; border-radius: var(--radius-md); background: #fff; font-size: 12.5px !important; } | |
| .file-slot .file-preview td, .file-slot .file-preview th { color: var(--color-text) !important; } | |
| .file-slot.err .file-preview { border-color: var(--color-error) !important; } | |
| .file-slot:has(.file-preview) label.float, | |
| .file-slot:has(.file-preview) .icon-wrap, | |
| .file-slot:has(.file-preview) .wrap:not(.file-preview-holder) { display: none !important; } | |
| .file-slot .empty.large { min-height: 44px !important; padding: 8px !important; } | |
| .file-slot .empty.large .icon { width: 20px !important; height: 20px !important; opacity: .5; } | |
| /* ── buttons ──────────────────────────────────────────────────────────── */ | |
| .gradio-container button.primary, .gradio-container button.secondary { | |
| border-radius: 0 !important; | |
| font-family: var(--font-heading) !important; | |
| font-weight: 600 !important; | |
| box-shadow: none !important; | |
| text-transform: none; | |
| } | |
| .gradio-container button.secondary { | |
| background: transparent !important; | |
| border: 1px solid var(--color-divider) !important; | |
| color: var(--color-text) !important; | |
| } | |
| .gradio-container button.secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; } | |
| .gradio-container button.primary { | |
| background: var(--color-accent) !important; | |
| border: 1px solid var(--color-accent) !important; | |
| color: var(--color-bg) !important; | |
| } | |
| .gradio-container button.primary:hover { background: var(--color-accent-600) !important; } | |
| .gradio-container button.primary:active { background: var(--color-accent-700) !important; } | |
| .gradio-container button:disabled { opacity: .45 !important; cursor: not-allowed !important; } | |
| .btn-ghost { min-width: 0 !important; flex: none !important; } | |
| .btn-ghost button { | |
| background: transparent !important; border-color: transparent !important; | |
| color: var(--color-accent-700) !important; font-weight: 500 !important; | |
| font-family: var(--font-body) !important; box-shadow: none !important; | |
| min-width: 0 !important; width: auto !important; padding: 4px 8px !important; | |
| white-space: nowrap; | |
| } | |
| .btn-ghost button:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important; } | |
| .btn-block button { width: 100%; } | |
| .btn-primary-frame { position: relative; } | |
| /* ── segmented control (gr.Radio restyled) ───────────────────────────── */ | |
| .seg-radio { border: 1px solid var(--color-divider); overflow: hidden; } | |
| .seg-radio label { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 7px 12px !important; font-size: 13px !important; flex: 1; justify-content: center !important; } | |
| .seg-radio label + label { border-left: 1px solid var(--color-divider) !important; } | |
| .seg-radio label:has(input:checked) { background: var(--color-accent) !important; color: var(--color-bg) !important; } | |
| .seg-radio label:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; } | |
| .seg-radio input[type="radio"] { display: none !important; } | |
| /* ── native form controls ─────────────────────────────────────────────── */ | |
| .gradio-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), | |
| .gradio-container textarea, .gradio-container select { | |
| background: #fff !important; | |
| color: var(--color-text) !important; | |
| border: 1px solid var(--color-divider) !important; | |
| border-radius: var(--radius-md) !important; | |
| font-size: 14px !important; | |
| text-overflow: ellipsis; | |
| } | |
| .gradio-container label:has(> input[type="checkbox"]), | |
| .gradio-container label:has(> span > input[type="checkbox"]) { | |
| border: none !important; | |
| background: transparent !important; | |
| box-shadow: none !important; | |
| padding: 4px 0 !important; | |
| min-height: 0 !important; | |
| } | |
| .gradio-container .block:has(> label.checkbox-container) { | |
| border: none !important; | |
| background: transparent !important; | |
| box-shadow: none !important; | |
| padding: 0 !important; | |
| } | |
| .gradio-container input[type="checkbox"] { | |
| appearance: none; width: 14px; height: 14px; flex: none; | |
| border: 1px solid var(--color-divider); background: #fff; position: relative; | |
| border-radius: 0; | |
| } | |
| .gradio-container input[type="checkbox"]:checked { | |
| background: var(--color-accent); border-color: var(--color-accent); | |
| } | |
| .gradio-container input[type="checkbox"]:checked::after { | |
| content: ""; position: absolute; left: 3px; top: 6px; width: 4px; height: 1.5px; | |
| background: #fff; transform: rotate(45deg); | |
| } | |
| .gradio-container input[type="checkbox"]:checked::before { | |
| content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 1.5px; | |
| background: #fff; transform: rotate(-50deg); | |
| } | |
| .gradio-container input[type="radio"] { | |
| appearance: none; width: 15px; height: 15px; flex: none; border-radius: 50%; | |
| border: 1.5px solid var(--color-divider); background: #fff; | |
| } | |
| .gradio-container input[type="radio"]:checked { | |
| border-color: var(--color-accent); | |
| background: radial-gradient(circle, var(--color-accent) 0 40%, #fff 42% 100%); | |
| } | |
| .gradio-container input[type="range"] { accent-color: var(--color-accent); height: 3px; } | |
| .gradio-container :focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; } | |
| /* Gradio pulses a 2px accent border + animation around every component | |
| whose value is currently pending ("generating"), independent of | |
| show_progress. One action often updates several visible components at | |
| once (a table, a note, a stat panel, …), so this reads as multiple | |
| flashing "loading bars" appearing together — we already surface busy | |
| state through the triggering button's own label (see app.py's `_busy` | |
| helper), so drop Gradio's border/animation entirely rather than have it | |
| multiply per output. */ | |
| .gradio-container .generating { | |
| animation: none !important; | |
| border-color: transparent !important; | |
| border-width: 0 !important; | |
| background: none !important; | |
| } | |
| /* The one deliberate loading indicator: a thin animated bar along the | |
| bottom edge of whichever action button is currently busy. Toggled | |
| explicitly by app.py's `_busy`/`_idle` helpers via the `is-busy` class — | |
| never by Gradio's own per-component pending state — so exactly one of | |
| these can ever be on screen at a time. */ | |
| /* elem_classes lands directly on the <button> tag for gr.Button (no | |
| wrapper div) — cover both that and a wrapper div defensively. */ | |
| .is-busy, .is-busy button { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .is-busy::after, .is-busy button::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; bottom: 0; height: 2px; width: 35%; | |
| background: currentColor; | |
| opacity: .7; | |
| animation: workbench-busy-sweep 1.1s ease-in-out infinite; | |
| } | |
| @keyframes workbench-busy-sweep { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(285%); } | |
| } | |
| /* dataframes (.tbl-like) */ | |
| .gradio-container table { color: var(--color-text) !important; font-size: 12.5px !important; } | |
| .gradio-container thead th { | |
| font: 500 10px/1 var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase; | |
| color: var(--color-muted-2) !important; background: transparent !important; | |
| border-bottom: 1px solid var(--color-divider) !important; | |
| } | |
| .gradio-container tbody td { border-bottom: 1px solid var(--color-row-rule) !important; } | |
| .gradio-container .table-wrap .toolbar-container, | |
| .gradio-container .table-wrap .cell-menu-button, | |
| .gradio-container .table-wrap button.cell-menu, | |
| .gradio-container .table-wrap .icon-button-wrapper { display: none !important; } | |
| /* accordion */ | |
| .gradio-container .label-wrap { color: var(--color-text) !important; } | |
| /* ── first-open introduction ─────────────────────────────────────────── */ | |
| #intro { | |
| position: fixed !important; | |
| inset: 0 !important; | |
| z-index: 60 !important; | |
| min-height: 100vh !important; | |
| display: grid !important; | |
| place-items: center !important; | |
| padding: 24px !important; | |
| background: rgba(29, 31, 32, .6) !important; | |
| border: 0 !important; | |
| } | |
| #intro[style*="display: none"] { | |
| display: none !important; | |
| } | |
| #intro > .form, | |
| #intro .form { | |
| display: contents !important; | |
| } | |
| .intro-card { | |
| position: relative; | |
| width: min(556px, calc(100vw - 48px)) !important; | |
| background: var(--color-bg) !important; | |
| border: 1px solid rgba(29,31,32,.18) !important; | |
| padding: 26px 28px 20px !important; | |
| box-shadow: 0 18px 44px rgba(0,0,0,.18) !important; | |
| } | |
| .intro-card::before, | |
| .intro-card::after { | |
| content: ""; | |
| position: absolute; | |
| top: -6px; | |
| bottom: -6px; | |
| width: 11px; | |
| pointer-events: none; | |
| border-color: color-mix(in srgb, var(--color-text) 55%, transparent); | |
| } | |
| .intro-card::before { | |
| left: -6px; | |
| border-left: 1px solid; | |
| border-top: 1px solid; | |
| border-bottom: 1px solid; | |
| } | |
| .intro-card::after { | |
| right: -6px; | |
| border-right: 1px solid; | |
| border-top: 1px solid; | |
| border-bottom: 1px solid; | |
| } | |
| .intro-card-page { | |
| gap: 0 !important; | |
| } | |
| .intro-step { | |
| font: 500 10px/1.3 var(--font-mono); | |
| letter-spacing: .1em; | |
| text-transform: uppercase; | |
| color: var(--color-accent-700); | |
| } | |
| .intro-card h4 { | |
| margin: 10px 0 10px; | |
| font: 600 27px/1 var(--font-heading); | |
| color: var(--color-text); | |
| } | |
| .intro-card p { | |
| margin: 0 0 10px; | |
| font-size: 13.5px; | |
| line-height: 1.55; | |
| color: color-mix(in srgb, var(--color-text) 74%, transparent) !important; | |
| } | |
| .intro-stage-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin: 8px 0 6px; | |
| } | |
| .intro-stage-list div { | |
| display: grid; | |
| grid-template-columns: 28px minmax(0, 1fr); | |
| gap: 8px; | |
| align-items: baseline; | |
| font-size: 13px; | |
| } | |
| .intro-stage-list em { | |
| font: 500 10px/1 var(--font-mono); | |
| color: var(--color-accent-700); | |
| font-style: normal; | |
| } | |
| .intro-card-foot { | |
| align-items: center !important; | |
| justify-content: space-between !important; | |
| gap: 12px 16px !important; | |
| margin-top: 16px !important; | |
| padding-top: 14px !important; | |
| border-top: 1px solid var(--color-divider) !important; | |
| flex-wrap: wrap !important; | |
| } | |
| .intro-card-foot > *:first-child { | |
| flex: 1 1 auto !important; | |
| min-width: 0 !important; | |
| max-width: 100% !important; | |
| overflow-wrap: anywhere; | |
| } | |
| .intro-card-actions { | |
| align-items: center !important; | |
| justify-content: flex-end !important; | |
| flex: 1 0 220px !important; | |
| gap: 12px !important; | |
| flex-wrap: nowrap !important; | |
| width: auto !important; | |
| margin-left: auto !important; | |
| } | |
| .intro-card-actions > * { | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| } | |
| .intro-card-actions button { | |
| min-height: 30px !important; | |
| padding: 0 12px !important; | |
| font-size: 12.5px !important; | |
| white-space: normal !important; | |
| line-height: 1.15 !important; | |
| } | |
| .intro-dots { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| flex: 0 0 auto; | |
| } | |
| .intro-dots i { | |
| width: 8px; | |
| height: 8px; | |
| display: block; | |
| background: color-mix(in srgb, var(--color-text) 18%, transparent); | |
| } | |
| .intro-dots i.on { | |
| background: var(--color-accent); | |
| } | |
| /* ── responsive ───────────────────────────────────────────────────────── */ | |
| @media (max-width: 1000px) { | |
| .app-shell { display: block !important; } | |
| .rail-col { min-width: 100% !important; max-width: 100% !important; } | |
| .rail { position: relative; min-height: auto; border-right: 0; border-bottom: 1px solid var(--color-divider); } | |
| .stage-grid, .results-grid { grid-template-columns: 1fr !important; } | |
| } | |
| @media (max-width: 620px) { | |
| .pghd h2 { font-size: 26px; } | |
| .stat-grid, .metric-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } | |
| } | |
| """ | |