feat: better background
This commit is contained in:
Neko Ayaka
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user