MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(style): slider

This commit is contained in:
ArneBo 2025-04-02 06:21:46 +02:00
parent a4441f9e53
commit b90186aefd
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/components/ui/Slider.vue
View File

@ -88,7 +88,7 @@ onMounted(() => {
ref="input" ref="input"
v-model="index" v-model="index"
type="range" type="range"
style="width: var(--slider-width); opacity: .001; cursor: pointer;" style="width: var(--slider-width); cursor: pointer;"
:max="keys.length - 1" :max="keys.length - 1"
:autofocus="autofocus || undefined" :autofocus="autofocus || undefined"
> >
@ -152,10 +152,13 @@ onMounted(() => {
} }
// Fake slider // Fake slider
.range { .range {
width: calc(var(--step-size) * var(--current-step)); width: calc(var(--step-size) * var(--current-step) + 2px);
border-bottom: 2px solid currentcolor;
position: absolute; position: absolute;
top: 11px; top: 6px;
left: 2.5px;
height: 8px;
border-radius: 8px;
background-color: var(--fw-primary);
transition: all .1s; transition: all .1s;
pointer-events: none; pointer-events: none;
opacity: var(--slider-opacity); opacity: var(--slider-opacity);
@ -168,15 +171,16 @@ onMounted(() => {
width: 16px; width: 16px;
height: 16px; height: 16px;
left: calc(var(--step-size) * var(--current-step)); left: calc(var(--step-size) * var(--current-step));
background: currentcolor; background: var(--fw-primary);
position: absolute; position: absolute;
top: 4px; top: 2px;
margin-left: 2px;
transition: all .1s; transition: all .1s;
pointer-events: none; pointer-events: none;
} }
input:focus~.pin { input:focus~.pin,
background-color: var(--focus-ring-color); input:hover~.pin {
outline: 2px solid currentcolor; outline: 1px solid currentColor;
} }
&[disabled] .pin { &[disabled] .pin {
display: none; display: none;