Browse Source

BI-48769 refactor: 统一滚动条样式

es6
windy 5 years ago
parent
commit
2484a62389
  1. 60
      dist/2.0/fineui.css
  2. 60
      dist/bundle.css
  3. 60
      dist/fineui.css
  4. 60
      dist/resource.css
  5. 60
      public/css/app.css
  6. 60
      src/css/resource/app.css
  7. 4
      src/less/lib/constant.less
  8. 34
      src/less/resource/app.less
  9. 60
      ui/css/app.css

60
dist/2.0/fineui.css vendored

@ -4664,44 +4664,64 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}
.bi-farbtastic .wheel {
background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/background/wheel.png') no-repeat center center;

60
dist/bundle.css vendored

@ -4664,44 +4664,64 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}
.bi-farbtastic .wheel {
background: url('http://fine-design-storage.oss-cn-shanghai.aliyuncs.com/fineui/2.0/images/1x/background/wheel.png') no-repeat center center;

60
dist/fineui.css vendored

@ -4664,44 +4664,64 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}
.bi-farbtastic .wheel {
background: url('resources?path=/com/fr/web/ui/images/1x/background/wheel.png') no-repeat center center;

60
dist/resource.css vendored

@ -30,44 +30,64 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}
.bi-farbtastic .wheel {
background: url('images/1x/background/wheel.png') no-repeat center center;

60
public/css/app.css

@ -30,42 +30,62 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}

60
src/css/resource/app.css

@ -30,42 +30,62 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}

4
src/less/lib/constant.less

@ -102,7 +102,9 @@
@border-color-disabled-theme-dark: #606479;
//scroll color
@scroll-color: #20263b;
@scroll-color: #232e40;
@scroll-color-theme-dark: #ffffff;
@scroll-thumb-color: #232e40;
@scroll-thumb-color-theme-dark: #232e40;
@water-mark-color-theme-dark: #878d9f;

34
src/less/resource/app.less

@ -29,15 +29,27 @@ body {
div, textarea {
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track {
width: 10px;
height: 10px;
.border-radius(5px);
.background-color(@scroll-color, 5%);
&:hover {
.background-color(@scroll-color, 5%);
width: 6px;
height: 6px;
}
}
&::-webkit-scrollbar-thumb {
.border-radius(0);
.background-color(@scroll-color, 30%);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
.border-radius(10px);
.background-color(@scroll-color, 10%);
&:hover {
.background-color(@scroll-color, 70%);
.background-color(@scroll-color, 30%);
}
}
}
@ -46,15 +58,17 @@ div, textarea {
div, textarea {
&::-webkit-scrollbar {
-webkit-appearance: none;
}
&::-webkit-scrollbar-track {
.background-color(@scroll-color-theme-dark, 5%);
width: 6px;
height: 6px;
&:hover {
.background-color(@scroll-color-theme-dark, 5%);
}
}
&::-webkit-scrollbar-thumb {
.border-radius(0);
.background-color(@scroll-color-theme-dark, 30%);
.background-color(@scroll-color-theme-dark, 10%);
&:hover {
.background-color(@scroll-color-theme-dark, 70%);
.background-color(@scroll-color-theme-dark, 30%);
}
}
}

60
ui/css/app.css

@ -30,42 +30,62 @@ body {
div::-webkit-scrollbar,
textarea::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b);
width: 6px;
height: 6px;
width: 10px;
height: 10px;
}
div::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-track:hover,
textarea::-webkit-scrollbar-track:hover {
background-color: rgba(35, 46, 64, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d232e40,endColorstr=#0d232e40);
}
div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(32, 38, 59, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b);
width: 6px;
height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(35, 46, 64, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a232e40,endColorstr=#1a232e40);
}
div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b);
background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
}
.bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none;
}
.bi-theme-dark div::-webkit-scrollbar-track,
.bi-theme-dark textarea::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
}
.bi-theme-dark div::-webkit-scrollbar-track:hover,
.bi-theme-dark textarea::-webkit-scrollbar-track:hover {
background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
}
.bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
background-color: rgba(255, 255, 255, 0.1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
}
.bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff);
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
}

Loading…
Cancel
Save