Browse Source

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

es6
zsmj 2 years ago
parent
commit
264f14504a
  1. 18
      src/less/resource/app.less

18
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,10 @@ 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%);
}
}
@ -63,23 +64,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