From 1feb89eab933706c4d927d5e56de125417632d4f Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Tue, 19 Sep 2023 10:42:23 +0800
Subject: [PATCH] fix: scrollbar style and shadow

---
 addons/launcher/src/renderer/LauncherList.vue | 5 +++++
 src/renderer/assets/_partials.scss            | 3 ++-
 src/renderer/components/App.vue               | 2 +-
 src/renderer/components/TabList.vue           | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/addons/launcher/src/renderer/LauncherList.vue b/addons/launcher/src/renderer/LauncherList.vue
index af8c4639..d68a379a 100644
--- a/addons/launcher/src/renderer/LauncherList.vue
+++ b/addons/launcher/src/renderer/LauncherList.vue
@@ -231,6 +231,11 @@ function stopMoving() {
 </template>
 
 <style lang="scss" scoped>
+.launcher-list {
+  .tab-list.horizontal & {
+    margin-right: calc(0px - var(--scrollbar-size));
+  }
+}
 .launcher-folder {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/renderer/assets/_partials.scss b/src/renderer/assets/_partials.scss
index 2216cce8..a757a969 100644
--- a/src/renderer/assets/_partials.scss
+++ b/src/renderer/assets/_partials.scss
@@ -1,8 +1,10 @@
 @mixin scroll-container($size: 12px) {
+  --scrollbar-size: #{$size};
   --scrollbar-opacity: 0;
   overflow: overlay;
   /* stylelint-disable-next-line custom-property-no-missing-var-function */
   transition: --scrollbar-opacity 0.2s;
+  scrollbar-gutter: stable;
   &:hover {
     --scrollbar-opacity: 0.1;
   }
@@ -20,7 +22,6 @@
   &::-webkit-scrollbar-thumb {
     background-color: rgb(var(--theme-foreground) / var(--scrollbar-opacity));
     border-radius: $size;
-    box-shadow: 0 2px 4px 2px rgb(0 0 0 / calc(var(--scrollbar-opacity) / 2));
     &:horizontal:active,
     &:vertical:active {
       --scrollbar-opacity: 0.2;
diff --git a/src/renderer/components/App.vue b/src/renderer/components/App.vue
index 230d6674..6f097d77 100644
--- a/src/renderer/components/App.vue
+++ b/src/renderer/components/App.vue
@@ -118,7 +118,7 @@ onMounted(() => {
   --design-separator: rgb(var(--theme-foreground) / 0.1);
   --design-card-gap: 8px;
   --design-card-border-radius: var(--design-card-gap);
-  --design-card-shadow: 0 2px 4px 2px rgb(0 0 0 / 10%);
+  --design-card-shadow: 0 2px 4px 0px rgb(0 0 0 / 10%);
   --design-card-secondary-opacity: calc(var(--theme-opacity) * 3 / 4);
   --acrylic-background: 133 194 255;
 }
diff --git a/src/renderer/components/TabList.vue b/src/renderer/components/TabList.vue
index aac4b0d8..4223bd70 100644
--- a/src/renderer/components/TabList.vue
+++ b/src/renderer/components/TabList.vue
@@ -231,6 +231,7 @@ watchEffect(onInvalidate => {
   display: flex;
   .tab-list.vertical & {
     flex-direction: column;
+    margin-right: calc(0px - var(--scrollbar-size));
   }
 }
 .sash {