rounded corners
This commit is contained in:
parent
a3a7583824
commit
525539c29d
|
@ -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
|
||||||
|
|
|
@ -4,4 +4,6 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Titlebar />
|
<Titlebar />
|
||||||
<Load />
|
<div class='backdrop'>
|
||||||
|
<Load />
|
||||||
|
</div>
|
||||||
|
|
|
@ -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"),
|
||||||
|
|
11
src/root.css
11
src/root.css
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,9 +1,21 @@
|
||||||
|
$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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue