elk/components/settings/SettingsFontSize.vue
2023-01-22 20:18:03 +00:00

69 lines
2.2 KiB
Vue

<script lang="ts" setup>
import { DEFAULT_FONT_SIZE } from '~/constants'
import type { FontSize } from '~/composables/settings'
const userSettings = useUserSettings()
const sizes = (new Array(11)).fill(0).map((x, i) => `${10 + i}px`) as FontSize[]
const setFontSize = (e: Event) => {
if (e.target && 'valueAsNumber' in e.target)
userSettings.value.fontSize = sizes[e.target.valueAsNumber as number]
}
</script>
<template>
<div flex items-center space-x-4>
<span text-xs text-secondary>Aa</span>
<div flex-1 relative flex items-center>
<input
:value="sizes.indexOf(userSettings.fontSize)"
:aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
:min="0"
:max="sizes.length - 1"
:step="1"
type="range"
focus:outline-none
appearance-none bg-transparent
w-full cursor-pointer
@change="setFontSize"
>
<div flex items-center justify-between absolute w-full pointer-events-none>
<div
v-for="i in sizes.length" :key="i"
h-3 w-3
rounded-full bg-secondary-light
relative
>
<div
v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
absolute rounded-full class="-top-1 -left-1"
bg-primary h-5 w-5
/>
</div>
</div>
</div>
<span text-xl text-secondary>Aa</span>
</div>
</template>
<style>
input[type=range]::-webkit-slider-runnable-track {
--at-apply: bg-secondary-light rounded-full h1 op60;
}
input[type=range]:focus:-webkit-slider-runnable-track {
--at-apply: outline-2 outline-red;
}
input[type=range]::-webkit-slider-thumb {
--at-apply: w3 h3 bg-primary -mt-1 outline outline-3 outline-primary rounded-full cursor-pointer appearance-none;
}
input[type=range]::-moz-range-track {
--at-apply: bg-secondary-light rounded-full h1 op60;
}
input[type=range]:focus::-moz-range-track {
--at-apply: outline-2 outline-red;
}
input[type=range]::-moz-range-thumb {
--at-apply: w3 h3 bg-primary -mt-1 outline outline-3 outline-primary rounded-full cursor-pointer appearance-none border-none;
}
</style>