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

60
public/css/app.css

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

60
src/css/resource/app.css

@ -30,42 +30,62 @@ body {
div::-webkit-scrollbar, div::-webkit-scrollbar,
textarea::-webkit-scrollbar { textarea::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05); width: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b); height: 10px;
width: 6px; }
height: 6px; 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, div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb { textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0; width: 6px;
-moz-border-radius: 0; height: 6px;
border-radius: 0; border: 2px solid rgba(0, 0, 0, 0);
background-color: rgba(32, 38, 59, 0.3); background-clip: padding-box;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b); -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, div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover { textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7); background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
} }
.bi-theme-dark div::-webkit-scrollbar, .bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar { .bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none; -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); background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
} }
.bi-theme-dark div::-webkit-scrollbar-thumb, .bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb { .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0; background-color: rgba(255, 255, 255, 0.1);
-moz-border-radius: 0; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
} }
.bi-theme-dark div::-webkit-scrollbar-thumb:hover, .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover { .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff); 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; @border-color-disabled-theme-dark: #606479;
//scroll color //scroll color
@scroll-color: #20263b; @scroll-color: #232e40;
@scroll-color-theme-dark: #ffffff; @scroll-color-theme-dark: #ffffff;
@scroll-thumb-color: #232e40;
@scroll-thumb-color-theme-dark: #232e40;
@water-mark-color-theme-dark: #878d9f; @water-mark-color-theme-dark: #878d9f;

34
src/less/resource/app.less

@ -29,15 +29,27 @@ body {
div, textarea { div, textarea {
&::-webkit-scrollbar { &::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track {
width: 10px;
height: 10px;
.border-radius(5px);
.background-color(@scroll-color, 5%); .background-color(@scroll-color, 5%);
width: 6px; &:hover {
height: 6px; .background-color(@scroll-color, 5%);
}
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
.border-radius(0); width: 6px;
.background-color(@scroll-color, 30%); height: 6px;
border: 2px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
.border-radius(10px);
.background-color(@scroll-color, 10%);
&:hover { &:hover {
.background-color(@scroll-color, 70%); .background-color(@scroll-color, 30%);
} }
} }
} }
@ -46,15 +58,17 @@ div, textarea {
div, textarea { div, textarea {
&::-webkit-scrollbar { &::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
}
&::-webkit-scrollbar-track {
.background-color(@scroll-color-theme-dark, 5%); .background-color(@scroll-color-theme-dark, 5%);
width: 6px; &:hover {
height: 6px; .background-color(@scroll-color-theme-dark, 5%);
}
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
.border-radius(0); .background-color(@scroll-color-theme-dark, 10%);
.background-color(@scroll-color-theme-dark, 30%);
&:hover { &: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, div::-webkit-scrollbar,
textarea::-webkit-scrollbar { textarea::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;
background-color: rgba(32, 38, 59, 0.05); width: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d20263b,endColorstr=#0d20263b); height: 10px;
width: 6px; }
height: 6px; 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, div::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb { textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0; width: 6px;
-moz-border-radius: 0; height: 6px;
border-radius: 0; border: 2px solid rgba(0, 0, 0, 0);
background-color: rgba(32, 38, 59, 0.3); background-clip: padding-box;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d20263b,endColorstr=#4d20263b); -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, div::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover { textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(32, 38, 59, 0.7); background-color: rgba(35, 46, 64, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b320263b,endColorstr=#b320263b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d232e40,endColorstr=#4d232e40);
} }
.bi-theme-dark div::-webkit-scrollbar, .bi-theme-dark div::-webkit-scrollbar,
.bi-theme-dark textarea::-webkit-scrollbar { .bi-theme-dark textarea::-webkit-scrollbar {
-webkit-appearance: none; -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); background-color: rgba(255, 255, 255, 0.05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dffffff,endColorstr=#0dffffff);
width: 6px;
height: 6px;
} }
.bi-theme-dark div::-webkit-scrollbar-thumb, .bi-theme-dark div::-webkit-scrollbar-thumb,
.bi-theme-dark textarea::-webkit-scrollbar-thumb { .bi-theme-dark textarea::-webkit-scrollbar-thumb {
-webkit-border-radius: 0; background-color: rgba(255, 255, 255, 0.1);
-moz-border-radius: 0; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1affffff,endColorstr=#1affffff);
border-radius: 0;
background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
} }
.bi-theme-dark div::-webkit-scrollbar-thumb:hover, .bi-theme-dark div::-webkit-scrollbar-thumb:hover,
.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover { .bi-theme-dark textarea::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3ffffff,endColorstr=#b3ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dffffff,endColorstr=#4dffffff);
} }

Loading…
Cancel
Save