From 2484a623896fef61ed87ca822ddc511de9b91bfb Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Wed, 31 Jul 2019 10:32:08 +0800
Subject: [PATCH 1/3] =?UTF-8?q?BI-48769=20refactor:=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/2.0/fineui.css        | 60 +++++++++++++++++++++++++-------------
 dist/bundle.css            | 60 +++++++++++++++++++++++++-------------
 dist/fineui.css            | 60 +++++++++++++++++++++++++-------------
 dist/resource.css          | 60 +++++++++++++++++++++++++-------------
 public/css/app.css         | 60 +++++++++++++++++++++++++-------------
 src/css/resource/app.css   | 60 +++++++++++++++++++++++++-------------
 src/less/lib/constant.less |  4 ++-
 src/less/resource/app.less | 34 ++++++++++++++-------
 ui/css/app.css             | 60 +++++++++++++++++++++++++-------------
 9 files changed, 307 insertions(+), 151 deletions(-)

diff --git a/dist/2.0/fineui.css b/dist/2.0/fineui.css
index a5abef2e2..fe85e67a0 100644
--- a/dist/2.0/fineui.css
+++ b/dist/2.0/fineui.css
@@ -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;
diff --git a/dist/bundle.css b/dist/bundle.css
index a5abef2e2..fe85e67a0 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -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;
diff --git a/dist/fineui.css b/dist/fineui.css
index 4888b6cb5..004dc488e 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -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;
diff --git a/dist/resource.css b/dist/resource.css
index e7e2dab5d..6526b80ee 100644
--- a/dist/resource.css
+++ b/dist/resource.css
@@ -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;
diff --git a/public/css/app.css b/public/css/app.css
index 5f2aefb36..1f111b949 100644
--- a/public/css/app.css
+++ b/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);
 }
diff --git a/src/css/resource/app.css b/src/css/resource/app.css
index 5f2aefb36..1f111b949 100644
--- a/src/css/resource/app.css
+++ b/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);
 }
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index 439dbef69..958f83f57 100644
--- a/src/less/lib/constant.less
+++ b/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;
diff --git a/src/less/resource/app.less b/src/less/resource/app.less
index c0d43653b..60b4ed1d5 100644
--- a/src/less/resource/app.less
+++ b/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%);
-    width: 6px;
-    height: 6px;
+    &:hover {
+      .background-color(@scroll-color, 5%);
+    }
   }
   &::-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%);
       }
     }
   }
diff --git a/ui/css/app.css b/ui/css/app.css
index 5f2aefb36..1f111b949 100644
--- a/ui/css/app.css
+++ b/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);
 }

From ee5b7fdac355b603dd5cab4af0419450402c549e Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Wed, 31 Jul 2019 10:40:44 +0800
Subject: [PATCH 2/3] update

---
 dist/2.0/fineui.css        | 2 +-
 dist/bundle.css            | 2 +-
 dist/fineui.css            | 2 +-
 dist/resource.css          | 2 +-
 public/css/app.css         | 2 +-
 src/css/resource/app.css   | 2 +-
 src/less/resource/app.less | 2 +-
 ui/css/app.css             | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/dist/2.0/fineui.css b/dist/2.0/fineui.css
index fe85e67a0..1a0352fac 100644
--- a/dist/2.0/fineui.css
+++ b/dist/2.0/fineui.css
@@ -4686,7 +4686,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
diff --git a/dist/bundle.css b/dist/bundle.css
index fe85e67a0..1a0352fac 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -4686,7 +4686,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
diff --git a/dist/fineui.css b/dist/fineui.css
index 004dc488e..6e2f9eff3 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -4686,7 +4686,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
diff --git a/dist/resource.css b/dist/resource.css
index 6526b80ee..80e1c6151 100644
--- a/dist/resource.css
+++ b/dist/resource.css
@@ -52,7 +52,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
diff --git a/public/css/app.css b/public/css/app.css
index 1f111b949..38ac47e3b 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -52,7 +52,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
diff --git a/src/css/resource/app.css b/src/css/resource/app.css
index 1f111b949..38ac47e3b 100644
--- a/src/css/resource/app.css
+++ b/src/css/resource/app.css
@@ -52,7 +52,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
diff --git a/src/less/resource/app.less b/src/less/resource/app.less
index 60b4ed1d5..94650acdc 100644
--- a/src/less/resource/app.less
+++ b/src/less/resource/app.less
@@ -44,7 +44,7 @@ div, textarea {
   &::-webkit-scrollbar-thumb {
     width: 6px;
     height: 6px;
-    border: 2px solid rgba(0, 0, 0, 0);
+    border: 2px solid transparent;
     background-clip: padding-box;
     .border-radius(10px);
     .background-color(@scroll-color, 10%);
diff --git a/ui/css/app.css b/ui/css/app.css
index 1f111b949..38ac47e3b 100644
--- a/ui/css/app.css
+++ b/ui/css/app.css
@@ -52,7 +52,7 @@ div::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
   width: 6px;
   height: 6px;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   background-clip: padding-box;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;

From 21dea8ac479d5c86eaa9c2961459ea580857529b Mon Sep 17 00:00:00 2001
From: windy <1374721899@qq.com>
Date: Wed, 31 Jul 2019 10:46:38 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=9C=9F=E9=97=B4?=
 =?UTF-8?q?=E4=B8=8D=E5=8F=91=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/2.0/fineui.ie.js                   | 1 -
 dist/2.0/fineui.js                      | 1 -
 dist/bundle.ie.js                       | 1 -
 dist/bundle.js                          | 1 -
 dist/fineui.ie.js                       | 1 -
 dist/fineui.js                          | 1 -
 dist/fineui_without_jquery_polyfill.js  | 1 -
 dist/widget.js                          | 1 -
 src/widget/singleslider/singleslider.js | 1 -
 9 files changed, 9 deletions(-)

diff --git a/dist/2.0/fineui.ie.js b/dist/2.0/fineui.ie.js
index 0dd8d8df9..289c3cf31 100644
--- a/dist/2.0/fineui.ie.js
+++ b/dist/2.0/fineui.ie.js
@@ -82225,7 +82225,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/2.0/fineui.js b/dist/2.0/fineui.js
index 6d4978a38..fabeecfb1 100644
--- a/dist/2.0/fineui.js
+++ b/dist/2.0/fineui.js
@@ -82629,7 +82629,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/bundle.ie.js b/dist/bundle.ie.js
index 0dd8d8df9..289c3cf31 100644
--- a/dist/bundle.ie.js
+++ b/dist/bundle.ie.js
@@ -82225,7 +82225,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/bundle.js b/dist/bundle.js
index 6d4978a38..fabeecfb1 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -82629,7 +82629,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/fineui.ie.js b/dist/fineui.ie.js
index 5b2988919..9e4c0261c 100644
--- a/dist/fineui.ie.js
+++ b/dist/fineui.ie.js
@@ -82470,7 +82470,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/fineui.js b/dist/fineui.js
index 8b59ba1cf..3d25a82e9 100644
--- a/dist/fineui.js
+++ b/dist/fineui.js
@@ -82874,7 +82874,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/fineui_without_jquery_polyfill.js b/dist/fineui_without_jquery_polyfill.js
index 51ffd075b..4162749f3 100644
--- a/dist/fineui_without_jquery_polyfill.js
+++ b/dist/fineui_without_jquery_polyfill.js
@@ -65480,7 +65480,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/dist/widget.js b/dist/widget.js
index 5292f0b88..0e47f1a47 100644
--- a/dist/widget.js
+++ b/dist/widget.js
@@ -20295,7 +20295,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {
diff --git a/src/widget/singleslider/singleslider.js b/src/widget/singleslider/singleslider.js
index 3e1215935..1800c28eb 100644
--- a/src/widget/singleslider/singleslider.js
+++ b/src/widget/singleslider/singleslider.js
@@ -157,7 +157,6 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                 v = o.digit === false ? v : v.toFixed(o.digit);
                 self.label.setValue(v);
                 self.value = v;
-                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
             }
         }, function () {
             if (startDrag === true) {