(incubator-streampark) branch dev-2.1.3 updated: [Improve] FE scrollbar style improvement

[benjobs]

This is an automated email from the ASF dual-hosted git repository.

benjobs pushed a commit to branch dev-2.1.3
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git


The following commit(s) were added to refs/heads/dev-2.1.3 by this push:
     new a2e24f2a3 [Improve] FE scrollbar style improvement
a2e24f2a3 is described below

commit a2e24f2a384357bd4939bf78666d9f5ef26188a8
Author: benjobs <benj...@gmail.com>
AuthorDate: Thu Feb 15 15:47:18 2024 +0800

    [Improve] FE scrollbar style improvement
---
 .../src/design/public.less                         | 41 +++++++++++++---------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git 
a/streampark-console/streampark-console-webapp/src/design/public.less 
b/streampark-console/streampark-console-webapp/src/design/public.less
index 36596424b..547c88b53 100644
--- a/streampark-console/streampark-console-webapp/src/design/public.less
+++ b/streampark-console/streampark-console-webapp/src/design/public.less
@@ -3,33 +3,40 @@
   height: 100%;
 }
 
-// =================================
-// ==============scrollbar==========
-// =================================
-
 ::-webkit-scrollbar {
-  width: 7px;
-  height: 8px;
+  width: 8px;
 }
 
-// ::-webkit-scrollbar-track {
-//   background: transparent;
-// }
+::-webkit-scrollbar-corner {
+  background: @component-background;
+}
 
 ::-webkit-scrollbar-track {
-  background-color: rgb(0 0 0 / 5%);
+  border-radius: 0;
+  background-color: fade(@border-color-split, 20%);
 }
 
 ::-webkit-scrollbar-thumb {
-  // background: rgba(0, 0, 0, 0.6);
-  background-color: rgb(144 147 153 / 30%);
-  // background-color: rgba(144, 147, 153, 0.3);
-  border-radius: 2px;
-  box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: @border-color-split;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track:window-inactive {
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: @border-color-dark;
+  background: darken(@border-color-split, 10%);
 }
 
 // =================================
@@ -52,5 +59,5 @@
 
 .extra .conf-switch {
   color: darkgrey;
-  margin-left: 5px;
+  margin-left: 8px;
 }