85 lines
3.4 KiB
Svelte
85 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
|
|
|
|
const appWindow = getCurrentWebviewWindow();
|
|
</script>
|
|
|
|
<!-- Invisible drag region - traffic lights on the right -->
|
|
<header
|
|
data-tauri-drag-region
|
|
class="group absolute top-0 left-0 right-0 z-50 flex h-10 items-center justify-end pr-3.5 select-none"
|
|
>
|
|
<!-- Centered app name (decorative -- OS window title handles screen readers) -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="pointer-events-none absolute inset-0 flex items-center justify-center
|
|
text-[11px] font-semibold tracking-[0.3em] text-[#383838] uppercase"
|
|
style="font-family: 'Space Mono', monospace;"
|
|
>
|
|
Core Cooldown
|
|
</span>
|
|
|
|
<!-- Traffic light buttons (order: maximize, minimize, close → close is rightmost) -->
|
|
<div class="flex items-center gap-0 opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-focus-within:opacity-100">
|
|
<!-- Maximize (green) -->
|
|
<button
|
|
aria-label="Maximize"
|
|
class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"
|
|
onclick={() => appWindow.toggleMaximize()}
|
|
>
|
|
<span class="flex h-[20px] w-[20px] items-center justify-center rounded-full bg-[#27C93F] transition-all duration-150 group-hover/btn:brightness-110">
|
|
<svg
|
|
class="absolute opacity-0 transition-opacity duration-150 group-hover/btn:opacity-100"
|
|
width="8"
|
|
height="8"
|
|
viewBox="0 0 8 8"
|
|
fill="none"
|
|
>
|
|
<polyline points="1,5 1,7 3,7" stroke="#006500" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
|
<polyline points="7,3 7,1 5,1" stroke="#006500" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
|
<line x1="1" y1="7" x2="7" y2="1" stroke="#006500" stroke-width="1.2" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Minimize (yellow) -->
|
|
<button
|
|
aria-label="Minimize"
|
|
class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"
|
|
onclick={() => appWindow.minimize()}
|
|
>
|
|
<span class="flex h-[20px] w-[20px] items-center justify-center rounded-full bg-[#FFBD2E] transition-all duration-150 group-hover/btn:brightness-110">
|
|
<svg
|
|
class="absolute opacity-0 transition-opacity duration-150 group-hover/btn:opacity-100"
|
|
width="8"
|
|
height="2"
|
|
viewBox="0 0 8 2"
|
|
fill="none"
|
|
>
|
|
<line x1="1" y1="1" x2="7" y2="1" stroke="#995700" stroke-width="1.3" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Close (red) -- rightmost -->
|
|
<button
|
|
aria-label="Close"
|
|
class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"
|
|
onclick={() => appWindow.close()}
|
|
>
|
|
<span class="flex h-[20px] w-[20px] items-center justify-center rounded-full bg-[#FF5F57] transition-all duration-150 group-hover/btn:brightness-110">
|
|
<svg
|
|
class="absolute opacity-0 transition-opacity duration-150 group-hover/btn:opacity-100"
|
|
width="8"
|
|
height="8"
|
|
viewBox="0 0 8 8"
|
|
fill="none"
|
|
>
|
|
<line x1="1.5" y1="1.5" x2="6.5" y2="6.5" stroke="#4a0002" stroke-width="1.3" stroke-linecap="round" />
|
|
<line x1="6.5" y1="1.5" x2="1.5" y2="6.5" stroke="#4a0002" stroke-width="1.3" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</header>
|