Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

🚚 重命名&美化

Browse Source
This commit is contained in:
BTMuli
2023-06-26 14:48:37 +08:00
parent 6b67953cfe
commit ff293d0006
19 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/anno-parser.css
View File

@@ -13,13 +13,13 @@
.anno-title { .anno-title {
font-family: var(--font-title); font-family: var(--font-title);
color: var(--common-text); color: var(--common-text-title);
font-size: 24px; font-size: 24px;
} }
.anno-subtitle { .anno-subtitle {
font-size: 16px; font-size: 16px;
color: var(--common-text-3); color: var(--common-text-quote);
} }
.anno-img { .anno-img {

4
src/assets/css/post-parser.css
View File

@@ -14,13 +14,13 @@
.mys-post-title { .mys-post-title {
font-family: var(--font-title); font-family: var(--font-title);
color: var(--common-text); color: var(--common-text-title);
font-size: 24px; font-size: 24px;
} }
.mys-post-subtitle { .mys-post-subtitle {
font-size: 16px; font-size: 16px;
color: var(--common-text-3); color: var(--common-text-quote);
} }
.mys-post-content { .mys-post-content {

20
src/assets/themes/dark.css
View File

@@ -7,14 +7,20 @@
/* 主题色 */ /* 主题色 */
html.dark { html.dark {
--common-bg: rgb(255 255 255 / 10%); /* box-shadow */
--common-bg-2: rgb(255 255 255 / 20%); --common-shadow-1: rgb(255 255 255 / 10%);
--common-bg-4: rgb(255 255 255 / 40%); --common-shadow-2: rgb(255 255 255 / 20%);
--common-bg-8: rgb(255 255 255 / 80%); --common-shadow-4: rgb(255 255 255 / 40%);
--common-shadow-8: rgb(255 255 255 / 80%);
--common-text: var(--common-color-white); /* title */ /* box bg */
--common-text-2: var(--common-color-white); /* text */ --common-bg-1: #3d424b; /* 一级背景色 */
--common-text-3: var(--common-color-grey); /* quote */ --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
/* text */
--common-text-title: var(--common-color-white); /* title */
--common-text-content: var(--common-color-white); /* text */
--common-text-quote: var(--common-color-grey); /* quote */
--calendar-btn-bg: #1e1e1e; --calendar-btn-bg: #1e1e1e;
--back-top-shadow: #000000; --back-top-shadow: #000000;

19
src/assets/themes/default.css
View File

@@ -7,14 +7,19 @@
/* 主题色 */ /* 主题色 */
html.default { html.default {
--common-bg: rgb(0 0 0 / 10%); /* box-shadow */
--common-bg-2: rgb(0 0 0 / 20%); --common-shadow-1: rgb(0 0 0 / 10%);
--common-bg-4: rgb(0 0 0 / 40%); --common-shadow-2: rgb(0 0 0 / 20%);
--common-bg-8: rgb(0 0 0 / 80%); --common-shadow-4: rgb(0 0 0 / 40%);
--common-shadow-8: rgb(0 0 0 / 80%);
--common-text: var(--common-color-blue); /* title */ /* box bg */
--common-text-2: var(--common-color-blue-2); /* text */ --common-bg-1: #faf7e8; /* 一级背景色 */
--common-text-3: var(--common-color-blue-3); /* quote */ --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
--common-text-title: #393b40; /* title */
--common-text-content: var(--common-color-blue-2); /* text */
--common-text-quote: var(--common-color-blue-3); /* quote */
--calendar-btn-bg: #393b40; --calendar-btn-bg: #393b40;
--back-top-shadow: #546d8b; --back-top-shadow: #546d8b;

2
src/components/main/t-itembox.vue
View File

@@ -188,7 +188,7 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
width: 100%; width: 100%;
height: v-bind(getOuterHeight); height: v-bind(getOuterHeight);
text-align: center; text-align: center;
color: var(--common-text); color: var(--common-text-title);
font-size: v-bind(getOuterFont); font-size: v-bind(getOuterFont);
} }
</style> </style>

25
src/components/main/t-pool.vue
View File

@@ -8,8 +8,9 @@
<v-card v-for="pool in poolCards" :key="pool.post_id" class="pool-card"> <v-card v-for="pool in poolCards" :key="pool.post_id" class="pool-card">
<v-list class="pool-list"> <v-list class="pool-list">
<v-list-item :title="pool.title" :subtitle="pool.subtitle"> <v-list-item :title="pool.title" :subtitle="pool.subtitle">
<!-- todo 点击播放语音 -->
<template #prepend> <template #prepend>
<img :src="pool.voice.icon" class="pool-sideIcon" alt="icon" /> <img :src="pool.voice.icon" class="pool-voice-icon" alt="icon" />
</template> </template>
<template v-if="pool.voice.url" #append> <template v-if="pool.voice.url" #append>
<audio :src="pool.voice.url" controls /> <audio :src="pool.voice.url" controls />
@@ -156,7 +157,7 @@ onMounted(async () => {
loading.value = false; loading.value = false;
}); });
// 检测是否有新的限时祈愿 // 检测新卡池
function checkCover(data: GachaData[]) { function checkCover(data: GachaData[]) {
// 如果没有缓存 // 如果没有缓存
if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) { if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
@@ -220,12 +221,12 @@ onUnmounted(() => {
.pool-box { .pool-box {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
box-shadow: 0 0 10px var(--common-bg-4); box-shadow: 0 0 10px var(--common-shadow-4);
border-radius: 5px; border-radius: 5px;
} }
.pool-title { .pool-title {
color: var(--common-text); color: var(--common-text-title);
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
display: flex; display: flex;
@@ -237,7 +238,7 @@ onUnmounted(() => {
transform: translate(0, 2px); transform: translate(0, 2px);
margin-right: 10px; margin-right: 10px;
border-radius: 50%; border-radius: 50%;
background: var(--common-bg-2); background: var(--common-shadow-2);
} }
.pool-grid { .pool-grid {
@@ -248,27 +249,21 @@ onUnmounted(() => {
} }
.pool-card { .pool-card {
background: #45b787; /* 蛙绿 */ background: var(--common-bg-1);
color: #eef7f2; /* 丹白 */ color: var(--common-bgt-1);
border-radius: 5px; border-radius: 5px;
} }
.dark .pool-card {
background: #1f2623; /* 苷蓝绿 */
}
.pool-list { .pool-list {
font-family: var(--font-title); font-family: var(--font-title);
background: inherit; background: inherit;
color: inherit; color: inherit;
} }
.pool-sideIcon { .pool-voice-icon {
margin-top: 10px;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; transform: translateY(-5px);
background: var(--common-bg-2);
} }
.pool-cover { .pool-cover {

12
src/components/main/t-position.vue
View File

@@ -140,12 +140,12 @@ onUnmounted(() => {
.position-box { .position-box {
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
box-shadow: 0 0 10px var(--common-bg-4); box-shadow: 0 0 10px var(--common-shadow-4);
border-radius: 5px; border-radius: 5px;
} }
.position-title { .position-title {
color: var(--common-text); color: var(--common-text-title);
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
display: flex; display: flex;
@@ -167,15 +167,11 @@ onUnmounted(() => {
} }
.position-card { .position-card {
background: #45b787; /* 蛙绿 */ background: var(--common-bg-1);
color: #eef7f2; /* 月白 */ color: var(--common-bgt-1);
border-radius: 5px; border-radius: 5px;
} }
.dark .position-card {
background: #1f2623; /* 苷蓝绿 */
}
.position-list { .position-list {
font-family: var(--font-title); font-family: var(--font-title);
background: inherit; background: inherit;

2
src/components/main/t-subline.vue
View File

@@ -15,7 +15,7 @@ defineProps({
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.tsl-box { .tsl-box {
background: var(--common-bg-2); background: var(--common-shadow-2);
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 30px;

2
src/components/userAbyss/tua-detail-battle.vue
View File

@@ -31,6 +31,6 @@ const props = defineProps<TuaDetailBattleProps>();
width: 100%; width: 100%;
text-align: left; text-align: left;
font-size: 12px; font-size: 12px;
color: var(--common-text-3); color: var(--common-text-quote);
} }
</style> </style>

2
src/components/userAbyss/tua-detail-level.vue
View File

@@ -20,6 +20,6 @@ const props = defineProps<TuaDetailLevelProps>();
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: var(--common-text-2); background: var(--common-text-content);
} }
</style> </style>

2
src/components/userAbyss/tua-detail-title.vue
View File

@@ -46,7 +46,7 @@ const getFontSize: ComputedRef<string> = computed(() => {
.tud-t-title { .tud-t-title {
font-size: v-bind(getFontSize); font-size: v-bind(getFontSize);
color: var(--common-text-2); color: var(--common-text-content);
} }
.tud-t-val { .tud-t-val {

2
src/components/userAbyss/tua-detail.vue
View File

@@ -29,7 +29,7 @@ const props = defineProps<TuaDetailProps>();
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 5px; border-radius: 5px;
background: var(--common-bg); background: var(--common-shadow-1);
padding: 10px; padding: 10px;
} }

4
src/components/userAbyss/tua-overview.vue
View File

@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
height: auto; height: auto;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background: var(--common-bg); background: var(--common-shadow-1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
.tuao-title { .tuao-title {
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
color: var(--common-text-2); color: var(--common-text-content);
} }
.tuao-val-text { .tuao-val-text {

4
src/components/userCharacter/tuc-role-box.vue
View File

@@ -92,7 +92,7 @@ function getAvatarName() {
<style lang="css" scoped> <style lang="css" scoped>
.tuc-rb-box { .tuc-rb-box {
padding: 5px; padding: 5px;
border: 1px inset var(--common-bg-4); border: 1px inset var(--common-shadow-4);
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@@ -139,7 +139,7 @@ function getAvatarName() {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--common-bg-4); background: var(--common-shadow-4);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
display: flex; display: flex;
justify-content: center; justify-content: center;

4
src/components/userRecord/tur-overview-sub.vue
View File

@@ -26,7 +26,7 @@ defineProps<TAOProps>();
height: auto; height: auto;
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
background: var(--common-bg); background: var(--common-shadow-1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -36,7 +36,7 @@ defineProps<TAOProps>();
.tur-os-title { .tur-os-title {
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
color: var(--common-text-2); color: var(--common-text-content);
} }
.tur-os-text { .tur-os-text {

6
src/components/userRecord/tur-world-sub.vue
View File

@@ -87,7 +87,7 @@ async function listenOnTheme() {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: var(--common-bg); background: var(--common-shadow-1);
} }
.tur-ws-icon { .tur-ws-icon {
@@ -102,7 +102,7 @@ async function listenOnTheme() {
} }
.tur-ws-content { .tur-ws-content {
color: var(--common-text-2); color: var(--common-text-content);
width: calc(100% - 60px); width: calc(100% - 60px);
height: 100%; height: 100%;
} }
@@ -110,7 +110,7 @@ async function listenOnTheme() {
.tur-ws-title { .tur-ws-title {
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
border-bottom: 1px inset var(--common-text-2); border-bottom: 1px inset var(--common-text-content);
} }
.tur-ws-sub { .tur-ws-sub {

14
src/pages/User/Abyss.vue
View File

@@ -142,7 +142,7 @@ async function shareAbyss(): Promise<void> {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.ua-box { .ua-box {
box-shadow: 0 0 10px 0 var(--common-bg-4); box-shadow: 0 0 10px 0 var(--common-shadow-4);
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
@@ -152,7 +152,7 @@ async function shareAbyss(): Promise<void> {
.ua-tab { .ua-tab {
font-family: var(--font-text); font-family: var(--font-text);
color: var(--common-text); color: var(--common-text-title);
width: 100px; width: 100px;
height: 100%; height: 100%;
} }
@@ -166,7 +166,7 @@ async function shareAbyss(): Promise<void> {
.ua-btn { .ua-btn {
margin-top: 15px; margin-top: 15px;
background: var(--common-bg-2); background: var(--common-shadow-2);
color: var(--common-color-white); color: var(--common-color-white);
} }
@@ -181,13 +181,13 @@ async function shareAbyss(): Promise<void> {
padding: 10px; padding: 10px;
overflow-y: auto; overflow-y: auto;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px var(--common-bg-2); box-shadow: 0 0 10px var(--common-shadow-2);
} }
.uaw-title { .uaw-title {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--common-text); color: var(--common-text-title);
font-size: 20px; font-size: 20px;
font-family: var(--font-title); font-family: var(--font-title);
} }
@@ -222,7 +222,7 @@ async function shareAbyss(): Promise<void> {
position: absolute; position: absolute;
top: calc(50vh - 200px); top: calc(50vh - 200px);
left: calc(50vw - 400px); left: calc(50vw - 400px);
background: var(--common-bg-2); background: var(--common-shadow-2);
border-radius: 5px; border-radius: 5px;
width: 800px; width: 800px;
height: 400px; height: 400px;
@@ -230,7 +230,7 @@ async function shareAbyss(): Promise<void> {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 1.5rem; font-size: 1.5rem;
color: var(--common-text); color: var(--common-text-title);
font-family: var(--font-title); font-family: var(--font-title);
} }
</style> </style>

6
src/pages/User/Characters.vue
View File

@@ -124,7 +124,7 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
box-shadow: 0 0 10px var(--common-bg-4); box-shadow: 0 0 10px var(--common-shadow-4);
} }
.uc-top { .uc-top {
@@ -140,13 +140,13 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
margin-right: 10px; margin-right: 10px;
color: var(--common-text); color: var(--common-text-title);
} }
.uc-top-btn { .uc-top-btn {
font-family: var(--font-text); font-family: var(--font-text);
border-radius: 5px; border-radius: 5px;
background: var(--common-bg-2); background: var(--common-shadow-2);
color: var(--common-color-white); color: var(--common-color-white);
margin-left: 15px; margin-left: 15px;
} }

6
src/pages/User/Record.vue
View File

@@ -117,7 +117,7 @@ function getTheme() {
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
box-shadow: 0 0 10px var(--common-bg-4); box-shadow: 0 0 10px var(--common-shadow-4);
} }
.ur-top { .ur-top {
@@ -133,13 +133,13 @@ function getTheme() {
font-family: var(--font-title); font-family: var(--font-title);
font-size: 20px; font-size: 20px;
margin-right: 10px; margin-right: 10px;
color: var(--common-text); color: var(--common-text-title);
} }
.ur-top-btn { .ur-top-btn {
font-family: var(--font-text); font-family: var(--font-text);
border-radius: 5px; border-radius: 5px;
background: var(--common-bg-2); background: var(--common-shadow-2);
color: var(--common-color-white); color: var(--common-color-white);
margin-left: 15px; margin-left: 15px;
} }