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] =?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 a5abef2e26..fe85e67a0c 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 a5abef2e26..fe85e67a0c 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 4888b6cb50..004dc488e1 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 e7e2dab5d9..6526b80ee7 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 5f2aefb369..1f111b9494 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 5f2aefb369..1f111b9494 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 439dbef69e..958f83f57d 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 c0d43653bd..60b4ed1d5d 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 5f2aefb369..1f111b9494 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);
 }