38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { settings, toggleSound } from '../../stores/settings';
|
|
</script>
|
|
|
|
<button
|
|
class="sound-toggle"
|
|
type="button"
|
|
aria-label={$settings.soundOn ? 'Ton aus' : 'Ton an'}
|
|
onclick={toggleSound}
|
|
>
|
|
{#if $settings.soundOn}
|
|
<svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
|
|
<path d="M5 12 L12 12 L20 6 L20 26 L12 20 L5 20 Z" fill="currentColor" />
|
|
<path d="M23 10 Q28 16 23 22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" />
|
|
<path d="M26 6 Q33 16 26 26" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" />
|
|
</svg>
|
|
{:else}
|
|
<svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
|
|
<path d="M5 12 L12 12 L20 6 L20 26 L12 20 L5 20 Z" fill="currentColor" />
|
|
<path d="M22 10 L30 22 M30 10 L22 22" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
|
|
<style>
|
|
.sound-toggle {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
color: var(--c-text-on-dark);
|
|
display: grid;
|
|
place-items: center;
|
|
transition: transform 0.12s ease;
|
|
}
|
|
.sound-toggle:active { transform: scale(0.92); }
|
|
</style>
|