diff --git a/packages/theme/src/base/dark-theme.less b/packages/theme/src/base/dark-theme.less index 3751e430b4..53e4144659 100644 --- a/packages/theme/src/base/dark-theme.less +++ b/packages/theme/src/base/dark-theme.less @@ -513,5 +513,5 @@ --tv-color-bg-scrollbar-thumb: rgba(255, 255, 255, 0.15); // rgba(255,255,255,0.15)滑块背景色 --tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #808080 滑块hover背景色 --tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #808080 滑块active背景色 - --tv-color-bg-scrollbar-track: var(--tv-base-color-common-13); // #000 轨道背景色 + --tv-color-bg-scrollbar-track: transparent; // transparent 轨道背景色 } diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less index feb297ea19..e9ceebf2e0 100644 --- a/packages/theme/src/base/reset.less +++ b/packages/theme/src/base/reset.less @@ -152,28 +152,33 @@ display: none; } - @media (min-width: 768px) { - ::-webkit-scrollbar { - width: var(--tv-size-scrollbar-width); - height: var(--tv-size-scrollbar-height); - } + ::-webkit-scrollbar { + width: var(--tv-size-scrollbar-width); + height: var(--tv-size-scrollbar-height); + } - ::-webkit-scrollbar-track-piece { - background: var(--tv-color-bg-scrollbar-track); - } + // x 和 y 滚动条交汇处 + ::-webkit-scrollbar-corner { + background: var(--tv-color-bg-scrollbar-track); + } - ::-webkit-scrollbar-thumb { - background: var(--tv-color-bg-scrollbar-thumb); - border-radius: var(--tv-border-radius-scrollbar-thumb); - } + // 滚动条轨道 + ::-webkit-scrollbar-track { + background: var(--tv-color-bg-scrollbar-track); + } - ::-webkit-scrollbar-thumb:hover { - background: var(--tv-color-bg-scrollbar-thumb-hover); - } + // 滚动滑块 + ::-webkit-scrollbar-thumb { + background: var(--tv-color-bg-scrollbar-thumb); + border-radius: var(--tv-border-radius-scrollbar-thumb); + } - ::-webkit-scrollbar-thumb:active { - background: var(--tv-color-bg-scrollbar-thumb-active); - } + ::-webkit-scrollbar-thumb:hover { + background: var(--tv-color-bg-scrollbar-thumb-hover); + } + + ::-webkit-scrollbar-thumb:active { + background: var(--tv-color-bg-scrollbar-thumb-active); } } @@ -197,9 +202,9 @@ } // 有箭头的场景,统一规范所有样式 -.tiny-popconfirm-popover, -.tiny-popper, -.tiny-tooltip__popper { +.tiny-popconfirm-popover:has(.popper__arrow), +.tiny-popper:has(.popper__arrow), +.tiny-tooltip__popper:has(.popper__arrow) { .popper__arrow { position: absolute; display: block; @@ -243,4 +248,4 @@ right: -3px; } } -} \ No newline at end of file +}