lashman/core-cooldown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

a11y: Tasks 2-6 -- App shell, Titlebar, ToggleSwitch, Stepper, animate.ts

Browse Source
This commit is contained in:
lashman
2026-02-18 18:08:14 +02:00
parent b9ac818174
commit ef936cf22a
5 changed files with 101 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/lib/components/Titlebar.svelte
View File

@@ -5,7 +5,8 @@
</script>
<!-- Invisible drag region - traffic lights on the right -->
<div
<header
role="banner"
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"
>
@@ -20,65 +21,65 @@
</span>
<!-- Traffic light buttons (order: maximize, minimize, close → close is rightmost) -->
<div class="flex items-center gap-[8px] opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-focus-within:opacity-100">
<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="traffic-btn group/btn relative flex h-[15px] w-[15px] items-center justify-center
rounded-full bg-[#27C93F] transition-all duration-150
hover:brightness-110"
class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"
onclick={() => appWindow.toggleMaximize()}
>
<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 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="traffic-btn group/btn relative flex h-[15px] w-[15px] items-center justify-center
rounded-full bg-[#FFBD2E] transition-all duration-150
hover:brightness-110"
class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"
onclick={() => appWindow.minimize()}
>
<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 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="traffic-btn group/btn relative flex h-[15px] w-[15px] items-center justify-center
rounded-full bg-[#FF5F57] transition-all duration-150
hover:brightness-110"
class="group/btn relative flex h-[44px] w-[44px] items-center justify-center"
onclick={() => appWindow.close()}
>
<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 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>
</div>
</header>