mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-09 10:29:57 +00:00
70 lines
2.2 KiB
Vue
70 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>
|