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" @mouseenter.passive="onMouseenter"
@mousedown="onMousedown" @mousedown="onMousedown"
@touchstart="onMousedown" @touchstart="onMousedown"
></div> >
<div class="thumbInner"></div>
</div>
</div> </div>
<slot name="suffix"></slot> <slot name="suffix"></slot>
</div> </div>
@ -230,15 +232,17 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
} }
} }
$thumbHeight: 20px; $thumbHeight: 32px;
$thumbWidth: 20px; $thumbWidth: 32px;
$thumbInnerHeight: 19px;
$thumbInnerWidth: 19px;
> .body { > .body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 7px 12px; padding: 0px 4px;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel); border: solid 1px var(--MI_THEME-panel);
border-radius: 6px; border-radius: 6px;
@ -278,14 +282,14 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
> .highlight.right { > .highlight.right {
> .shine.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)); background: linear-gradient(-90deg, var(--MI_THEME-buttonGradateB), color(from var(--MI_THEME-buttonGradateA) srgb r g b / 0));
} }
} }
> .highlight.left { > .highlight.left {
> .shine.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)); 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; width: $thumbWidth;
height: $thumbHeight; height: $thumbHeight;
cursor: grab; cursor: grab;
background: var(--MI_THEME-accent);
border-radius: 999px;
&:hover { &: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;
} }
} }
} }