| custom_css = """ |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap'); |
| |
| /* ── Force light mode: override all dark-theme CSS variables ──────── */ |
| html.dark, html.dark body, .dark { |
| color-scheme: light !important; |
| --body-background-fill: #ffffff !important; |
| --background-fill-primary: #ffffff !important; |
| --background-fill-secondary: #f9fafb !important; |
| --border-color-primary: #e5e7eb !important; |
| --border-color-accent: #d1d5db !important; |
| /* accent / brand → always blue */ |
| --color-accent: #2563eb !important; |
| --color-accent-soft: rgba(37,99,235,0.12) !important; |
| /* primary button → blue */ |
| --button-primary-background-fill: #2563eb !important; |
| --button-primary-background-fill-hover: #1d4ed8 !important; |
| --button-primary-text-color: #ffffff !important; |
| --button-primary-border-color: #1d4ed8 !important; |
| /* secondary button → blue outline, NOT orange */ |
| --button-secondary-background-fill: #eff6ff !important; |
| --button-secondary-background-fill-hover: #dbeafe !important; |
| --button-secondary-text-color: #1d4ed8 !important; |
| --button-secondary-border-color: #93c5fd !important; |
| /* cancel / stop button → neutral grey */ |
| --button-cancel-background-fill: #f3f4f6 !important; |
| --button-cancel-background-fill-hover: #e5e7eb !important; |
| --button-cancel-text-color: #374151 !important; |
| --button-cancel-border-color: #d1d5db !important; |
| /* text */ |
| --body-text-color: #374151 !important; |
| --body-text-color-subdued: #6b7280 !important; |
| /* inputs */ |
| --input-background-fill: #ffffff !important; |
| /* table */ |
| --table-even-background-fill: #f9fafb !important; |
| --table-odd-background-fill: #ffffff !important; |
| --table-row-focus: #eff6ff !important; |
| /* misc */ |
| --shadow-drop: 0 1px 3px rgba(0,0,0,0.1) !important; |
| --block-background-fill: #ffffff !important; |
| --panel-background-fill: #f3f4f6 !important; |
| /* code blocks */ |
| --code-background-fill: #f1f5f9 !important; |
| /* checkbox */ |
| --checkbox-background-color: #ffffff !important; |
| --checkbox-background-color-focus: #eff6ff !important; |
| --checkbox-background-color-hover: #eff6ff !important; |
| --checkbox-background-color-selected: #2563eb !important; |
| --checkbox-border-color: #d1d5db !important; |
| --checkbox-border-color-focus: #2563eb !important; |
| --checkbox-border-color-hover: #2563eb !important; |
| --checkbox-border-color-selected: #2563eb !important; |
| --checkbox-check: #ffffff !important; |
| --checkbox-label-background-fill: #ffffff !important; |
| --checkbox-label-background-fill-hover: #ffffff !important; |
| --checkbox-label-background-fill-selected: #ffffff !important; |
| --checkbox-label-border-color: #e5e7eb !important; |
| --checkbox-label-border-color-hover: #2563eb !important; |
| --checkbox-label-text-color: #374151 !important; |
| --checkbox-label-text-color-selected: #1e3a8a !important; |
| } |
| |
| /* ── Checkbox inputs: force light appearance in dark mode ─────────── */ |
| .dark input[type="checkbox"] { |
| accent-color: #2563eb !important; |
| background: #ffffff !important; |
| border-color: #d1d5db !important; |
| color-scheme: light !important; |
| } |
| /* Gradio custom checkbox spans (svelte rendered) */ |
| .dark .gradio-checkbox span, |
| .dark .gradio-checkboxgroup span[data-testid="checkbox"], |
| .dark label > input[type="checkbox"] + span, |
| .dark .gr-check-radio { |
| background: #ffffff !important; |
| border-color: #d1d5db !important; |
| } |
| .dark input[type="checkbox"]:checked + span, |
| .dark .gradio-checkbox input:checked ~ span, |
| .dark .gr-check-radio:checked { |
| background: #ffffff !important; |
| border-color: #d1d5db !important; |
| } |
| |
| /* Checked checkbox input itself → blue fill */ |
| input[type="checkbox"]:checked, |
| .dark input[type="checkbox"]:checked { |
| accent-color: #2563eb !important; |
| background-color: #2563eb !important; |
| border-color: #2563eb !important; |
| } |
| |
| |
| /* ── Code blocks: always light regardless of theme ────────────────── */ |
| /* Gradio markdown pre/code */ |
| .prose pre, |
| .markdown pre, |
| .gradio-markdown pre { |
| background: #f1f5f9 !important; |
| border: 1px solid #e2e8f0 !important; |
| border-radius: 8px !important; |
| } |
| .prose pre code, |
| .markdown pre code, |
| .gradio-markdown pre code { |
| background: transparent !important; |
| color: #1e3a5f !important; |
| } |
| /* Inline code */ |
| .prose code:not(pre code), |
| .markdown code:not(pre code), |
| .gradio-markdown code:not(pre code) { |
| background: #e0f2fe !important; |
| color: #0c4a6e !important; |
| border-radius: 4px !important; |
| padding: 1px 5px !important; |
| } |
| /* Catch Gradio's own CodeBlock component */ |
| .dark .cm-editor, |
| .dark .codemirror-wrapper { |
| background: #f1f5f9 !important; |
| color: #1e3a5f !important; |
| } |
| .dark .cm-gutters { |
| background: #e2e8f0 !important; |
| color: #64748b !important; |
| } |
| |
| /* ── Size range slider row: custom HTML slider full-width ─────────── */ |
| #size-range-row { |
| gap: 0 !important; |
| } |
| |
| /* ── Hidden row containing the backend Gradio sliders ─────────────── */ |
| #size-range-hidden-row { |
| display: none !important; |
| height: 0 !important; |
| overflow: hidden !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| } |
| |
| /* ── Disclaimer note (below submit panel) ─────────────────────────── */ |
| .disclaimer-note { |
| margin-top: 4px !important; |
| padding: 10px 14px !important; |
| background: #fffbeb !important; |
| border: 1px solid #fde68a !important; |
| border-radius: 8px !important; |
| font-size: 0.82rem !important; |
| } |
| .disclaimer-note p { margin: 0 !important; line-height: 1.55; color: #92400e; } |
| .disclaimer-note a { color: #2563eb; text-decoration: none; } |
| .disclaimer-note a:hover { text-decoration: underline; } |
| /* Remove Gradio's inner wrapper box to prevent double-border */ |
| .disclaimer-note .gradio-markdown, |
| .disclaimer-note .prose, |
| .disclaimer-note > .block, |
| .disclaimer-note > div { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| |
| /* ── Download button feedback ─────────────────────────────────────── */ |
| @keyframes dl-spin { |
| to { transform: rotate(360deg); } |
| } |
| .dl-cell-link { |
| transition: transform 0.1s ease, opacity 0.1s ease; |
| } |
| .dl-cell-link:active { |
| transform: scale(0.88); |
| opacity: 0.7; |
| } |
| |
| /* ── License inline warning ──────────────────────────────────────────── */ |
| .license-inline-warning { |
| background: #fffbeb; |
| border: 1px solid #f59e0b; |
| border-radius: 8px; |
| padding: 8px 12px; |
| font-size: 0.85rem; |
| color: #92400e; |
| margin-top: 4px; |
| } |
| /* Remove Gradio's inner wrapper box to prevent double-border */ |
| .license-inline-warning .gradio-markdown, |
| .license-inline-warning .prose, |
| .license-inline-warning > .block, |
| .license-inline-warning > div { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| |
| /* ── Auth inline button ──────────────────────────────────────────────── */ |
| .auth-inline-btn { |
| font-size: 0.78rem !important; |
| padding: 2px 10px !important; |
| min-width: unset !important; |
| height: auto !important; |
| border-radius: 6px !important; |
| margin-left: 6px !important; |
| align-self: center; |
| } |
| |
| /* ── Gradio sliders used only as backend state (visually hidden) ────── */ |
| .hidden-internal-slider { |
| display: none !important; |
| visibility: hidden !important; |
| height: 0 !important; |
| width: 0 !important; |
| overflow: hidden !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| pointer-events: none !important; |
| } |
| |
| /* ── Custom two-thumb range slider ──────────────────────────────────── */ |
| .custom-range-slider-container { |
| padding: 6px 0 4px; |
| width: 100%; |
| flex: 1; |
| } |
| |
| .custom-range-label { |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: #374151; |
| margin-bottom: 10px; |
| display: block; |
| } |
| |
| .custom-range-row { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| width: 100%; |
| } |
| |
| .custom-range-num-input { |
| width: 70px; |
| padding: 4px 6px; |
| border: 1px solid #d1d5db; |
| border-radius: 6px; |
| font-size: 0.82rem; |
| color: #374151; |
| text-align: center; |
| background: #f9fafb; |
| flex-shrink: 0; |
| -moz-appearance: textfield; |
| } |
| |
| .custom-range-num-input::-webkit-inner-spin-button, |
| .custom-range-num-input::-webkit-outer-spin-button { |
| opacity: 1; |
| } |
| |
| .custom-range-num-input:focus { |
| outline: none; |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); |
| background: #fff; |
| } |
| |
| .custom-range-wrapper { |
| position: relative; |
| height: 22px; |
| flex: 1; |
| min-width: 80px; |
| } |
| |
| .custom-range-track { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 100%; |
| height: 4px; |
| background: #e5e7eb; |
| border-radius: 2px; |
| z-index: 0; |
| } |
| |
| .custom-range-selected { |
| position: absolute; |
| top: 0; |
| height: 100%; |
| background: #3b82f6; |
| border-radius: 2px; |
| } |
| |
| .custom-range-thumb { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| -webkit-appearance: none; |
| appearance: none; |
| background: transparent; |
| pointer-events: none; |
| z-index: 2; |
| margin: 0; |
| } |
| |
| .custom-range-thumb::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| height: 18px; |
| width: 18px; |
| border-radius: 50%; |
| background: #2563eb; |
| border: 2px solid #fff; |
| box-shadow: 0 1px 4px rgba(37,99,235,0.35); |
| cursor: pointer; |
| pointer-events: all; |
| transition: background 0.15s, box-shadow 0.15s; |
| } |
| |
| .custom-range-thumb::-webkit-slider-thumb:hover { |
| background: #1d4ed8; |
| box-shadow: 0 0 0 4px rgba(37,99,235,0.18); |
| } |
| |
| .custom-range-thumb::-moz-range-thumb { |
| height: 18px; |
| width: 18px; |
| border-radius: 50%; |
| background: #2563eb; |
| border: 2px solid #fff; |
| box-shadow: 0 1px 4px rgba(37,99,235,0.35); |
| cursor: pointer; |
| pointer-events: all; |
| } |
| |
| .custom-range-thumb:focus { |
| outline: none; |
| } |
| |
| .custom-range-thumb-min { z-index: 3; } |
| .custom-range-thumb-max { z-index: 4; } |
| |
| .custom-range-values { |
| margin-top: 8px; |
| font-size: 0.8rem; |
| color: #6b7280; |
| display: flex; |
| align-items: center; |
| gap: 2px; |
| } |
| |
| .custom-range-sep { color: #9ca3af; margin: 0 2px; } |
| .custom-range-unit { margin-left: 2px; } |
| |
| /* ── Download info modal ─────────────────────────────────────────────── */ |
| #dl-info-modal-overlay { |
| display: none; |
| position: fixed; |
| inset: 0; |
| background: rgba(0,0,0,0.55); |
| z-index: 20000; |
| } |
| #dl-info-modal { |
| position: fixed; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| background: #fff; |
| border-radius: 16px; |
| padding: 32px 36px 28px; |
| max-width: 540px; |
| width: 92%; |
| max-height: 88vh; |
| overflow-y: auto; |
| box-shadow: 0 12px 48px rgba(0,0,0,0.22); |
| font-family: Manrope, sans-serif; |
| z-index: 20001; |
| scrollbar-width: thin; |
| scrollbar-color: #d1d5db transparent; |
| } |
| #dl-info-modal::-webkit-scrollbar { width: 4px; } |
| #dl-info-modal::-webkit-scrollbar-track { background: transparent; } |
| #dl-info-modal::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } |
| #dl-info-close { |
| position: absolute; |
| top: 14px; right: 16px; |
| background: none; |
| border: none; |
| font-size: 17px; |
| cursor: pointer; |
| color: #6b7280; |
| padding: 4px 8px; |
| border-radius: 6px; |
| line-height: 1; |
| } |
| #dl-info-close:hover { background: #f3f4f6; } |
| #dl-info-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 20px; |
| flex-wrap: nowrap; |
| min-width: 0; |
| } |
| #dl-info-icon { |
| font-size: 22px; |
| flex-shrink: 0; |
| line-height: 1; |
| } |
| #dl-info-title { |
| font-size: 1.05rem; |
| font-weight: 700; |
| color: #374151; |
| padding-right: 32px; |
| word-break: break-all; |
| min-width: 0; |
| text-decoration: none; |
| } |
| #dl-info-title:hover { text-decoration: underline; color: #2563eb; } |
| .dl-cmd-section { margin-bottom: 14px; } |
| .dl-cmd-label { |
| font-size: 0.72rem; |
| font-weight: 700; |
| color: #6b7280; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| margin-bottom: 5px; |
| } |
| .dl-cmd-row { |
| display: flex; |
| align-items: flex-start; |
| gap: 8px; |
| background: #f8fafc; |
| border: 1px solid #e2e8f0; |
| border-radius: 8px; |
| padding: 10px 12px; |
| } |
| .dl-cmd-row code { |
| flex: 1; |
| font-family: 'Fira Mono', 'Cascadia Code', 'Courier New', monospace; |
| font-size: 0.82rem; |
| color: #1e3a5f; |
| white-space: pre; |
| overflow-x: auto; |
| background: none; |
| border: none; |
| padding: 0; |
| line-height: 1.5; |
| } |
| .dl-copy-btn { |
| flex-shrink: 0; |
| align-self: center; |
| background: #dbeafe; |
| border: none; |
| color: #1d4ed8; |
| font-size: 0.76rem; |
| font-weight: 700; |
| padding: 4px 10px; |
| border-radius: 6px; |
| cursor: pointer; |
| transition: background 0.15s; |
| white-space: nowrap; |
| } |
| .dl-copy-btn:hover { background: #bfdbfe; } |
| |
| :root { |
| background: #ffffff; |
| --lb-bg: #ffffff; |
| --lb-bg-soft: #ffffff; |
| --lb-surface: #ffffff; |
| --lb-surface-strong: #ffffff; |
| --lb-border: rgba(15, 23, 42, 0.08); |
| --lb-border-strong: rgba(15, 23, 42, 0.12); |
| --lb-text: #0f172a; |
| --lb-muted: #5b6475; |
| --lb-primary: #2563eb; |
| --lb-primary-dark: #1d4ed8; |
| --lb-accent: #2563eb; |
| --lb-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); |
| --lb-radius-xl: 24px; |
| --lb-radius-lg: 18px; |
| --lb-radius-md: 12px; |
| --color-accent: #2563eb; |
| --color-accent-soft: rgba(37, 99, 235, 0.12); |
| --color-accent-soft-dark: rgba(29, 78, 216, 0.22); |
| --button-primary-background-fill: #2563eb; |
| --button-primary-background-fill-hover: #1d4ed8; |
| --button-primary-border-color: #1d4ed8; |
| } |
| |
| html, |
| body { |
| background: #ffffff; |
| color: var(--lb-text); |
| font-family: 'Manrope', sans-serif; |
| } |
| |
| /* Page visibility toggling (JS-driven, must override Gradio) */ |
| .page-hidden { |
| display: none !important; |
| } |
| |
| .hero-section { |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #4f46e5 100%); |
| border-radius: 0 0 24px 24px; |
| padding: 36px 52px 40px 52px; |
| margin-bottom: 24px; |
| box-shadow: 0 8px 40px rgba(37, 99, 235, 0.28); |
| position: relative; |
| overflow: hidden; |
| width: 100%; |
| box-sizing: border-box; |
| } |
| |
| .hero-section::before { |
| content: ""; |
| position: absolute; |
| top: -80px; |
| right: -80px; |
| width: 320px; |
| height: 320px; |
| background: rgba(255, 255, 255, 0.06); |
| border-radius: 50%; |
| pointer-events: none; |
| } |
| |
| .hero-inner, |
| .hero-text { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .hero-inner { |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| flex-wrap: wrap; |
| } |
| |
| .hero-text { |
| flex: 1; |
| min-width: 240px; |
| } |
| |
| .hero-title { |
| color: #ffffff !important; |
| font-size: clamp(1.1rem, 2.2vw, 1.85rem) !important; |
| font-weight: 800 !important; |
| margin: 0 0 6px 0 !important; |
| letter-spacing: -0.02em; |
| line-height: 1.2; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .hero-subtitle { |
| color: rgba(255, 255, 255, 0.78) !important; |
| font-size: 1rem !important; |
| margin: 0 0 14px 0 !important; |
| line-height: 1.5; |
| } |
| |
| .hero-note { |
| color: rgba(255, 255, 255, 0.92) !important; |
| font-size: 0.92rem !important; |
| margin: 0 0 14px 0 !important; |
| padding: 8px 12px; |
| line-height: 1.5; |
| background: rgba(255, 255, 255, 0.10); |
| border-left: 3px solid #fcd34d; |
| border-radius: 6px; |
| } |
| |
| .hero-note a { |
| color: #fde68a !important; |
| text-decoration: underline; |
| font-weight: 600; |
| } |
| |
| .hero-note strong, |
| .hero-note b { |
| color: #ffffff !important; |
| } |
| |
| .hero-badges { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
| |
| .hero-badge { |
| background: rgba(255, 255, 255, 0.15); |
| border: 1px solid rgba(255, 255, 255, 0.25); |
| color: #f8fbff !important; |
| padding: 5px 10px; |
| border-radius: 999px; |
| font-size: 0.8rem; |
| font-weight: 600; |
| display: inline-flex; |
| align-items: center; |
| line-height: 1.1; |
| } |
| |
| .hero-badge, |
| .hero-badge * { |
| color: #f8fbff !important; |
| } |
| |
| .page-intro-card { |
| margin: 0 0 18px 0; |
| padding: 18px 22px; |
| border: 1px solid rgba(37, 99, 235, 0.10); |
| border-radius: 18px; |
| background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); |
| box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05); |
| } |
| |
| .page-intro-kicker { |
| display: inline-flex; |
| align-items: center; |
| padding: 5px 10px; |
| margin-bottom: 10px; |
| border-radius: 999px; |
| background: rgba(37, 99, 235, 0.10); |
| color: #1d4ed8; |
| font-size: 0.76rem; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
| |
| .page-intro-title { |
| margin: 0 0 8px 0; |
| color: #0f172a; |
| font-size: 1.35rem; |
| font-weight: 800; |
| line-height: 1.25; |
| } |
| |
| .page-intro-desc { |
| margin: 0; |
| max-width: 920px; |
| color: #526072; |
| font-size: 0.96rem; |
| line-height: 1.55; |
| } |
| |
| /* ── Suppress Gradio Dataframe built-in cell popup/menu (data cells only) ── */ |
| /* Gradio 6.x renders a floating cell-menu div on right-click/interaction */ |
| /* NOTE: Only suppress in td (data cells), NOT in th (header cells) — headers need the menu for sorting */ |
| td .cell-menu-button, |
| td [class*="cell_menu"], |
| .gradio-dataframe td [class*="popup"], |
| .gradio-dataframe td [class*="tooltip"], |
| .table-wrap td [class*="popup"], |
| .table-wrap td [class*="tooltip"], |
| table td > div[class*="menu"], |
| table td > div[class*="popup"] { |
| display: none !important; |
| visibility: hidden !important; |
| pointer-events: none !important; |
| } |
| |
| /* ── Hide dummy column ─────────────────────────────────────────────── */ |
| #leaderboard-table table td:last-child, |
| #leaderboard-table table th:last-child { |
| display: none; |
| } |
| |
| /* Limit first column width (row number) */ |
| #leaderboard-table table td:first-child, |
| #leaderboard-table table th:first-child { |
| max-width: 50px; |
| min-width: 40px; |
| text-align: center; |
| white-space: nowrap; |
| } |
| |
| /* Model column — 2nd child */ |
| #leaderboard-table table td:nth-child(2), |
| #leaderboard-table table th:nth-child(2) { |
| min-width: 220px; |
| max-width: 420px; |
| overflow: auto; |
| white-space: nowrap; |
| } |
| |
| /* Model info columns: #Size (3rd) and #Params (4th) — grouped teal box */ |
| #leaderboard-table table td:nth-child(3), |
| #leaderboard-table table th:nth-child(3), |
| #leaderboard-table table td:nth-child(4), |
| #leaderboard-table table th:nth-child(4) { |
| background: rgba(16, 185, 129, 0.06) !important; |
| } |
| /* Left edge of group: left border only on 3rd child */ |
| #leaderboard-table table td:nth-child(3), |
| #leaderboard-table table th:nth-child(3) { |
| border-left: 2px solid rgba(16, 185, 129, 0.45) !important; |
| border-right: none !important; |
| } |
| /* Right edge of group: right border only on 4th child */ |
| #leaderboard-table table td:nth-child(4), |
| #leaderboard-table table th:nth-child(4) { |
| border-right: 2px solid rgba(16, 185, 129, 0.45) !important; |
| border-left: 1px solid rgba(16, 185, 129, 0.15) !important; |
| } |
| #leaderboard-table table th:nth-child(3), |
| #leaderboard-table table th:nth-child(4) { |
| background: rgba(16, 185, 129, 0.14) !important; |
| color: #065f46; |
| } |
| |
| /* Accuracy columns: 5th child onwards (average + tasks) — blue tint */ |
| #leaderboard-table table td:nth-child(n+5), |
| #leaderboard-table table th:nth-child(n+5) { |
| background: rgba(37, 99, 235, 0.04) !important; |
| border-left: 1px solid rgba(37, 99, 235, 0.10); |
| } |
| #leaderboard-table table th:nth-child(n+5) { |
| background: rgba(37, 99, 235, 0.10) !important; |
| color: #1e3a8a; |
| } |
| /* Undo tint for dummy/last column */ |
| #leaderboard-table table td:last-child, |
| #leaderboard-table table th:last-child { |
| background: transparent !important; |
| border: none !important; |
| } |
| |
| /* ── Modal overlay ─────────────────────────────────────────────────── */ |
| .custom-modal:not([style*="display: none"]):not(.hidden) { |
| position: fixed !important; |
| top: 0 !important; |
| left: 0 !important; |
| width: 100vw !important; |
| height: 100vh !important; |
| background-color: rgba(0, 0, 0, 0.85) !important; |
| z-index: 10000 !important; |
| display: block !important; |
| overflow-y: auto !important; |
| pointer-events: auto !important; |
| padding: 5vh 0 !important; |
| } |
| |
| .custom-modal[style*="display: none"], |
| .custom-modal.hidden, |
| .modal-hidden { |
| display: none !important; |
| visibility: hidden !important; |
| pointer-events: none !important; |
| position: absolute !important; |
| width: 0 !important; |
| height: 0 !important; |
| } |
| |
| .modal-content { |
| background: white !important; |
| padding: 30px 50px !important; |
| border-radius: 12px; |
| width: 85% !important; |
| max-width: 1100px; |
| margin: 0 auto !important; |
| display: block !important; |
| height: auto !important; |
| min-height: 200px !important; |
| max-height: none !important; |
| z-index: 10001; |
| text-align: center; |
| box-shadow: 0 4px 20px rgba(0,0,0,0.3); |
| } |
| |
| .modal-content .gradio-plot, |
| .modal-content .plot-container { |
| height: 400px !important; |
| min-height: 400px !important; |
| max-height: 400px !important; |
| width: 100% !important; |
| } |
| |
| /* ── Duplicate-warning modal ───────────────────────────────────── */ |
| #dup-modal-quant .modal-content, |
| #dup-modal-eval .modal-content { |
| max-width: 560px !important; |
| min-height: unset !important; |
| padding: 36px 40px !important; |
| text-align: left !important; |
| } |
| .dup-modal-buttons { |
| margin-top: 20px !important; |
| display: flex !important; |
| gap: 10px !important; |
| justify-content: flex-end !important; |
| } |
| /* Remove Gradio's built-in markdown box styling inside dup modals (prevents double-border look) */ |
| #dup-modal-quant .modal-content .gradio-markdown, |
| #dup-modal-quant .modal-content .prose, |
| #dup-modal-eval .modal-content .gradio-markdown, |
| #dup-modal-eval .modal-content .prose { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| |
| /* ── Inline real-time duplicate warning banner ─────────────────────────── */ |
| .dup-inline-warning { |
| background: #fff8e1 !important; |
| border-left: 4px solid #f59e0b !important; |
| border-radius: 6px !important; |
| padding: 10px 14px !important; |
| margin-top: 6px !important; |
| font-size: 0.92em !important; |
| color: #92400e !important; |
| } |
| /* Remove Gradio's inner wrapper box to prevent double-border */ |
| .dup-inline-warning .gradio-markdown, |
| .dup-inline-warning .prose, |
| .dup-inline-warning > .block, |
| .dup-inline-warning > div { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| |
| /* ── Filter row: checkbox + current user label ──────────────────────── */ |
| .filter-row { |
| align-items: center !important; |
| gap: 4px !important; |
| flex-wrap: nowrap !important; |
| } |
| /* Shrink both children to their content width so the label sits right next to the checkbox */ |
| .filter-row > div { |
| flex: none !important; |
| width: auto !important; |
| min-width: 0 !important; |
| } |
| .current-user-label { |
| font-size: 0.88em !important; |
| color: #6b7280 !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| white-space: nowrap !important; |
| } |
| |
| .modal-content .gradio-dataframe { |
| height: auto !important; |
| min-height: 50px !important; |
| max-height: 400px !important; |
| overflow-y: auto !important; |
| } |
| |
| .modal-content .form, |
| .modal-content .gap { |
| gap: 0 !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| } |
| |
| .modal-content > * { |
| margin: 0 auto 20px auto !important; |
| flex: none !important; |
| display: block !important; |
| } |
| |
| /* ── Page layout ───────────────────────────────────────────────────── */ |
| .gradio-container { |
| max-width: 100% !important; |
| margin: 0 !important; |
| padding: 0 16px !important; |
| box-sizing: border-box !important; |
| overflow-x: hidden !important; |
| } |
| |
| /* When sidebar is open, shrink content via padding */ |
| body.sidebar-open .gradio-container { |
| padding-left: 236px !important; |
| transition: padding-left 0.3s ease; |
| } |
| body:not(.sidebar-open) .gradio-container { |
| padding-left: 16px !important; |
| transition: padding-left 0.3s ease; |
| } |
| |
| /* Metrics plots: respect available width */ |
| #page-metrics .plot-container, |
| #page-metrics .gradio-plot, |
| #page-metrics svg.main-svg { |
| width: 100% !important; |
| max-width: 100% !important; |
| } |
| |
| /* Main content area */ |
| .main-content { |
| width: 100% !important; |
| box-sizing: border-box !important; |
| overflow-x: hidden !important; |
| } |
| |
| /* Remove the SidebarMenu wrapper from normal flow so it doesn't add width */ |
| #app-sidebar { |
| position: absolute !important; |
| width: 0 !important; |
| height: 0 !important; |
| overflow: visible !important; |
| } |
| |
| @media (max-width: 768px) { |
| body:has(#app-sidebar .sidebar.open.left) .gradio-container { |
| padding-left: 16px !important; |
| } |
| } |
| |
| /* Sidebar background */ |
| #app-sidebar .sidebar { |
| background: linear-gradient(180deg, #f0f5ff 0%, #e8f0fe 100%) !important; |
| border-right: 1px solid #c7d8f0 !important; |
| display: flex !important; |
| flex-direction: column !important; |
| } |
| |
| /* Dashed separators between menu items */ |
| #app-sidebar .menu-item { |
| border-bottom: 1px dashed #b8cce8 !important; |
| margin-bottom: 6px !important; |
| border-radius: 8px !important; |
| padding: 10px 12px !important; |
| min-height: 44px !important; |
| display: flex !important; |
| align-items: center !important; |
| } |
| #app-sidebar .menu-item:last-child { |
| border-bottom: none !important; |
| } |
| |
| /* Selected item: white text, blue bg, white icon */ |
| #app-sidebar .menu-item.active { |
| background: #2563eb !important; |
| color: #fff !important; |
| box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important; |
| } |
| #app-sidebar .menu-item.active .label { |
| color: #fff !important; |
| } |
| #app-sidebar .menu-item.active .icon, |
| #app-sidebar .menu-item.active svg { |
| color: #fff !important; |
| stroke: #fff !important; |
| } |
| |
| /* Hover state for non-active items */ |
| #app-sidebar .menu-item:not(.active):hover { |
| background: rgba(37, 99, 235, 0.07) !important; |
| } |
| |
| /* Sidebar branding overlay (fixed, independent of SidebarMenu re-renders) */ |
| .sidebar-brand-overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 220px; |
| height: 68px; |
| z-index: 1002; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 12px 16px; |
| background: linear-gradient(180deg, #eef2ff 0%, #e8eeff 100%); |
| border-bottom: 1px solid rgba(37, 99, 235, 0.15); |
| box-sizing: border-box; |
| opacity: 0; |
| transform: translateX(-10px); |
| visibility: hidden; |
| transition: opacity 0.18s ease, transform 0.24s ease, visibility 0.24s ease; |
| } |
| |
| .sidebar-brand-overlay.sidebar-brand-visible { |
| opacity: 1; |
| transform: translateX(0); |
| visibility: visible; |
| transition-delay: 0.08s; |
| } |
| |
| .sidebar-brand-logo { |
| width: 36px; |
| height: 36px; |
| border-radius: 8px; |
| background: rgba(37, 99, 235, 0.10); |
| padding: 4px; |
| object-fit: contain; |
| flex-shrink: 0; |
| display: block; |
| } |
| |
| .sidebar-brand-title { |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| min-width: 0; |
| color: #1e3a8a; |
| line-height: 1.15; |
| } |
| |
| .sidebar-brand-kicker { |
| font-size: 0.74rem; |
| font-weight: 700; |
| color: #47607f; |
| letter-spacing: 0.02em; |
| } |
| |
| .sidebar-brand-main { |
| font-size: 0.96rem; |
| font-weight: 800; |
| color: #1e3a8a; |
| } |
| |
| /* Push sidebar menu items down to make room for the brand overlay */ |
| #app-sidebar .sidebar-wrapper { |
| padding: 84px 12px 20px 12px !important; |
| display: flex !important; |
| flex-direction: column !important; |
| gap: 6px !important; |
| min-height: 100vh !important; |
| box-sizing: border-box !important; |
| overflow-y: auto !important; |
| } |
| |
| /* Sidebar label text style */ |
| #app-sidebar .label { |
| font-family: 'Manrope', sans-serif; |
| font-weight: 700; |
| font-size: 0.88rem; |
| color: #334155; |
| line-height: 1.25; |
| letter-spacing: -0.01em; |
| transition: opacity 0.16s ease, transform 0.18s ease, color 0.16s ease; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| #app-sidebar .menu-item.active .label { |
| font-weight: 700; |
| } |
| |
| body:not(.sidebar-open) #app-sidebar .label { |
| opacity: 0; |
| transform: translateX(-4px); |
| } |
| |
| body.sidebar-open #app-sidebar .label { |
| opacity: 1; |
| transform: translateX(0); |
| transition-delay: 0.06s; |
| } |
| |
| /* Toggle button styling */ |
| #app-sidebar .toggle-button { |
| background: #fff !important; |
| border: 1px solid #c7d8f0 !important; |
| border-radius: 6px !important; |
| } |
| |
| /* Force ALL .gradio-group / .group / .panel / .form backgrounds to white */ |
| .gradio-group, |
| .group, |
| .panel, |
| .form { |
| background-color: #fff !important; |
| background: #fff !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| |
| .unequal-height { |
| background: #fff !important; |
| } |
| |
| /* ── Compare bar ── force white everywhere ─────────────────────────── */ |
| #compare-bar, |
| #compare-bar * { |
| background-color: #fff !important; |
| background: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| /* ── Submit panel ── force white everywhere ─────────────────────────── */ |
| #submit-panel, |
| #submit-panel * { |
| background-color: #fff !important; |
| background: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| #submit-panel { |
| border: 1px solid #e5e7eb !important; |
| border-radius: 10px !important; |
| padding: 16px !important; |
| } |
| |
| /* Make submit button column stretch to match the left column */ |
| #submit-panel .horizontal { |
| align-items: stretch !important; |
| } |
| #submit-panel .horizontal > div { |
| display: flex !important; |
| flex-direction: column !important; |
| } |
| .action-center-col { |
| background: #fff !important; |
| display: flex !important; |
| flex-direction: column !important; |
| align-self: stretch !important; |
| height: 100% !important; |
| } |
| |
| .action-center-col > div { |
| width: 100% !important; |
| } |
| |
| .action-spacer { |
| flex: 1 1 0 !important; |
| min-height: 0 !important; |
| width: 100% !important; |
| background: #fff !important; |
| } |
| |
| .submit-slot { |
| flex: 1 1 auto !important; |
| display: flex !important; |
| flex-direction: column !important; |
| align-self: stretch !important; |
| justify-content: center !important; |
| } |
| |
| .submit-action-btn { |
| margin:0 20px !important; |
| flex: 0 0 auto !important; |
| height: auto !important; |
| min-height: 48px; |
| } |
| |
| #submit-panel .submit-col { |
| display: flex !important; |
| flex-direction: column !important; |
| align-items: center !important; |
| justify-content: center !important; |
| align-self: stretch !important; |
| gap: 6px !important; |
| min-height: 100% !important; |
| } |
| |
| .submit-star-nudge, |
| .submit-star-nudge > *, |
| .submit-star-nudge .gradio-markdown, |
| .submit-star-nudge .prose, |
| .submit-star-nudge .block, |
| .submit-star-nudge div { |
| background: #ffffff !important; |
| background-color: #ffffff !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| min-height: 0 !important; |
| height: auto !important; |
| } |
| |
| .submit-star-nudge { |
| flex: 0 0 auto !important; |
| display: flex !important; |
| justify-content: center !important; |
| width: 100% !important; |
| margin: 0 !important; |
| text-align: center !important; |
| overflow: visible !important; |
| min-width: 0 !important; |
| border-width: 0 !important; |
| } |
| |
| .submit-star-nudge.block, |
| .submit-col > .submit-star-nudge { |
| flex-grow: 0 !important; |
| flex-shrink: 0 !important; |
| } |
| |
| .submit-star-nudge p, |
| .submit-star-nudge small { |
| color: #94a3b8 !important; |
| font-size: 0.65rem !important; |
| line-height: 1.15 !important; |
| margin: 0 !important; |
| } |
| |
| .submit-star-nudge a { |
| display: inline-flex !important; |
| justify-content: center !important; |
| width: 100% !important; |
| color: #64748b !important; |
| font-weight: 600 !important; |
| text-decoration: none !important; |
| } |
| |
| .submit-star-nudge a:hover { |
| color: #2563eb !important; |
| text-decoration: underline !important; |
| } |
| |
| /* ── Submit hint note ──────────────────────────────────────────────── */ |
| .submit-hint, |
| .submit-hint > *, |
| .submit-hint .gradio-markdown, |
| .submit-hint .prose, |
| .submit-hint .block, |
| .submit-hint div { |
| background: #ffffff !important; |
| background-color: #ffffff !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| margin: 0 !important; |
| display: flex !important; |
| align-items: center !important; |
| min-height: unset !important; |
| } |
| .submit-hint { |
| padding: 3px !important; |
| } |
| .submit-hint p, .submit-hint small { |
| color: #64748b !important; |
| font-size: 0.85rem !important; |
| margin: 0 !important; |
| line-height: 1.4; |
| display: inline !important; |
| } |
| .submit-hint .rtn-only-note { |
| background: #fef3c7; |
| border: 1px solid #f59e0b; |
| border-radius: 4px; |
| color: #92400e; |
| display: inline-block; |
| font-weight: 600; |
| margin: 0 3px; |
| padding: 1px 5px; |
| } |
| |
| /* ── Filter panel ── force white ───────────────────────────────────── */ |
| #filter-panel, |
| #filter-panel *, |
| #filter-panel .gradio-group, |
| #filter-panel .group, |
| #filter-panel .panel, |
| #filter-panel .form, |
| #filter-panel .block { |
| background-color: #fff !important; |
| background: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| #filter-panel { |
| border: 1px solid #e5e7eb !important; |
| border-radius: 10px !important; |
| padding: 12px 16px !important; |
| } |
| |
| /* Compact filter panel: reduce vertical gaps */ |
| #filter-panel .gradio-row { |
| gap: 12px !important; |
| } |
| |
| #filter-panel .gradio-column { |
| gap: 6px !important; |
| } |
| |
| #filter-panel .gradio-checkboxgroup, |
| #filter-panel .gradio-dropdown { |
| margin-bottom: 2px !important; |
| } |
| |
| /* ── Filter panel: checkboxgroup titles black ──────────────────────── */ |
| #filter-panel .gradio-checkboxgroup > span, |
| #filter-panel .gradio-checkboxgroup > label, |
| #filter-panel .gradio-checkboxgroup .label-text, |
| #filter-panel .gradio-checkboxgroup legend, |
| #filter-panel .gradio-checkboxgroup > div > span:first-child { |
| color: #374151 !important; |
| font-weight: 600 !important; |
| opacity: 1 !important; |
| } |
| |
| /* ── Gradio labels: override the gray span color only in dark mode */ |
| .dark #pipeline-filter span, |
| .dark #pipeline-scheme-filter span, |
| .dark #column-select span, |
| .dark #model-input-quant span, |
| .dark #quant-scheme-select span, |
| .dark #model-input-eval span, |
| .dark #eval-scheme-select span { |
| color: #374151 !important; |
| opacity: 1 !important; |
| } |
| |
| /* Quant config: force 2-column rows */ |
| #quant-config-container .gradio-row, |
| #quant-config-container > .gradio-row, |
| #quant-config-container .row, |
| #quant-config-container > div > .gradio-row, |
| #quant-config-container > .gradio-column > .gradio-row { |
| display: flex !important; |
| flex-direction: row !important; |
| flex-wrap: nowrap !important; |
| gap: 8px !important; |
| } |
| |
| #quant-config-container .gradio-row > *, |
| #quant-config-container .gradio-row > .gradio-column, |
| #quant-config-container .gradio-row > .gradio-dropdown, |
| #quant-config-container .gradio-row > div { |
| flex: 1 1 0% !important; |
| min-width: 0 !important; |
| width: auto !important; |
| } |
| |
| /* Also target Gradio 6 specific row/column nesting */ |
| #quant-config-container [class*="row"] { |
| display: flex !important; |
| flex-direction: row !important; |
| flex-wrap: nowrap !important; |
| } |
| |
| #quant-config-container [class*="row"] > * { |
| flex: 1 1 0% !important; |
| min-width: 0 !important; |
| } |
| |
| /* Quant config card */ |
| #quant-config-container, |
| #quant-config-container * { |
| background-color: #fff !important; |
| background: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| #quant-config-container { |
| border: 1px solid #e5e7eb !important; |
| border-radius: 8px !important; |
| padding: 8px 12px !important; |
| } |
| |
| .quant-config-header { |
| border-radius: 8px 8px 0 0; |
| font-weight: 600; |
| color: #71717a; |
| padding: 4px 8px; |
| } |
| |
| /* ── Accordion inner groups ── force white ─────────────────────────── */ |
| .gradio-accordion .gradio-group, |
| .gradio-accordion .group, |
| .gradio-accordion .panel { |
| background: #fff !important; |
| box-shadow: none !important; |
| border: none !important; |
| } |
| |
| /* ── Accordion card styling ────────────────────────────────────────── */ |
| [id^="accordion-"] { |
| position: relative !important; |
| margin: 10px 0 14px 0 !important; |
| border: 1px solid rgba(148, 163, 184, 0.18) !important; |
| border-radius: 16px !important; |
| background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%) !important; |
| box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045) !important; |
| overflow: hidden !important; |
| } |
| |
| [id^="accordion-"]::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 18px; |
| right: 18px; |
| height: 2px; |
| border-radius: 999px; |
| background: linear-gradient(90deg, rgba(37, 99, 235, 0.0) 0%, rgba(37, 99, 235, 0.28) 24%, rgba(59, 130, 246, 0.16) 76%, rgba(59, 130, 246, 0.0) 100%); |
| pointer-events: none; |
| } |
| |
| [id^="accordion-"] > div, |
| [id^="accordion-"] > div > div { |
| background: transparent !important; |
| } |
| |
| [id^="accordion-"] .label-wrap { |
| min-height: 54px !important; |
| padding: 14px 16px 13px 16px !important; |
| background: linear-gradient(180deg, rgba(246, 249, 253, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%) !important; |
| border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; |
| box-sizing: border-box !important; |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; |
| display: flex !important; |
| align-items: center !important; |
| transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; |
| } |
| |
| [id^="accordion-"] .label-wrap > span { |
| font-size: 0.95rem !important; |
| font-weight: 700 !important; |
| color: #18212f !important; |
| letter-spacing: -0.012em; |
| line-height: 1.2 !important; |
| } |
| |
| [id^="accordion-"] .label-wrap .icon, |
| [id^="accordion-"] .label-wrap svg { |
| color: #6b7a90 !important; |
| stroke: #6b7a90 !important; |
| transition: transform 0.18s ease, color 0.18s ease, stroke 0.18s ease; |
| } |
| |
| [id^="accordion-"] .label-wrap:hover { |
| background: linear-gradient(180deg, rgba(244, 247, 251, 0.98) 0%, rgba(248, 250, 252, 1) 100%) !important; |
| } |
| |
| [id^="accordion-"] .label-wrap:hover .icon, |
| [id^="accordion-"] .label-wrap:hover svg { |
| color: #5b6b80 !important; |
| stroke: #5b6b80 !important; |
| } |
| |
| [id^="accordion-"][open], |
| [id^="accordion-"][data-open="true"], |
| [id^="accordion-"] .open { |
| border-color: rgba(96, 139, 210, 0.22) !important; |
| box-shadow: 0 10px 24px rgba(59, 130, 246, 0.06) !important; |
| } |
| |
| [id^="accordion-"][open] .label-wrap, |
| [id^="accordion-"][data-open="true"] .label-wrap, |
| [id^="accordion-"] .open .label-wrap { |
| background: linear-gradient(180deg, rgba(239, 245, 252, 0.98) 0%, rgba(246, 249, 253, 0.98) 100%) !important; |
| border-bottom-color: rgba(96, 139, 210, 0.14) !important; |
| } |
| |
| [id^="accordion-"][open] .label-wrap .icon, |
| [id^="accordion-"][data-open="true"] .label-wrap .icon, |
| [id^="accordion-"] .open .label-wrap .icon, |
| [id^="accordion-"][open] .label-wrap svg, |
| [id^="accordion-"][data-open="true"] .label-wrap svg, |
| [id^="accordion-"] .open .label-wrap svg { |
| color: #4f6fa3 !important; |
| stroke: #4f6fa3 !important; |
| } |
| |
| [id^="accordion-"] .gradio-group, |
| [id^="accordion-"] .group, |
| [id^="accordion-"] .panel, |
| [id^="accordion-"] .block, |
| [id^="accordion-"] .form { |
| background: linear-gradient(180deg, #fcfdff 0%, #fbfdff 100%) !important; |
| border-radius: 0 0 15px 15px !important; |
| } |
| |
| [id^="accordion-"] .table-wrap, |
| [id^="accordion-"] table, |
| [id^="accordion-"] .markdown-text, |
| [id^="accordion-"] .prose, |
| [id^="accordion-"] textarea { |
| background: transparent !important; |
| border-radius: 0 0 14px 14px !important; |
| } |
| |
| /* ── Search bar ────────────────────────────────────────────────────── */ |
| #search-bar { |
| padding: 0px; |
| } |
| |
| #search-bar input, |
| #search-bar textarea { |
| font-size: 15px !important; |
| padding-left: 40px !important; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: 14px center; |
| background-size: 18px; |
| } |
| |
| /* ── Pipeline search row: vertical centering ───────────────────────── */ |
| #pipeline-search-row { |
| align-items: center !important; |
| } |
| |
| #pipeline-search-bar input, |
| #pipeline-search-bar textarea { |
| font-size: 15px !important; |
| padding-left: 40px !important; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: 14px center; |
| background-size: 18px; |
| } |
| |
| #queue-search-quant input, |
| #queue-search-quant textarea, |
| #queue-search-eval input, |
| #queue-search-eval textarea { |
| font-size: 15px !important; |
| padding-left: 40px !important; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: 14px center; |
| background-size: 18px; |
| } |
| |
| /* ── Pipeline search button with icon ──────────────────────────────── */ |
| #pipeline-search-button button { |
| display: inline-flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| gap: 6px !important; |
| } |
| #pipeline-search-button button::before { |
| content: ""; |
| display: inline-block; |
| width: 15px; |
| height: 15px; |
| background-color: currentColor; |
| -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); |
| mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); |
| -webkit-mask-repeat: no-repeat; |
| mask-repeat: no-repeat; |
| -webkit-mask-size: contain; |
| mask-size: contain; |
| flex-shrink: 0; |
| } |
| |
| #filter-columns-type { border: 0; padding: 0.5; } |
| #filter-columns-size { border: 0; padding: 0.5; } |
| |
| /* ── Leaderboard table ─────────────────────────────────────────────── */ |
| #leaderboard-table { |
| margin-top: 8px; |
| } |
| |
| /* ── Comparison bar ────────────────────────────────────────────────── */ |
| /* (styles moved to top of file with aggressive selectors) */ |
| |
| /* Make the Compare button column stretch to match the checkbox column */ |
| #compare-shell, |
| #compare-shell > div, |
| #compare-shell .block, |
| #compare-shell .form, |
| #compare-shell .gradio-group { |
| background: #fff !important; |
| background-color: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| #compare-shell * { |
| background-color: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| #compare-shell { |
| border-radius: 16px !important; |
| overflow: hidden !important; |
| padding: 0 !important; |
| border: 1px solid #e5e7eb !important; |
| } |
| |
| #compare-bar { |
| border: none !important; |
| border-radius: 0 !important; |
| padding: 8px 12px !important; |
| overflow: visible !important; |
| } |
| #compare-bar .horizontal, |
| #compare-bar .horizontal > div, |
| #compare-bar .block, |
| #compare-bar .form, |
| #compare-bar .gradio-checkboxgroup, |
| #compare-bar label, |
| #compare-bar .action-center-col, |
| #compare-bar .action-center-col > div, |
| #compare-bar .action-spacer, |
| #compare-bar .wrap, |
| #compare-bar .scroll-hide { |
| background: #fff !important; |
| background-color: #fff !important; |
| } |
| |
| #compare-bar > div, |
| #compare-bar > div > div { |
| background: #fff !important; |
| background-color: #fff !important; |
| } |
| #compare-bar .horizontal { |
| align-items: stretch !important; |
| } |
| #compare-bar .horizontal > div { |
| display: flex !important; |
| flex-direction: column !important; |
| } |
| #compare-bar .column.action-center-col { |
| background: #fff !important; |
| background-color: #fff !important; |
| padding-left: 8px !important; |
| padding-right: 8px !important; |
| } |
| #compare-button-full { |
| flex: 0 0 auto !important; |
| height: auto !important; |
| width: 100% !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| min-height: 60px; |
| padding-left: 4px !important; |
| padding-right: 4px !important; |
| } |
| |
| #compare-button-full, |
| #compare-button-full button, |
| #submit-button-quant, |
| #submit-button-eval, |
| .submit-action-btn, |
| #submit-button-quant button, |
| #submit-button-eval button, |
| .submit-action-btn button { |
| border-radius: 16px !important; |
| } |
| |
| #compare-button-full button { |
| width: 100% !important; |
| min-height: 52px !important; |
| margin: 0 auto !important; |
| border-radius: 16px !important; |
| border: 1px solid #1e3a8a !important; |
| background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important; |
| color: #ffffff !important; |
| font-weight: 700 !important; |
| letter-spacing: 0.2px; |
| box-shadow: 0 8px 18px rgba(29, 78, 216, 0.28) !important; |
| transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; |
| } |
| |
| #compare-button-full button:hover { |
| transform: translateY(-1px); |
| background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important; |
| box-shadow: 0 10px 22px rgba(30, 64, 175, 0.34) !important; |
| } |
| |
| #compare-button-full button:active { |
| transform: translateY(0); |
| box-shadow: 0 5px 12px rgba(30, 64, 175, 0.28) !important; |
| } |
| |
| #model_comparison { |
| height: 5rem !important; |
| overflow: auto !important; |
| background: #fff !important; |
| } |
| |
| #model_comparison > div, |
| #model_comparison .wrap, |
| #model_comparison .scroll-hide { |
| background: #fff !important; |
| box-shadow: none !important; |
| } |
| |
| #model_comparison .svelte-1k4wjf2 { |
| font-size: 0.7rem !important; |
| } |
| |
| /* ── Checkbox/radio selected color: white bg, blue border ─────────── */ |
| .gradio-checkboxgroup label.selected, |
| .gradio-radio label.selected, |
| .gradio-checkboxgroup label[data-selected='true'], |
| .gradio-radio label[data-selected='true'], |
| .gradio-checkboxgroup label[aria-checked='true'], |
| .gradio-radio label[aria-checked='true'], |
| .gradio-checkboxgroup label:has(input:checked), |
| .gradio-radio label:has(input:checked) { |
| background: #ffffff !important; |
| border-color: #2563eb !important; |
| color: #374151 !important; |
| } |
| |
| .gradio-checkbox input:checked, |
| .gradio-radio input:checked, |
| .gradio-checkboxgroup input:checked { |
| accent-color: #2563eb !important; |
| } |
| |
| /* ── Submission info accordion: smaller expanded text ─────────────── */ |
| .submission-info-accordion .markdown-text, |
| .submission-info-accordion .markdown-text p, |
| .submission-info-accordion .markdown-text li, |
| .submission-info-accordion .markdown-text div, |
| .submission-info-accordion .markdown-text h1, |
| .submission-info-accordion .markdown-text h2, |
| .submission-info-accordion .markdown-text h3, |
| .submission-info-accordion .markdown-text h4 { |
| font-size: 0.84rem !important; |
| line-height: 1.42 !important; |
| } |
| |
| /* \u2500\u2500 Submit button in center row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */ |
| |
| /* ── Text ──────────────────────────────────────────────────────────── */ |
| .markdown-text { |
| font-size: 16px !important; |
| } |
| |
| #models-to-add-text { |
| font-size: 18px !important; |
| } |
| |
| #citation-button span { |
| font-size: 16px !important; |
| } |
| |
| #citation-button > label > span { |
| display: none !important; |
| } |
| |
| #citation-button textarea { |
| font-size: 16px !important; |
| } |
| |
| #citation-button > label > button { |
| margin: 6px; |
| transform: scale(1.3); |
| } |
| |
| #search-bar-table-box > div:first-child { |
| background: none; |
| border: none; |
| } |
| |
| .modebar > .modebar-group:nth-child(2) { |
| display: none !important; |
| } |
| |
| /* ── Queue tables: force first col wider, rest compact ─────────────── */ |
| .gradio-accordion table { |
| table-layout: fixed !important; |
| width: 100% !important; |
| } |
| |
| .gradio-accordion table th:first-child, |
| .gradio-accordion table td:first-child { |
| width: 45% !important; |
| max-width: none !important; |
| min-width: 200px !important; |
| white-space: normal !important; |
| overflow-wrap: break-word !important; |
| word-break: break-all !important; |
| } |
| |
| .gradio-accordion table th:nth-child(2), |
| .gradio-accordion table td:nth-child(2) { |
| width: 22% !important; |
| max-width: none !important; |
| min-width: 140px !important; |
| white-space: normal !important; |
| } |
| |
| .gradio-accordion table th:nth-child(n+3), |
| .gradio-accordion table td:nth-child(n+3) { |
| width: auto !important; |
| max-width: 140px !important; |
| overflow: hidden !important; |
| text-overflow: ellipsis !important; |
| white-space: nowrap !important; |
| } |
| |
| /* Submit button wrapper: white background, stretch to fill */ |
| .submit-slot { |
| flex: 1 1 auto !important; |
| display: flex !important; |
| flex-direction: column !important; |
| justify-content: center !important; |
| background: #fff !important; |
| background-color: #fff !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| } |
| |
| .submit-slot *, |
| .submit-slot .gradio-button { |
| box-shadow: none !important; |
| } |
| |
| #submit-button-quant, |
| #submit-button-eval, |
| .submit-action-btn { |
| flex: 0 0 auto !important; |
| height: auto !important; |
| min-height: 48px; |
| width: 100% !important; |
| display: flex !important; |
| box-shadow: none !important; |
| align-self: center !important; |
| margin: 0 !important; |
| } |
| |
| /* Submit column: vertically center the button */ |
| .submit-col { |
| background: #fff !important; |
| display: flex !important; |
| flex-direction: column !important; |
| align-items: center !important; |
| justify-content: center !important; |
| align-self: stretch !important; |
| gap: 6px !important; |
| min-height: 100% !important; |
| } |
| .submit-col > * { |
| width: 100% !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| flex-grow: 0 !important; |
| } |
| |
| #page-metrics .js-plotly-plot .plotly .gtitle, |
| #page-metrics .js-plotly-plot .plotly .g-gtitle text { |
| font-size: 14px !important; |
| } |
| |
| #metrics-layout { |
| width: 100% !important; |
| display: flex !important; |
| flex-direction: column !important; |
| gap: 18px !important; |
| } |
| |
| #metrics-layout > div { |
| width: 100% !important; |
| min-width: 0 !important; |
| } |
| |
| /* KPI summary cards */ |
| .metrics-kpi-card { |
| background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%); |
| border: 1px solid rgba(37,99,235,0.18); |
| border-radius: 12px; |
| padding: 14px 20px; |
| min-width: 120px; |
| flex: 1 1 120px; |
| text-align: center; |
| box-shadow: 0 1px 4px rgba(37,99,235,0.08); |
| } |
| .metrics-kpi-value { |
| font-size: 1.7rem; |
| font-weight: 800; |
| color: #1e3a8a; |
| line-height: 1.1; |
| } |
| .metrics-kpi-label { |
| font-size: 0.72rem; |
| color: #475569; |
| margin-top: 4px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
| .metrics-kpi-sub { |
| font-size: 0.68rem; |
| color: #64748b; |
| margin-top: 3px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| max-width: 160px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| /* Top-10 table: rank column narrow, model column wide */ |
| #top10-table table td:first-child, |
| #top10-table table th:first-child { |
| text-align: center; |
| font-weight: 700; |
| width: 48px; |
| min-width: 48px; |
| max-width: 48px; |
| } |
| #top10-table table th { |
| background: rgba(37, 99, 235, 0.10) !important; |
| color: #1e3a8a; |
| font-weight: 700; |
| } |
| #top10-table table tr:nth-child(1) td { background: rgba(255, 215, 0, 0.12) !important; } |
| #top10-table table tr:nth-child(2) td { background: rgba(192, 192, 192, 0.12) !important; } |
| #top10-table table tr:nth-child(3) td { background: rgba(205, 127, 50, 0.10) !important; } |
| |
| #page-metrics .gradio-plot, |
| #page-metrics .js-plotly-plot, |
| #page-metrics .plot-container { |
| width: 100% !important; |
| max-width: 100% !important; |
| } |
| |
| #submit-button-quant button, |
| #submit-button-eval button, |
| .submit-action-btn button { |
| width: 100% !important; |
| max-width: none !important; |
| height: 100% !important; |
| min-height: 46px !important; |
| margin: 0 auto !important; |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| border-radius: 12px !important; |
| border: 1px solid #1e3a8a !important; |
| background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important; |
| color: #ffffff !important; |
| font-weight: 700 !important; |
| letter-spacing: 0.2px; |
| box-shadow: 0 8px 18px rgba(29, 78, 216, 0.28) !important; |
| transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; |
| } |
| |
| #submit-button-quant:hover, |
| #submit-button-eval:hover, |
| #submit-button-quant button:hover, |
| #submit-button-eval button:hover, |
| .submit-action-btn button:hover { |
| transform: translateY(-1px); |
| background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%) !important; |
| box-shadow: 0 10px 22px rgba(30, 64, 175, 0.34) !important; |
| } |
| |
| #submit-button-quant:active, |
| #submit-button-eval:active, |
| #submit-button-quant button:active, |
| #submit-button-eval button:active, |
| .submit-action-btn button:active { |
| transform: translateY(0); |
| box-shadow: 0 5px 12px rgba(30, 64, 175, 0.28) !important; |
| } |
| |
| /* ── Responsive adjustments ────────────────────────────────────────── */ |
| @media (max-width: 768px) { |
| .page-intro-card { |
| padding: 16px 16px; |
| border-radius: 16px; |
| } |
| .page-intro-title { |
| font-size: 1.16rem; |
| } |
| .page-intro-desc { |
| font-size: 0.92rem; |
| } |
| #filter-panel, #compare-bar, #submit-panel { |
| padding: 8px !important; |
| } |
| #submit-button-quant, |
| #submit-button-eval, |
| #submit-button-quant button, |
| #submit-button-eval button, |
| .submit-action-btn button { |
| width: min(86vw, 240px) !important; |
| } |
| #model_comparison { |
| height: 4rem !important; |
| } |
| } |
| |
| /* ── Accordion label-wrap: left-align title text ───────────────── */ |
| [id^="accordion-"] .label-wrap { |
| justify-content: flex-start !important; |
| gap: 8px !important; |
| } |
| [id^="accordion-"] .label-wrap > span { |
| text-align: left !important; |
| align-self: center !important; |
| } |
| [id^="accordion-"] .label-wrap .icon { |
| margin-left: auto; |
| flex-shrink: 0; |
| align-self: center !important; |
| } |
| |
| /* ── Accordion label icons (CSS ::before with inline SVG) ───────── */ |
| /* Shared base for all accordion header icons */ |
| #accordion-filters .label-wrap::before, |
| #accordion-info-quant .label-wrap::before, |
| #accordion-info-eval .label-wrap::before, |
| #accordion-finished-quant .label-wrap::before, |
| #accordion-running-quant .label-wrap::before, |
| #accordion-pending-quant .label-wrap::before, |
| #accordion-finished-eval .label-wrap::before, |
| #accordion-running-eval .label-wrap::before, |
| #accordion-pending-eval .label-wrap::before, |
| #accordion-citation .label-wrap::before { |
| content: ''; |
| display: inline-flex; |
| width: 18px; |
| height: 18px; |
| min-width: 18px; |
| margin-right: 8px; |
| align-self: center; |
| background-size: contain; |
| background-repeat: no-repeat; |
| background-position: center; |
| } |
| |
| /* sliders-horizontal → Filters */ |
| #accordion-filters .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E"); |
| } |
| |
| /* info → Submission Information (quant) */ |
| #accordion-info-quant .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='16' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='8' y2='8'/%3E%3C/svg%3E"); |
| } |
| |
| /* info → Submission Information (eval) */ |
| #accordion-info-eval .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='16' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='8' y2='8'/%3E%3C/svg%3E"); |
| } |
| |
| /* circle-check-big → Finished Quantizations */ |
| #accordion-finished-quant .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); |
| } |
| |
| /* loader → Running Quantization Queue */ |
| #accordion-running-quant .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); |
| } |
| |
| /* clock → Pending Quantization Queue */ |
| #accordion-pending-quant .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); |
| } |
| |
| /* circle-check-big → Finished Evaluations */ |
| #accordion-finished-eval .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); |
| } |
| |
| /* loader → Running Evaluation Queue */ |
| #accordion-running-eval .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); |
| } |
| |
| /* clock → Pending Evaluation Queue */ |
| #accordion-pending-eval .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); |
| } |
| |
| /* book-open → Citation */ |
| #accordion-citation .label-wrap::before { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); |
| } |
| |
| /* bar-chart → Model Comparison label */ |
| #model_comparison > label::before { |
| content: ''; |
| display: inline-block; |
| width: 18px; |
| height: 18px; |
| min-width: 18px; |
| margin-right: 8px; |
| vertical-align: -3px; |
| background-size: contain; |
| background-repeat: no-repeat; |
| background-position: center; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' x2='18' y1='20' y2='10'/%3E%3Cline x1='12' x2='12' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='14'/%3E%3C/svg%3E"); |
| } |
| |
| /* 125% scale */ |
| @media (resolution: 120dpi), (min-resolution: 1.25dppx) and (max-resolution: 1.5dppx) { |
| #model_comparison .svelte-1k4wjf2 { |
| font-size: 0.65rem; |
| } |
| #model_comparison { |
| height: 6rem !important; |
| overflow: auto !important; |
| } |
| } |
| |
| /* ── Pipeline table: fixed layout, per-column widths, no scroll ───────── */ |
| #pipeline-leaderboard-table .table-wrap, |
| #pipeline-leaderboard-table .wrap { |
| overflow-x: hidden !important; |
| } |
| #pipeline-leaderboard-table table { |
| width: 100% !important; |
| table-layout: fixed !important; |
| } |
| /* Base cell style: headers centered, data cells left-aligned */ |
| #pipeline-leaderboard-table table th { |
| padding-left: 10px !important; |
| padding-right: 10px !important; |
| overflow: hidden !important; |
| word-break: break-word !important; |
| text-align: center !important; |
| } |
| #pipeline-leaderboard-table table td { |
| padding-left: 10px !important; |
| padding-right: 10px !important; |
| overflow: hidden !important; |
| word-break: break-word !important; |
| text-align: left !important; |
| } |
| /* col 1: # row number — narrow, center both */ |
| #pipeline-leaderboard-table table th:nth-child(1), |
| #pipeline-leaderboard-table table td:nth-child(1) { |
| width: 4% !important; |
| text-align: center !important; |
| white-space: nowrap !important; |
| } |
| /* col 2: Model — wide, allow wrap */ |
| #pipeline-leaderboard-table table th:nth-child(2), |
| #pipeline-leaderboard-table table td:nth-child(2) { |
| width: 26% !important; |
| white-space: normal !important; |
| } |
| /* col 3: Quantized Model — wide, allow wrap */ |
| #pipeline-leaderboard-table table th:nth-child(3), |
| #pipeline-leaderboard-table table td:nth-child(3) { |
| width: 28% !important; |
| white-space: normal !important; |
| } |
| /* col 4: Average */ |
| #pipeline-leaderboard-table table th:nth-child(4), |
| #pipeline-leaderboard-table table td:nth-child(4) { |
| width: 9% !important; |
| white-space: nowrap !important; |
| } |
| /* col 5: HellaSwag */ |
| #pipeline-leaderboard-table table th:nth-child(5), |
| #pipeline-leaderboard-table table td:nth-child(5) { |
| width: 12% !important; |
| white-space: nowrap !important; |
| } |
| /* col 6: MMLU */ |
| #pipeline-leaderboard-table table th:nth-child(6), |
| #pipeline-leaderboard-table table td:nth-child(6) { |
| width: 9% !important; |
| white-space: nowrap !important; |
| } |
| /* col 7+: Piqa and any extra columns */ |
| #pipeline-leaderboard-table table th:nth-child(n+7), |
| #pipeline-leaderboard-table table td:nth-child(n+7) { |
| width: 9% !important; |
| white-space: nowrap !important; |
| } |
| |
| /* ── Pipeline table: 📥 download column ────────────────────────────── */ |
| /* Make the 📥 emoji cell look clickable */ |
| #page-pipeline-results table td:nth-child(2) { |
| cursor: pointer; |
| user-select: none; |
| text-align: center; |
| font-size: 1rem; |
| } |
| #page-pipeline-results table td:nth-child(2):hover { |
| background: rgba(37, 99, 235, 0.08) !important; |
| } |
| |
| /* ── Pipeline download Gradio modal ────────────────────────────────── */ |
| #pipeline-dl-modal.custom-modal .modal-content, |
| #pipeline-dl-modal .modal-content { |
| max-width: 640px !important; |
| width: 92vw !important; |
| max-height: 80vh !important; |
| overflow-y: auto !important; |
| padding: 28px 32px 24px !important; |
| text-align: left !important; |
| } |
| |
| #pipeline-dl-header a { |
| text-decoration: none !important; |
| } |
| |
| #pipeline-dl-files-html { |
| max-height: 240px; |
| overflow-y: auto; |
| border: 1px solid #e5e7eb; |
| border-radius: 8px; |
| margin-bottom: 8px; |
| } |
| |
| #pipeline-dl-file-select { |
| max-height: 200px; |
| overflow-y: auto; |
| } |
| |
| #pipeline-dl-file-select .wrap, |
| #pipeline-dl-file-select .scroll-hide { |
| max-height: 190px; |
| overflow-y: auto; |
| } |
| |
| #pipeline-dl-btn-row { |
| gap: 12px !important; |
| margin-top: 12px !important; |
| align-items: center !important; |
| } |
| |
| #pipeline-dl-download-btn { |
| border-radius: 10px !important; |
| } |
| |
| #pipeline-dl-close-btn { |
| border-radius: 10px !important; |
| max-width: 120px !important; |
| min-width: 90px !important; |
| } |
| |
| #pipeline-dl-status, |
| #pipeline-dl-dl-html { |
| margin-top: 6px; |
| font-size: 0.9rem; |
| }""" |
|
|
