feat: better background

moeru-ai · Dec 28, 2024 · d995315 · d995315
1 parent 85ed759
commit d995315
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 29 deletions.
diff --git a/packages/stage/src/components/Backgrounds/Cross.vue b/packages/stage/src/components/Backgrounds/Cross.vue
@@ -11,12 +11,25 @@ https://www.magicpattern.design/tools/css-backgrounds
 */
 .cross-background-container {
   background-color: #ffffff;
-  opacity: 0.8;
   background:
     radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent),
     radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px,
-    linear-gradient(var(--airi-theme-primary-500) 2px, transparent 2px) 0 -1px,
-    linear-gradient(90deg, var(--airi-theme-primary-500) 2px, #ffffff 2px) -1px 0;
+    linear-gradient(#f4ebf1 2px, transparent 2px) 0 -1px,
+    linear-gradient(90deg, #f4ebf1 2px, #ffffff 2px) -1px 0;
+  background-size:
+    50px 50px,
+    50px 50px,
+    25px 25px,
+    25px 25px;
+}
+
+.dark .cross-background-container {
+  background-color: #121212;
+  background:
+    radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent),
+    radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent) 25px 25px,
+    linear-gradient(#312129 2px, transparent 2px) 0 -1px,
+    linear-gradient(90deg, #312129 2px, #121212 2px) -1px 0;
   background-size:
     50px 50px,
     50px 50px,

diff --git a/packages/stage/src/components/Layouts/InteractiveArea.vue b/packages/stage/src/components/Layouts/InteractiveArea.vue
@@ -105,14 +105,14 @@ onAfterSend(async () => {
     <fieldset flex="~ row" w-fit rounded-lg>
       <label
         :class="[
-          tab === 'chat' ? 'bg-pink-100 dark:bg-pink-400/20' : '',
+          tab === 'chat' ? 'bg-pink-100 dark:bg-[#3c2632]' : 'bg-white dark:bg-[#121212]',
           tab === 'chat' ? 'text-pink-500 dark:text-pink-500' : '',
         ]"
         flex="~ row"
         :checked="tab === 'chat'"
         :aria-checked="tab === 'chat'"
-        border="solid l-2 t-2 b-2 pink-100 dark:pink-400/20"
-        bg="hover:pink-100 dark:hover:pink-400/20"
+        border="solid l-2 t-2 b-2 pink-100 dark:[#3c2632]"
+        bg="hover:pink-100 dark:hover:[#3c2632]"
         text="pink-300 hover:pink-500 dark:pink-300/50 dark:hover:pink-500"
         transition="all duration-250 ease-in-out"
         cursor-pointer items-center gap-1 rounded-l-lg px-2
@@ -125,14 +125,14 @@ onAfterSend(async () => {
       </label>
       <label
         :class="[
-          tab === 'custom' ? 'bg-pink-100 dark:bg-pink-400/20' : '',
+          tab === 'custom' ? 'bg-pink-100 dark:bg-[#3c2632]' : 'bg-white dark:bg-[#121212]',
           tab === 'custom' ? 'text-pink-500 dark:text-pink-500' : '',
         ]"
         flex="~ row"
         :checked="tab === 'custom'"
         :aria-checked="tab === 'custom'"
-        border="solid t-2 b-2 pink-100 dark:pink-400/20"
-        bg="hover:pink-100 dark:hover:pink-400/20"
+        border="solid t-2 b-2 pink-100 dark:[#3c2632]"
+        bg="hover:pink-100 dark:hover:[#3c2632]"
         text="pink-300 hover:pink-500 dark:pink-300/50 dark:hover:pink-500"
         transition="all duration-250 ease-in-out"
         cursor-pointer items-center gap-1 px-2
@@ -145,14 +145,14 @@ onAfterSend(async () => {
       </label>
       <label
         :class="[
-          tab === 'clothes' ? 'bg-pink-100 dark:bg-pink-400/20' : '',
+          tab === 'clothes' ? 'bg-pink-100 dark:bg-[#3c2632]' : 'bg-white dark:bg-[#121212]',
           tab === 'clothes' ? 'text-pink-500 dark:text-pink-500' : '',
         ]"
         flex="~ row"
         :checked="tab === 'clothes'"
         :aria-checked="tab === 'clothes'"
-        border="solid r-2 t-2 b-2 pink-100 dark:pink-400/20"
-        bg="hover:pink-100 dark:hover:pink-400/20"
+        border="solid r-2 t-2 b-2 pink-100 dark:[#3c2632]"
+        bg="hover:pink-100 dark:hover:[#3c2632]"
         text="pink-300 hover:pink-500 dark:pink-300/50 dark:hover:pink-500"
         transition="all duration-250 ease-in-out"
         cursor-pointer items-center gap-1 rounded-r-lg px-2
@@ -169,6 +169,7 @@ onAfterSend(async () => {
         flex="~ col"
         border="solid 4 pink-100 dark:pink-400/20"
         h-full w-full overflow-scroll rounded-xl
+        bg="white dark:[#0f060c]"
       >
         <ChatHistory h-full flex-1 p-4 w="full" max-h="<md:[60%]" />
         <div h="<md:full" flex gap-2>

diff --git a/packages/stage/src/components/Layouts/MobileInteractiveArea.vue b/packages/stage/src/components/Layouts/MobileInteractiveArea.vue
@@ -96,8 +96,8 @@ onMounted(() => {
           v-model="messageInput"
           :placeholder="t('stage.message')"
           border="solid 2 pink-100 dark:pink-400/20"
-          text="pink-400 hover:pink-600 dark:pink-400/50 dark:hover:pink-600 placeholder:pink-400 placeholder:hover:pink-600 placeholder:dark:pink-400/50 placeholder:dark:hover:pink-600"
-          bg="pink-50 dark:pink-400/20" max-h="[10lh]" min-h="[1lh]"
+          text="pink-400 hover:pink-600 dark:[#905073] dark:hover:pink-600 placeholder:pink-400 placeholder:hover:pink-600 placeholder:dark:[#905073] placeholder:dark:hover:pink-600"
+          bg="pink-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]"
           w-full resize-none overflow-y-scroll rounded-l-xl p-2 font-medium outline-none
           transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
           @submit="handleSend"
@@ -107,8 +107,8 @@ onMounted(() => {
         <DrawerTrigger
           class="px-4 py-2.5"
           border="solid 2 pink-100 dark:pink-400/20"
-          text="lg pink-400 hover:pink-600 dark:pink-400/50 dark:hover:pink-600 placeholder:pink-400 placeholder:hover:pink-600 placeholder:dark:pink-400/50 placeholder:dark:hover:pink-600"
-          bg="pink-50 dark:pink-400/20" max-h="[10lh]" min-h="[1lh]" rounded-r-xl
+          text="lg pink-400 hover:pink-600 dark:[#905073] dark:hover:pink-600 placeholder:pink-400 placeholder:hover:pink-600 placeholder:dark:[#905073] placeholder:dark:hover:pink-600"
+          bg="pink-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]" rounded-r-xl
         >
           <div i-solar:settings-bold-duotone />
         </DrawerTrigger>

diff --git a/packages/stage/src/components/Widgets/ChatHistory.vue b/packages/stage/src/components/Widgets/ChatHistory.vue
@@ -34,9 +34,7 @@ onTokenLiteral(async () => {
 
 <template>
   <div
-    relative
-    class="<md:(absolute left-0 top-0 from-zinc-100/80 to-zinc-800/0 bg-gradient-to-t p-2 dark:from-zinc-800/80)"
-    px="<sm:2" py="<sm:2" flex="~ col" rounded="lg" overflow-hidden
+    relative px="<sm:2" py="<sm:2" flex="~ col" rounded="lg" overflow-hidden
   >
     <div flex-1 /> <!-- spacer -->
     <div ref="chatHistoryRef" v-auto-animate h-full w-full flex="~ col" overflow-scroll>

diff --git a/packages/stage/src/pages/index.vue b/packages/stage/src/pages/index.vue
@@ -1,24 +1,31 @@
 <script setup lang="ts">
+import { useDark } from '@vueuse/core'
+
+import Cross from '../components/Backgrounds/Cross.vue'
 import AnimatedBackground from '../components/Layouts/AnimatedBackground.vue'
 import Header from '../components/Layouts/Header.vue'
 import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
 import MobileHeader from '../components/Layouts/MobileHeader.vue'
 import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
 import Stage from '../components/Widgets/Stage.vue'
+
+const dark = useDark()
 </script>
 
 <template>
-  <AnimatedBackground h-full w-full>
-    <div relative max-h="[100vh]" max-w="[100vw]" p="2" flex="~ col" z-2 h-full overflow-hidden>
-      <Header class="flex <md:hidden" />
-      <MobileHeader class="hidden <md:block" />
-      <div flex="~ 1 row <md:col" relative h-full w-full items-end gap-2>
-        <Stage h-full w-full flex-1 mb="<md:18" min-w="50%" />
-        <InteractiveArea w-full flex-1 h="full <md:40%" max-w="30% <md:100%" class="flex <md:hidden" />
-        <MobileInteractiveArea class="<md:block md:hidden" absolute bottom-0 w-full />
+  <Cross h-full w-full>
+    <AnimatedBackground h-full w-full :fill-color="dark ? '#563544' : '#f8e8f2'">
+      <div relative max-h="[100vh]" max-w="[100vw]" p="2" flex="~ col" z-2 h-full overflow-hidden>
+        <Header class="flex <md:hidden" />
+        <MobileHeader class="hidden <md:block" />
+        <div flex="~ 1 row <md:col" relative h-full w-full items-end gap-2>
+          <Stage h-full w-full flex-1 mb="<md:18" min-w="50%" />
+          <InteractiveArea w-full flex-1 h="full <md:40%" max-w="30% <md:100%" class="flex <md:hidden" />
+          <MobileInteractiveArea class="<md:block md:hidden" absolute bottom-0 w-full />
+        </div>
       </div>
-    </div>
-  </AnimatedBackground>
+    </AnimatedBackground>
+  </Cross>
 </template>
 
 <route lang="yaml">