iter(g210): 滚动条令牌化并适配暗色主题

This commit is contained in:
HIsheR
2026-10-26 19:47:14 +08:00
parent 5a1d1660e9
commit 053f38918d
4 changed files with 56 additions and 0 deletions
+42
View File
@@ -4991,3 +4991,45 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
animation: none;
}
}
/* ---- 滚动条:细条 + 令牌化拇指(Windows 原生粗条在暗色下是一条亮带,与令牌化皮肤割裂) ---- */
.ua-table-scroll,
.ua-select-pop,
.ua-tabs-head,
.ua-drawer-body,
.ua-transfer-list,
.ua-cascader-col,
.ua-splitter-pane,
.ua-autocomplete-list,
.ua-multiselect-list,
.ua-mentions-pop,
.ua-treeselect-pop,
.ua-vlist,
.ua-cmdk-list {
scrollbar-width: thin; /* 标准属性:Firefox / Chromium 121+ 生效,细条不挤内容 */
scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明,避免画出方块底 */
}
/* WebKit 系(旧 Chromium / Safari):伪元素单独画,才能做胶囊拇指与悬停加深 */
[class^='ua-']::-webkit-scrollbar,
[class*=' ua-']::-webkit-scrollbar {
inline-size: 8px; /* 拇指粗细:8px 点得中又不抢版面 */
block-size: 8px; /* 横向滚动条同粗细 */
}
[class^='ua-']::-webkit-scrollbar-track,
[class*=' ua-']::-webkit-scrollbar-track {
background: transparent; /* 轨道透明:底色交给滚动容器自己,两层方块会显脏 */
}
[class^='ua-']::-webkit-scrollbar-thumb,
[class*=' ua-']::-webkit-scrollbar-thumb {
border-radius: 999px; /* 胶囊拇指:与全库胶囊形控件一致 */
background: var(--ua-color-scrollbar);
transition: background-color var(--ua-duration-fast) var(--ua-ease);
}
[class^='ua-']::-webkit-scrollbar-thumb:hover,
[class*=' ua-']::-webkit-scrollbar-thumb:hover {
background: var(--ua-color-scrollbar-hover); /* 悬停加深:给出「可拖拽」的手感 */
}
[class^='ua-']::-webkit-scrollbar-corner,
[class*=' ua-']::-webkit-scrollbar-corner {
background: transparent; /* 双向滚动容器的右下角不留白块 */
}