mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-21 17:05:22 +03:00
feat(ui): add font size outline when focused (#2798)
This commit is contained in:
parent
9fa8149f68
commit
14162f8bcb
2 changed files with 17 additions and 3 deletions
|
@ -31,6 +31,7 @@ function setFontSize(e: Event) {
|
|||
<div flex items-center justify-between absolute w-full pointer-events-none>
|
||||
<div
|
||||
v-for="i in sizes.length" :key="i"
|
||||
class="container-marker"
|
||||
h-3 w-3
|
||||
rounded-full bg-secondary-light
|
||||
relative
|
||||
|
@ -48,6 +49,17 @@ function setFontSize(e: Event) {
|
|||
</template>
|
||||
|
||||
<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 {
|
||||
--at-apply: bg-secondary-light rounded-full h1 op60;
|
||||
}
|
||||
|
|
|
@ -14,10 +14,12 @@ useHydratedHead({
|
|||
</div>
|
||||
</template>
|
||||
<div p6 flex="~ col gap6">
|
||||
<label space-y-2>
|
||||
<p font-medium>{{ $t('settings.interface.font_size') }}</p>
|
||||
<div space-y-2>
|
||||
<p font-medium>
|
||||
{{ $t('settings.interface.font_size') }}
|
||||
</p>
|
||||
<SettingsFontSize select-settings />
|
||||
</label>
|
||||
</div>
|
||||
<div space-y-2>
|
||||
<p font-medium>
|
||||
{{ $t('settings.interface.color_mode') }}
|
||||
|
|
Loading…
Reference in a new issue