mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-04-20 18:52:05 +00:00
65 lines
2.3 KiB
Svelte
65 lines
2.3 KiB
Svelte
<script lang='ts'>
|
|
import { persisted } from 'svelte-persisted-store'
|
|
|
|
import Wrapper from './wrapper.svelte'
|
|
|
|
import native from '$lib/modules/native'
|
|
import { click } from '$lib/modules/navigate'
|
|
|
|
const debug = persisted('debug', '')
|
|
function tabindex (node: HTMLElement) {
|
|
node.tabIndex = -1
|
|
}
|
|
</script>
|
|
|
|
<Wrapper let:platform>
|
|
<div class='w-[calc(100%-3.5rem)] left-[3.5rem] top-0 z-[2000] flex navbar absolute h-8'>
|
|
<div class='draggable w-full' />
|
|
{#if platform !== 'macOS'}
|
|
<div class='window-controls flex text-white backdrop-blur'>
|
|
<button class='max-button flex items-center justify-center h-8 w-[46px]' use:click={native.minimise} use:tabindex>
|
|
<svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='currentColor' height='1' width='10' x='1' y='6' />
|
|
</button>
|
|
<button class='restore-button flex items-center justify-center h-8 w-[46px]' use:click={native.maximise} use:tabindex>
|
|
<svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' />
|
|
</button>
|
|
<button class='close-button flex items-center justify-center h-8 w-[46px]' use:click={native.close} use:tabindex>
|
|
<svg class='svg-controls w-3 h-3' role='img' viewBox='0 0 12 12'><polygon fill='currentColor' fill-rule='evenodd' points='11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1' />
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</Wrapper>
|
|
{#if $debug}
|
|
<div class='ribbon z-[1000] text-center fixed font-bold pointer-events-none'>Debug Mode!</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.ribbon {
|
|
background: #f63220;
|
|
box-shadow: 0 0 0 999px #f63220;
|
|
clip-path: inset(0 -100%);
|
|
inset: 0 auto auto 0;
|
|
transform-origin: 100% 0;
|
|
transform: translate(-29.3%) rotate(-45deg);
|
|
}
|
|
.draggable {
|
|
-webkit-app-region: drag;
|
|
}
|
|
.window-controls {
|
|
-webkit-app-region: no-drag;
|
|
background: rgba(24, 24, 24, 0.1);
|
|
}
|
|
.window-controls button:hover {
|
|
background: rgba(128, 128, 128, 0.2);
|
|
}
|
|
.window-controls button:active {
|
|
background: rgba(128, 128, 128, 0.4);
|
|
}
|
|
.close-button:hover {
|
|
background: #e81123 !important;
|
|
}
|
|
.close-button:active {
|
|
background: #f1707a !important;
|
|
}
|
|
</style>
|