PhysInOne-Leaderboard / src /display /css_html_js.py
HAHAHA97's picture
Dark UI
72284a2
Raw
History Blame Contribute Delete
22.6 kB
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--page-max: 1280px;
--ink-1: #0f172a;
--ink-2: #334155;
--ink-3: #64748b;
--line-1: #dbe3ef;
--line-2: #e8edf5;
--bg-panel: #ffffff;
--bg-page: #ffffff;
--bg-input: #ffffff;
--bg-muted: #f8fafc;
--bg-hover: #eef4ff;
--bg-table-a: #ffffff;
--bg-table-b: #f8fafc;
--bg-header-b: #f1f5f9;
--button-secondary-bg: #ffffff;
--button-secondary-hover: #eef4ff;
--shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
--brand: #2563eb;
--brand-dark: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
:root {
--ink-1: #e5edf8;
--ink-2: #cbd5e1;
--ink-3: #94a3b8;
--line-1: #334155;
--line-2: #243244;
--bg-panel: #101827;
--bg-page: #07111f;
--bg-input: #0b1322;
--bg-muted: #111c2d;
--bg-hover: #17243a;
--bg-table-a: #101827;
--bg-table-b: #0d1524;
--bg-header-b: #162238;
--button-secondary-bg: #111c2d;
--button-secondary-hover: #17243a;
--shadow-soft: none;
--brand: #60a5fa;
--brand-dark: #3b82f6;
--body-background-fill: var(--bg-page);
--background-fill-primary: var(--bg-page);
--background-fill-secondary: var(--bg-panel);
--block-background-fill: var(--bg-panel);
--panel-background-fill: var(--bg-panel);
--input-background-fill: var(--bg-input);
--button-secondary-background-fill: var(--bg-panel);
--border-color-primary: var(--line-2);
--border-color-accent: var(--line-1);
--body-text-color: var(--ink-1);
--body-text-color-subdued: var(--ink-3);
--block-title-text-color: var(--ink-1);
}
}
html,
body {
overflow-y: scroll;
overflow-x: hidden;
scrollbar-gutter: stable both-edges;
background: var(--bg-page) !important;
color: var(--ink-1) !important;
}
* {
box-sizing: border-box;
}
html, body, .gradio-container, .gradio-container * {
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
code, pre, kbd, samp, textarea {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
.gradio-container {
width: 100% !important;
max-width: var(--page-max) !important;
margin: 0 auto !important;
padding: 10px 0 32px 0 !important;
color: var(--ink-1);
box-sizing: border-box !important;
overflow-x: hidden !important;
scrollbar-gutter: stable both-edges;
}
.gradio-container > .main,
.gradio-container > div,
.gradio-container .tabs,
.gradio-container .tab-nav,
.gradio-container .tab-wrapper,
.gradio-container .tabitem,
.gradio-container [role="tablist"],
.gradio-container [role="tabpanel"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#main-tabs,
#main-tabs > div,
#main-tabs [role="tablist"],
#main-tabs [role="tabpanel"],
#tab-video_generation,
#tab-future_prediction,
#tab-property_estimation,
#tab-motion_transfer {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.task-page-shell {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
display: block !important;
flex: 1 1 100% !important;
align-self: stretch !important;
}
.task-page-shell,
.task-page-shell > div,
.task-page-shell .form,
.task-page-shell .block,
.task-page-shell .container {
background: transparent !important;
}
.gradio-container,
.gradio-container .prose,
.gradio-container .prose * {
background: transparent;
}
.gradio-container .prose p,
.gradio-container .prose ul,
.gradio-container .prose ol,
.gradio-container .prose li {
color: var(--ink-2) !important;
}
.gradio-container .prose ul,
.gradio-container .prose ol,
.markdown-text ul,
.markdown-text ol {
margin: 0.35rem 0 !important;
padding-left: 1.25rem !important;
}
.markdown-text {
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--ink-2) !important;
}
.tab-buttons button {
font-size: 17px !important;
font-weight: 700 !important;
}
.tab-buttons button:hover,
.tab-buttons [role="tab"]:hover,
.property-material-tabs button:hover,
.property-material-tabs [role="tab"]:hover,
.data-table [role="columnheader"]:hover,
.data-table th:hover {
background: var(--bg-hover) !important;
color: var(--ink-1) !important;
}
.tab-buttons button:hover *,
.tab-buttons [role="tab"]:hover *,
.property-material-tabs button:hover *,
.property-material-tabs [role="tab"]:hover *,
.data-table [role="columnheader"]:hover *,
.data-table th:hover *,
.data-table [role="columnheader"]:hover button,
.data-table [role="columnheader"]:hover [role="button"],
.data-table [role="columnheader"]:hover [class*="sort"],
.data-table [role="columnheader"]:hover svg,
.data-table th:hover button,
.data-table th:hover [role="button"],
.data-table th:hover [class*="sort"],
.data-table th:hover svg {
color: var(--ink-1) !important;
fill: var(--ink-1) !important;
stroke: var(--ink-1) !important;
background: transparent !important;
}
.auth-row {
justify-content: flex-end !important;
align-items: center !important;
margin: 8px 0 12px 0 !important;
}
.login-button,
.login-button button {
width: auto !important;
min-width: 220px;
border-radius: 12px !important;
}
.hero-block {
padding: 8px 0 18px 0;
margin-bottom: 12px;
border-bottom: 1px solid var(--line-1);
}
.hero-eyebrow {
display: inline-block;
margin-bottom: 8px;
color: var(--brand);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero-title {
margin: 0 0 8px 0;
color: var(--ink-1);
font-size: 34px;
line-height: 1.15;
font-weight: 800;
}
.hero-text {
margin: 0;
max-width: 1040px;
color: var(--ink-2);
font-size: 16px;
line-height: 1.65;
font-weight: 400;
}
.hero-meta {
margin-top: 10px;
color: var(--ink-3);
font-size: 14px;
line-height: 1.65;
font-weight: 500;
}
.section-header {
margin: 14px 0 8px 0;
}
.section-header h3 {
margin: 0;
color: var(--ink-1);
font-size: 24px;
line-height: 1.25;
font-weight: 750;
}
.section-helper {
margin: 4px 0 0 0;
color: var(--ink-3);
font-size: 14px;
line-height: 1.5;
}
.section-divider {
height: 1px;
margin: 16px 0 10px 0;
background: linear-gradient(90deg, var(--line-1), rgba(219, 227, 239, 0));
}
.info-panels-row {
margin: 10px 0 6px 0;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
align-items: stretch !important;
}
.info-panels-row > div {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.info-panel {
border: 1px solid var(--line-2) !important;
border-radius: 14px !important;
background: var(--bg-panel) !important;
overflow: hidden !important;
}
.info-panel summary {
font-weight: 650 !important;
}
.info-panel > div,
.info-panel .label-wrap,
.info-panel .prose,
.info-panel .prose-wrap {
background: transparent !important;
}
.form-row {
margin: 10px 0 12px 0 !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
gap: 20px !important;
align-items: flex-end !important;
}
.form-row > div {
flex: 1 1 0 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.form-row-single > div {
flex: 1 1 100% !important;
}
.submit-action-row {
margin: 12px 0 0 0 !important;
align-items: center !important;
}
.submit-action-row > div {
margin: 0 !important;
padding: 0 !important;
}
.queue-head-row {
margin-top: 4px;
align-items: end;
}
.field-label {
margin: 0 0 6px 0;
color: var(--ink-2);
font-size: 14px;
font-weight: 650;
line-height: 1.4;
}
.field-label-wide {
margin-top: 0;
}
.clean-input,
.clean-input > div,
.clean-input .wrap,
.clean-input .wrap-inner,
.clean-input .form,
.clean-input .block,
.clean-input .container,
.clean-input label,
.clean-input .label-wrap,
.clean-input .single-select,
.clean-input .dropdown,
.clean-input .dropdown > div {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
.clean-input input,
.clean-input textarea,
.clean-input .wrap-inner,
.clean-input .wrap-inner > input,
.clean-input .wrap-inner > textarea,
.clean-input .single-select,
.clean-input .dropdown .wrap-inner,
.clean-input .dropdown .secondary-wrap {
background: var(--bg-input) !important;
border-radius: 12px !important;
border: 1px solid var(--line-2) !important;
box-shadow: var(--shadow-soft) !important;
color: var(--ink-1) !important;
}
.clean-input input,
.clean-input textarea,
.clean-input .wrap-inner,
.clean-input .single-select,
.clean-input .secondary-wrap {
min-height: 48px !important;
height: 48px !important;
line-height: 48px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.clean-input input,
.clean-input textarea {
padding-left: 14px !important;
padding-right: 14px !important;
}
.clean-input {
margin: 0 !important;
padding: 0 !important;
min-height: 48px !important;
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
}
.submit-subtask button,
.submit-subtask span,
.submit-subtask label,
.submit-subtask .token,
.submit-subtask [data-testid],
.submit-subtask [class*="label"] {
background: transparent !important;
}
.clean-input input:disabled,
.clean-input textarea:disabled,
.clean-input [disabled] {
opacity: 1 !important;
color: var(--ink-1) !important;
-webkit-text-fill-color: var(--ink-1) !important;
}
.submit-placeholder-note {
margin-top: 8px !important;
color: var(--ink-3) !important;
font-size: 14px !important;
}
.primary-action,
.primary-action button,
.submit-action-button,
.submit-action-button button {
min-width: 220px;
width: 220px !important;
border-radius: 12px !important;
}
.secondary-action,
.secondary-action button,
.queue-refresh-button,
.queue-refresh-button button {
width: auto !important;
min-width: 120px;
border-radius: 10px !important;
background: var(--button-secondary-bg) !important;
border-color: var(--line-2) !important;
color: var(--ink-1) !important;
box-shadow: var(--shadow-soft) !important;
}
.secondary-action:hover,
.secondary-action button:hover,
.queue-refresh-button:hover,
.queue-refresh-button button:hover {
background: var(--button-secondary-hover) !important;
border-color: var(--line-1) !important;
color: var(--ink-1) !important;
}
button.primary,
.primary-action button,
.submit-action-button button {
background: var(--brand) !important;
border-color: var(--brand) !important;
color: #ffffff !important;
box-shadow: var(--shadow-soft) !important;
}
button.primary:hover,
.primary-action button:hover,
.submit-action-button button:hover {
background: var(--brand-dark) !important;
border-color: var(--brand-dark) !important;
}
.submit-message {
min-height: 24px;
padding-top: 6px;
}
.queue-table,
.leaderboard-table,
.history-table {
margin-top: 8px;
}
.data-table {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
overflow-y: hidden !important;
}
.data-table,
.data-table > div,
.data-table .form,
.data-table .block,
.data-table .container {
max-width: 100% !important;
min-width: 0 !important;
box-shadow: none !important;
}
.data-table th,
.data-table [role="columnheader"] {
font-size: 14px !important;
line-height: 1.25 !important;
}
.data-table tbody tr td:nth-child(even),
.data-table [role="row"] [role="gridcell"]:nth-child(even) {
background: var(--bg-table-b) !important;
}
.data-table th:nth-child(even),
.data-table [role="columnheader"]:nth-child(even) {
background: var(--bg-header-b) !important;
}
.data-table tbody tr:hover td,
.data-table [role="row"]:hover [role="gridcell"] {
background: var(--bg-hover) !important;
color: var(--ink-1) !important;
}
.empty-task-note {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 10px 0 !important;
padding: 14px 16px !important;
border: 1px dashed var(--line-2) !important;
border-radius: 12px !important;
background: var(--bg-panel) !important;
}
.empty-task-note,
.empty-task-note > div,
.empty-task-note .form,
.empty-task-note .block {
background: transparent !important;
box-shadow: none !important;
}
.subtask-card {
margin: 14px 0 !important;
padding: 0 !important;
border: 1px solid var(--line-2) !important;
border-left: 4px solid var(--brand) !important;
border-radius: 14px !important;
background: var(--bg-panel) !important;
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.subtask-card,
.subtask-card > div,
.subtask-card .form,
.subtask-card .block,
.subtask-card .container {
background: transparent !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-shadow: none !important;
}
.subtask-block {
margin: 0;
padding: 18px 18px 12px 18px;
background: var(--bg-panel);
}
.subtask-title {
color: var(--ink-1);
font-size: 20px;
font-weight: 700;
line-height: 1.35;
}
.subtask-desc {
margin-top: 4px;
color: var(--ink-3);
font-size: 15px;
line-height: 1.7;
}
.subtask-card .info-panel {
margin: 0 14px 12px 14px;
}
.property-table-title {
margin: 12px 0 8px 0 !important;
color: var(--ink-1) !important;
}
.property-table-title h4,
.property-table-title p {
margin: 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
}
.property-rendering-table,
.property-material-table {
margin-top: 6px !important;
border: 1px solid var(--line-2) !important;
border-radius: 12px !important;
background: var(--bg-panel) !important;
overflow: hidden !important;
}
.property-rendering-table th,
.property-rendering-table [role="columnheader"],
.property-material-table th,
.property-material-table [role="columnheader"] {
font-size: 12px !important;
line-height: 1.15 !important;
font-weight: 700 !important;
color: var(--ink-2) !important;
background: var(--bg-muted) !important;
}
.property-rendering-table td,
.property-rendering-table [role="gridcell"],
.property-material-table td,
.property-material-table [role="gridcell"] {
font-size: 12px !important;
line-height: 1.2 !important;
}
.property-material-tabs {
margin-top: 2px !important;
}
.property-material-tabs [role="tablist"] {
gap: 6px !important;
border-bottom: 1px solid var(--line-2) !important;
}
.property-material-tabs button,
.property-material-tabs [role="tab"] {
padding: 8px 12px !important;
border-radius: 10px 10px 0 0 !important;
font-size: 13px !important;
font-weight: 650 !important;
}
.property-material-tabs [role="tabpanel"] {
padding-top: 8px !important;
}
@media (prefers-color-scheme: dark) {
html,
body,
.gradio-container,
.gradio-container > .main,
.gradio-container > div,
.gradio-container .tabs,
.gradio-container .tabitem,
.gradio-container [role="tabpanel"],
#main-tabs,
#main-tabs > div,
#main-tabs [role="tabpanel"],
#tab-video_generation,
#tab-future_prediction,
#tab-property_estimation,
#tab-motion_transfer {
background: var(--bg-page) !important;
color: var(--ink-1) !important;
}
.gradio-container .prose,
.gradio-container .prose *,
.task-page-shell,
.task-page-shell > div,
.task-page-shell .form,
.task-page-shell .block,
.task-page-shell .container {
background: transparent !important;
color: var(--ink-2) !important;
}
#space-title,
.hero-title,
.section-header h3,
.subtask-title,
.property-table-title,
.field-label {
color: var(--ink-1) !important;
}
.markdown-text,
.hero-text,
.gradio-container .prose p,
.gradio-container .prose ul,
.gradio-container .prose ol,
.gradio-container .prose li {
color: var(--ink-2) !important;
}
.hero-meta,
.section-helper,
.subtask-desc,
.submit-placeholder-note {
color: var(--ink-3) !important;
}
.gradio-container .prose strong,
.markdown-text strong {
color: var(--ink-1) !important;
}
.gradio-container .prose a,
.markdown-text a {
color: var(--brand) !important;
}
.info-panel,
.empty-task-note,
.subtask-card,
.property-rendering-table,
.property-material-table {
background: var(--bg-panel) !important;
border-color: var(--line-2) !important;
color: var(--ink-1) !important;
}
.data-table,
.data-table > div,
.data-table .form,
.data-table .block,
.data-table .container,
.data-table table,
.data-table thead,
.data-table tbody,
.data-table tr {
background: var(--bg-panel) !important;
color: var(--ink-1) !important;
}
.data-table th,
.data-table td,
.data-table [role="columnheader"],
.data-table [role="gridcell"] {
border-color: var(--line-2) !important;
color: var(--ink-2) !important;
background: var(--bg-table-a) !important;
}
.data-table th,
.data-table [role="columnheader"] {
background: var(--bg-muted) !important;
color: var(--ink-1) !important;
}
.data-table tbody tr td:nth-child(even),
.data-table [role="row"] [role="gridcell"]:nth-child(even) {
background: var(--bg-table-b) !important;
}
.data-table th:nth-child(even),
.data-table [role="columnheader"]:nth-child(even) {
background: var(--bg-header-b) !important;
}
.data-table tbody tr:hover td,
.data-table [role="row"]:hover [role="gridcell"] {
background: var(--bg-hover) !important;
color: var(--ink-1) !important;
}
.tab-buttons button:hover,
.tab-buttons [role="tab"]:hover,
.property-material-tabs button:hover,
.property-material-tabs [role="tab"]:hover,
.data-table [role="columnheader"]:hover,
.data-table th:hover,
.info-panel summary:hover {
background: var(--bg-hover) !important;
color: var(--ink-1) !important;
}
.tab-buttons button:hover *,
.tab-buttons [role="tab"]:hover *,
.property-material-tabs button:hover *,
.property-material-tabs [role="tab"]:hover *,
.data-table [role="columnheader"]:hover *,
.data-table th:hover *,
.data-table [role="columnheader"]:hover button,
.data-table [role="columnheader"]:hover [role="button"],
.data-table [role="columnheader"]:hover [class*="sort"],
.data-table [role="columnheader"]:hover svg,
.data-table th:hover button,
.data-table th:hover [role="button"],
.data-table th:hover [class*="sort"],
.data-table th:hover svg,
.info-panel summary:hover * {
color: var(--ink-1) !important;
fill: var(--ink-1) !important;
stroke: var(--ink-1) !important;
background: transparent !important;
}
.tab-buttons button[aria-selected="true"],
.tab-buttons [role="tab"][aria-selected="true"],
.property-material-tabs button[aria-selected="true"],
.property-material-tabs [role="tab"][aria-selected="true"] {
background: rgba(96, 165, 250, 0.14) !important;
color: var(--brand) !important;
border-color: rgba(96, 165, 250, 0.4) !important;
}
.primary-action button,
.submit-action-button button {
background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
border-color: rgba(96, 165, 250, 0.55) !important;
color: #ffffff !important;
}
.primary-action button:hover,
.submit-action-button button:hover {
background: linear-gradient(135deg, #1d4ed8, #0ea5e9) !important;
border-color: rgba(125, 211, 252, 0.75) !important;
color: #ffffff !important;
}
.secondary-action,
.secondary-action button,
.queue-refresh-button,
.queue-refresh-button button {
background: var(--button-secondary-bg) !important;
border-color: var(--line-2) !important;
color: var(--ink-1) !important;
}
.secondary-action:hover,
.secondary-action button:hover,
.queue-refresh-button:hover,
.queue-refresh-button button:hover {
background: var(--button-secondary-hover) !important;
border-color: var(--line-1) !important;
color: var(--brand) !important;
}
.clean-input input,
.clean-input textarea,
.clean-input .wrap-inner,
.clean-input .single-select,
.clean-input .dropdown .wrap-inner,
.clean-input .dropdown .secondary-wrap,
.clean-input [role="combobox"] {
background: var(--bg-input) !important;
border-color: var(--line-2) !important;
color: var(--ink-1) !important;
-webkit-text-fill-color: var(--ink-1) !important;
}
.clean-input input::placeholder,
.clean-input textarea::placeholder {
color: var(--ink-3) !important;
-webkit-text-fill-color: var(--ink-3) !important;
}
.property-material-tabs [role="tablist"] {
border-color: var(--line-2) !important;
}
.property-material-tabs button,
.property-material-tabs [role="tab"],
.tab-buttons button {
color: var(--ink-1) !important;
}
code,
pre,
kbd,
samp {
background: var(--bg-muted) !important;
color: var(--ink-1) !important;
}
}
"""
get_window_url_params = """
function(url_params) {
const params = new URLSearchParams(window.location.search);
url_params = Object.fromEntries(params);
return url_params;
}
"""