Spaces:
Running
Running
File size: 4,344 Bytes
0b97f6a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
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}
# /* 让表格遵守列宽、并能横向滚动 */
# # |