rounded corners

src-tauri/tauri.conf.json

@@ -48,7 +48,9 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "decorations": false,
+        "decorations": true,
+        "center": true,
+        "transparent": true,
         "title": "blek! nox",
         "width": 800,
         "height": 600

src/App.svelte

@@ -4,4 +4,6 @@
 </script>
 
 <Titlebar />
+<div class='backdrop'>
     <Load />
+</div>

src/main.ts

@@ -1,6 +1,9 @@
 import "./root.css";
 import App from "./App.svelte";
 import '@fontsource-variable/red-hat-display';
+import { appWindow } from '@tauri-apps/api/window'
+
+appWindow.setDecorations(false);
 
 const app = new App({
   target: document.getElementById("app"),

src/root.css

@@ -1,6 +1,15 @@
 body, html {
-  background: #0b0a0a;
+  background: transparent;
   color: #e1e1e1;
   padding: 0; margin: 0;
   font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
 }
+.backdrop {
+  background: #111;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0; left: 0;
+  border-radius: 16px;
+  z-index: 0;
+}

src/widget/Titlebar/Titlebar.svelte

@@ -15,15 +15,15 @@
 <div class={style.titlebar}>
     <div class={style.shade} />
 
-    <table width='100%'>
+    <table width='100%' class={style.bar}>
         <tbody>
             <tr>
                 <td data-tauri-drag-region class={style.name}>
                     <Blek height='14px' />
                     nox
                 </td>
-                <td align='right' width='130px'>
+                <td align='right' width='130px' class={style.btns}>
-                    <table class={style.btns}>
+                    <table>
                         <tbody>
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <tr>

src/widget/Titlebar/style.module.scss

@@ -1,9 +1,21 @@
+$corners: 10px;
+
 .titlebar {
+
+    position: fixed;
+    top: 0; left: 0;
+    z-index: 1;
+    width: 100%;
+
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
 
+    background: #111111;
+    height: 32px;
+    border-radius: $corners $corners 0 0;
+
     table {
         border-collapse: collapse;
         height: 33px;
@@ -29,12 +41,10 @@
         padding-left: 12px;
     }
 
-    background: #111111;
-    height: 32px;
-
     .btns {
         user-select: none;
         float: right;
+        border-radius: 0 $corners 0 0;
 
         .btn {
             background: #141414;
@@ -50,6 +60,7 @@
         }
         .close {
             background: #ae4a1a;
+            border-radius: 0 $corners 0 0;
             &:hover {
                 background: #ee4a1a;
             }