nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

style(stage-ui): improve datapane

Browse Source
This commit is contained in:
Neko Ayaka
2025-08-07 18:16:40 +08:00
parent 9fbbccc04a
commit 76c619536d
6 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-web/src/pages/settings/models/index.vue
+2 -2
View File
@@ -46,9 +46,9 @@ const {
<div flex class="relative h-full flex-col-reverse md:flex-row">
<ModelSettings
live-2d-scene-class="absolute max-h-[calc(100dvh-100px-56px)] w-full h-full"
live-2d-settings-class="w-100% md:w-35% lg:w-25% xl:w-25% 2xl:w-30% h-fit sm:max-h-80dvh overflow-y-scroll relative"
live-2d-settings-class="w-100% md:w-40% lg:w-40% xl:w-25% 2xl:w-30% h-fit sm:max-h-80dvh overflow-y-scroll relative"
vrm-scene-class="absolute max-h-[calc(100dvh-100px-56px)] w-full h-full"
vrm-settings-class="w-100% md:w-35% lg:w-25% xl:w-25% 2xl:w-30% h-fit sm:max-h-80dvh overflow-y-scroll relative"
vrm-settings-class="w-100% md:w-40% lg:w-40% xl:w-25% 2xl:w-30% h-fit sm:max-h-80dvh overflow-y-scroll relative"
:palette="palette" @extract-colors-from-model="extractColorsFromModel"
/>
</div>
packages/stage-ui/src/components/DataPane/Container.vue
+1 -1
View File
@@ -34,7 +34,7 @@ withDefaults(defineProps<{
/>
</button>
</template>
<div grid gap-2 p-1 :class="innerClass">
<div gap="1" grid items-center p-1 :class="innerClass">
<slot />
</div>
</Collapsable>
packages/stage-ui/src/components/DataPane/PropertyNumber.vue
+23 -22
View File
@@ -137,7 +137,7 @@ function stopDrag() {
<div />
<div
h="6.25"
h="5"
grid-col-span-2 w-full
>
<input
@@ -149,7 +149,6 @@ function stopDrag() {
:step="props.config?.step ?? 1"
:disabled="props.config?.disabled"
class="range-slider"
h-full w-full appearance-none bg-transparent outline-none
@input="handleSliderChange"
>
@@ -158,9 +157,7 @@ function stopDrag() {
<!-- Value input -->
<label
bg="neutral-100 dark:neutral-900"
border="~ 1 solid neutral-200 dark:neutral-800"
h-fit min-w-16 inline-flex items-center rounded-md px-2 py-1
h-fit min-w-12 inline-flex items-center rounded-md px="1.5" py="0.5"
>
<span h-fit w-full inline-flex items-center gap-2 text-xs>
<span
@@ -176,8 +173,8 @@ function stopDrag() {
:max="props.config?.max"
:step="props.config?.step || 0.0001"
:disabled="props.config?.disabled"
max-w-4lh w-full flex-1 appearance-none bg-transparent text-right text-xs font-mono outline-none
max-w-4lh w-full flex-1 appearance-none bg-transparent text-right font-mono outline-none
transition="all duration-200 ease-in-out"
class="[&::-webkit-inner-spin-button]:(m-0 appearance-none)"
@change="handleInputChange"
>
@@ -190,6 +187,20 @@ function stopDrag() {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--progress: calc(var(--ratio) * 100%);
--progress-color: rgb(204 204 204 / 53%);
--track-color: rgb(245 245 245 / 75%);
transition: all 0.2s ease-in-out;
}
.range-slider:hover {
--progress-color: rgb(95 95 95 / 53%);
}
.dark .range-slider {
--progress-color: rgba(151, 151, 151, 0.8);
--track-color: rgb(23, 23, 23);
}
.range-slider::-webkit-slider-runnable-track {
@@ -197,23 +208,13 @@ function stopDrag() {
border-radius: 6px;
background: linear-gradient(
to right,
rgb(198, 198, 198) 0%,
rgba(198, 198, 198) var(--progress),
rgb(236, 236, 236) var(--progress),
rgba(236, 236, 236) 100%
var(--progress-color) 0%,
var(--progress-color) var(--progress),
var(--track-color) var(--progress),
var(--track-color) 100%
);
backdrop-filter: blur(4px);
cursor: col-resize;
}
.dark .range-slider::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
rgba(151, 151, 151, 0.8) 0%,
rgba(151, 151, 151, 0.8) var(--progress),
rgba(23, 23, 23) var(--progress),
rgba(23, 23, 23) 100%
);
transition: all 0.2s ease-in-out;
}
.range-slider::-webkit-slider-thumb {
packages/stage-ui/src/components/DataPane/PropertyPoint.vue
+21 -12
View File
@@ -128,11 +128,14 @@ function stopDrag() {
</slot>
</div>
<div />
<label bg="neutral-100 dark:neutral-900" h-fit inline-flex items-center rounded-md px-2 py-1 border="~ 1 solid neutral-200 dark:neutral-800">
<span h-fit inline-flex items-center text-xs>
<label
h-fit w-full inline-flex items-center rounded-md px="1.5" py="0.5"
:class="[isDragging === 'x' ? 'bg-red-100/50 dark:bg-red-900/50' : 'bg-neutral-100 dark:bg-neutral-900']"
transition="colors duration-200 ease-in-out"
>
<span h-fit inline-flex items-center text="[12px]" gap-1>
<span
cursor-col-resize select-none
:class="{ 'text-blue-500': isDragging === 'x' }"
cursor-col-resize select-none text-red-500
@mousedown="(e) => startDrag('x', e)"
>|</span>
<input
@@ -147,11 +150,14 @@ function stopDrag() {
>
</span>
</label>
<label bg="neutral-100 dark:neutral-900" h-fit inline-flex items-center rounded-md px-2 py-1 border="~ 1 solid neutral-200 dark:neutral-800">
<span h-fit inline-flex items-center text-xs>
<label
h-fit inline-flex items-center rounded-md px="1.5" py="0.5"
:class="[isDragging === 'y' ? 'bg-blue-100/50 dark:bg-blue-900/50' : 'bg-neutral-100 dark:bg-neutral-900']"
transition="colors duration-200 ease-in-out"
>
<span h-fit inline-flex items-center text="[12px]" gap-1>
<span
cursor-col-resize select-none
:class="{ 'text-blue-500': isDragging === 'y' }"
cursor-col-resize select-none text-blue-500
@mousedown="(e) => startDrag('y', e)"
>|</span>
<input
@@ -166,11 +172,14 @@ function stopDrag() {
>
</span>
</label>
<label bg="neutral-100 dark:neutral-900" h-fit inline-flex items-center rounded-md px-2 py-1 border="~ 1 solid neutral-200 dark:neutral-800">
<span h-fit inline-flex items-center text-xs>
<label
h-fit inline-flex items-center rounded-md px="1.5" py="0.5"
:class="[isDragging === 'z' ? 'bg-green-100/50 dark:bg-green-900/50' : 'bg-neutral-100 dark:bg-neutral-900']"
transition="colors duration-200 ease-in-out"
>
<span h-fit inline-flex items-center text="[12px]" gap-1>
<span
cursor-col-resize select-none
:class="{ 'text-blue-500': isDragging === 'z' }"
cursor-col-resize select-none text-green-500
@mousedown="(e) => startDrag('z', e)"
>|</span>
<input
packages/stage-ui/src/components/Misc/Button.vue
+1 -1
View File
@@ -78,7 +78,7 @@ const sizeClasses: Record<ButtonSize, string> = {
// Base classes that are always applied
const baseClasses = computed(() => [
'rounded-xl font-medium outline-none',
'rounded-lg font-medium outline-none',
'transition-all duration-200 ease-in-out',
'disabled:cursor-not-allowed disabled:opacity-50',
'backdrop-blur-md',
packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
+1 -1
View File
@@ -122,7 +122,7 @@ function handleUrlLoad() {
<!-- Set eye tracking mode -->
<span
class="col-span-2 col-start-1 row-start-6 self-center text-xs leading-tight font-mono"
class="col-span-2 col-start-1 row-start-6 self-center text-xs"
>
{{ t('settings.vrm.scale-and-position.eye-tracking-mode.title') }}:
</span>