fix(F006-W18.9): dark 主题 全局滚动条深色适配 (避免浅白滚动条割裂)
用户反馈: 暗主题下侧边栏原生滚动条是浅白色, 在深色背景上刺眼割裂 根因: 浏览器原生 ::-webkit-scrollbar 走系统默认色 (亮色), 项目没覆盖, dark 下没适配 修法 (src/styles/global-popper.scss 末尾新增): - 默认 (亮主题): thumb var(--border) 浅灰 - hover: var(--ink-4) 深灰 - [data-theme=dark]: thumb var(--border) = #475569 深色 - hover: var(--ink-3) = #CBD5E1 - Firefox 兼容: html { scrollbar-color: var(--border) transparent; } Playwright 实测 (.rr-sidebar 滚动条 thumb): - 改前: 系统默认 #C0C0C0 浅灰 (刺眼) - 改后: rgb(71,85,105) = #475569 深色 ✅ (dark 协调)
This commit is contained in:
parent
3fc8326aeb
commit
ff4c9bc140
@ -87,3 +87,37 @@
|
||||
.el-select__wrapper.is-focused {
|
||||
box-shadow: 0 0 0 1px var(--brand, #2563EB) inset, 0 0 0 3px var(--brand-glow, rgba(37, 99, 235, 0.18)) !important;
|
||||
}
|
||||
|
||||
/* === W18.9 全局滚动条暗主题适配 (深色滚动条避免割裂) === */
|
||||
/* 默认 (亮主题): 浅灰滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border, #E2E8F0);
|
||||
border-radius: 4px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--ink-4, #94A3B8);
|
||||
}
|
||||
/* Firefox */
|
||||
html {
|
||||
scrollbar-color: var(--border, #E2E8F0) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* 暗主题: 深色滚动条适配, 避免浅白滚动条在深色背景上刺眼 */
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: var(--border, #475569);
|
||||
}
|
||||
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--ink-3, #CBD5E1);
|
||||
}
|
||||
[data-theme="dark"] html {
|
||||
scrollbar-color: var(--border, #475569) transparent;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user