src/display/css_html_js.py

custom_css = """

/* ========== 响应式布局 ========== */
/* 移除固定宽度，让Gradio自动适配不同屏幕尺寸 */
.gradio-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* 主体内容区域自适应 */
.main, .contain {
    width: 100% !important;
    max-width: 100% !important;
}

/* Tab 内容区域自适应 */
.tabitem {
    width: 100% !important;
    max-width: 100% !important;
}

/* Plot 组件自适应，但保持最小可读宽度 */
.js-plotly-plot, .plotly {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;  /* 保持最小可读宽度 */
}

/* ========== 原有样式 ========== */
.markdown-text {
    font-size: 20px !important;
}

/* 只影响 Tabs 按钮 */
#custom-tabs [role="tab"] {
    font-size: 20px;
}

/* ✅ 只影响表格 */
.custom-table table thead th {
    font-size: 16px;
    font-weight: 600;  /* 想要普通就改成 400 */
    text-align: center;
}

.custom-table table tbody td {
    font-size: 14px;
}

/* 响应式表格布局 */
.custom-table table {
    table-layout: auto;    /* 使用自动布局，让表格自适应 */
    width: 100%;           /* 占满容器 */
    min-width: 100%;       /* 确保至少占满容器 */
}

/* 表格容器允许横向滚动（当内容过宽时） */
.custom-table {
    overflow-x: auto;      /* 当表格内容过宽时，允许横向滚动 */
    width: 100%;
}

/* 为不同列设置合适的宽度（使用相对单位，更灵活） */
.custom-table table th:nth-child(1),
.custom-table table td:nth-child(1) {
    min-width: 150px;      /* model 列最小宽度 */
    max-width: 250px;      /* 最大宽度限制 */
}

/* 指标列（MASE, CRPS, MAE, MSE） */
.custom-table table th:nth-child(2),
.custom-table table td:nth-child(2),
.custom-table table th:nth-child(3),
.custom-table table td:nth-child(3),
.custom-table table th:nth-child(4),
.custom-table table td:nth-child(4),
.custom-table table th:nth-child(5),
.custom-table table td:nth-child(5) {
    min-width: 80px;      /* 原始指标列最小宽度 */
    max-width: 120px;
}

/* 归一化指标列（MASE_norm, CRPS_norm, MAE_norm, MSE_norm） */
.custom-table table th:nth-child(6),
.custom-table table td:nth-child(6),
.custom-table table th:nth-child(7),
.custom-table table td:nth-child(7),
.custom-table table th:nth-child(8),
.custom-table table td:nth-child(8),
.custom-table table th:nth-child(9),
.custom-table table td:nth-child(9) {
    min-width: 100px;      /* 归一化指标列最小宽度 */
    max-width: 150px;
}

/* 排名列（MASE_rank, CRPS_rank） */
.custom-table table th:nth-child(10),
.custom-table table td:nth-child(10),
.custom-table table th:nth-child(11),
.custom-table table td:nth-child(11) {
    min-width: 80px;       /* 排名列最小宽度 */
    max-width: 120px;
}


#archive-table table thead th { font-size: 14px; font-weight: 400}
#archive-table table {
    table-layout: fixed;   /* 强制固定布局 */
    width: 100%;           /* 占满容器 */
}

#archive-table table th:nth-child(1),
#archive-table table td:nth-child(1) {
    width: 160px !important;   /* dataset */
}

#archive-table table th:nth-child(2),
#archive-table table td:nth-child(2) {
    width: 100px !important;   /* variate_name */
}

#archive-table table th:nth-child(3),
#archive-table table td:nth-child(3) {
    width: 60px !important;   /* freq */
}

#archive-table table th:nth-child(4),
#archive-table table td:nth-child(4) {
    width: 100px !important;   /* domain */
}

/* 后面的特征列 */
#archive-table table th:nth-child(n+5),
#archive-table table td:nth-child(n+5) {
    width: 120px !important;
}




#citation-button span {
    font-size: 14px !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;
}

#search-bar {
    padding: 0px;
}

"""

# ToDO: markdown-text不好使...
# archive-table table thead th { font-size: 14px; font-weight: 400}

# /* 让表格遵守列宽、并能横向滚动 */
# #