src/display/css_html_js.py

custom_css = """
/* Typography + readable width */
.markdown-text {
    font-size: 16px !important;
    line-height: 1.75 !important;
    max-width: 900px; /* constrain paragraphs */
    margin: 0 auto;   /* center */
}

/* Banner/image helpers */
.banner_image { width: 75% !important; align-self: center !important; }

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Exo+2:wght@500;600&display=swap');

:root { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Tabs (top) */
button[role="tab"] {
  font-family: 'Exo 2', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.25px;
  font-weight: 600;
  font-size: 18px !important;
}
.tab-buttons button { font-size: 20px; }

#models-to-add-text { font-size: 18px !important; }
#citation-button span { font-size: 16px !important; }
#citation-button textarea { font-size: 16px !important; }
#citation-button > label > button { margin: 6px; transform: scale(1.3); }

/* Leaderboard spacing */
#leaderboard-table { margin-top: 15px }
#leaderboard-table-lite { margin-top: 15px }
#search-bar-table-box > div:first-child { background: none; border: none; }
#search-bar { padding: 0px; }
#leaderboard-table td:nth-child(2),
#leaderboard-table th:nth-child(2) { max-width: 400px; overflow: auto; white-space: nowrap; }

#scale-logo { border-style: none !important; box-shadow: none; display: block; margin-left: auto; margin-right: auto; max-width: 600px; }
#scale-logo .download { display: none; }
#filter_type{ border: 0; padding-left: 0; padding-top: 0; }
#filter_type label { display: flex; }
#filter_type label > span{ margin-top: var(--spacing-lg); margin-right: 0.5em; }
#filter_type label > .wrap{ width: 103px; }
#filter_type label > .wrap .wrap-inner{ padding: 2px; }
#filter_type label > .wrap .wrap-inner input{ width: 1px }
#filter-columns-type{ border:0; padding:0.5; }
#filter-columns-size{ border:0; padding:0.5; }
#box-filter > .form{ border: 0 }

/* ---------- "What is FormulaOne" (HTML) ---------- */
/* Constrain width of the whole page section */
.f1-container { max-width: 900px; margin: 0 auto; padding: 0 1rem; }

/* Heading spacing fix */
.f1-h1 { font-weight: 700; font-size: 2.5rem; line-height: 1.1; color: #111827; text-align: center; margin-bottom: 1.25rem !important; }

.f1-h2 { font-weight: 700; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-top: 2.25rem; margin-bottom: 1rem; color: #111827; font-size: 1.75rem; line-height: 2.1rem; }
.f1-p, .f1-li { line-height: 1.75; color: #374151; }
.f1-a { color: #2563eb; text-decoration: none; font-weight: 500; }
.f1-a:hover { text-decoration: underline; }
.f1-blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; margin-left: 0; font-style: italic; color: #4b5563; background: #fafafa; }
.f1-problem-box { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.f1-figure { margin-top: 1.25rem; margin-bottom: 1.25rem; text-align: center; }
.f1-figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: #6b7280; font-style: italic; }

/* Beautiful table for Warmup / Tier 1 / Tier 2 */
.f1-table-wrapper { margin: 1.5rem 0; overflow-x: auto; }
.f1-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); }
.f1-table thead th { background: #f3f4f6; color: #111827; font-weight: 700; text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid #e5e7eb; }
.f1-table tbody td { padding: 0.75rem 1rem; color: #374151; border-bottom: 1px solid #f1f5f9; }
.f1-table tbody tr:nth-child(odd) td { background: #fafafa; }
.f1-table tbody tr:last-child td { border-bottom: none; }
.f1-table th:first-child, .f1-table td:first-child { border-top-left-radius: 0.75rem; }
.f1-table th:last-child, .f1-table td:last-child { border-top-right-radius: 0.75rem; }

/* Bottom tabs: "Examples of FormulaOne problems" */
.f1-tabs { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); margin-top: 1.25rem; }
.f1-tabs .f1-tabs-header { padding: 1rem 1rem 0 1rem; font-weight: 700; color: #111827; font-size: 1.1rem; }
.f1-tabs .f1-tabs-content { padding: 1rem; }
.f1-tabs .f1-tabs-bar { display: flex; gap: 0.5rem; justify-content: center; border-top: 1px solid #e5e7eb; padding: 0.6rem; background: #fafafa; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.f1-tabs .f1-tab-btn { appearance: none; border: 1px solid #d1d5db; background: #ffffff; padding: 0.45rem 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: #374151; cursor: pointer; transition: all 120ms ease; }
.f1-tabs .f1-tab-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.f1-tabs .f1-tab-btn.is-active { background: #2563eb; color: white; border-color: #2563eb; box-shadow: 0 1px 2px rgba(37,99,235,.35); }

/* Code blocks in citation look cleaner */
#citation-block { border-radius: 0.5rem; }

/* Nice cards used elsewhere */
.f1-category-card { display: block; border-radius: 0.5rem; border: 1px solid #e5e7eb; padding: 1rem; background-color: white; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/* Login Button — force light */
div[data-testid="login-button"] > button,
button.sso-button,
[data-testid="login-button"] button,
button[data-testid="oauth-login"],
.gr-login button {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
}
div[data-testid="login-button"] > button:hover,
button.sso-button:hover,
[data-testid="login-button"] button:hover,
button[data-testid="oauth-login"]:hover,
.gr-login button:hover { background: #f9fafb !important; }

/* Leaderboard controls should stretch full width */
#formulaone-leaderboard-tab-table .gr-row,
#formulaone-leaderboard-tab-table .gr-column { width: 100% !important; }
#formulaone-leaderboard-tab-table input[type="text"],
#formulaone-leaderboard-tab-table select,
#formulaone-leaderboard-tab-table .wrap,
#formulaone-leaderboard-tab-table .wrap-inner,
#formulaone-leaderboard-tab-table .container { width: 100% !important; max-width: 100% !important; }

/* Light theme enforcement if outer shell is dark */
html.dark, body.dark { background: #ffffff !important; color-scheme: light; }
html.dark *, body.dark * { --tw-ring-color: rgba(37, 99, 235, 0.4); }
"""

get_window_url_params = """
    function(url_params) {
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return url_params;
    }
    """