Browse Source

Pull request #2903: DESIGN-4216 feat: 调整滚动条颜色,track透明,thumb配色

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '8abdd2c0b1ede61827e228b35b4cf88e022d52f0':
  DESIGN-4216 feat: thumb hover时候变大一丢丢
  DESIGN-4216 feat: 调整滚动条颜色,track透明,thumb配色
es6
Dailer 2 years ago
parent
commit
b2b7ac6810
  1. 19
      src/less/resource/app.less

19
src/less/resource/app.less

@ -29,6 +29,7 @@ body {
div, textarea { div, textarea {
scrollbar-color: fade(@scroll-color, 10%) fade(@scroll-color, 5%); scrollbar-color: fade(@scroll-color, 10%) fade(@scroll-color, 5%);
scrollbar-width: thin; scrollbar-width: thin;
&::-webkit-scrollbar { &::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
width: 10px; width: 10px;
@ -37,10 +38,10 @@ div, textarea {
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
.border-radius(5px); .border-radius(5px);
.background-color(@scroll-color, 5%); .background-color(@scroll-color, 0%);
&:hover { &:hover {
.background-color(@scroll-color, 5%); .background-color(@scroll-color, 0%);
} }
} }
@ -48,10 +49,11 @@ div, textarea {
border: 2px solid transparent; border: 2px solid transparent;
background-clip: padding-box; background-clip: padding-box;
.border-radius(10px); .border-radius(10px);
.background-color(@scroll-color, 10%); .background-color(@scroll-color, 7%);
&:hover { &:hover {
.background-color(@scroll-color, 30%); .background-color(@scroll-color, 19%);
border: 1px solid transparent;
} }
} }
@ -63,23 +65,24 @@ div, textarea {
.bi-theme-dark { .bi-theme-dark {
div, textarea { div, textarea {
scrollbar-color: fade(@scroll-color-theme-dark, 10%) fade(@scroll-color-theme-dark, 5%); scrollbar-color: fade(@scroll-color-theme-dark, 10%) fade(@scroll-color-theme-dark, 5%);
&::-webkit-scrollbar { &::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
.background-color(@scroll-color-theme-dark, 5%); .background-color(@scroll-color-theme-dark, 0%);
&:hover { &:hover {
.background-color(@scroll-color-theme-dark, 5%); .background-color(@scroll-color-theme-dark, 0%);
} }
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
.background-color(@scroll-color-theme-dark, 10%); .background-color(@scroll-color-theme-dark, 7%);
&:hover { &:hover {
.background-color(@scroll-color-theme-dark, 30%); .background-color(@scroll-color-theme-dark, 19%);
} }
} }
} }

Loading…
Cancel
Save