usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update MkRange.vue

This commit is contained in:
syuilo 2025-05-29 08:30:37 +09:00
parent 88f38e5cd7
commit 16a3321287
1 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/frontend/src/components/MkRange.vue
View File

@ -29,7 +29,9 @@ SPDX-License-Identifier: AGPL-3.0-only
@mouseenter.passive="onMouseenter"
@mousedown="onMousedown"
@touchstart="onMousedown"
></div>
>
<div class="thumbInner"></div>
</div>
</div>
<slot name="suffix"></slot>
</div>
@ -230,15 +232,17 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
}
}
$thumbHeight: 20px;
$thumbWidth: 20px;
$thumbHeight: 32px;
$thumbWidth: 32px;
$thumbInnerHeight: 19px;
$thumbInnerWidth: 19px;
> .body {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 7px 12px;
padding: 0px 4px;
background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: 6px;
@ -278,14 +282,14 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
> .highlight.right {
> .shine.right {
right: calc(#{$thumbWidth} / 2);
right: calc(#{$thumbInnerWidth} / 2);
background: linear-gradient(-90deg, var(--MI_THEME-buttonGradateB), color(from var(--MI_THEME-buttonGradateA) srgb r g b / 0));
}
}
> .highlight.left {
> .shine.left {
left: calc(#{$thumbWidth} / 2);
left: calc(#{$thumbInnerWidth} / 2);
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateB), color(from var(--MI_THEME-buttonGradateA) srgb r g b / 0));
}
}
@ -318,11 +322,25 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
width: $thumbWidth;
height: $thumbHeight;
cursor: grab;
background: var(--MI_THEME-accent);
border-radius: 999px;
&:hover {
background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
> .thumbInner {
background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
}
}
> .thumbInner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: $thumbInnerWidth;
height: $thumbInnerHeight;
background: var(--MI_THEME-accent);
border-radius: 999px;
pointer-events: none;
}
}
}