Linux titlebar improvements

Author: datah4zard

app/components/TitleBar.tsx

@@ -42,23 +42,16 @@ export default function TitleBar() {
     fetch();
   }, []);
 
-  return show && (
-    <div className="titlebar">
-      <span data-tauri-drag-region>{appName}</span>
-      <Stack direction="horizontal" className="flex-row-reverse" gap={1}>
-        <TitleBarButton
-          icon="x"
-          onClick={onClickClose}
-        />
-        <TitleBarButton
-          icon="window-maximize"
-          onClick={onClickMaximize}
-        />
-        <TitleBarButton
-          icon="window-minimize"
-          onClick={onClickMinimize}
-        />
-      </Stack>
-    </div>
+  return (
+    show && (
+      <div className="titlebar px-3">
+        <span data-tauri-drag-region>{appName}</span>
+        <Stack direction="horizontal" className="flex-row-reverse" gap={1}>
+          <TitleBarButton icon="x" onClick={onClickClose} />
+          <TitleBarButton icon="window-maximize" onClick={onClickMaximize} />
+          <TitleBarButton icon="window-minimize" onClick={onClickMinimize} />
+        </Stack>
+      </div>
+    )
   );
 }

app/css/openfusion-theming.scss

@@ -6,7 +6,7 @@
 
 $body-bg: #d5edf4;
 $body-bg-dark: #000;
-$title-bar-bg-opacity: 0.05;
+$title-bar-bg-opacity: 0.5;
 
 @import "../../node_modules/bootstrap/scss/maps";
 @import "../../node_modules/bootstrap/scss/mixins";
@@ -16,11 +16,12 @@ $title-bar-bg-opacity: 0.05;
 
 @include color-mode(dark) {
   .titlebar {
-    background-color: rgba($body-bg, $title-bar-bg-opacity)
+    background-color: rgba($body-bg-dark, $title-bar-bg-opacity);
+    backdrop-filter: blur(10px);
   }
 
   .titlebar-button:hover {
-    background-color: rgba($body-bg, $title-bar-bg-opacity * 2);
+    background-color: rgba($body-bg, $title-bar-bg-opacity / 2);
   }
 
   .table-striped thead th {
@@ -172,11 +173,12 @@ $title-bar-bg-opacity: 0.05;
   }
 
   .titlebar {
-    background-color: rgba($body-bg-dark, $title-bar-bg-opacity)
+    background-color: rgba($body-bg, $title-bar-bg-opacity);
+    backdrop-filter: blur(10px);
   }
 
   .titlebar-button:hover {
-    background-color: rgba($body-bg-dark, $title-bar-bg-opacity * 2);
+    background-color: rgba($body-bg-dark, $title-bar-bg-opacity / 2);
   }
 
   .table-striped thead th {