fix: scrollbar style and shadow

CyanSalt · Sep 19, 2023 · 1feb89e · 1feb89e
1 parent 13a4edd
commit 1feb89e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -231,6 +231,7 @@ watchEffect(onInvalidate => {
   display: flex;
   .tab-list.vertical & {
     flex-direction: column;
+    margin-right: calc(0px - var(--scrollbar-size));
   }
 }
 .sash {