fix transcluent not working on tauri. Next to v0.1.3_dev

Author: datvn21

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "phocus",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "identifier": "com.phocus.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/components/TitleBar.svelte

@@ -22,12 +22,12 @@
 </script>
 
 <div
-  class="min-h-12 xl:h-16 h-12 rounded-lg w-full flex hover:bg-white/20 transition-colors duration-200 flex-row-reverse items-center"
+  class="min-h-12 backdrop-blur-xs xl:h-16 h-12 rounded-lg w-full flex hover:bg-black/5 transition-colors duration-200 flex-row-reverse items-center"
 >
   <div class="flex flex-row-reverse gap-2 pr-2">
     <button
       onclick={close_app}
-      class="group w-8 h-8 flex justify-center items-center rounded-full bg-white/50 hover:bg-white/40 transition-colors duration-200"
+      class="group w-8 h-8 flex justify-center items-center rounded-full bg-black/20 hover:bg-white/40 transition-colors duration-200"
       ><img
         class="w-4 h-4 transition-transform duration-200 group-hover:scale-125"
         src="/X.svg"
@@ -36,7 +36,7 @@
     >
     <button
       onclick={minimize_app}
-      class="group w-8 h-8 flex justify-center items-center rounded-full bg-white/50 hover:bg-white/40 transition-colors duration-200"
+      class="group w-8 h-8 flex justify-center items-center rounded-full bg-black/20 hover:bg-white/40 transition-colors duration-200"
       ><img
         class="w-4 h-4 transition-transform duration-200 group-hover:scale-125"
         src="/Minus.svg"
@@ -45,7 +45,7 @@
     >
     <button
       onclick={fullscreen_app}
-      class="group w-8 h-8 flex justify-center items-center rounded-full bg-white/50 hover:bg-white/40 transition-colors duration-200"
+      class="group w-8 h-8 flex justify-center items-center rounded-full bg-black/20 hover:bg-white/40 transition-colors duration-200"
       ><img
         class="w-4 h-4 transition-transform duration-200 group-hover:scale-125"
         src="/CornersOut.svg"
@@ -59,7 +59,7 @@
     class=" w-full h-full flex items-center justify-start"
     aria-label="Drag"
     ><span
-      class="px-2 py-1 font-medium text-white/60 hover:text-white/80 hover:scale-105 transition-transform duration-200 rounded-md text-xl"
+      class="px-2 py-1 font-medium text-black/50 hover:text-black/80 hover:scale-105 transition-transform duration-200 rounded-md text-xl"
       >Phocus</span
     ></button
   >

src/routes/+layout.svelte

@@ -7,10 +7,19 @@
 </script>
 
 <main
-  style={$bgImage ? `background-image: url('${$bgImage}'); ` : ""}
+  style={$bgImage
+    ? `background-image: url('${$bgImage}');`
+    : `--color: #E1E1E1;
+       background-color: #F3F3F3;
+       background-image: 
+         linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent),
+         linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%, transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%, transparent);
+       background-size: 55px 55px;`}
   class="h-lvh bg-cover"
 >
-  <div class="backdrop-blur-2xl h-lvh p-2 overflow-hidden overflow-y-hidden">
+  <div
+    class={`${!$bgImage ? "" : "backdrop-blur-2xl"} h-lvh p-2 overflow-hidden overflow-y-hidden`}
+  >
     <TitleBar></TitleBar>
     <div class="h-[calc(100lvh - 3rem)]">{@render children()}</div>
   </div>