chore(client): 🎨
This commit is contained in:
parent
255f19bd23
commit
20aee2deed
2 changed files with 20 additions and 4 deletions
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timctyfi" :class="{ disabled }">
|
<div class="timctyfi" :class="{ disabled, easing }">
|
||||||
<div class="label"><slot name="label"></slot></div>
|
<div class="label"><slot name="label"></slot></div>
|
||||||
<div v-adaptive-border class="body">
|
<div v-adaptive-border class="body">
|
||||||
<div ref="containerEl" class="container">
|
<div ref="containerEl" class="container">
|
||||||
|
@ -28,9 +28,11 @@ const props = withDefaults(defineProps<{
|
||||||
step?: number;
|
step?: number;
|
||||||
textConverter?: (value: number) => string,
|
textConverter?: (value: number) => string,
|
||||||
showTicks?: boolean;
|
showTicks?: boolean;
|
||||||
|
easing?: boolean;
|
||||||
}>(), {
|
}>(), {
|
||||||
step: 1,
|
step: 1,
|
||||||
textConverter: (v) => v.toString(),
|
textConverter: (v) => v.toString(),
|
||||||
|
easing: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
|
@ -198,7 +200,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
//transition: width 0.2s cubic-bezier(0,0,0,1);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -231,7 +232,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
//transition: left 0.2s cubic-bezier(0,0,0,1);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--accentLighten);
|
background: var(--accentLighten);
|
||||||
|
@ -239,5 +239,21 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.easing {
|
||||||
|
> .body {
|
||||||
|
> .container {
|
||||||
|
> .track {
|
||||||
|
> .highlight {
|
||||||
|
transition: width 0.2s cubic-bezier(0,0,0,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .thumb {
|
||||||
|
transition: left 0.2s cubic-bezier(0,0,0,1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -81,7 +81,7 @@
|
||||||
<option value="force">{{ i18n.ts._nsfw.force }}</option>
|
<option value="force">{{ i18n.ts._nsfw.force }}</option>
|
||||||
</FormSelect>
|
</FormSelect>
|
||||||
|
|
||||||
<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" class="_formBlock">
|
<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock">
|
||||||
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
|
<template #label>{{ i18n.ts.numberOfPageCache }}</template>
|
||||||
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
|
<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
|
||||||
</FormRange>
|
</FormRange>
|
||||||
|
|
Loading…
Reference in a new issue