Merge branch 'main' into lilia_work

Author: nekomeowww

apps/stage-tamagotchi/src/pages/settings/appearance/color-scheme.vue

@@ -55,7 +55,7 @@ const { t } = useI18n()
     />
     <div
       v-motion
-      class="color-bar"
+      class="color-bar text-[10px] md:text-base sm:text-xs"
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
       :duration="250 + (7 * 10)"
@@ -86,7 +86,7 @@ const { t } = useI18n()
     </div>
     <div
       v-motion
-      class="color-bar transparency-grid"
+      class="color-bar transparency-grid text-[10px] md:text-base sm:text-xs"
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
       :duration="250 + (9 * 10)"
@@ -120,7 +120,7 @@ const { t } = useI18n()
     <div
       v-for="({ title, description, colors }, i) in $tm('settings.pages.themes.sections.section.theme-presets.presets')" :key="i"
       v-motion
-      class="w-full flex items-center justify-between rounded-lg px-4 py-3 outline-none transition-all duration-250 ease-in-out"
+      class="w-full flex flex-col items-start justify-between gap-2 rounded-lg px-4 py-3 outline-none transition-all duration-250 ease-in-out md:flex-row md:items-center md:gap-0"
       bg="neutral-100 dark:neutral-800"
       hover="bg-neutral-200 dark:bg-neutral-700"
       :initial="{ opacity: 0, y: 10 }"

apps/stage-web/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>AIRI</title>
     <meta name="description" content="Open source attempt to create cyber companion">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="theme-color" content="rgb(18,18,18)" id="themeColor" />

apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue

@@ -116,7 +116,7 @@ onMounted(() => {
       </Transition>
     </KeepAlive>
     <div relative w-full self-end>
-      <div fixed top="50%" translate-y="[-50%]" px-2>
+      <div top="50%" translate-y="[-50%]" fixed z-15 px-2>
         <ViewControlInputs ref="viewControlsInputs" :mode="viewControlsActiveMode" />
       </div>
       <div translate-y="[-100%]" absolute right-0 w-full px-2 pb-2 font-sans>

apps/stage-web/src/pages/settings/appearance/color-scheme.vue

@@ -55,7 +55,7 @@ const { t } = useI18n()
     />
     <div
       v-motion
-      class="color-bar"
+      class="color-bar text-[10px] md:text-base sm:text-xs"
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
       :duration="250 + (7 * 10)"
@@ -86,7 +86,7 @@ const { t } = useI18n()
     </div>
     <div
       v-motion
-      class="color-bar transparency-grid"
+      class="color-bar transparency-grid text-[10px] md:text-base sm:text-xs"
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
       :duration="250 + (9 * 10)"
@@ -120,7 +120,7 @@ const { t } = useI18n()
     <div
       v-for="({ title, description, colors }, i) in $tm('settings.pages.themes.sections.section.theme-presets.presets')" :key="i"
       v-motion
-      class="w-full flex items-center justify-between rounded-lg px-4 py-3 outline-none transition-all duration-250 ease-in-out"
+      class="w-full flex flex-col items-start justify-between gap-2 rounded-lg px-4 py-3 outline-none transition-all duration-250 ease-in-out md:flex-row md:items-center md:gap-0"
       bg="neutral-100 dark:neutral-800"
       hover="bg-neutral-200 dark:bg-neutral-700"
       :initial="{ opacity: 0, y: 10 }"

apps/stage-web/src/styles/main.css

@@ -7,6 +7,16 @@
   --bg-color: var(--bg-color-light);
 }
 
+/**
+  Disable double-tap "zoom" option in browser on touch devices
+
+  https://stackoverflow.com/a/54207844
+  https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices
+ */
+* {
+  touch-action: manipulation;
+}
+
 html,
 body,
 #app {

packages/stage-ui/src/components/Widgets/ColorPalette.vue

@@ -22,7 +22,7 @@ const settings = useSettings()
           transition="all ease-in-out duration-250"
           size-8 cursor-pointer rounded-full bg-primary-500
           :style="hex ? { background: hex } : { '--chromatic-hue': DEFAULT_THEME_COLORS_HUE }"
-          :class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
+          :class="settings.isColorSelectedForPrimary(hex) ? 'scale-120 md:scale-150 mx-1' : 'hover:scale-110'"
           @click="settings.applyPrimaryColorFrom(hex)"
         />
         <TooltipPortal>

packages/ui/src/components/Form/Range/RoundRange.vue

@@ -74,11 +74,11 @@ https://toughengineer.github.io/demo/slider-styler*/
   transition: background-color 0.2s ease;
 
   --thumb-width: var(--height);
-  --thumb-height: 0px;
+  --thumb-height: var(--height);
   --thumb-box-shadow: none;
   --thumb-border: none;
   --thumb-border-radius: 0px;
-  --thumb-background: rgb(255, 255, 255);
+  --thumb-background: transparent;
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);