101 lines
2.2 KiB
CSS
101 lines
2.2 KiB
CSS
/* 数据明细视图（DataTableView）专属样式，类名前缀 sbi-dt-。
|
||
颜色/圆角只使用 social-v2.css 的 token 与其既有中性色（#f1f5fa / #f7fafd / rgba(16,34,56,…)）。 */
|
||
|
||
.sbi-dt-tools {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
padding: 12px 18px 14px;
|
||
}
|
||
|
||
.sbi-dt-groups {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.sbi-dt-groups-label {
|
||
color: var(--sbi-text-3);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.sbi-dt-export {
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* 表格纵向滚动容器：限制高度让两级表头的 sticky 生效，底部跟随卡片圆角。 */
|
||
.sbi-dt-scroll {
|
||
max-height: 72vh;
|
||
border-top: 1px solid var(--sbi-border);
|
||
border-radius: 0 0 var(--sbi-radius) var(--sbi-radius);
|
||
}
|
||
|
||
/* 第一行：列组表头（浅灰底、居中、固定高度，供第二行 sticky 偏移用）。 */
|
||
.sbi-dt-table th.sbi-dt-group-th {
|
||
box-sizing: border-box;
|
||
height: 34px;
|
||
padding: 0 12px;
|
||
background: #f1f5fa;
|
||
color: var(--sbi-text-3);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 第二行：指标表头，sticky 吸附在列组行下方，可点击排序。 */
|
||
.sbi-dt-table th.sbi-dt-metric-th {
|
||
top: 34px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.sbi-dt-table th.sbi-dt-metric-th:hover,
|
||
.sbi-dt-table th.sbi-dt-metric-th.is-sorted {
|
||
color: var(--sbi-accent);
|
||
}
|
||
|
||
.sbi-dt-sort {
|
||
margin-left: 3px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* 首列冻结：白底 + 右侧阴影；合计行/悬浮行的底色由 social-v2.css 中更高优先级规则接管。 */
|
||
.sbi-dt-table .sbi-dt-sticky {
|
||
position: sticky;
|
||
left: 0;
|
||
box-shadow: 6px 0 10px -8px rgba(16, 34, 56, 0.28);
|
||
}
|
||
|
||
.sbi-dt-table td.sbi-dt-sticky {
|
||
z-index: 1;
|
||
background: var(--sbi-card);
|
||
}
|
||
|
||
.sbi-dt-table th.sbi-dt-sticky {
|
||
z-index: 4;
|
||
}
|
||
|
||
/* 截断提示（表尾整行）。 */
|
||
.sbi-dt-note td {
|
||
padding: 10px 12px;
|
||
background: #f7fafd;
|
||
color: var(--sbi-text-3);
|
||
font-size: 12px;
|
||
text-align: center;
|
||
white-space: normal;
|
||
}
|
||
|
||
/* 无数据时的加载骨架。 */
|
||
.sbi-dt-skeleton {
|
||
display: grid;
|
||
gap: 10px;
|
||
padding: 6px 18px 20px;
|
||
}
|
||
|
||
.sbi-dt-skeleton .sbi-skeleton {
|
||
height: 14px;
|
||
}
|