From 9d37db96f79e63f78e5c3d81e4803c27ddf8b8e8 Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Thu, 10 Apr 2025 02:32:31 +0800 Subject: [PATCH] fix(stage-ui|stage-web|stage-tamagotchi): color picker --- .../src/pages/settings/appearance/index.vue | 18 +++++++-- .../src/pages/settings/appearance/index.vue | 37 ++++++++----------- packages/stage-ui/stories/main.css | 6 +-- 3 files changed, 33 insertions(+), 28 deletions(-) diff --git a/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue b/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue index 47b492c23..b3e09b4ea 100644 --- a/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue +++ b/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue @@ -289,13 +289,23 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions], ); &::-webkit-slider-thumb { - --at-apply: appearance-none w-2 h-12 rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 shadow-md border-2 - border-white hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200; + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500 + hover: bg-neutral-800 transition-colors duration-200; + } + + .dark &::-webkit-slider-thumb { + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white + hover: bg-neutral-300 transition-colors duration-200; } &::-moz-range-thumb { - --at-apply: w-2 h-12 rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 shadow-md border-2 border-white border-box - hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200; + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500 + hover: bg-neutral-800 transition-colors duration-200; + } + + .dark &::-moz-range-thumb { + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white + hover: bg-neutral-300 transition-colors duration-200; } } diff --git a/apps/stage-web/src/pages/settings/appearance/index.vue b/apps/stage-web/src/pages/settings/appearance/index.vue index 023ba7b35..b3e09b4ea 100644 --- a/apps/stage-web/src/pages/settings/appearance/index.vue +++ b/apps/stage-web/src/pages/settings/appearance/index.vue @@ -8,7 +8,6 @@ import { useRouter } from 'vue-router' import CheckBar from '../../../components/Settings/CheckBar.vue' import ColorPalette from '../../../components/Settings/ColorPalette.vue' -import { useIconAnimation } from '../../../composables/useIconAnimation' import COLOR_PRESETS from './color-presets.json' const router = useRouter() @@ -18,8 +17,6 @@ const { t } = useI18n() const usePageSpecificTransitionsSettingChanged = ref(false) -const { iconAnimationStarted, showIconAnimation, animationIcon } = useIconAnimation('i-lucide:paintbrush') - // avoid showing the animation component when the page specific transitions are enabled watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions], () => { usePageSpecificTransitionsSettingChanged.value = true @@ -265,25 +262,13 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions], /> -
@@ -304,13 +289,23 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions], ); &::-webkit-slider-thumb { - --at-apply: appearance-none w-2 h-12 rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 shadow-md border-2 - border-white hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200; + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500 + hover: bg-neutral-800 transition-colors duration-200; + } + + .dark &::-webkit-slider-thumb { + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white + hover: bg-neutral-300 transition-colors duration-200; } &::-moz-range-thumb { - --at-apply: w-2 h-12 rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 shadow-md border-2 border-white border-box - hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200; + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500 + hover: bg-neutral-800 transition-colors duration-200; + } + + .dark &::-moz-range-thumb { + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white + hover: bg-neutral-300 transition-colors duration-200; } } diff --git a/packages/stage-ui/stories/main.css b/packages/stage-ui/stories/main.css index 234a84af6..398b21f68 100755 --- a/packages/stage-ui/stories/main.css +++ b/packages/stage-ui/stories/main.css @@ -65,16 +65,16 @@ html.htw-dark { } .htw-dark .theme-hue-slider::-webkit-slider-thumb { - --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-200 cursor-pointer shadow-md border-2 border-white + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white hover: bg-neutral-300 transition-colors duration-200; } .theme-hue-slider::-moz-range-thumb { - --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-lg border-2 border-neutral-500 + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500 hover: bg-neutral-800 transition-colors duration-200; } .htw-dark .theme-hue-slider::-moz-range-thumb { - --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-md border-2 border-white + --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white hover: bg-neutral-300 transition-colors duration-200; }