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