From 76c619536daabf60041bd91afbd638bab0cc5302 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 7 Aug 2025 17:36:53 +0800
Subject: [PATCH] style(stage-ui): improve datapane

---
 .../src/pages/settings/models/index.vue       |  4 +-
 .../src/components/DataPane/Container.vue     |  2 +-
 .../components/DataPane/PropertyNumber.vue    | 45 ++++++++++---------
 .../src/components/DataPane/PropertyPoint.vue | 33 +++++++++-----
 .../stage-ui/src/components/Misc/Button.vue   |  2 +-
 .../Scenarios/Settings/ModelSettings/VRM.vue  |  2 +-
 6 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/apps/stage-web/src/pages/settings/models/index.vue b/apps/stage-web/src/pages/settings/models/index.vue
index 58eb417d8..daf0e95cf 100644
--- a/apps/stage-web/src/pages/settings/models/index.vue
+++ b/apps/stage-web/src/pages/settings/models/index.vue
@@ -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>
diff --git a/packages/stage-ui/src/components/DataPane/Container.vue b/packages/stage-ui/src/components/DataPane/Container.vue
index 17eeb77a8..bd4d2e54b 100644
--- a/packages/stage-ui/src/components/DataPane/Container.vue
+++ b/packages/stage-ui/src/components/DataPane/Container.vue
@@ -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>
diff --git a/packages/stage-ui/src/components/DataPane/PropertyNumber.vue b/packages/stage-ui/src/components/DataPane/PropertyNumber.vue
index 3888b0c5a..2b0eb2cbd 100644
--- a/packages/stage-ui/src/components/DataPane/PropertyNumber.vue
+++ b/packages/stage-ui/src/components/DataPane/PropertyNumber.vue
@@ -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 {
diff --git a/packages/stage-ui/src/components/DataPane/PropertyPoint.vue b/packages/stage-ui/src/components/DataPane/PropertyPoint.vue
index 181e8195c..edbc369d9 100644
--- a/packages/stage-ui/src/components/DataPane/PropertyPoint.vue
+++ b/packages/stage-ui/src/components/DataPane/PropertyPoint.vue
@@ -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
diff --git a/packages/stage-ui/src/components/Misc/Button.vue b/packages/stage-ui/src/components/Misc/Button.vue
index a3e9a171f..d92a69ea6 100644
--- a/packages/stage-ui/src/components/Misc/Button.vue
+++ b/packages/stage-ui/src/components/Misc/Button.vue
@@ -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',
diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
index 33d9ac70c..7037e18d2 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
@@ -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>