Spaces:
Running
Running
| /* Dataset-Maker UI. Colours come from Gradio theme variables so light and | |
| dark mode both work; only the pass/fail marks define their own. */ | |
| .gradio-container { | |
| max-width: 1440px ; | |
| margin: 0 auto ; | |
| --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; | |
| --dm-pass: #15803d; | |
| --dm-fail: #b91c1c; | |
| --dm-warn: #a16207; | |
| } | |
| .dark .gradio-container, .gradio-container.dark { | |
| --dm-pass: #4ade80; | |
| --dm-fail: #f87171; | |
| --dm-warn: #facc15; | |
| } | |
| .gradio-container code, .gradio-container pre { font-family: var(--font-mono); } | |
| /* ---- header ------------------------------------------------------------ */ | |
| #dm-header { padding: 6px 2px 10px; } | |
| #dm-header h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0; } | |
| .dm-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } | |
| .dm-meta { font-family: var(--font-mono); font-size: 12px; color: var(--body-text-color-subdued); } | |
| .dm-meta a { color: var(--link-text-color); } | |
| .dm-sub { margin: 2px 0 6px; font-size: 15px; font-weight: 500; } | |
| .dm-desc, .dm-why { margin: 0 0 4px; max-width: 980px; font-size: 13px; line-height: 1.5; | |
| color: var(--body-text-color-subdued); } | |
| .dm-why b { color: var(--body-text-color); font-weight: 600; } | |
| .dm-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; } | |
| .dm-tags li { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 8px; | |
| border: 1px solid var(--border-color-primary); border-radius: 3px; | |
| background: var(--block-background-fill); color: var(--body-text-color); } | |
| .dm-steps { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 10px 0 0; | |
| font-family: var(--font-mono); font-size: 12px; } | |
| .dm-steps li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 0; | |
| color: var(--body-text-color); } | |
| .dm-steps li + li::before { content: "\2192"; margin-right: 10px; color: var(--body-text-color-subdued); } | |
| .dm-steps span { display: inline-flex; align-items: center; justify-content: center; | |
| width: 18px; height: 18px; border: 1px solid var(--border-color-primary); border-radius: 3px; | |
| font-size: 11px; color: var(--body-text-color-subdued); } | |
| /* ---- section labels ---------------------------------------------------- */ | |
| .dm-section { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; | |
| text-transform: uppercase; color: var(--body-text-color-subdued); margin: 6px 0 -2px; } | |
| .dm-note { font-size: 12px; color: var(--body-text-color-subdued); line-height: 1.45; } | |
| .dm-note code { font-size: 11.5px; } | |
| /* ---- tables / key-value --------------------------------------------------- */ | |
| .dm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; } | |
| .dm-table th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; | |
| letter-spacing: 0.04em; color: var(--body-text-color-subdued); padding: 4px 8px; | |
| border-bottom: 1px solid var(--border-color-primary); } | |
| .dm-table td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--border-color-primary); } | |
| .dm-table td:first-child { white-space: nowrap; font-weight: 600; } | |
| .dm-table code { font-size: 11.5px; } | |
| .dm-guarantees td:first-child { width: 150px; } | |
| .dm-guarantees td:last-child { width: 260px; color: var(--body-text-color-subdued); } | |
| .dm-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; | |
| font-size: 12.5px; line-height: 1.5; } | |
| .dm-kv dt { color: var(--body-text-color-subdued); } | |
| .dm-kv dd { margin: 0; font-family: var(--font-mono); font-size: 12px; } | |
| .dm-pass { color: var(--dm-pass); font-weight: 600; } | |
| .dm-fail { color: var(--dm-fail); font-weight: 600; } | |
| .dm-warn { color: var(--dm-warn); font-weight: 600; } | |
| /* ---- run summary strip -------------------------------------------------- */ | |
| .dm-summary { font-size: 12.5px; line-height: 1.6; padding: 8px 10px; | |
| border: 1px solid var(--border-color-primary); border-radius: 4px; | |
| background: var(--block-background-fill); } | |
| .dm-summary.dm-empty { color: var(--body-text-color-subdued); } | |
| .dm-summary .dm-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--font-mono); font-size: 12px; } | |
| .dm-summary .dm-stats span b { font-weight: 600; } | |
| .dm-summary .dm-timing { font-family: var(--font-mono); font-size: 11.5px; color: var(--body-text-color-subdued); margin-top: 2px; } | |
| .dm-pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; margin: 0; padding: 10px 12px; | |
| border: 1px solid var(--border-color-primary); border-radius: 4px; background: var(--background-fill-secondary); | |
| overflow-x: auto; } | |
| .dm-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; } | |
| .dm-list li { margin-bottom: 3px; } | |
| .dm-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color-primary); | |
| font-size: 12px; color: var(--body-text-color-subdued); } | |
| /* ---- components ---------------------------------------------------------- */ | |
| /* Gradio 4.44 sets the Gallery box to a fixed height with overflow hidden, but | |
| the inner container is not tied to it, so the grid grows past the box and is | |
| clipped instead of scrolling. Make the container fill the box and scroll the | |
| grid inside it. */ | |
| #dm-gallery { max-height: 60vh; } | |
| #dm-gallery .gallery-container { height: 100%; } | |
| #dm-gallery .grid-wrap { max-height: 100%; overflow-y: auto; } | |
| #dm-gallery .thumbnails { max-height: 60vh; overflow-y: auto; } | |
| #dm-gallery .caption-label { font-family: var(--font-mono); font-size: 11px; } | |
| #dm-gt-table table { font-family: var(--font-mono); font-size: 12px; } | |
| .tab-nav button { font-size: 13px; } | |
| #dm-generate { font-weight: 600; } | |
| /* Gradio lets the main content box grow to fill the window, which parks the | |
| footer at the bottom and leaves a blank band under short tabs (manifest, | |
| Export) on tall screens. It is an inline style, hence !important. */ | |
| .gradio-container .wrap > .contain { flex-grow: 0 ; } | |
| /* ---- narrow screens ------------------------------------------------------ */ | |
| /* Gradio sets an inline min-width on blocks, so the summary needs !important to | |
| wrap below the page dropdown instead of shrinking to a sliver. */ | |
| #dm-summary { flex: 1 1 320px; min-width: min(320px, 100%) ; } | |
| /* Tables keep their desktop layout and scroll sideways when the column is | |
| too narrow (phones, tablets), instead of spilling past their card. */ | |
| .dm-scroll { overflow-x: auto; max-width: 100%; } | |