From 525539c29db9b5809f00105305cb83fb848320dd Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Sat, 12 Aug 2023 02:20:15 +1000
Subject: [PATCH] rounded corners

---
 src-tauri/tauri.conf.json             |  4 +++-
 src/App.svelte                        |  4 +++-
 src/main.ts                           |  3 +++
 src/root.css                          | 11 ++++++++++-
 src/widget/Titlebar/Titlebar.svelte   |  6 +++---
 src/widget/Titlebar/style.module.scss | 19 +++++++++++++++----
 6 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 8b690fe..17f8b57 100644
--- a/src-tauri/tauri.conf.json
+++ b/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
diff --git a/src/App.svelte b/src/App.svelte
index 3f963ec..af98613 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,4 +4,6 @@
 </script>
 
 <Titlebar />
-<Load />
+<div class='backdrop'>
+    <Load />
+</div>
diff --git a/src/main.ts b/src/main.ts
index d076d8e..6589207 100644
--- a/src/main.ts
+++ b/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"),
diff --git a/src/root.css b/src/root.css
index 2768ca2..0848456 100644
--- a/src/root.css
+++ b/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;
+}
diff --git a/src/widget/Titlebar/Titlebar.svelte b/src/widget/Titlebar/Titlebar.svelte
index 171780d..62899e8 100644
--- a/src/widget/Titlebar/Titlebar.svelte
+++ b/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'>
-                    <table class={style.btns}>
+                <td align='right' width='130px' class={style.btns}>
+                    <table>
                         <tbody>
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <tr>
diff --git a/src/widget/Titlebar/style.module.scss b/src/widget/Titlebar/style.module.scss
index a3f3cc5..58ced04 100644
--- a/src/widget/Titlebar/style.module.scss
+++ b/src/widget/Titlebar/style.module.scss
@@ -1,15 +1,27 @@
+$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;
         transform: translateY(-1px);
     }
-
+    
     .shade {
         position: absolute;
         top: 0;
@@ -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;
             }