fix: tab item interaction

CyanSalt · CyanSalt · commit b29b10187256 · 2024-08-06T21:14:36.000+08:00
diff --git a/src/renderer/components/App.vue b/src/renderer/components/App.vue
@@ -127,14 +127,15 @@ onMounted(() => {
   --design-card-shadow: 0 2px 4px 0px rgb(0 0 0 / 10%);
   --design-element-shadow: 0 1px 2px 0px rgb(0 0 0 / 10%);
   --design-highlight-color: rgb(var(--system-blue));
-  --design-highlight-background: color-mix(in hsl, rgb(var(--theme-foreground) / 15%), rgb(var(--acrylic-background) / 10%));
+  --design-highlight-background: color-mix(in hsl, rgb(var(--theme-foreground) / 5%), rgb(var(--acrylic-background) / 5%));
   --design-input-background: color-mix(in hsl, rgb(var(--theme-foreground) / 10%) 75%, rgb(var(--acrylic-background) / 10%));
   --design-separator: rgb(var(--theme-foreground) / 10%);
   @media (prefers-color-scheme: dark) {
     --system-cyan: 108 224 219;
     --design-active-background: rgb(255 255 255 / 16.667%);
     --design-alert-color: rgb(var(--system-yellow));
     --design-highlight-color: rgb(var(--system-cyan));
+    --design-highlight-background: rgb(255 255 255 / 5%);
   }
 }
 :global(::selection) {
diff --git a/src/renderer/components/TabItem.vue b/src/renderer/components/TabItem.vue
@@ -169,6 +169,9 @@ function close() {
   // https://github.com/react-dnd/react-dnd/issues/788
   transform: translate(0, 0);
   transition: transform 0.2s;
+  &:hover {
+    background: var(--design-highlight-background);
+  }
   &:active {
     transform: scale(0.98);
   }
