| """VANTAGE-Bench Leaderboard — complete CSS bundle. |
| |
| Single source of truth for all visual styling. |
| Imported by app.py and passed directly to demo.launch(css=CSS). |
| """ |
|
|
| CSS = """ |
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); |
| |
| /* ── Force light theme ────────────────────────────────────────────────── |
| The leaderboard is designed as a light-themed, paper-like research UI. |
| Gradio's default theme inherits browser/system dark mode through CSS |
| variables (--body-text-color, --background-fill-primary, --neutral-*, |
| etc.) and Hugging Face Spaces applies its own dark theme on top. |
| Either path inverts our text to white-on-white. We neutralize both by: |
| 1. Declaring color-scheme: light on the root so the UA paints form |
| controls (scrollbars, native selects, checkboxes) in light style. |
| 2. Overriding Gradio's CSS custom properties at :root AND inside |
| .gradio-container, both unconditionally and inside the |
| prefers-color-scheme: dark media query, so dark mode cannot |
| re-assign them. |
| 3. Forcing explicit, dark-on-light color/background on every text- |
| bearing leaderboard element below (header, tabs, filters, tables, |
| legend, footer, about, side panel). Search for `!important color:` |
| in this file — those rules are what survives theme inversion. */ |
| :root, |
| .gradio-container, |
| .gradio-container.dark, |
| .dark .gradio-container, |
| html.dark, |
| body.dark { |
| color-scheme: light !important; |
| /* Gradio core surface tokens (Default theme) */ |
| --body-background-fill: #ffffff !important; |
| --body-text-color: #111827 !important; |
| --body-text-color-subdued: #6b7280 !important; |
| --background-fill-primary: #ffffff !important; |
| --background-fill-secondary: #fafafa !important; |
| --block-background-fill: #ffffff !important; |
| --block-label-background-fill: #ffffff !important; |
| --block-label-text-color: #374151 !important; |
| --block-title-text-color: #111827 !important; |
| --block-border-color: #e5e7eb !important; |
| --block-info-text-color: #6b7280 !important; |
| --border-color-primary: #e5e7eb !important; |
| --border-color-accent: #e5e7eb !important; |
| --color-accent: #2563eb !important; |
| --color-accent-soft: #eff6ff !important; |
| --link-text-color: #2563eb !important; |
| --link-text-color-hover: #1d4ed8 !important; |
| --link-text-color-visited: #2563eb !important; |
| --link-text-color-active: #1d4ed8 !important; |
| /* Inputs */ |
| --input-background-fill: #ffffff !important; |
| --input-background-fill-focus: #ffffff !important; |
| --input-border-color: #d1d5db !important; |
| --input-border-color-focus: #2563eb !important; |
| --input-text-size: 13px !important; |
| --input-placeholder-color: #9ca3af !important; |
| --checkbox-background-color: #ffffff !important; |
| --checkbox-background-color-focus: #ffffff !important; |
| --checkbox-background-color-hover: #f9fafb !important; |
| --checkbox-background-color-selected: #2563eb !important; |
| --checkbox-border-color: #d1d5db !important; |
| --checkbox-border-color-focus: #2563eb !important; |
| --checkbox-border-color-hover: #9ca3af !important; |
| --checkbox-border-color-selected: #2563eb !important; |
| --checkbox-label-background-fill: transparent !important; |
| --checkbox-label-background-fill-hover: transparent !important; |
| --checkbox-label-background-fill-selected: transparent !important; |
| --checkbox-label-text-color: #374151 !important; |
| --checkbox-label-text-color-selected: #111827 !important; |
| /* Tables */ |
| --table-even-background-fill: #fafafa !important; |
| --table-odd-background-fill: #ffffff !important; |
| --table-row-focus: #F3EEF9 !important; |
| --table-border-color: #e5e7eb !important; |
| --table-text-color: #111827 !important; |
| /* Buttons (we override the close button explicitly elsewhere) */ |
| --button-secondary-background-fill: #ffffff !important; |
| --button-secondary-background-fill-hover: #f9fafb !important; |
| --button-secondary-text-color: #111827 !important; |
| --button-secondary-text-color-hover: #111827 !important; |
| --button-secondary-border-color: #d1d5db !important; |
| /* Neutral ramp — Gradio's dark theme reassigns these to dark surfaces */ |
| --neutral-50: #fafafa !important; |
| --neutral-100: #f3f4f6 !important; |
| --neutral-200: #e5e7eb !important; |
| --neutral-300: #d1d5db !important; |
| --neutral-400: #9ca3af !important; |
| --neutral-500: #6b7280 !important; |
| --neutral-600: #4b5563 !important; |
| --neutral-700: #374151 !important; |
| --neutral-800: #1f2937 !important; |
| --neutral-900: #111827 !important; |
| --neutral-950: #030712 !important; |
| } |
| |
| /* Re-apply the same overrides inside any dark-mode media query so that |
| Gradio (and HF Spaces) cannot re-assign the variables when the user's |
| system is set to dark. We don't want responsive dark theming here. */ |
| @media (prefers-color-scheme: dark) { |
| :root, |
| .gradio-container, |
| .gradio-container.dark, |
| .dark .gradio-container, |
| html.dark, |
| body.dark { |
| color-scheme: light !important; |
| --body-background-fill: #ffffff !important; |
| --body-text-color: #111827 !important; |
| --body-text-color-subdued: #6b7280 !important; |
| --background-fill-primary: #ffffff !important; |
| --background-fill-secondary: #fafafa !important; |
| --block-background-fill: #ffffff !important; |
| --block-label-text-color: #374151 !important; |
| --block-title-text-color: #111827 !important; |
| --block-border-color: #e5e7eb !important; |
| --block-info-text-color: #6b7280 !important; |
| --border-color-primary: #e5e7eb !important; |
| --input-background-fill: #ffffff !important; |
| --input-border-color: #d1d5db !important; |
| --input-placeholder-color: #9ca3af !important; |
| --table-even-background-fill: #fafafa !important; |
| --table-odd-background-fill: #ffffff !important; |
| --table-border-color: #e5e7eb !important; |
| --table-text-color: #111827 !important; |
| --neutral-50: #fafafa !important; |
| --neutral-100: #f3f4f6 !important; |
| --neutral-200: #e5e7eb !important; |
| --neutral-300: #d1d5db !important; |
| --neutral-400: #9ca3af !important; |
| --neutral-500: #6b7280 !important; |
| --neutral-600: #4b5563 !important; |
| --neutral-700: #374151 !important; |
| --neutral-800: #1f2937 !important; |
| --neutral-900: #111827 !important; |
| --neutral-950: #030712 !important; |
| } |
| /* HF Spaces sometimes scopes dark mode under `.dark` rather than the |
| media query; force the inner gradio surface to stay light there too. */ |
| html, body, .gradio-container, .gradio-container .main { |
| background: #ffffff !important; |
| color: #111827 !important; |
| } |
| } |
| |
| /* HF Spaces / Gradio also toggle a `.dark` class on <html> / <body> / |
| .gradio-container directly. Override those surfaces unconditionally. */ |
| html.dark, body.dark, |
| .dark, .dark body, |
| .gradio-container.dark, |
| .dark .gradio-container, |
| .dark .gradio-container .main, |
| .dark .gradio-container .app, |
| .dark .gradio-container .contain, |
| .dark .gradio-container .fillable, |
| .dark .gradio-container .wrap, |
| .dark .gradio-container .block, |
| .dark .gradio-container .form { |
| background: #ffffff !important; |
| background-color: #ffffff !important; |
| color: #111827 !important; |
| } |
| |
| /* ── Reset ────────────────────────────────────────────────────────────── */ |
| *, *::before, *::after { box-sizing: border-box; } |
| |
| body, .gradio-container { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif; |
| color: #111827 !important; |
| font-size: 13px; |
| background: #ffffff !important; |
| color-scheme: light !important; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| /* Belt-and-suspenders: keep the outer page surfaces explicitly light even |
| if Gradio injects a wrapper we don't otherwise touch. */ |
| html, body, |
| .gradio-container, |
| .gradio-container .main, |
| .gradio-container .app, |
| .gradio-container .contain, |
| .gradio-container .fillable { |
| background: #ffffff !important; |
| color: #111827 !important; |
| } |
| |
| /* ── Width / layout ───────────────────────────────────────────────────── */ |
| .gradio-container, |
| .gradio-container .main, |
| .gradio-container .app, |
| .gradio-container .contain, |
| .gradio-container .wrap, |
| .gradio-container .fillable { |
| max-width: min(95vw, 1800px) !important; |
| width: 100% !important; |
| margin: 0 auto !important; |
| } |
| |
| /* Keep hero text from spanning the full wide-screen width */ |
| .lb-header { |
| max-width: 960px; |
| margin-left: auto !important; |
| margin-right: auto !important; |
| } |
| |
| .gradio-container { padding: 0 24px 40px !important; } |
| |
| /* Kill default Gradio cards / shadows */ |
| .gradio-container .block, |
| .gradio-container .form, |
| .gradio-container .gap, |
| .gradio-container .panel { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| |
| /* ── Header ───────────────────────────────────────────────────────────── */ |
| .lb-header { |
| text-align: center; |
| padding: 0 0 12px; |
| margin-bottom: 4px; |
| } |
| |
| .lb-nav { |
| font-size: 12px; |
| color: #6b7280; |
| display: flex; |
| gap: 14px; |
| justify-content: center; |
| align-items: center; |
| padding: 4px 0 2px; |
| } |
| |
| .lb-nav a { |
| color: #9ca3af; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 3px; |
| font-weight: 400; |
| } |
| .lb-nav a:hover { color: #6b7280; } |
| .lb-nav .lb-sep { color: #d1d5db; } |
| |
| /* Hero-position nav: prominent, centered links beneath the subtitle. |
| Sized to be clearly readable alongside the title; weight 600 for |
| visual presence without becoming heavy. */ |
| .lb-nav-hero { |
| margin: 16px auto 0; |
| font-size: 19px; |
| gap: 24px; |
| flex-wrap: wrap; |
| } |
| .lb-nav-hero a { |
| color: #374151; |
| font-weight: 600; |
| text-decoration: none; |
| letter-spacing: 0.01em; |
| transition: color 120ms ease; |
| } |
| .lb-nav-hero a:hover { color: #111827; text-decoration: underline; } |
| .lb-nav-hero .lb-sep { |
| color: #d1d5db; |
| font-size: 19px; |
| font-weight: 300; |
| } |
| |
| /* Footer nav: clearly clickable, blue, with diagonal arrow */ |
| .lb-footer-nav { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 11px; |
| } |
| .lb-footer-nav a { |
| color: #2563eb; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 2px; |
| font-weight: 500; |
| } |
| .lb-footer-nav a:hover { color: #1d4ed8; text-decoration: underline; } |
| .lb-footer-nav .lb-nav-arrow { font-size: 10px; opacity: 0.75; margin-left: 1px; } |
| .lb-footer-nav a:hover .lb-nav-arrow { opacity: 1; } |
| .lb-footer-nav .lb-sep { color: #d1d5db; } |
| |
| .lb-hero { padding-top: 4px; text-align: center; } |
| |
| /* Hero title — large primary anchor. The `.gradio-container` prefix + |
| !important is intentional: HF Spaces injects extra Gradio/theme CSS |
| that otherwise wins on specificity and shrinks/reflows the wordmark. */ |
| .gradio-container .lb-hero .lb-wordmark, |
| .gradio-container .lb-wordmark { |
| font-size: 68px !important; |
| font-weight: 700 !important; |
| letter-spacing: -1.6px !important; |
| margin: 8px 0 8px !important; |
| line-height: 1.04 !important; |
| text-align: center !important; |
| display: block !important; |
| width: 100% !important; |
| } |
| |
| /* Clemson palette: Orange #F66733, Regalia (Purple) #522D80 */ |
| .gradio-container .lb-vantage { color: #F66733 !important; } |
| .gradio-container .lb-dash { color: #000000 !important; } |
| .gradio-container .lb-bench-label { color: #522D80 !important; } |
| |
| .gradio-container .lb-summary { |
| font-size: 16px !important; |
| color: #111827 !important; |
| max-width: 940px !important; |
| margin-left: auto !important; |
| margin-right: auto !important; |
| margin-top: 10px !important; |
| margin-bottom: 0 !important; |
| line-height: 1.6 !important; |
| text-align: center !important; |
| display: block !important; |
| } |
| |
| .gradio-container .lb-acronym { |
| font-size: 17px !important; |
| color: #111827 !important; |
| text-align: center !important; |
| margin-left: auto !important; |
| margin-right: auto !important; |
| margin-top: 10px !important; |
| margin-bottom: 0 !important; |
| max-width: 680px !important; |
| letter-spacing: 0.02em !important; |
| display: block !important; |
| width: auto !important; |
| } |
| .gradio-container .lb-acronym b { |
| color: #522D80 !important; |
| font-weight: 600 !important; |
| } |
| |
| |
| /* ── Controls panel ───────────────────────────────────────────────────── */ |
| /* The Column wrapper gets .lb-controls-wrap; override the global .block killer */ |
| .gradio-container .lb-controls-wrap { |
| border: none !important; |
| border-radius: 0 !important; |
| background: transparent !important; |
| padding: 6px 0 4px !important; |
| margin-bottom: 4px !important; |
| box-shadow: none !important; |
| gap: 6px !important; |
| } |
| |
| /* Children of the panel: remove any Gradio card styling */ |
| .lb-controls-wrap .block, |
| .lb-controls-wrap .form { |
| border: none !important; |
| border-radius: 0 !important; |
| background: transparent !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| box-shadow: none !important; |
| } |
| |
| /* Dropdown labels */ |
| .lb-filters .label-wrap span, |
| .lb-filters label span { |
| font-size: 12px !important; |
| font-weight: 500 !important; |
| color: #6b7280 !important; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
| .lb-filters .label-wrap { margin-bottom: 2px !important; } |
| |
| /* Search box */ |
| .lb-filters input[type="text"] { |
| padding: 6px 10px !important; |
| font-size: 12px !important; |
| border-radius: 8px !important; |
| border: 1px solid #d1d5db !important; |
| background: #fff !important; |
| box-shadow: none !important; |
| width: 100% !important; |
| outline: none !important; |
| } |
| .lb-filters input[type="text"]:focus { border-color: #2563eb !important; } |
| |
| .gradio-container .lb-filters input[type="text"] { height: 38px !important; } |
| |
| /* Search input — visually match dropdown filter boxes |
| Target both <input> AND <textarea> because Gradio Textbox may render as either. */ |
| .gradio-container .lb-search-box, |
| .gradio-container .lb-search-box > div, |
| .gradio-container .lb-search-box .wrap, |
| .gradio-container .lb-search-box .form { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| } |
| .gradio-container .lb-filters .lb-search-box input, |
| .gradio-container .lb-filters .lb-search-box input[type="text"], |
| .gradio-container .lb-filters .lb-search-box textarea, |
| .gradio-container .lb-search-box input, |
| .gradio-container .lb-search-box input[type="text"], |
| .gradio-container .lb-search-box textarea { |
| height: 38px !important; |
| min-height: 38px !important; |
| max-height: 38px !important; |
| padding: 8px 12px !important; |
| font-size: 12px !important; |
| line-height: 1.4 !important; |
| border-radius: 8px !important; |
| border: 1px solid #d1d5db !important; |
| background: #ffffff !important; |
| box-shadow: none !important; |
| width: 100% !important; |
| outline: none !important; |
| color: #111 !important; |
| resize: none !important; |
| overflow: hidden !important; |
| font-family: inherit !important; |
| display: block !important; |
| } |
| .gradio-container .lb-search-box input::placeholder, |
| .gradio-container .lb-search-box textarea::placeholder { |
| color: #9ca3af !important; |
| opacity: 1 !important; |
| } |
| .gradio-container .lb-search-box input:focus, |
| .gradio-container .lb-search-box textarea:focus, |
| .gradio-container .lb-search-box input:focus-visible, |
| .gradio-container .lb-search-box textarea:focus-visible { |
| border-color: #2563eb !important; |
| box-shadow: 0 0 0 1px #2563eb !important; |
| } |
| |
| /* Dropdown select elements */ |
| .lb-filters select, |
| .lb-filters .secondary-wrap, |
| .lb-filters [class*="dropdown"] input, |
| .lb-filters [class*="Dropdown"] input { |
| font-size: 11px !important; |
| border-radius: 8px !important; |
| border: 1px solid #d1d5db !important; |
| background: #fff !important; |
| color: #111 !important; |
| box-shadow: none !important; |
| padding: 6px 10px !important; |
| height: 38px !important; |
| min-height: 38px !important; |
| box-sizing: border-box !important; |
| line-height: 1.4 !important; |
| } |
| |
| /* Filter row: single horizontal line, tight label-to-control spacing. |
| - flex + align-items: flex-end → every control sits on the same baseline |
| even if Gradio wrappers around the Textbox vs Dropdown have different |
| intrinsic heights. |
| - column-gap controls horizontal spacing between filters; row-gap kicks |
| in only when the row wraps on narrow widths. |
| - .lb-filter-col internal gap:6px is the only space between label and |
| its input (replaces the previous wrapper-driven whitespace stack). */ |
| .gradio-container .lb-filters { |
| display: flex !important; |
| flex-wrap: wrap !important; |
| align-items: flex-end !important; |
| justify-content: flex-start !important; |
| column-gap: 10px !important; |
| row-gap: 8px !important; |
| margin-top: 4px !important; |
| margin-bottom: 8px !important; |
| } |
| /* Each filter column is sized to its content + a small breathing margin, |
| instead of expanding via Gradio's `scale=` prop (which sets flex-grow |
| inline). Overriding flex-grow:0 stops the columns from absorbing the |
| leftover row width, so the filter cluster sits at the row's left edge |
| with `column-gap: 10px` between groups; the remaining horizontal space |
| on wide viewports is intentionally empty. flex-shrink:1 keeps the |
| responsive collapse behaviour on narrow widths. */ |
| .gradio-container .lb-filter-col { |
| display: flex !important; |
| flex-direction: column !important; |
| justify-content: flex-end !important; |
| gap: 6px !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| flex-grow: 0 !important; |
| flex-shrink: 1 !important; |
| } |
| .gradio-container .lb-filters .lb-filter-col:nth-child(1) { flex-basis: 340px !important; } /* SEARCH */ |
| .gradio-container .lb-filters .lb-filter-col:nth-child(2) { flex-basis: 170px !important; } /* SUBMISSION TYPE */ |
| .gradio-container .lb-filters .lb-filter-col:nth-child(3) { flex-basis: 130px !important; } /* ACCESS */ |
| .gradio-container .lb-filters .lb-filter-col:nth-child(4) { flex-basis: 140px !important; } /* PARAMETERS */ |
| .gradio-container .lb-filters .lb-filter-col.lb-filter-verified { flex-basis: auto !important; } /* VERIFIED ONLY */ |
| .gradio-container .lb-filters .lb-search-box input, |
| .gradio-container .lb-filters .lb-search-box textarea { |
| box-sizing: border-box !important; |
| } |
| /* Compact filter label sitting directly above its input — no extra |
| margin/padding from Gradio's gr.HTML wrapper bleeds through. */ |
| .gradio-container .filter-lbl { |
| display: block !important; |
| font-size: 12px !important; |
| font-weight: 500 !important; |
| color: #374151 !important; |
| text-transform: uppercase !important; |
| letter-spacing: 0.04em !important; |
| line-height: 1.2 !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| } |
| /* Strip Gradio's default block-level margins from every wrapper inside a |
| filter column so the only vertical spacing comes from the .lb-filter-col |
| `gap: 6px` above. Targets gr.HTML hosts, gr.Textbox/Dropdown/Checkbox |
| blocks, and their inner .wrap / .form / .container divs. */ |
| .gradio-container .lb-filter-col > .block, |
| .gradio-container .lb-filter-col > .form, |
| .gradio-container .lb-filter-col > .gr-html, |
| .gradio-container .lb-filter-col > div, |
| .gradio-container .lb-filter-col .wrap, |
| .gradio-container .lb-filter-col .container { |
| margin: 0 !important; |
| } |
| /* Root-cause fix for Search-vs-Dropdown misalignment: |
| gr.Textbox's outer .block has more intrinsic padding-bottom than |
| gr.Dropdown's, so even with `align-items: flex-end` on the row the |
| columns' computed bottoms differed by a few pixels — the visible |
| search input ended up sitting a touch higher than the dropdowns. |
| Pin every NON-LABEL direct child of the filter column to exactly the |
| visible control height (38px). The label block is excluded via |
| :not(:has(.filter-lbl)) so it stays auto-height. */ |
| .gradio-container .lb-filter-col > div:not(:has(.filter-lbl)) { |
| height: 38px !important; |
| min-height: 38px !important; |
| box-sizing: border-box !important; |
| display: flex !important; |
| align-items: center !important; |
| padding: 0 !important; |
| } |
| /* Checkbox column: the verified-only block also pins to 38px above, so the |
| checkbox + its label sit vertically centered against the inputs' midline. */ |
| .gradio-container .lb-filter-verified > div:not(:has(.filter-lbl)) { |
| justify-content: flex-start !important; |
| } |
| |
| /* ── Tag / sort pills ─────────────────────────────────────────────────── */ |
| .lb-col-toggle-inline .wrap, |
| .lb-sort-pills .wrap { |
| display: flex !important; |
| flex-wrap: wrap !important; |
| gap: 5px !important; |
| padding: 2px 0 !important; |
| } |
| |
| .lb-col-toggle-inline label, |
| .lb-sort-pills label { |
| background: none; |
| border: 1px solid #d1d5db; |
| border-radius: 999px; |
| padding: 2px 8px; |
| font-size: 11px; |
| font-weight: 400; |
| color: #6b7280; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| line-height: 1.6; |
| user-select: none; |
| transition: background 0.1s, border-color 0.1s, color 0.1s; |
| } |
| |
| .lb-col-toggle-inline label:has(input:checked), |
| .lb-sort-pills label:has(input:checked) { |
| background: #fff; |
| border-color: #9ca3af; |
| color: #111; |
| font-weight: 500; |
| } |
| |
| /* Hide raw inputs behind pills */ |
| .lb-col-toggle-inline input, |
| .lb-sort-pills input, |
| .lb-col-toggle-inline progress, |
| .lb-sort-pills progress { display: none !important; } |
| |
| /* ── Tab strip ────────────────────────────────────────────────────────── */ |
| .tabs > .tab-nav, |
| .gradio-container .tab-nav { |
| border-bottom: 1px solid #e5e7eb !important; |
| margin-bottom: 0 !important; |
| padding: 0 !important; |
| background: transparent !important; |
| } |
| |
| /* Remove default padding between tab nav and table */ |
| .gradio-container .tabitem { |
| padding: 2px 0 0 0 !important; |
| } |
| |
| .tab-nav button, |
| .gradio-container .tab-nav button { |
| background: transparent !important; |
| border: none !important; |
| border-bottom: 2px solid transparent !important; |
| border-radius: 0 !important; |
| padding: 10px 20px !important; |
| margin: 0 !important; |
| margin-bottom: -1px !important; |
| font-size: 20px !important; |
| line-height: 1.2 !important; |
| font-weight: 400 !important; |
| color: #6b7280 !important; |
| box-shadow: none !important; |
| transition: color 120ms ease, border-color 120ms ease; |
| letter-spacing: 0.01em !important; |
| } |
| |
| .tab-nav button:hover { color: #111 !important; } |
| |
| .tab-nav button.selected, |
| .gradio-container .tab-nav button.selected { |
| color: #111 !important; |
| font-weight: 500 !important; |
| border-bottom-color: #F66733 !important; |
| } |
| |
| /* ── Table container ──────────────────────────────────────────────────── */ |
| .gradio-container .table-wrap, |
| .gradio-container [class*="dataframe"] { |
| border: 1px solid #e5e7eb !important; |
| border-radius: 12px !important; |
| overflow: hidden !important; |
| box-shadow: none !important; |
| width: 100% !important; |
| background: transparent !important; |
| } |
| |
| /* User-resizable leaderboard table. |
| Implemented in JS (see `_RESIZE_JS` in app.py) — browser-native |
| CSS `resize: vertical` on .table-wrap was unreliable inside Gradio's |
| Svelte wrapper, so a custom handle (.lb-resize-handle) is injected as |
| a sibling of .lb-table and the JS writes `.table-wrap.style.height` |
| directly on pointer drag. |
| The CSS here only ensures: |
| - .lb-table outer is natural block flow (no flex shenanigans), |
| - .table-wrap is a top-anchored block-layout scroll viewport, |
| - the .lb-resize-handle is visible and styled as a clean drag grip. */ |
| .gradio-container .lb-table { |
| resize: none !important; |
| overflow: visible !important; |
| display: block !important; |
| min-height: 0 !important; |
| max-height: none !important; |
| } |
| .gradio-container .lb-table > div, |
| .gradio-container .lb-table > .container, |
| .gradio-container .lb-table > .wrap { |
| display: block !important; |
| flex: none !important; |
| min-height: 0 !important; |
| height: auto !important; |
| } |
| .gradio-container .lb-table .table-wrap { |
| overflow-x: auto !important; |
| overflow-y: auto !important; |
| display: block !important; |
| box-sizing: border-box !important; |
| /* Height is written inline by JS on drag. */ |
| } |
| /* Sticky header — pinned to the top of .table-wrap's scroll viewport while |
| rows scroll beneath it. Single header row here (unlike the Overall tab's |
| two-row grouped header), so no offset math is needed. */ |
| .gradio-container .lb-table .table-wrap thead th { |
| position: sticky !important; |
| top: 0 !important; |
| z-index: 2 !important; |
| } |
| .gradio-container .lb-table .table-wrap > table { |
| margin: 0 !important; |
| vertical-align: top !important; |
| width: 100% !important; |
| } |
| |
| /* Drag-grip element appended by JS as a sibling immediately after .lb-table. */ |
| .gradio-container .lb-resize-handle { |
| height: 14px; |
| width: 100%; |
| cursor: ns-resize; |
| background: #f9fafb; |
| border: 1px solid #e5e7eb; |
| border-top: none; |
| border-radius: 0 0 12px 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-top: -1px; |
| user-select: none; |
| -webkit-user-select: none; |
| transition: background 120ms ease; |
| position: relative; |
| z-index: 1; |
| touch-action: none; |
| } |
| .gradio-container .lb-resize-handle::before { |
| content: ""; |
| width: 36px; |
| height: 3px; |
| background: #d1d5db; |
| border-radius: 2px; |
| transition: background 120ms ease; |
| } |
| .gradio-container .lb-resize-handle:hover { background: #f3f4f6; } |
| .gradio-container .lb-resize-handle:hover::before { background: #9ca3af; } |
| .gradio-container .lb-resize-handle:active::before { background: #6b7280; } |
| |
| /* Drop the lower corners on the dataframe shell so the handle attaches |
| flush — non-mobile only, since the handle is hidden on mobile. */ |
| @media (min-width: 769px) { |
| .gradio-container .lb-table .table-wrap, |
| .gradio-container .lb-table[class*="dataframe"] { |
| border-bottom-left-radius: 0 !important; |
| border-bottom-right-radius: 0 !important; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .gradio-container .lb-resize-handle { display: none !important; } |
| .gradio-container .lb-table .table-wrap { |
| height: auto !important; |
| max-height: none !important; |
| } |
| } |
| |
| /* ── Table ────────────────────────────────────────────────────────────── */ |
| .gradio-container table, |
| .gradio-container .table-wrap table, |
| .gradio-container [class*="dataframe"] table { |
| width: 100% !important; |
| font-size: 11px !important; |
| border-collapse: collapse !important; |
| background: #fff !important; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; |
| table-layout: fixed !important; |
| } |
| |
| /* Column widths: #, Name are fixed; score cols share remaining space */ |
| .gradio-container .lb-table thead th:nth-child(1) { width: 48px !important; } |
| .gradio-container .lb-table thead th:nth-child(2) { width: 360px !important; } |
| |
| /* Hidden bridge Textbox (one per tab) for the row-click → side panel. |
| Must remain in the DOM (so the JS in app.py's _RESIZE_JS can write the |
| clicked model id into its <input> and fire .change), but takes zero |
| visual space. Do NOT use display:none — Gradio's reactive update may |
| skip non-rendered components. */ |
| .gradio-container .lb-hidden-input { |
| position: absolute !important; |
| left: -9999px !important; |
| width: 1px !important; |
| height: 1px !important; |
| opacity: 0 !important; |
| pointer-events: none !important; |
| overflow: hidden !important; |
| } |
| |
| /* ── Leaderboard tables: hand-rendered HTML, one shared visual style ──── |
| Every tab (Overall + the four pillars) is rendered by util.render as a |
| plain HTML <table> instead of gr.Dataframe — gr.Dataframe can't express |
| the Overall tab's two-row grouped pillar header, and once one tab |
| needed hand-rolled markup, giving all five the same markup keeps their |
| look and click/scroll behavior identical. |
| |
| Design intent: a CLEAN rectangular table. |
| - Subtle 4px border-radius (not the 12px "card" look of gr.Dataframe) |
| - Full visible border on all four sides — no overflow:hidden clipping |
| - Readable font sizes (~15px body, 13–15px headers) — overrides the |
| legacy 11px Gradio Dataframe defaults defined earlier in this file. */ |
| |
| /* Outer container = the gr.HTML element itself. Clean rectangular block: |
| single subtle border on all four sides, small 4px radius, horizontal |
| scroll only if the table exceeds the viewport, no vertical clipping. */ |
| .gradio-container .lb-table-overall, |
| .gradio-container .lb-table-spatial, |
| .gradio-container .lb-table-st, |
| .gradio-container .lb-table-temporal, |
| .gradio-container .lb-table-semantic { |
| border: 1px solid #e5e7eb !important; |
| border-radius: 4px !important; |
| background: #ffffff !important; |
| box-shadow: none !important; |
| overflow-x: auto !important; |
| overflow-y: auto !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| max-height: 480px; |
| box-sizing: border-box !important; |
| } |
| /* Every table gets a resize handle (see _RESIZE_JS in app.py) attached as |
| a sibling directly below it, so its bottom corners go square to sit |
| flush against the handle. */ |
| @media (min-width: 769px) { |
| .gradio-container .lb-table-overall, |
| .gradio-container .lb-table-spatial, |
| .gradio-container .lb-table-st, |
| .gradio-container .lb-table-temporal, |
| .gradio-container .lb-table-semantic { |
| border-bottom-left-radius: 0 !important; |
| border-bottom-right-radius: 0 !important; |
| } |
| } |
| @media (max-width: 768px) { |
| .gradio-container .lb-table-overall, |
| .gradio-container .lb-table-spatial, |
| .gradio-container .lb-table-st, |
| .gradio-container .lb-table-temporal, |
| .gradio-container .lb-table-semantic { |
| max-height: none !important; |
| height: auto !important; |
| overflow-y: visible !important; |
| } |
| } |
| |
| /* Sticky header — pinned to the top of the scroll viewport while the body |
| scrolls beneath it. The Overall tab has two header rows; `--lb-or-h` |
| (the rendered height of its group-row) is measured and set by |
| measureOverallHeaderOffset() in _RESIZE_JS so the task-row offset tracks |
| actual font rendering instead of a guessed pixel value — the 34px |
| fallback covers the pre-JS paint. The four pillar tabs have a single |
| header row, so they just stick at top:0. */ |
| .gradio-container .lb-table-overall thead tr.lb-group-row th { |
| position: sticky !important; |
| top: 0 !important; |
| z-index: 3 !important; |
| } |
| .gradio-container .lb-table-overall thead tr.lb-task-row th { |
| position: sticky !important; |
| top: var(--lb-or-h, 34px) !important; |
| z-index: 3 !important; |
| } |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th, |
| .gradio-container .lb-table-st thead tr.lb-header-row th, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th { |
| position: sticky !important; |
| top: 0 !important; |
| z-index: 3 !important; |
| } |
| /* Strip any Gradio block padding/margin between the wrapper and the table. */ |
| .gradio-container .lb-table-overall > *, |
| .gradio-container .lb-table-spatial > *, |
| .gradio-container .lb-table-st > *, |
| .gradio-container .lb-table-temporal > *, |
| .gradio-container .lb-table-semantic > * { |
| padding: 0 !important; |
| margin: 0 !important; |
| background: transparent !important; |
| } |
| |
| /* The Overall table itself. |
| min-width is the floor below which the container starts horizontally |
| scrolling. The value is tuned so that every pillar super-header — |
| including the long "Spatio-Temp" label sitting above a single task |
| column — fits on one line without overflowing its cell. */ |
| .gradio-container .lb-table-overall table.lb-overall-table { |
| width: 100% !important; |
| min-width: 1380px !important; |
| table-layout: fixed !important; |
| border-collapse: collapse !important; |
| background: #ffffff !important; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; |
| font-size: 15px !important; |
| color: #111827 !important; |
| margin: 0 !important; |
| box-sizing: border-box !important; |
| } |
| /* Pillar tables: same font treatment as Overall, narrower min-width since |
| they carry far fewer columns (rank + name + an aggregate score + 1–3 |
| task scores). */ |
| .gradio-container .lb-table-spatial table.lb-pillar-table, |
| .gradio-container .lb-table-st table.lb-pillar-table, |
| .gradio-container .lb-table-temporal table.lb-pillar-table, |
| .gradio-container .lb-table-semantic table.lb-pillar-table { |
| width: 100% !important; |
| min-width: 640px !important; |
| table-layout: fixed !important; |
| border-collapse: collapse !important; |
| background: #ffffff !important; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; |
| font-size: 15px !important; |
| color: #111827 !important; |
| margin: 0 !important; |
| box-sizing: border-box !important; |
| } |
| |
| /* Column widths via <colgroup> (avoid nth-child collisions). All cells are |
| border-box so padding doesn't bloat columns beyond their declared widths. |
| |
| IMPORTANT — border reset: Gradio's bundled CSS (Tailwind preflight in |
| the HF Spaces build) sets `border-style: solid` + `border-width: 1px` on |
| every element with a dark default color. With border-collapse:collapse |
| that produces a fragmented near-black grid over every cell. We zero out |
| top/left/right borders here; the specific rules below (with higher |
| specificity) re-add only the intentional borders we want to see (row |
| separators, header-bottom underlines, pillar-group dividers). */ |
| .gradio-container .lb-table-overall thead th, |
| .gradio-container .lb-table-overall tbody td, |
| .gradio-container .lb-table-spatial thead th, |
| .gradio-container .lb-table-spatial tbody td, |
| .gradio-container .lb-table-st thead th, |
| .gradio-container .lb-table-st tbody td, |
| .gradio-container .lb-table-temporal thead th, |
| .gradio-container .lb-table-temporal tbody td, |
| .gradio-container .lb-table-semantic thead th, |
| .gradio-container .lb-table-semantic tbody td { |
| box-sizing: border-box !important; |
| border-top: 0 none transparent !important; |
| border-left: 0 none transparent !important; |
| border-right: 1px solid rgba(82, 45, 128, 0.12) !important; |
| } |
| /* Strip the right-edge gridline from the last cell of each row so the |
| container's outer border stands alone (no doubled line at the edge). */ |
| .gradio-container .lb-table-overall thead tr > th:last-child, |
| .gradio-container .lb-table-overall tbody tr > td:last-child, |
| .gradio-container .lb-table-spatial thead tr > th:last-child, |
| .gradio-container .lb-table-spatial tbody tr > td:last-child, |
| .gradio-container .lb-table-st thead tr > th:last-child, |
| .gradio-container .lb-table-st tbody tr > td:last-child, |
| .gradio-container .lb-table-temporal thead tr > th:last-child, |
| .gradio-container .lb-table-temporal tbody tr > td:last-child, |
| .gradio-container .lb-table-semantic thead tr > th:last-child, |
| .gradio-container .lb-table-semantic tbody tr > td:last-child { |
| border-right: 0 none transparent !important; |
| } |
| .gradio-container .lb-table-overall colgroup col.col-rank { width: 64px; } |
| .gradio-container .lb-table-overall colgroup col.col-name { width: 270px; } |
| /* Overall: standalone (non-grouped) column between Name and the pillar |
| task groups. Slightly wider than a task column to give the OVERALL |
| header room to breathe. */ |
| .gradio-container .lb-table-overall colgroup col.col-overall { width: 110px; } |
| .gradio-container .lb-table-overall colgroup col.col-score { width: 110px; } |
| /* Spatio-Temporal column: wider so the "Spatio-Temp" super-header fits |
| on one line (its colspan=1, so no neighbor to share the width with). */ |
| .gradio-container .lb-table-overall colgroup col.col-score-st { width: 150px; } |
| .gradio-container .lb-table-overall thead th { width: auto !important; } |
| |
| /* Pillar tables: same rank/name column widths as Overall; the pillar's |
| own aggregate score (col-agg) gets the same "headline" width as the |
| Overall column, task columns share col-score. */ |
| .gradio-container .lb-table-spatial colgroup col.col-rank, |
| .gradio-container .lb-table-st colgroup col.col-rank, |
| .gradio-container .lb-table-temporal colgroup col.col-rank, |
| .gradio-container .lb-table-semantic colgroup col.col-rank { width: 64px; } |
| .gradio-container .lb-table-spatial colgroup col.col-name, |
| .gradio-container .lb-table-st colgroup col.col-name, |
| .gradio-container .lb-table-temporal colgroup col.col-name, |
| .gradio-container .lb-table-semantic colgroup col.col-name { width: 270px; } |
| .gradio-container .lb-table-spatial colgroup col.col-agg, |
| .gradio-container .lb-table-st colgroup col.col-agg, |
| .gradio-container .lb-table-temporal colgroup col.col-agg, |
| .gradio-container .lb-table-semantic colgroup col.col-agg { width: 140px; } |
| .gradio-container .lb-table-spatial colgroup col.col-score, |
| .gradio-container .lb-table-st colgroup col.col-score, |
| .gradio-container .lb-table-temporal colgroup col.col-score, |
| .gradio-container .lb-table-semantic colgroup col.col-score { width: 130px; } |
| .gradio-container .lb-table-spatial thead th, |
| .gradio-container .lb-table-st thead th, |
| .gradio-container .lb-table-temporal thead th, |
| .gradio-container .lb-table-semantic thead th { width: auto !important; } |
| |
| /* Row 1 — Pillar super-headers (Spatial / Spatio-Temp / Temporal / Semantic). |
| Clemson-inspired light purple background with the deeper Clemson purple |
| for the uppercase label text. Border colors are mid-purples that read as |
| a subtle accent line, not a saturated rule. Overall-tab only — the four |
| pillar tabs have no group-row grouping. */ |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-group { |
| background: #E8E1F3 !important; /* Light Clemson purple */ |
| color: #522D80 !important; /* Clemson purple */ |
| font-size: 14px !important; |
| font-weight: 700 !important; |
| text-transform: uppercase !important; |
| letter-spacing: 0.06em !important; |
| padding: 8px 10px !important; |
| border-bottom: 1px solid #C9B8E0 !important; |
| text-align: center !important; |
| cursor: default !important; |
| white-space: nowrap !important; |
| vertical-align: middle !important; |
| } |
| |
| /* Row 1 — # / Name / Overall corner cells (rowspan=2, plain background). |
| Shared with the pillar tables' # / Name header cells (single row there, |
| same "corner" look). */ |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner, |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-st thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th.lb-corner { |
| background: #f9fafb !important; |
| color: #374151 !important; |
| font-size: 13px !important; |
| font-weight: 700 !important; |
| text-transform: uppercase !important; |
| letter-spacing: 0.05em !important; |
| padding: 8px 10px !important; |
| border-bottom: 1px solid #e5e7eb !important; |
| text-align: left !important; |
| cursor: default !important; |
| vertical-align: middle !important; |
| } |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner:first-child, |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th.lb-corner:first-child, |
| .gradio-container .lb-table-st thead tr.lb-header-row th.lb-corner:first-child, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th.lb-corner:first-child, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th.lb-corner:first-child { |
| text-align: center !important; |
| } |
| /* Overall corner header: same gray "corner" look as # and Name, centered |
| above its centered numeric body cells. */ |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner-num { |
| text-align: center !important; |
| } |
| |
| /* OVERALL / pillar-aggregate column: continuous outer outline — no |
| background fill, so the column inherits the neutral / zebra-striped |
| background of the rest of the table. The four rails are assembled from |
| per-cell borders that border-collapse:collapse merges into single |
| continuous lines: |
| - top = `border-top` on the header cell |
| - left = `border-left` on header + every body cell (merge vertically) |
| - right = `border-right` on header + every body cell (merge vertically) |
| - bottom = `border-bottom` on the LAST body row's cell only |
| Internal row separators (the 1px `#f3f4f6` between body rows from the |
| shared tbody td rule) are left intact, so the box still shows row lines |
| inside. No hover override — the cell joins the row-wide `#F3EEF9` hover |
| wash like every other cell. `lb-overall` is the Overall tab's column; |
| `lb-agg` / `lb-agg-th` is the equivalent pillar-tab aggregate-score |
| column. */ |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner.lb-corner-num, |
| .gradio-container .lb-table-spatial thead th.lb-agg-th, |
| .gradio-container .lb-table-st thead th.lb-agg-th, |
| .gradio-container .lb-table-temporal thead th.lb-agg-th, |
| .gradio-container .lb-table-semantic thead th.lb-agg-th { |
| border-top: 2px solid #522D80 !important; |
| border-left: 2px solid #522D80 !important; |
| border-right: 2px solid #522D80 !important; |
| } |
| .gradio-container .lb-table-overall tbody tr td.lb-overall, |
| .gradio-container .lb-table-spatial tbody tr td.lb-agg, |
| .gradio-container .lb-table-st tbody tr td.lb-agg, |
| .gradio-container .lb-table-temporal tbody tr td.lb-agg, |
| .gradio-container .lb-table-semantic tbody tr td.lb-agg { |
| border-left: 2px solid #522D80 !important; |
| border-right: 2px solid #522D80 !important; |
| } |
| .gradio-container .lb-table-overall tbody tr:last-child td.lb-overall, |
| .gradio-container .lb-table-spatial tbody tr:last-child td.lb-agg, |
| .gradio-container .lb-table-st tbody tr:last-child td.lb-agg, |
| .gradio-container .lb-table-temporal tbody tr:last-child td.lb-agg, |
| .gradio-container .lb-table-semantic tbody tr:last-child td.lb-agg { |
| border-bottom: 2px solid #522D80 !important; |
| } |
| |
| /* Row 2 — Task subheaders (Overall) / the only header row's non-corner |
| columns (pillar tabs). Same look either way: gray background, uppercase, |
| 600 weight. */ |
| .gradio-container .lb-table-overall thead tr.lb-task-row th, |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th, |
| .gradio-container .lb-table-st thead tr.lb-header-row th, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th { |
| background: #f9fafb !important; |
| color: #4b5563 !important; |
| font-size: 13px !important; |
| font-weight: 600 !important; |
| text-transform: uppercase !important; |
| letter-spacing: 0.04em !important; |
| padding: 6px 10px !important; |
| border-bottom: 1px solid #e5e7eb !important; |
| text-align: center !important; |
| cursor: default !important; |
| white-space: nowrap !important; |
| } |
| /* # / Name corner cells win the bold-700/left-align "corner" treatment |
| back over the shared task-header rule above (extra .lb-corner class |
| gives it higher specificity regardless of source order). */ |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-st thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th.lb-corner { |
| font-weight: 700 !important; |
| letter-spacing: 0.05em !important; |
| text-align: left !important; |
| } |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th.lb-corner:first-child, |
| .gradio-container .lb-table-st thead tr.lb-header-row th.lb-corner:first-child, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th.lb-corner:first-child, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th.lb-corner:first-child { |
| text-align: center !important; |
| } |
| |
| /* Body cells — identical across all five tabs. */ |
| .gradio-container .lb-table-overall tbody td, |
| .gradio-container .lb-table-spatial tbody td, |
| .gradio-container .lb-table-st tbody td, |
| .gradio-container .lb-table-temporal tbody td, |
| .gradio-container .lb-table-semantic tbody td { |
| padding: 10px 10px !important; |
| border-bottom: 1px solid #f3f4f6 !important; |
| vertical-align: middle !important; |
| font-size: 15px !important; |
| line-height: 1.4 !important; |
| color: #111827 !important; |
| background: #ffffff !important; |
| } |
| .gradio-container .lb-table-overall tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-spatial tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-st tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-temporal tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-semantic tbody tr:nth-child(even) td { |
| background: #fafafa !important; |
| } |
| .gradio-container .lb-table-overall tbody tr:last-child td, |
| .gradio-container .lb-table-spatial tbody tr:last-child td, |
| .gradio-container .lb-table-st tbody tr:last-child td, |
| .gradio-container .lb-table-temporal tbody tr:last-child td, |
| .gradio-container .lb-table-semantic tbody tr:last-child td { |
| border-bottom: none !important; |
| } |
| .gradio-container .lb-table-overall tbody td.lb-rank, |
| .gradio-container .lb-table-spatial tbody td.lb-rank, |
| .gradio-container .lb-table-st tbody td.lb-rank, |
| .gradio-container .lb-table-temporal tbody td.lb-rank, |
| .gradio-container .lb-table-semantic tbody td.lb-rank { |
| text-align: center !important; |
| color: #6b7280 !important; |
| font-variant-numeric: tabular-nums; |
| font-size: 14px !important; |
| } |
| .gradio-container .lb-table-overall tbody td.lb-name, |
| .gradio-container .lb-table-spatial tbody td.lb-name, |
| .gradio-container .lb-table-st tbody td.lb-name, |
| .gradio-container .lb-table-temporal tbody td.lb-name, |
| .gradio-container .lb-table-semantic tbody td.lb-name { |
| text-align: left !important; |
| font-size: 15px !important; |
| vertical-align: top !important; |
| padding-top: 12px !important; |
| } |
| .gradio-container .lb-table-overall tbody td.lb-score, |
| .gradio-container .lb-table-spatial tbody td.lb-score, |
| .gradio-container .lb-table-st tbody td.lb-score, |
| .gradio-container .lb-table-temporal tbody td.lb-score, |
| .gradio-container .lb-table-semantic tbody td.lb-score { |
| text-align: center !important; |
| font-variant-numeric: tabular-nums; |
| font-size: 15px !important; |
| } |
| .gradio-container .lb-table-overall tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-spatial tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-st tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-temporal tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-semantic tbody td.lb-score.lb-max { |
| font-weight: 700 !important; |
| color: #111827 !important; |
| } |
| .gradio-container .lb-table-overall tbody td.lb-empty-row, |
| .gradio-container .lb-table-spatial tbody td.lb-empty-row, |
| .gradio-container .lb-table-st tbody td.lb-empty-row, |
| .gradio-container .lb-table-temporal tbody td.lb-empty-row, |
| .gradio-container .lb-table-semantic tbody td.lb-empty-row { |
| text-align: center !important; |
| padding: 28px 12px !important; |
| color: #6b7280 !important; |
| font-size: 14px !important; |
| } |
| .gradio-container .lb-table-overall tbody tr:hover td, |
| .gradio-container .lb-table-spatial tbody tr:hover td, |
| .gradio-container .lb-table-st tbody tr:hover td, |
| .gradio-container .lb-table-temporal tbody tr:hover td, |
| .gradio-container .lb-table-semantic tbody tr:hover td { |
| background: #F3EEF9 !important; /* Very light Clemson purple */ |
| } |
| |
| /* Bump readability of the model-name cell so it fills row whitespace. |
| Sizes scale together (name → org → badges) so the visual hierarchy is |
| preserved: name dominant, org subtly secondary, badges still lightweight. */ |
| .gradio-container .lb-table-overall tbody td.lb-name .mc-name-row, |
| .gradio-container .lb-table-spatial tbody td.lb-name .mc-name-row, |
| .gradio-container .lb-table-st tbody td.lb-name .mc-name-row, |
| .gradio-container .lb-table-temporal tbody td.lb-name .mc-name-row, |
| .gradio-container .lb-table-semantic tbody td.lb-name .mc-name-row { font-size: 17px !important; } |
| .gradio-container .lb-table-overall tbody td.lb-name .mc-org, |
| .gradio-container .lb-table-spatial tbody td.lb-name .mc-org, |
| .gradio-container .lb-table-st tbody td.lb-name .mc-org, |
| .gradio-container .lb-table-temporal tbody td.lb-name .mc-org, |
| .gradio-container .lb-table-semantic tbody td.lb-name .mc-org { font-size: 13px !important; } |
| .gradio-container .lb-table-overall tbody td.lb-name .mc-badges .b, |
| .gradio-container .lb-table-spatial tbody td.lb-name .mc-badges .b, |
| .gradio-container .lb-table-st tbody td.lb-name .mc-badges .b, |
| .gradio-container .lb-table-temporal tbody td.lb-name .mc-badges .b, |
| .gradio-container .lb-table-semantic tbody td.lb-name .mc-badges .b { |
| font-size: 12px !important; |
| padding: 2px 7px !important; |
| } |
| .gradio-container .lb-table-overall tbody td.lb-name .mc-name-row .b-verified, |
| .gradio-container .lb-table-spatial tbody td.lb-name .mc-name-row .b-verified, |
| .gradio-container .lb-table-st tbody td.lb-name .mc-name-row .b-verified, |
| .gradio-container .lb-table-temporal tbody td.lb-name .mc-name-row .b-verified, |
| .gradio-container .lb-table-semantic tbody td.lb-name .mc-name-row .b-verified { |
| font-size: 11px !important; |
| padding: 2px 6px !important; |
| } |
| |
| /* Header row */ |
| .gradio-container thead th, |
| .gradio-container .table-wrap thead th { |
| background: #f9fafb !important; |
| color: #374151 !important; |
| font-size: 11px !important; |
| font-weight: 600 !important; |
| text-transform: uppercase !important; |
| letter-spacing: 0.05em !important; |
| padding: 6px 10px !important; |
| border-bottom: 1px solid #e5e7eb !important; |
| white-space: nowrap !important; |
| text-align: left !important; |
| cursor: pointer; |
| user-select: none; |
| } |
| .gradio-container thead th:not(:first-child):not(:nth-child(2)) { |
| text-align: right !important; |
| } |
| |
| /* Data rows */ |
| .gradio-container tbody tr { border-bottom: 1px solid #e5e7eb; } |
| .gradio-container tbody tr:last-child { border-bottom: none; } |
| .gradio-container tbody tr:nth-child(even) td { background: #fafafa !important; } |
| .gradio-container tbody tr:nth-child(odd) td { background: #ffffff !important; } |
| .gradio-container tbody tr:hover td { background: #F3EEF9 !important; } /* Clemson light purple hover */ |
| |
| /* Cells */ |
| .gradio-container tbody td, |
| .gradio-container .table-wrap tbody td { |
| padding: 5px 10px !important; |
| border-bottom: 1px solid #f3f4f6 !important; |
| vertical-align: middle !important; |
| font-size: 11px !important; |
| line-height: 1.35 !important; |
| text-align: right; |
| } |
| .gradio-container tbody td:first-child { |
| text-align: center !important; |
| font-size: 11px !important; |
| color: #6b7280; |
| } |
| .gradio-container tbody td:nth-child(2) { text-align: left !important; } |
| |
| |
| |
| /* ── Model cell (html datatype) ──────────────────────────────────────── */ |
| /* Vertical stack: model name → organization → badges, all left-anchored |
| to the same column edge. align-items: flex-start collapses each child |
| to its content width so nothing stretches and visually drifts. */ |
| .gradio-container .mc { |
| display: flex; |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 0; |
| line-height: 1.3; |
| padding: 0; |
| } |
| .gradio-container .mc-org { |
| font-size: 11px; |
| color: #9ca3af; |
| font-weight: 400; |
| line-height: 1.25; |
| margin-top: 1px; |
| } |
| .gradio-container .mc-link { |
| color: inherit; |
| text-decoration: none; |
| /* Hard-anchor the link to the same x=0 as the org line and badge row. |
| Base styles from Gradio / HF Spaces can otherwise inject a few pixels |
| of padding or shift the inline-link box, causing the name to drift |
| right of the org/badge stack underneath. */ |
| display: inline-block; |
| margin: 0 !important; |
| padding: 0 !important; |
| border: 0 !important; |
| background: transparent !important; |
| text-indent: 0 !important; |
| vertical-align: baseline; |
| } |
| .gradio-container .mc-link b { |
| margin: 0 !important; |
| padding: 0 !important; |
| border: 0 !important; |
| text-indent: 0 !important; |
| font-weight: 700; |
| } |
| .gradio-container .mc-link:hover { |
| text-decoration: underline; |
| color: #2563eb; |
| } |
| /* Defensive: every direct child of the model cell anchors at x=0. */ |
| .gradio-container .mc > .mc-name-row, |
| .gradio-container .mc > .mc-org, |
| .gradio-container .mc > .mc-badges { |
| margin-left: 0 !important; |
| padding-left: 0 !important; |
| text-indent: 0 !important; |
| } |
| .gradio-container .mc-badges { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-start; |
| gap: 2px; |
| margin-top: 4px; |
| } |
| .gradio-container .mc-badges .b { |
| font-size: 9px !important; |
| padding: 1px 4px !important; |
| margin-left: 0 !important; |
| } |
| |
| /* ── Badges ───────────────────────────────────────────────────────────── */ |
| .b, .lb-badge { |
| display: inline-block; |
| border-radius: 999px; |
| font-size: 9px; |
| font-weight: 500; |
| padding: 1px 5px; |
| vertical-align: middle; |
| white-space: nowrap; |
| border: 1px solid transparent; |
| margin-left: 4px; |
| line-height: 1.5; |
| } |
| |
| .b-verified, .lb-badge-verified { background: #dcfce7; color: #15803d; border-color: #86efac; } |
| .b-ensemble, .lb-badge-ensemble { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; } |
| .b-single, .lb-badge-single { background: #f3f4f6; color: #374151; border-color: #d1d5db; } |
| .b-open, .lb-badge-open { background: #ccfbf1; color: #0f766e; border-color: #5eead4; } |
| .b-prop, .lb-badge-prop, |
| .lb-badge-proprietary { background: #fef3c7; color: #92400e; border-color: #fcd34d; } |
| .b-new, .lb-badge-new { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; } |
| |
| /* ── Badge legend (below table) ──────────────────────────────────────── */ |
| .lb-badge-legend { |
| border-top: 1px solid #f3f4f6; |
| margin-top: 8px; |
| padding: 10px 0 6px; |
| font-size: 11px; |
| } |
| .lb-badge-legend .legend-title { |
| font-weight: 600; |
| color: #6b7280; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| font-size: 10px; |
| margin-bottom: 6px; |
| } |
| .lb-badge-legend .legend-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, max-content)); |
| column-gap: 32px; |
| row-gap: 6px; |
| max-width: 100%; |
| } |
| .lb-badge-legend .legend-item { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| min-width: 0; |
| white-space: nowrap; |
| } |
| .lb-badge-legend .legend-desc { |
| color: #9ca3af; |
| font-size: 11px; |
| white-space: nowrap; |
| } |
| @media (max-width: 720px) { |
| .lb-badge-legend .legend-grid { grid-template-columns: 1fr; } |
| .lb-badge-legend .legend-item, |
| .lb-badge-legend .legend-desc { white-space: normal; } |
| } |
| |
| /* ── Status / legend / footer ─────────────────────────────────────────── */ |
| .lb-status, p.lb-status { |
| font-size: 12px; |
| color: #6b7280; |
| margin: 0 0 7px; |
| min-height: 1em; |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .lb-legend, p.lb-legend { |
| font-size: 11px; |
| color: #9ca3af; |
| font-style: italic; |
| margin: 8px 0 0; |
| } |
| |
| .lb-footer { |
| font-size: 11px; |
| color: #6b7280; |
| margin-top: 8px; |
| font-style: italic; |
| text-align: center; |
| } |
| |
| /* ── About / Submit tab ───────────────────────────────────────────────── */ |
| .lb-about { |
| max-width: min(75%, 1280px); |
| margin-left: 0 !important; |
| margin-right: auto !important; |
| font-size: 13px; |
| color: #6b7280; |
| line-height: 1.7; |
| padding-bottom: 32px; |
| } |
| |
| .lb-about h3 { |
| font-size: 14px; |
| font-weight: 500; |
| color: #111; |
| margin: 14px 0 5px; |
| } |
| .lb-about p { margin-bottom: 8px; } |
| .lb-about a { color: #2563eb; text-decoration: none; } |
| |
| .lb-about pre, |
| .lb-about code { |
| font-size: 11px; |
| background: #f3f4f6; |
| border: 1px solid #e5e7eb; |
| border-radius: 8px; |
| padding: 10px; |
| display: block; |
| line-height: 1.6; |
| font-family: "SF Mono", Monaco, ui-monospace, monospace; |
| } |
| |
| /* About-tab tables — crisp outlined grid (no rounded-card look). |
| Uses border-collapse: collapse with explicit cell borders so the bottom |
| row's edge is part of every cell, not relying on the row's :last-child |
| border which the global rule strips. Specificity beats the global table |
| rules thanks to the .lb-about prefix. */ |
| .gradio-container .lb-about table { |
| border: 1px solid #d1d5db !important; |
| border-radius: 0 !important; |
| border-collapse: collapse !important; |
| border-spacing: 0 !important; |
| overflow: visible !important; |
| width: 100% !important; |
| margin: 14px 0 20px !important; |
| font-size: 12px !important; |
| background: #ffffff !important; |
| table-layout: auto !important; |
| } |
| .gradio-container .lb-about table th, |
| .gradio-container .lb-about table td { |
| border: 1px solid #e5e7eb !important; |
| padding: 8px 12px !important; |
| text-align: left !important; |
| vertical-align: top !important; |
| line-height: 1.55 !important; |
| background: #ffffff !important; |
| color: #374151 !important; |
| font-size: 12px !important; |
| white-space: normal !important; |
| } |
| .gradio-container .lb-about table thead th { |
| background: #f3f4f6 !important; |
| color: #111827 !important; |
| font-size: 11px !important; |
| font-weight: 600 !important; |
| text-transform: none !important; |
| letter-spacing: 0 !important; |
| border-bottom: 1px solid #d1d5db !important; |
| cursor: default !important; |
| } |
| /* Override the global `thead th:not(:first-child):not(:nth-child(2)) { |
| text-align: right }` rule (intended for leaderboard score columns) so |
| that 3rd+ headers in About tables ("Tasks", "Primary Metric") hug the |
| left edge like the other headers. Specificity wins via the extra |
| `.lb-about` class qualifier. */ |
| .gradio-container .lb-about table thead th:not(:first-child):not(:nth-child(2)) { |
| text-align: left !important; |
| } |
| /* Override global `tbody tr:last-child { border-bottom: none }` so the |
| bottom row keeps a visible edge. */ |
| .gradio-container .lb-about table tbody tr:last-child td { |
| border-bottom: 1px solid #e5e7eb !important; |
| } |
| /* Subtle row striping for scannability — but background must yield to |
| the border color, so no transparent tricks. */ |
| .gradio-container .lb-about table tbody tr:nth-child(even) td { |
| background: #fafafa !important; |
| } |
| .gradio-container .lb-about table tbody tr:hover td { |
| background: #f9fafb !important; |
| } |
| |
| /* About-page links — clear blue affordance, default underline so they |
| read as links at a glance, with a subtle ↗ on external URLs. */ |
| .gradio-container .lb-about a { |
| color: #1d4ed8; |
| text-decoration: underline; |
| text-underline-offset: 2px; |
| font-weight: 500; |
| } |
| .gradio-container .lb-about a:hover { |
| color: #1e40af; |
| text-decoration-thickness: 2px; |
| } |
| /* No external-link arrow on About-page links — kept clean and minimal. */ |
| .gradio-container .lb-about a::after, |
| .gradio-container .lb-about a[href^="http"]::after { |
| content: none !important; |
| } |
| |
| /* Citation BibTeX block — research-grade, copy/paste friendly. |
| Selectable text, monospaced, soft outline, horizontal scroll for long |
| lines so the page width is preserved. */ |
| .gradio-container .lb-about pre { |
| background: #f9fafb !important; |
| border: 1px solid #e5e7eb !important; |
| border-radius: 6px !important; |
| padding: 12px 14px !important; |
| font-size: 12px !important; |
| line-height: 1.6 !important; |
| color: #111827 !important; |
| overflow-x: auto !important; |
| white-space: pre !important; |
| user-select: text !important; |
| -webkit-user-select: text !important; |
| cursor: text !important; |
| margin: 8px 0 16px !important; |
| font-family: "SF Mono", Monaco, ui-monospace, Consolas, monospace !important; |
| } |
| .gradio-container .lb-about pre code, |
| .gradio-container .lb-about pre code * { |
| user-select: text !important; |
| -webkit-user-select: text !important; |
| background: transparent !important; |
| border: none !important; |
| padding: 0 !important; |
| color: inherit !important; |
| font-family: inherit !important; |
| font-size: inherit !important; |
| } |
| /* Make sure the Gradio-rendered copy button on code blocks is visible. */ |
| .gradio-container .lb-about pre + button, |
| .gradio-container .lb-about .code_wrap button, |
| .gradio-container .lb-about [class*="copy"] button { |
| display: inline-flex !important; |
| opacity: 1 !important; |
| visibility: visible !important; |
| } |
| |
| /* ── Responsive ───────────────────────────────────────────────────────── */ |
| @media (max-width: 768px) { |
| .gradio-container { padding: 16px !important; } |
| .lb-nav { justify-content: center; padding: 8px 0 0; } |
| .lb-nav-hero { font-size: 16px; gap: 16px; } |
| .lb-nav-hero .lb-sep { font-size: 16px; } |
| .gradio-container .lb-wordmark, |
| .gradio-container .lb-hero .lb-wordmark { |
| font-size: 42px !important; |
| letter-spacing: -0.8px !important; |
| } |
| .lb-summary, .lb-acronym { max-width: 100% !important; padding: 0 8px; } |
| .lb-about, .lb-tab-desc { max-width: 100% !important; } |
| } |
| @media (max-width: 480px) { |
| .gradio-container .lb-wordmark, |
| .gradio-container .lb-hero .lb-wordmark { |
| font-size: 34px !important; |
| letter-spacing: -0.4px !important; |
| } |
| } |
| /* ── Side panel layout ───────────────────────────────────────────────────── */ |
| .lb-table-row { |
| gap: 12px !important; |
| align-items: flex-start !important; |
| } |
| |
| /* Strip block decoration from Columns inside the table row */ |
| .lb-table-row > div > .block { |
| border: none !important; |
| background: transparent !important; |
| padding: 0 !important; |
| box-shadow: none !important; |
| } |
| |
| .lb-side-panel { |
| width: 280px !important; |
| min-width: 280px !important; |
| max-width: 280px !important; |
| flex-shrink: 0 !important; |
| padding: 0 !important; |
| } |
| |
| /* ── Panel card ─────────────────────────────────────────────────────────── */ |
| .sp-wrap { |
| border: 1px solid #e5e7eb; |
| border-radius: 12px; |
| background: #fff; |
| font-size: 12px; |
| overflow: hidden; |
| line-height: 1.4; |
| } |
| |
| .sp-hdr { |
| padding: 12px 14px; |
| border-bottom: 1px solid #f3f4f6; |
| } |
| |
| .sp-name { |
| font-size: 14px; |
| font-weight: 600; |
| color: #111827; |
| line-height: 1.3; |
| margin-bottom: 2px; |
| } |
| |
| .sp-org { font-size: 11px; color: #6b7280; } |
| |
| /* ── Side-panel Gradio close button ─────────────────────────────────────── */ |
| .gradio-container .lb-side-panel .sp-close-btn { |
| display: flex !important; |
| justify-content: flex-end !important; |
| padding: 0 !important; |
| margin: 0 0 4px !important; |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| .gradio-container .lb-side-panel .sp-close-btn button { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| color: #9ca3af !important; |
| font-size: 16px !important; |
| line-height: 1 !important; |
| padding: 4px 6px !important; |
| cursor: pointer !important; |
| border-radius: 4px !important; |
| min-width: 0 !important; |
| width: auto !important; |
| } |
| .gradio-container .lb-side-panel .sp-close-btn button:hover { |
| background: #f3f4f6 !important; |
| color: #374151 !important; |
| } |
| |
| .sp-body { padding: 12px 14px 14px; } |
| |
| .sp-badges { |
| display: flex; |
| gap: 3px; |
| flex-wrap: wrap; |
| margin-bottom: 12px; |
| } |
| |
| .sp-section { margin-bottom: 14px; } |
| |
| .sp-section-label { |
| font-size: 10px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: #9ca3af; |
| margin-bottom: 6px; |
| } |
| |
| .sp-radar { text-align: center; } |
| |
| .sp-grid { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 3px 8px; |
| } |
| .sp-k { color: #6b7280; font-size: 11px; } |
| .sp-v { |
| font-weight: 500; |
| text-align: right; |
| font-variant-numeric: tabular-nums; |
| font-size: 11px; |
| color: #111827; |
| } |
| |
| .sp-dom { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 6px; |
| } |
| |
| .sp-dom-card { |
| border: 1px solid #e5e7eb; |
| border-radius: 8px; |
| padding: 7px 6px; |
| text-align: center; |
| } |
| .sp-dn { |
| font-size: 9px; |
| color: #9ca3af; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| margin-bottom: 3px; |
| } |
| .sp-dv { font-size: 14px; font-weight: 600; color: #111827; } |
| |
| .sp-date { |
| font-size: 11px; |
| color: #9ca3af; |
| margin-top: 12px; |
| padding-top: 10px; |
| border-top: 1px solid #f3f4f6; |
| } |
| |
| /* ── Layout order: tabs above filter controls ─────────────────────────── */ |
| .gradio-container .fillable { |
| display: flex !important; |
| flex-direction: column !important; |
| } |
| .gradio-container .lb-top-tabs { order: 1 !important; } |
| .gradio-container .lb-status-wrap { order: 3 !important; } |
| |
| /* ── Model cell – name row (name + verified badge inline) ────────────── */ |
| .gradio-container .mc-name-row { |
| display: flex; |
| align-items: center; |
| justify-content: flex-start; |
| gap: 5px; |
| line-height: 1.2; |
| flex-wrap: wrap; |
| } |
| .gradio-container .mc-name-row .b-verified { |
| font-size: 9px !important; |
| padding: 1px 5px !important; |
| margin-left: 0 !important; |
| } |
| |
| /* ── Search box label override (non-uppercase, darker) ───────────────── */ |
| .lb-search-box .label-wrap span, |
| .lb-search-box label span { |
| text-transform: none !important; |
| color: #374151 !important; |
| font-size: 12px !important; |
| letter-spacing: 0 !important; |
| font-weight: 500 !important; |
| } |
| |
| /* ── Side panel additions ─────────────────────────────────────────────── */ |
| .sp-card-link { |
| font-size: 11px; |
| color: #2563eb; |
| text-decoration: none; |
| margin-left: 6px; |
| font-weight: 400; |
| } |
| .sp-card-link:hover { text-decoration: underline; } |
| |
| .sp-info-grid { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 3px 8px; |
| } |
| |
| .sp-panel-badges { |
| display: flex; |
| gap: 3px; |
| flex-wrap: wrap; |
| margin-top: 6px; |
| } |
| |
| /* ── Tab description blocks ────────────────────────────────────────────── */ |
| .lb-tab-desc { |
| font-size: 12px; |
| color: #6b7280; |
| line-height: 1.6; |
| padding: 0; |
| margin-left: 0 !important; |
| margin-right: auto !important; |
| max-width: min(75%, 1280px); |
| } |
| .lb-tab-desc b, .lb-tab-desc strong { |
| font-weight: 500; |
| color: #374151; |
| } |
| |
| /* Kill Gradio wrapper margins around HTML blocks inside tabs */ |
| .gradio-container .gr-html { margin-top: 0 !important; margin-bottom: 0 !important; } |
| .gradio-container .tabitem > .block { margin-top: 0 !important; margin-bottom: 0 !important; } |
| |
| /* ── Stats bar ─────────────────────────────────────────────────────────── */ |
| .lb-stats { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 8px 16px; |
| margin-top: 10px; |
| font-size: 16px; |
| color: #111827; |
| } |
| .lb-stats b { color: #111827; font-weight: 600; } |
| .lb-stat-sep { |
| color: #111827; |
| font-size: 18px; |
| font-weight: 700; |
| line-height: 1; |
| display: inline-block; |
| transform: translateY(-1px); |
| } |
| |
| /* ── Filter section header ─────────────────────────────────────────────── */ |
| .lb-filter-header { |
| font-size: 11px !important; |
| font-weight: 600 !important; |
| color: #374151 !important; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin: 0 0 4px !important; |
| padding: 0 !important; |
| } |
| |
| /* ── Pillar intro (above filters on pillar tabs) ───────────────────────── */ |
| .gradio-container .lb-pillar-desc-wrap, |
| .gradio-container .lb-pillar-desc-wrap > .block { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| .lb-pillar-desc { |
| font-size: 13px; |
| color: #6b7280; |
| line-height: 1.6; |
| padding: 10px 0 12px; |
| margin: 0; |
| } |
| |
| /* ── Below-table descriptions (between dataframe and legend) ──────────── */ |
| .gradio-container .lb-desc-wrap, |
| .gradio-container .lb-desc-wrap > .block { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| .lb-desc { |
| font-size: 12px; |
| color: #6b7280; |
| line-height: 1.6; |
| padding: 12px 2px 4px; |
| margin-top: 6px; |
| } |
| .lb-desc-overall p { |
| margin: 0; |
| } |
| .lb-desc-tasks dl { |
| display: grid; |
| grid-template-columns: max-content 1fr; |
| column-gap: 14px; |
| row-gap: 6px; |
| margin: 0; |
| } |
| .lb-desc-tasks dt { |
| font-weight: 600; |
| color: #374151; |
| font-size: 12px; |
| margin: 0; |
| } |
| .lb-desc-tasks dd { |
| margin: 0; |
| color: #6b7280; |
| font-size: 12px; |
| } |
| @media (max-width: 720px) { |
| .lb-desc-tasks dl { grid-template-columns: 1fr; row-gap: 2px; } |
| .lb-desc-tasks dd { padding-bottom: 4px; } |
| } |
| |
| /* ── Task detail description below table ───────────────────────────────── */ |
| .lb-detail-desc { |
| font-size: 12px; |
| color: #6b7280; |
| line-height: 1.65; |
| padding: 12px 0 0; |
| border-top: 1px solid #f3f4f6; |
| margin-top: 10px; |
| } |
| .lb-detail-desc b { font-weight: 500; color: #374151; } |
| .gradio-container .lb-detail-wrap, |
| .gradio-container .lb-detail-wrap > .block { |
| padding: 0 !important; background: transparent !important; |
| border: none !important; box-shadow: none !important; |
| } |
| |
| /* ── Table footer (version + date) ─────────────────────────────────────── */ |
| .lb-table-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 8px 2px 0; |
| margin-top: 6px; |
| font-size: 11px; |
| color: #9ca3af; |
| } |
| .lb-version { |
| background: transparent; |
| border: none; |
| padding: 0; |
| font-size: 11px; |
| font-weight: 400; |
| color: #9ca3af; |
| letter-spacing: 0; |
| } |
| .lb-footer-left { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| .lb-footer-left .lb-sep { color: #d1d5db; } |
| .gradio-container .lb-footer-wrap, |
| .gradio-container .lb-footer-wrap > .block { |
| padding: 0 !important; background: transparent !important; |
| border: none !important; box-shadow: none !important; |
| } |
| |
| /* ── Two-column desc + filter row ─────────────────────────────────────── */ |
| .gradio-container .lb-desc-filter-row { |
| align-items: flex-start !important; |
| gap: 16px !important; |
| margin-bottom: 6px !important; |
| margin-top: 6px !important; |
| padding: 0 !important; |
| } |
| .gradio-container .lb-desc-filter-row > .block { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } |
| .gradio-container .lb-tab-desc-col > .block { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } |
| |
| /* Tighten gap between desc/filter row and table */ |
| .gradio-container .lb-table-row { margin-top: 0 !important; padding-top: 0 !important; } |
| .gradio-container .lb-table-row > div > .block { padding-top: 0 !important; } |
| |
| /* ── Hide status bar ───────────────────────────────────────────────── */ |
| .gradio-container .lb-status-wrap { display: none !important; } |
| |
| /* ── Hide dataframe toolbar (copy / fullscreen buttons) ────────────────── */ |
| .gradio-container .table-wrap .table-menu, |
| .gradio-container .table-wrap .icon-button-wrapper, |
| .gradio-container [class*="dataframe"] .table-menu, |
| .gradio-container [class*="dataframe"] .icon-button-wrapper, |
| .icon-button-wrapper, |
| [data-testid="block-info"], |
| .gradio-container .copy-text, |
| .gradio-container button.download { |
| display: none !important; |
| } |
| |
| /* ── Kill gap between desc/filter row and table ────────────────────── */ |
| .gradio-container .gradio-dataframe { margin-top: 0 !important; padding-top: 0 !important; } |
| .gradio-container .lb-controls-wrap .block { gap: 6px !important; } |
| |
| /* ───────────────────────────────────────────────────────────────────── |
| ── Dark-mode hard overrides (must come last) ───────────────────────── |
| These rules ensure every text-bearing leaderboard element has an |
| EXPLICIT dark color even when Gradio/HF Spaces re-themes its CSS |
| variables. They re-state foregrounds and backgrounds with !important |
| so that inherited `color: var(--body-text-color)` from Gradio cannot |
| turn the UI white-on-white in dark browsers or HF dark theme. |
| |
| Pairs with the :root/--neutral-* overrides at the top of this file: |
| the top block disarms the inversion at the variable layer; this block |
| restates colors on each component as a defense-in-depth fallback. |
| ───────────────────────────────────────────────────────────────────── */ |
| |
| /* Header / hero text */ |
| .gradio-container .lb-header, |
| .gradio-container .lb-header * { |
| color: inherit; |
| } |
| .gradio-container .lb-header { color: #111827 !important; } |
| .gradio-container .lb-header .lb-summary { color: #111827 !important; } |
| .gradio-container .lb-header .lb-acronym { color: #111827 !important; } |
| .gradio-container .lb-header .lb-acronym b { color: #522D80 !important; } |
| .gradio-container .lb-header .lb-stats { color: #111827 !important; } |
| .gradio-container .lb-header .lb-stats b { color: #111827 !important; } |
| .gradio-container .lb-header .lb-stat-sep { color: #111827 !important; } |
| |
| /* Header nav links */ |
| .gradio-container .lb-nav-hero a { color: #374151 !important; } |
| .gradio-container .lb-nav-hero a:hover { color: #111827 !important; } |
| .gradio-container .lb-nav-hero .lb-sep { color: #d1d5db !important; } |
| |
| /* Tabs */ |
| .gradio-container .tab-nav, |
| .gradio-container .tabs > .tab-nav { |
| background: transparent !important; |
| border-bottom-color: #e5e7eb !important; |
| } |
| .gradio-container .tab-nav button { color: #6b7280 !important; background: transparent !important; } |
| .gradio-container .tab-nav button:hover { color: #111827 !important; } |
| .gradio-container .tab-nav button.selected { color: #111827 !important; } |
| |
| /* Tab panel surface */ |
| .gradio-container .tabitem, |
| .gradio-container .tabitem > div, |
| .gradio-container .tab-container, |
| .gradio-container [role="tabpanel"] { |
| background: #ffffff !important; |
| color: #111827 !important; |
| } |
| |
| /* Filter labels and controls */ |
| .gradio-container .lb-filters, |
| .gradio-container .lb-filters * { color: inherit; } |
| .gradio-container .filter-lbl { color: #374151 !important; } |
| .gradio-container .lb-filters label, |
| .gradio-container .lb-filters label span, |
| .gradio-container .lb-filters .label-wrap span { |
| color: #374151 !important; |
| background: transparent !important; |
| } |
| |
| /* Search box: input + textarea, in any state */ |
| .gradio-container .lb-search-box input, |
| .gradio-container .lb-search-box textarea, |
| .gradio-container .lb-filters input[type="text"], |
| .gradio-container .lb-filters textarea { |
| color: #111827 !important; |
| background: #ffffff !important; |
| -webkit-text-fill-color: #111827 !important; |
| caret-color: #111827 !important; |
| } |
| .gradio-container .lb-search-box input::placeholder, |
| .gradio-container .lb-search-box textarea::placeholder, |
| .gradio-container .lb-filters input::placeholder, |
| .gradio-container .lb-filters textarea::placeholder { |
| color: #9ca3af !important; |
| -webkit-text-fill-color: #9ca3af !important; |
| opacity: 1 !important; |
| } |
| |
| /* Dropdown selected-value text + open menu */ |
| .gradio-container .lb-filters [class*="dropdown"] input, |
| .gradio-container .lb-filters [class*="Dropdown"] input, |
| .gradio-container .lb-filters [class*="dropdown"] [data-testid="dropdown-value"], |
| .gradio-container .lb-filters [class*="Dropdown"] [data-testid="dropdown-value"], |
| .gradio-container .lb-filters select, |
| .gradio-container .lb-filters select option { |
| color: #111827 !important; |
| background: #ffffff !important; |
| -webkit-text-fill-color: #111827 !important; |
| } |
| .gradio-container .lb-filters [class*="dropdown"] ul, |
| .gradio-container .lb-filters [class*="Dropdown"] ul, |
| .gradio-container ul[role="listbox"], |
| .gradio-container [role="listbox"] { |
| background: #ffffff !important; |
| color: #111827 !important; |
| border: 1px solid #e5e7eb !important; |
| } |
| .gradio-container ul[role="listbox"] li, |
| .gradio-container [role="listbox"] li, |
| .gradio-container [role="option"] { |
| background: #ffffff !important; |
| color: #111827 !important; |
| } |
| .gradio-container [role="option"]:hover, |
| .gradio-container [role="option"][aria-selected="true"] { |
| background: #f3f4f6 !important; |
| color: #111827 !important; |
| } |
| |
| /* Verified-only checkbox label */ |
| .gradio-container .lb-filter-verified label, |
| .gradio-container .lb-filter-verified label span, |
| .gradio-container .lb-verified-cb label, |
| .gradio-container .lb-verified-cb label span { |
| color: #374151 !important; |
| background: transparent !important; |
| } |
| |
| /* Pillar intro / tab description / status / below-table desc */ |
| .gradio-container .lb-pillar-desc { color: #6b7280 !important; } |
| .gradio-container .lb-tab-desc { color: #6b7280 !important; } |
| .gradio-container .lb-tab-desc b, |
| .gradio-container .lb-tab-desc strong { color: #374151 !important; } |
| .gradio-container .lb-status, |
| .gradio-container p.lb-status { color: #6b7280 !important; } |
| .gradio-container .lb-desc { color: #6b7280 !important; } |
| .gradio-container .lb-desc-tasks dt { color: #374151 !important; } |
| .gradio-container .lb-desc-tasks dd { color: #6b7280 !important; } |
| .gradio-container .lb-detail-desc { color: #6b7280 !important; } |
| .gradio-container .lb-detail-desc b { color: #374151 !important; } |
| |
| /* Generic table cells — keep dark text on white/striped rows in EVERY |
| Gradio Dataframe under our app, regardless of theme. */ |
| .gradio-container table, |
| .gradio-container .table-wrap table, |
| .gradio-container [class*="dataframe"] table { |
| color: #111827 !important; |
| background: #ffffff !important; |
| } |
| .gradio-container thead th, |
| .gradio-container .table-wrap thead th, |
| .gradio-container [class*="dataframe"] thead th { |
| color: #374151 !important; |
| background: #f9fafb !important; |
| } |
| .gradio-container tbody tr, |
| .gradio-container tbody td, |
| .gradio-container .table-wrap tbody td, |
| .gradio-container [class*="dataframe"] tbody td { |
| color: #111827 !important; |
| } |
| .gradio-container tbody tr:nth-child(odd) td { background: #ffffff !important; color: #111827 !important; } |
| .gradio-container tbody tr:nth-child(even) td { background: #fafafa !important; color: #111827 !important; } |
| .gradio-container tbody tr:hover td { background: #F3EEF9 !important; color: #111827 !important; } |
| .gradio-container tbody td:first-child { color: #6b7280 !important; } |
| .gradio-container tbody td a { color: #2563eb !important; } |
| .gradio-container tbody td a:hover { color: #1d4ed8 !important; } |
| |
| /* Leaderboard HTML tables (Overall + the four pillars) — restate every |
| cell color explicitly */ |
| .gradio-container .lb-table-overall, |
| .gradio-container .lb-table-spatial, |
| .gradio-container .lb-table-st, |
| .gradio-container .lb-table-temporal, |
| .gradio-container .lb-table-semantic { background: #ffffff !important; color: #111827 !important; } |
| .gradio-container .lb-table-overall table.lb-overall-table, |
| .gradio-container .lb-table-spatial table.lb-pillar-table, |
| .gradio-container .lb-table-st table.lb-pillar-table, |
| .gradio-container .lb-table-temporal table.lb-pillar-table, |
| .gradio-container .lb-table-semantic table.lb-pillar-table { color: #111827 !important; background: #ffffff !important; } |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-group { color: #522D80 !important; background: #E8E1F3 !important; } |
| .gradio-container .lb-table-overall thead tr.lb-group-row th.lb-corner, |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-st thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th.lb-corner, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th.lb-corner { color: #374151 !important; background: #f9fafb !important; } |
| .gradio-container .lb-table-overall thead tr.lb-task-row th, |
| .gradio-container .lb-table-spatial thead tr.lb-header-row th, |
| .gradio-container .lb-table-st thead tr.lb-header-row th, |
| .gradio-container .lb-table-temporal thead tr.lb-header-row th, |
| .gradio-container .lb-table-semantic thead tr.lb-header-row th { color: #4b5563 !important; background: #f9fafb !important; } |
| .gradio-container .lb-table-overall tbody td, |
| .gradio-container .lb-table-spatial tbody td, |
| .gradio-container .lb-table-st tbody td, |
| .gradio-container .lb-table-temporal tbody td, |
| .gradio-container .lb-table-semantic tbody td { color: #111827 !important; background: #ffffff !important; } |
| .gradio-container .lb-table-overall tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-spatial tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-st tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-temporal tbody tr:nth-child(even) td, |
| .gradio-container .lb-table-semantic tbody tr:nth-child(even) td { background: #fafafa !important; color: #111827 !important; } |
| .gradio-container .lb-table-overall tbody tr:hover td, |
| .gradio-container .lb-table-spatial tbody tr:hover td, |
| .gradio-container .lb-table-st tbody tr:hover td, |
| .gradio-container .lb-table-temporal tbody tr:hover td, |
| .gradio-container .lb-table-semantic tbody tr:hover td { background: #F3EEF9 !important; color: #111827 !important; } |
| .gradio-container .lb-table-overall tbody td.lb-rank, |
| .gradio-container .lb-table-spatial tbody td.lb-rank, |
| .gradio-container .lb-table-st tbody td.lb-rank, |
| .gradio-container .lb-table-temporal tbody td.lb-rank, |
| .gradio-container .lb-table-semantic tbody td.lb-rank { color: #6b7280 !important; } |
| .gradio-container .lb-table-overall tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-spatial tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-st tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-temporal tbody td.lb-score.lb-max, |
| .gradio-container .lb-table-semantic tbody td.lb-score.lb-max { color: #111827 !important; } |
| .gradio-container .lb-table-overall tbody td.lb-empty-row, |
| .gradio-container .lb-table-spatial tbody td.lb-empty-row, |
| .gradio-container .lb-table-st tbody td.lb-empty-row, |
| .gradio-container .lb-table-temporal tbody td.lb-empty-row, |
| .gradio-container .lb-table-semantic tbody td.lb-empty-row { color: #6b7280 !important; } |
| .gradio-container .lb-table-overall .mc-org, |
| .gradio-container .lb-table-spatial .mc-org, |
| .gradio-container .lb-table-st .mc-org, |
| .gradio-container .lb-table-temporal .mc-org, |
| .gradio-container .lb-table-semantic .mc-org { color: #9ca3af !important; } |
| .gradio-container .lb-table-overall .mc-link, |
| .gradio-container .lb-table-spatial .mc-link, |
| .gradio-container .lb-table-st .mc-link, |
| .gradio-container .lb-table-temporal .mc-link, |
| .gradio-container .lb-table-semantic .mc-link { color: #111827 !important; } |
| .gradio-container .lb-table-overall .mc-link:hover, |
| .gradio-container .lb-table-spatial .mc-link:hover, |
| .gradio-container .lb-table-st .mc-link:hover, |
| .gradio-container .lb-table-temporal .mc-link:hover, |
| .gradio-container .lb-table-semantic .mc-link:hover { color: #2563eb !important; } |
| |
| /* Model cell badges keep their colored pill backgrounds in either theme */ |
| .gradio-container .b-verified, .gradio-container .lb-badge-verified { background: #dcfce7 !important; color: #15803d !important; border-color: #86efac !important; } |
| .gradio-container .b-ensemble, .gradio-container .lb-badge-ensemble { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #93c5fd !important; } |
| .gradio-container .b-single, .gradio-container .lb-badge-single { background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important; } |
| .gradio-container .b-open, .gradio-container .lb-badge-open { background: #ccfbf1 !important; color: #0f766e !important; border-color: #5eead4 !important; } |
| .gradio-container .b-prop, .gradio-container .lb-badge-prop, |
| .gradio-container .lb-badge-proprietary { background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important; } |
| .gradio-container .b-new, .gradio-container .lb-badge-new { background: #ede9fe !important; color: #5b21b6 !important; border-color: #c4b5fd !important; } |
| |
| /* Legend */ |
| .gradio-container .lb-badge-legend { color: #6b7280 !important; background: transparent !important; } |
| .gradio-container .lb-badge-legend .legend-title { color: #6b7280 !important; } |
| .gradio-container .lb-badge-legend .legend-desc { color: #9ca3af !important; } |
| |
| /* Footer */ |
| .gradio-container .lb-table-footer { color: #9ca3af !important; } |
| .gradio-container .lb-footer-nav a { color: #2563eb !important; } |
| .gradio-container .lb-footer-nav a:hover { color: #1d4ed8 !important; } |
| .gradio-container .lb-footer-nav .lb-sep, |
| .gradio-container .lb-footer-left .lb-sep { color: #d1d5db !important; } |
| .gradio-container .lb-updated, |
| .gradio-container .lb-version { color: #9ca3af !important; } |
| |
| /* About */ |
| .gradio-container .lb-about { color: #374151 !important; background: transparent !important; } |
| .gradio-container .lb-about p { color: #374151 !important; } |
| .gradio-container .lb-about li { color: #374151 !important; } |
| .gradio-container .lb-about h1, |
| .gradio-container .lb-about h2, |
| .gradio-container .lb-about h3, |
| .gradio-container .lb-about h4 { color: #111827 !important; } |
| .gradio-container .lb-about a { color: #1d4ed8 !important; } |
| .gradio-container .lb-about pre, |
| .gradio-container .lb-about code { color: #111827 !important; background: #f9fafb !important; } |
| .gradio-container .lb-about table { background: #ffffff !important; color: #374151 !important; } |
| .gradio-container .lb-about table thead th { color: #111827 !important; background: #f3f4f6 !important; } |
| .gradio-container .lb-about table tbody td { color: #374151 !important; background: #ffffff !important; } |
| .gradio-container .lb-about table tbody tr:nth-child(even) td { background: #fafafa !important; } |
| |
| /* Side panel */ |
| .gradio-container .lb-side-panel { background: transparent !important; } |
| .gradio-container .sp-wrap { background: #ffffff !important; color: #111827 !important; border-color: #e5e7eb !important; } |
| .gradio-container .sp-name { color: #111827 !important; } |
| .gradio-container .sp-org { color: #6b7280 !important; } |
| .gradio-container .sp-section-label { color: #9ca3af !important; } |
| .gradio-container .sp-k { color: #6b7280 !important; } |
| .gradio-container .sp-v { color: #111827 !important; } |
| .gradio-container .sp-dn { color: #9ca3af !important; } |
| .gradio-container .sp-dv { color: #111827 !important; } |
| .gradio-container .sp-date { color: #9ca3af !important; } |
| .gradio-container .sp-card-link { color: #2563eb !important; } |
| .gradio-container .sp-dom-card { background: #ffffff !important; border-color: #e5e7eb !important; } |
| .gradio-container .lb-side-panel .sp-close-btn button { color: #9ca3af !important; background: transparent !important; } |
| .gradio-container .lb-side-panel .sp-close-btn button:hover { color: #374151 !important; background: #f3f4f6 !important; } |
| |
| /* Resize handle */ |
| .gradio-container .lb-resize-handle { background: #f9fafb !important; border-color: #e5e7eb !important; } |
| .gradio-container .lb-resize-handle:hover { background: #f3f4f6 !important; } |
| |
| /* Pillar toggle pills */ |
| .gradio-container .lb-col-toggle-inline label, |
| .gradio-container .lb-sort-pills label { color: #6b7280 !important; background: transparent !important; border-color: #d1d5db !important; } |
| .gradio-container .lb-col-toggle-inline label:has(input:checked), |
| .gradio-container .lb-sort-pills label:has(input:checked) { color: #111827 !important; background: #ffffff !important; border-color: #9ca3af !important; } |
| """ |
|
|
