teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat(ui): add font size outline when focused (#2798)

Browse source
This commit is contained in:
Joaquín Sánchez 2024-04-12 19:19:37 +02:00 committed by GitHub
parent 9fa8149f68
commit 14162f8bcb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/settings/SettingsFontSize.vue
View file

@ -31,6 +31,7 @@ function setFontSize(e: Event) {
<div flex items-center justify-between absolute w-full pointer-events-none> <div flex items-center justify-between absolute w-full pointer-events-none>
<div <div
v-for="i in sizes.length" :key="i" v-for="i in sizes.length" :key="i"
class="container-marker"
h-3 w-3 h-3 w-3
rounded-full bg-secondary-light rounded-full bg-secondary-light
relative relative
@ -48,6 +49,17 @@ function setFontSize(e: Event) {
</template> </template>
<style> <style>
input:focus + div .container-marker:has(> div)::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2rem;
height: 2rem;
border: 2px solid var(--c-primary);
border-radius: 50%;
}
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
--at-apply: bg-secondary-light rounded-full h1 op60; --at-apply: bg-secondary-light rounded-full h1 op60;
} }

8
pages/settings/interface/index.vue
View file

@ -14,10 +14,12 @@ useHydratedHead({
</div> </div>
</template> </template>
<div p6 flex="~ col gap6"> <div p6 flex="~ col gap6">
<label space-y-2> <div space-y-2>
<p font-medium>{{ $t('settings.interface.font_size') }}</p> <p font-medium>
{{ $t('settings.interface.font_size') }}
</p>
<SettingsFontSize select-settings /> <SettingsFontSize select-settings />
</label> </div>
<div space-y-2> <div space-y-2>
<p font-medium> <p font-medium>
{{ $t('settings.interface.color_mode') }} {{ $t('settings.interface.color_mode') }}