From a669e2b71bbfc87cd69f254db09a883b22fee4bc Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 5 Dec 2022 10:59:21 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/sass/pages/common.scss       | 41 ++++++++++---------
 .../sass/pages/components/chat-input.scss     | 41 ++++++++++---------
 2 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
index 582603139..7243ccd22 100755
--- a/resources/assets/sass/pages/common.scss
+++ b/resources/assets/sass/pages/common.scss
@@ -493,35 +493,36 @@ body {
                 overflow-y: overlay !important;
 
                 &::-webkit-scrollbar {
-                    width: 10px;
-                    height: 10px;
+                    width: 0;
+                    height: 0;
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    border-radius: 10px;
-                    background: rgba(0, 0, 0, 0);
-                }
-
-                &::-webkit-scrollbar-thumb:active {
-                    border-radius: 10px;
-                    background: rgba(0, 0, 0, .5);
-                }
-
-                &:hover::-webkit-scrollbar-thumb {
-                    border: 2px solid transparent;
-                    background: rgba(0, 0, 0, .2);
+                    border: 3px solid transparent;
+                    background-color: rgba(0, 0, 0, .2);
                     background-clip: content-box;
-                }
-
-                &:hover::-webkit-scrollbar-thumb:hover {
-                    border-top-width: 0;
-                    border-bottom-width: 0;
+                    border-radius: 12px;
+                    &:hover {
+                        border: 2px solid transparent;
+                        background-color: rgba(0, 0, 0, .2);
+                    }
+                    &:active {
+                        border: 2px solid transparent;
+                        background-color: rgba(0, 0, 0, .4);
+                    }
                 }
 
                 &::-webkit-scrollbar-track {
-                    border-radius: 10px;
+                    border-radius: 12px;
                     background: rgba(0, 0, 0, 0);
                 }
+
+                &:hover {
+                    &::-webkit-scrollbar {
+                        width: 12px;
+                        height: 12px;
+                    }
+                }
             }
         }
     }
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 6fd5118c0..7420d1c5d 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -567,36 +567,37 @@
     }
 
     &::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
+        width: 0;
+        height: 0;
     }
 
     &::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        background: rgba(0, 0, 0, 0);
-    }
-
-    &::-webkit-scrollbar-thumb:active {
-        border-radius: 10px;
-        background: rgba(0, 0, 0, .5);
-    }
-
-    &:hover::-webkit-scrollbar-thumb {
-        border: 2px solid transparent;
-        background: rgba(0, 0, 0, .2);
+        border: 3px solid transparent;
+        background-color: rgba(0, 0, 0, .2);
         background-clip: content-box;
-    }
-
-    &:hover::-webkit-scrollbar-thumb:hover {
-        border-top-width: 0;
-        border-bottom-width: 0;
+        border-radius: 12px;
+        &:hover {
+            border: 2px solid transparent;
+            background-color: rgba(0, 0, 0, .2);
+        }
+        &:active {
+            border: 2px solid transparent;
+            background-color: rgba(0, 0, 0, .4);
+        }
     }
 
     &::-webkit-scrollbar-track {
-        border-radius: 10px;
+        border-radius: 12px;
         background: rgba(0, 0, 0, 0);
     }
 
+    &:hover {
+        &::-webkit-scrollbar {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
     .ql-mention-list {
         > li {
             &:first-child {