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

Loading…
Cancel
Save