style: updated colors

Co-authored-by: Rizumu Ayaka <19204772+LittleSound@users.noreply.github.com>
This commit is contained in:
Neko Ayaka
2025-02-19 01:24:40 +08:00
co-authored by Rizumu Ayaka
parent 1f79a42da7
commit 9b3025d7e8
@@ -70,55 +70,59 @@ onMounted(async () => {
</script>
<template>
<div>
<h2 text="slate-800/80 dark:slate-200/80 xl" font-bold>
<div text="zinc-500 dark:zinc-400">
<h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
{{ t('settings.title') }}
</h2>
<div>
<div
grid="~ cols-[150px_1fr]" my-2 items-center gap-1.5 rounded-lg
bg="[#fff6fc] dark:[#2c2529]" px-2 py-1 text="pink-400"
bg="zinc-100 dark:zinc-800" px-2 py-1
>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>{{ t('settings.openai-base-url.label') }}</span>
</div>
<div flex="~ row" w-full text="sm">
<input
v-model="settings.openAiApiBaseURL"
text="zinc-800 dark:zinc-100"
type="text"
:placeholder="t('settings.openai-base-url.placeholder_mobile')"
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
>
</div>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>{{ t('settings.openai-api-key.label') }}</span>
</div>
<div flex="~ row" w-full text="sm">
<input
v-model="settings.openAiApiKey"
text="zinc-800 dark:zinc-100"
type="text"
:placeholder="t('settings.openai-api-key.placeholder_mobile')"
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
>
</div>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>{{ t('settings.elevenlabs-api-key.label') }}</span>
</div>
<div flex="~ row" w-full text="sm">
<input
v-model="settings.elevenLabsApiKey"
text="zinc-800 dark:zinc-100"
type="text"
:placeholder="t('settings.elevenlabs-api-key.placeholder_mobile')"
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
>
</div>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>{{ t('settings.language.title') }}</span>
</div>
<div flex="~ row" w-full text="sm">
<select
v-model="settings.language"
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
text="zinc-800 dark:zinc-100"
>
<option value="en-US">
{{ t('settings.language.english') }}
@@ -128,12 +132,13 @@ onMounted(async () => {
</option>
</select>
</div>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>{{ t('settings.models') }}</span>
</div>
<div flex="~ row" w-full text="sm">
<select
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
text="zinc-800 dark:zinc-100"
@change="handleModelChange"
>
<option disabled class="bg-white dark:bg-zinc-800">
@@ -147,12 +152,13 @@ onMounted(async () => {
</option>
</select>
</div>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>{{ t('settings.voices') }}</span>
</div>
<div flex="~ row" w-full text="sm">
<select
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
text="zinc-800 dark:zinc-100"
@change="handleVoiceChange"
>
<option disabled class="bg-white dark:bg-zinc-800">
@@ -175,19 +181,20 @@ onMounted(async () => {
</div>
</div>
</div>
<h2 text="slate-800/80 dark:slate-200/80 xl" font-bold>
<h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
View
</h2>
<div>
<div
grid="~ cols-[140px_1fr]" my-2 items-center gap-1.5 rounded-lg
bg="[#fff6fc] dark:[#2c2529]" px-2 py-1 text="pink-400"
bg="zinc-100 dark:zinc-800" px-2 py-1
>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>Viewer</span>
</div>
<select
h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
text="zinc-800 dark:zinc-100"
@change="handleViewChange"
>
<option value="2d">
@@ -197,12 +204,13 @@ onMounted(async () => {
3D
</option>
</select>
<div text="sm pink-500" pl-1>
<div text="sm" pl-1>
<span>Theme</span>
</div>
<label h-8 flex cursor-pointer items-center justify-end>
<input
v-model="dark"
text="zinc-800 dark:zinc-100"
:checked="dark"
:aria-checked="dark"
name="stageView"
@@ -211,8 +219,8 @@ onMounted(async () => {
>
<div select-none>
<Transition name="slide-away" mode="out-in">
<div v-if="dark" i-solar:sun-fog-bold-duotone text="lg hover:pink-600 dark:hover:pink-300" transition="all ease-in-out duration-250" />
<div v-else i-solar:moon-stars-bold-duotone text="lg hover:pink-600 dark:hover:pink-300" transition="all ease-in-out duration-250" />
<div v-if="dark" i-solar:sun-fog-bold-duotone transition="all ease-in-out duration-250" />
<div v-else i-solar:moon-stars-bold-duotone transition="all ease-in-out duration-250" />
</Transition>
</div>
</label>