diff --git a/src/lib/components/Release.svelte b/src/lib/components/Release.svelte index 0600146..1adc772 100644 --- a/src/lib/components/Release.svelte +++ b/src/lib/components/Release.svelte @@ -36,7 +36,21 @@ {#each release.links as link, i (link.version)} {/each} + +
@@ -78,6 +92,13 @@ box-sizing: border-box; width: 5.5rem; min-width: 5.5rem; + display: flex; + flex-direction: row; + align-items: center; + } + .arrow { + pointer-events: none; + flex-shrink: 0; } .progress { flex: 1; @@ -103,7 +124,7 @@ transition: color 0.3s ease; font-variant-numeric: tabular-nums; } - select:hover { + .selectVersion:hover { outline: 2px solid var(--accent); } select.disabled { diff --git a/src/lib/components/VersionCard.svelte b/src/lib/components/VersionCard.svelte index 2ad2f98..67f835c 100644 --- a/src/lib/components/VersionCard.svelte +++ b/src/lib/components/VersionCard.svelte @@ -16,6 +16,7 @@ let { version, selectedVersion } = $props(); let selected = $derived(version.version === selectedVersion?.version); + let hovering = $state(false); async function handleDelete() { const prompt = await show({ @@ -74,7 +75,20 @@ /> - {version.version} +
{}} + onmouseenter={() => (hovering = true)} + onmouseleave={() => (hovering = false)} + onclick={async (e) => { + e.stopPropagation(); + await launchBlenderVersion(version); + }} + > +

{hovering ? 'Launch' : version.version}

+
{#snippet children({ close })}