From 712252b1995ea8857f37b03f06bb4a5addbb3d6c Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Sat, 15 Mar 2025 15:47:05 +0800 Subject: [PATCH] feat(stage-ui): better slider --- .../src/components/Form/Range/Range.vue | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/stage-ui/src/components/Form/Range/Range.vue b/packages/stage-ui/src/components/Form/Range/Range.vue index 30454df43..47a3a4b7c 100644 --- a/packages/stage-ui/src/components/Form/Range/Range.vue +++ b/packages/stage-ui/src/components/Form/Range/Range.vue @@ -82,28 +82,28 @@ https://toughengineer.github.io/demo/slider-styler*/ --thumb-box-shadow: 0 0 0px #e6e6e6; --thumb-border: none; --thumb-border-radius: 999px; - --thumb-background: #939393; - --thumb-background-hover: #ffffff; - --thumb-background-active: #d7d7d7; + --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0)); + --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0)); + --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0)); --track-height: calc(var(--height) - var(--track-value-padding) * 2); --track-box-shadow: none; --track-border: solid 2px rgb(238, 238, 238); - --track-border-radius: 4px; - --track-background: rgb(255, 255, 255); - --track-background-hover: rgb(255, 255, 255); - --track-background-active: rgb(255, 255, 255); + --track-border-radius: 6px; + --track-background: rgb(238, 238, 238); + --track-background-hover: rgb(238, 238, 238); + --track-background-active: rgb(238, 238, 238); - --track-value-background: rgb(212, 212, 212); - --track-value-background-hover: rgb(212, 212, 212); - --track-value-background-active: rgb(212, 212, 212); + --track-value-background: rgb(255, 255, 255); + --track-value-background-hover: rgb(255, 255, 255); + --track-value-background-active: rgb(255, 255, 255); --track-value-padding: 2px; } .dark .data-gui-range { - --thumb-background: #e2e2e2; - --thumb-background-hover: #ffffff; - --thumb-background-active: #d7d7d7; + --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0)); + --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0)); + --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0)); --track-border: solid 2px rgb(44, 44, 44); --track-background: rgb(44, 44, 44);