| custom_css = """ |
| /* ===== Global ===== */ |
| .markdown-text { |
| font-size: 16px !important; |
| line-height: 1.7 !important; |
| } |
| |
| /* ===== Header Banner ===== */ |
| #space-title { |
| font-size: 2.4rem; |
| font-weight: 800; |
| letter-spacing: -0.5px; |
| background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 50%, #4a9fd5 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| padding: 12px 0 4px 0; |
| margin-bottom: 0; |
| } |
| |
| #space-subtitle { |
| text-align: center; |
| font-size: 1.05rem; |
| color: #666; |
| margin-top: 0; |
| margin-bottom: 16px; |
| font-weight: 400; |
| } |
| |
| /* ===== Link Buttons Bar ===== */ |
| .link-bar { |
| display: flex; |
| justify-content: center; |
| gap: 12px; |
| margin: 4px 0 18px 0; |
| flex-wrap: wrap; |
| } |
| |
| .link-bar a { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 7px 18px; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 600; |
| text-decoration: none; |
| transition: transform 0.12s, box-shadow 0.15s; |
| } |
| |
| .link-bar a:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); |
| } |
| |
| .link-bar a.link-github { |
| background: #24292f; |
| color: #fff; |
| } |
| |
| .link-bar a.link-arxiv { |
| background: #b31b1b; |
| color: #fff; |
| } |
| |
| .link-bar a svg { |
| width: 16px; |
| height: 16px; |
| fill: currentColor; |
| flex-shrink: 0; |
| } |
| |
| /* ===== Tabs ===== */ |
| .tab-buttons button { |
| font-size: 17px !important; |
| font-weight: 600 !important; |
| padding: 10px 20px !important; |
| } |
| |
| /* ===== Leaderboard Table ===== */ |
| .leaderboard-table { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); |
| font-size: 15px; |
| margin: 16px 0; |
| } |
| |
| .leaderboard-table thead th { |
| background: linear-gradient(135deg, #1e3a5f, #2d6a9f); |
| color: #fff; |
| font-weight: 700; |
| padding: 14px 18px; |
| text-align: center; |
| font-size: 14px; |
| letter-spacing: 0.3px; |
| white-space: nowrap; |
| border: none; |
| } |
| |
| .leaderboard-table thead th:first-child { |
| text-align: center; |
| width: 50px; |
| } |
| |
| .leaderboard-table thead th.col-model { |
| text-align: left; |
| min-width: 180px; |
| } |
| |
| .leaderboard-table tbody td { |
| padding: 12px 18px; |
| text-align: center; |
| border-bottom: 1px solid #e8ecf1; |
| font-variant-numeric: tabular-nums; |
| transition: background 0.15s; |
| } |
| |
| .leaderboard-table tbody td:first-child { |
| text-align: center; |
| font-weight: 700; |
| font-size: 18px; |
| width: 50px; |
| } |
| |
| .leaderboard-table tbody td.col-model { |
| text-align: left; |
| font-weight: 600; |
| color: #1a1a2e; |
| } |
| |
| .leaderboard-table tbody tr:hover { |
| background: #f0f5ff !important; |
| } |
| |
| .leaderboard-table tbody tr:last-child td { |
| border-bottom: none; |
| } |
| |
| /* Row striping */ |
| .leaderboard-table tbody tr:nth-child(even) { |
| background: #f8fafc; |
| } |
| |
| .leaderboard-table tbody tr:nth-child(odd) { |
| background: #ffffff; |
| } |
| |
| /* Highlight row for "our" models */ |
| .leaderboard-table tbody tr.highlight-row { |
| background: linear-gradient(90deg, #e8f4fd 0%, #f0f7ff 100%) !important; |
| border-left: 4px solid #2d6a9f; |
| } |
| |
| .leaderboard-table tbody tr.highlight-row:hover { |
| background: linear-gradient(90deg, #d6ecfa 0%, #e4f0ff 100%) !important; |
| } |
| |
| /* Best score styling */ |
| .best-score { |
| font-weight: 800; |
| color: #1a6bb5; |
| } |
| |
| /* Delta positive */ |
| .delta-pos { |
| color: #16a34a; |
| font-weight: 600; |
| } |
| |
| .delta-zero { |
| color: #9ca3af; |
| } |
| |
| /* Model tag badges */ |
| .model-tag { |
| display: inline-block; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.4px; |
| margin-left: 8px; |
| vertical-align: middle; |
| } |
| |
| .tag-open { |
| background: #dcfce7; |
| color: #166534; |
| } |
| |
| .tag-closed { |
| background: #fee2e2; |
| color: #991b1b; |
| } |
| |
| .tag-method { |
| background: #ede9fe; |
| color: #5b21b6; |
| } |
| |
| /* Size badge */ |
| .size-badge { |
| display: inline-block; |
| padding: 2px 8px; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: 600; |
| background: #f1f5f9; |
| color: #475569; |
| } |
| |
| /* ===== Metric Cards ===== */ |
| .metric-cards { |
| display: flex; |
| gap: 16px; |
| margin: 16px 0; |
| flex-wrap: wrap; |
| } |
| |
| .metric-card { |
| flex: 1; |
| min-width: 200px; |
| background: #f8fafc; |
| border: 1px solid #e2e8f0; |
| border-radius: 10px; |
| padding: 16px 20px; |
| text-align: center; |
| } |
| |
| .metric-card .metric-value { |
| font-size: 28px; |
| font-weight: 800; |
| color: #1e3a5f; |
| line-height: 1.2; |
| } |
| |
| .metric-card .metric-label { |
| font-size: 13px; |
| color: #64748b; |
| margin-top: 4px; |
| } |
| |
| /* ===== Section headers ===== */ |
| .section-header { |
| font-size: 1.25rem; |
| font-weight: 700; |
| color: #1e3a5f; |
| margin: 20px 0 8px 0; |
| padding-bottom: 8px; |
| border-bottom: 2px solid #e2e8f0; |
| } |
| |
| .section-desc { |
| color: #64748b; |
| font-size: 14px; |
| margin-bottom: 12px; |
| line-height: 1.6; |
| } |
| |
| /* ===== Citation ===== */ |
| #citation-button span { |
| font-size: 16px !important; |
| } |
| |
| #citation-button textarea { |
| font-size: 14px !important; |
| font-family: 'Fira Code', 'Consolas', monospace !important; |
| background: #f8fafc !important; |
| border-radius: 8px !important; |
| } |
| |
| #citation-button > label > button { |
| margin: 6px; |
| transform: scale(1.3); |
| } |
| |
| /* ===== Filter dropdown ===== */ |
| .filter-row { |
| margin-bottom: 12px; |
| } |
| |
| /* ===== Dark mode support ===== */ |
| @media (prefers-color-scheme: dark) { |
| .leaderboard-table tbody td { |
| border-bottom-color: #374151; |
| } |
| .leaderboard-table tbody tr:nth-child(even) { |
| background: #1f2937; |
| } |
| .leaderboard-table tbody tr:nth-child(odd) { |
| background: #111827; |
| } |
| .leaderboard-table tbody tr:hover { |
| background: #1e3a5f !important; |
| } |
| .leaderboard-table tbody tr.highlight-row { |
| background: linear-gradient(90deg, #172554 0%, #1e3a5f 100%) !important; |
| } |
| .leaderboard-table tbody td.col-model { |
| color: #e2e8f0; |
| } |
| .metric-card { |
| background: #1f2937; |
| border-color: #374151; |
| } |
| .metric-card .metric-value { |
| color: #93c5fd; |
| } |
| } |
| """ |
|
|
| get_window_url_params = """ |
| function(url_params) { |
| const params = new URLSearchParams(window.location.search); |
| url_params = Object.fromEntries(params); |
| return url_params; |
| } |
| """ |
|
|
