feat: style on window blur

CyanSalt · Dec 4, 2024 · 6576710 · 6576710
1 parent 0fb5958
commit 6576710
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/renderer/components/App.vue b/src/renderer/components/App.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useWindowFocus } from '@vueuse/core'
 import { webUtils } from 'electron'
 import { onMounted } from 'vue'
 import { ipcRenderer } from '@commas/electron-ipc'
@@ -52,6 +53,8 @@ const hasHorizontalTabList = $computed(() => {
   return position === 'top' || position === 'bottom'
 })
 
+const isWindowFocused = $(useWindowFocus())
+
 const slots = commas.proxy.context.getCollection('terminal.ui-slot')
 
 loadAddons()
@@ -118,7 +121,7 @@ function dropFile(event: DragEvent) {
 
 <template>
   <div
-    :class="['app', { 'is-opaque': isFullscreen, 'is-vibrant': theme.vibrancy }]"
+    :class="['app', { 'is-opaque': isFullscreen, 'is-vibrant': theme.vibrancy, 'is-window-focused': isWindowFocused }]"
     @dragover.prevent="dragFileOver"
     @drop="dropFile"
   >

diff --git a/src/renderer/components/TabItem.vue b/src/renderer/components/TabItem.vue
@@ -223,6 +223,9 @@ function close() {
   &.active {
     background: var(--design-active-background);
     box-shadow: var(--design-element-shadow);
+    .app:not(.is-window-focused) & {
+      background: color-mix(in oklab, var(--design-active-background) 50%, transparent);
+    }
   }
   &.focused:not(.standalone) {
     outline: 2px solid rgb(var(--system-accent));