nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

style(stage-web): updated design

Browse Source 
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
This commit is contained in:
Neko Ayaka
2025-03-07 11:01:00 +08:00
parent ba68f376a9
commit 687f7f4a3b
4 changed files with 38 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-web/src/App.vue
+3 -1
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { useSettings } from '@proj-airi/stage-ui/stores/settings'
import { StageTransitionGroup } from '@proj-airi/ui-transitions'
import { useDark } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -8,6 +9,7 @@ import { RouterView } from 'vue-router'
const i18n = useI18n()
const settings = storeToRefs(useSettings())
const isDark = useDark()
watch(settings.language, () => {
i18n.locale.value = settings.language.value
@@ -19,7 +21,7 @@ watch(settings.language, () => {
primary-color="#FF57C8"
secondary-color="#946BFF"
tertiary-color="#121212"
:colors="['#FF57C8', '#946BFF', '#64BCFF', '#121212']"
:colors="!isDark ? ['#FF57C8', '#946BFF', '#64BCFF', '#FFFFFF'] : ['#FF57C8', '#946BFF', '#64BCFF', '#121212']"
:z-index="100"
>
<RouterView />
apps/stage-web/src/components/Menu/IconItem.vue
+13 -13
View File
@@ -10,32 +10,32 @@ defineProps<{
<template>
<RouterLink
flex="~ row" bg="neutral-100 dark:neutral-800" hover="bg-neutral-200 dark:bg-neutral-700"
class="[&_.settings-section-icon]:hover:scale-120" transition="all ease-in-out duration-200" relative w-full
items-center overflow-hidden rounded-lg p-5 text-left
flex="~ row" bg="white dark:neutral-800"
border="neutral-100 dark:neutral-700 hover:pink-300 dark:hover:pink-200/40 solid 2"
drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
class="[&_.settings-section-icon]:hover:scale-120 [&_.settings-section-description]:hover:text-pink-400/80 [&_.settings-section-icon]:hover:text-pink-200 [&_.settings-section-title]:hover:text-pink-500 dark:[&_.settings-section-icon]:hover:text-pink-200/40 dark:[&_.settings-section-title]:hover:text-pink-400"
transition="all ease-in-out duration-200" relative w-full items-center overflow-hidden rounded-lg p-5 text-left
:to="to"
>
<div z-1 flex-1>
<div text-lg font-bold>
<div text-lg font-bold class="settings-section-title" transition="all ease-in-out duration-200">
{{ title }}
</div>
<div text="sm neutral-500 dark:neutral-400">
<div
text="sm neutral-500 dark:neutral-400" class="settings-section-description"
transition="all ease-in-out duration-200"
>
<span>{{ description }}</span>
</div>
</div>
<template v-if="typeof icon === 'string'">
<div
class="settings-section-icon"
transition="all ease-in-out duration-500"
absolute right-0 size-24 translate-y-4
text="neutral-400/50 dark:neutral-600/50"
:class="[icon]"
class="settings-section-icon" transition="all ease-in-out duration-500" absolute right-0 size-24
translate-y-4 text="neutral-400/50 dark:neutral-600/50" :class="[icon]"
/>
</template>
<template v-if="iconTemplate">
<slot
name="icon"
/>
<slot name="icon" />
</template>
</RouterLink>
</template>
apps/stage-web/src/pages/settings/modules/index.vue
+21 -29
View File
@@ -109,37 +109,29 @@ const modulesList = computed<Module[]>(() => [
</div>
<div grid="~ cols-1 gap-2">
<div
v-for="module in modulesList" :key="module.id"
bg="neutral-300/50 dark:neutral-600" w-full of-hidden rounded-xl
v-for="module in modulesList" :key="module.id" bg="neutral-300/50 dark:neutral-600" w-full of-hidden rounded-xl
flex="~ col 1"
>
<template v-if="typeof module.icon === 'string' && module.id !== 'game-minecraft'">
<IconItem :title="module.name" :description="module.description" :icon="module.icon" :to="module.to" />
</template>
<template v-else-if="typeof module.icon === 'string' && module.id === 'game-minecraft'">
<IconItem :title="module.name" :description="module.description" icon-template :to="module.to">
<template #icon>
<div
class="settings-section-icon op-30 grayscale-100 filter hover:grayscale-0"
transition="all ease-in-out duration-500"
absolute right-0 size-24 translate-y-4
:class="module.icon"
/>
</template>
</IconItem>
</template>
<template v-else-if="typeof module.icon === 'object'">
<IconItem :title="module.name" :description="module.description" icon-template :to="module.to">
<template #icon>
<img
:src="module.icon.imagePath"
class="settings-section-icon op-30 grayscale-100 filter hover:grayscale-0"
transition="all ease-in-out duration-500"
absolute right-0 size-24 translate-y-4
>
</template>
</IconItem>
</template>
<RouterLink
:to="module.to" bg="neutral-100 dark:neutral-800" hover="bg-neutral-200 dark:bg-neutral-700"
transition="all ease-in-out duration-250" h-full w-full flex items-center gap-1.5 rounded-lg px-4 py-5
outline-none class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
>
<div flex="~ col 1" gap-1.5>
<div
v-if="typeof module.icon === 'string'" :class="module.icon" class="provider-icon size-10"
transition="filter duration-250 ease-in-out"
/>
<img
v-else
:src="module.icon.imagePath" class="settings-section-icon op-30 grayscale-100 filter hover:grayscale-0"
transition="all ease-in-out duration-500" absolute right-0 size-24 translate-y-4
>
<div>
{{ module.name }}
</div>
</div>
</RouterLink>
<div p-2>
<div v-if="module.configured" size-3 bg="green-500 dark:green-600" rounded-full />
<div v-else size-3 bg="neutral-400 dark:neutral-500" rounded-full />