rounded corners

This commit is contained in:
b1ek 2023-08-12 02:20:15 +10:00
parent a3a7583824
commit 525539c29d
Signed by: blek
GPG Key ID: 14546221E3595D0C
6 changed files with 37 additions and 10 deletions

View File

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

View File

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

View File

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

View File

@ -1,6 +1,15 @@
body, html { body, html {
background: #0b0a0a; background: transparent;
color: #e1e1e1; color: #e1e1e1;
padding: 0; margin: 0; padding: 0; margin: 0;
font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif; 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;
}

View File

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

View File

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