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 @@
-
+
+
+
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 @@
-
+
nox
|
-
-
+
+
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;
}
| |