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

♻️ 完善 box-bg 层级，减少 border

Browse Source
This commit is contained in:
BTMuli
2023-09-02 22:42:08 +08:00
parent 95eca77d0a
commit 4debd354a7
19 changed files with 60 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,16 +8,16 @@
/* dark mode */
html.dark {
/* app container */
--app-page-bg: var(--tgc-dark-8);
--app-page-content: var(--tgc-white-3);
--app-side-bg: var(--tgc-dark-3);
--app-side-content: var(--tgc-white-4);
--app-page-bg: #000000; /* (0, 0, 0) */
--app-page-content: #d0d0d0;
--app-side-bg: #151c26;
--app-side-content: #dddddd;
/* content */
--box-bg-1: var(--tgc-dark-4);
--box-bg-2: var(--tgc-dark-6);
--box-bg-3: var(--tgc-dark-7);
--box-bg-4: var(--tgc-dark-7);
/* box container */
--box-bg-1: #21252b;
--box-bg-2: #323844;
--box-bg-3: #282c34;
--box-bg-4: #3d424b;
/* box bg transparent */
--box-bg-t-1: var(--tgc-white-3);

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

@@ -8,17 +8,16 @@
/* default(light) theme */
html.default {
/* app container */
--app-page-bg: var(--tgc-white-1);
--app-page-content: var(--tgc-dark-7);
--app-side-bg: var(--tgc-white-5);
--app-side-content: var(--tgc-dark-8);
--app-page-bg: #ffffff;
--app-page-content: #2f2f2f;
--app-side-bg: #f2f2f2;
--app-side-content: #222222;
/* box container */
/* page-bg > box-bg-1 > box-bg-2 */
--box-bg-1: var(--tgc-white-3); /* with box-text-1 */
--box-bg-2: var(--tgc-white-4);
--box-bg-3: var(--tgc-white-9);
--box-bg-4: var(--tgc-white-1);
--box-bg-1: #efefef;
--box-bg-2: #f6f8fa;
--box-bg-3: #dee4e9;
--box-bg-4: #f5f5f5;
/* box bg transparent */
--box-bg-t-1: var(--tgc-dark-5);

3
src/components/gachaRecord/gro-dataview.vue
View File

@@ -189,7 +189,7 @@ function getIcon(itemId: string, type: string): string {
// 监听数据变化
watch(
() => props.dataVal,
(newVal) => {
() => {
star5List.value = [];
star4List.value = [];
reset5count.value = 0;
@@ -207,7 +207,6 @@ watch(
.gro-dv-container {
height: 100%;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-2);
}

1
src/components/home/t-calendar.vue
View File

@@ -183,7 +183,6 @@ async function share(): Promise<void> {
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-1);
gap: 5px;

1
src/components/home/t-pool.vue
View File

@@ -200,7 +200,6 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-1);
gap: 10px;

1
src/components/home/t-position.vue
View File

@@ -129,7 +129,6 @@ onUnmounted(() => {
<style lang="css" scoped>
.position-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-1);
}

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

@@ -1,6 +1,6 @@
<template>
<div class="tsl-box">
<img src="/src/assets/icons/arrow-right.svg" alt="right" class="tsl-icon" />
<img src="/src/assets/icons/arrow-right.svg" alt="right" />
<slot>
{{ props.title }}
</slot>
@@ -16,9 +16,9 @@ const props = defineProps<{
display: flex;
align-items: center;
padding: 5px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin: 5px 0;
background: var(--box-bg-3);
color: var(--box-text-4);
font-family: var(--font-title);
gap: 5px;
@@ -27,8 +27,12 @@ const props = defineProps<{
.tsl-box img {
width: 20px;
height: 20px;
padding: 5px;
padding: 2px;
border-radius: 5px;
background: var(--common-shadow-4);
}
.dark .tsl-box {
background: #2c313a;
color: #faf7e8;
}
</style>

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

@@ -25,7 +25,6 @@ const props = defineProps<TuaDetailLevelProps>();
display: flex;
flex-direction: column;
padding: 10px;
border: 1px inset var(--common-shadow-2);
border-radius: 5px;
margin-top: 10px;
background: var(--box-bg-2);

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

@@ -27,7 +27,6 @@ const props = defineProps<TuaDetailProps>();
<style lang="css" scoped>
.tuad-box {
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-1);
}

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

@@ -45,9 +45,8 @@ const getIconNum = computed(() => (props.multi4 ? 4 : 1));
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-2);
background: var(--box-bg-1);
}
.tuao-title {

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

@@ -128,7 +128,7 @@ onUnmounted(() => {
display: flex;
flex-direction: column;
padding: 5px;
border: 1px inset var(--common-shadow-4);
border: 1px inset var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-2);
cursor: pointer;
@@ -150,8 +150,8 @@ onUnmounted(() => {
align-items: center;
justify-content: space-between;
padding: 5px;
border: 1px solid var(--common-shadow-4);
border-radius: 5px;
background: var(--box-bg-3);
font-family: var(--font-title);
font-size: 12px;
}
@@ -236,7 +236,7 @@ onUnmounted(() => {
border: 1px solid var(--tgc-white-8);
border-radius: 50%;
background: var(--tgc-dark-7);
opacity: 0.5;
opacity: 0.8;
}
.tuc-rbb-talent :nth-child(2) {

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

@@ -29,7 +29,6 @@ defineProps<TAOProps>();
align-items: center;
justify-content: center;
padding: 5px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-2);
}

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

@@ -86,7 +86,6 @@ async function listenOnTheme(): Promise<void> {
align-items: center;
justify-content: center;
padding: 10px;
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-2);
}

3
src/pages/User/Gacha.vue
View File

@@ -300,7 +300,6 @@ watch(uidCur, async (newUid) => {
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-bottom: 10px;
background: var(--box-bg-1);
@@ -333,7 +332,7 @@ watch(uidCur, async (newUid) => {
height: calc(100vh - 130px);
align-items: center;
justify-content: left;
border: 1px solid var(--common-shadow-2);
border: 1px solid var(--common-shadow-1);
border-radius: 5px;
background: var(--box-bg-1);
}

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

@@ -118,7 +118,6 @@ async function shareRecord(): Promise<void> {
width: 100%;
flex-direction: column;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
background: var(--box-bg-1);
row-gap: 5px;

20
src/pages/common/Achievements.vue
View File

@@ -338,7 +338,6 @@ function getIcon(series: number): string | undefined {
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid var(--common-shadow-2);
border-radius: 5px;
margin-bottom: 10px;
background: var(--box-bg-1);
@@ -394,10 +393,10 @@ function getIcon(series: number): string | undefined {
right: 0;
bottom: 0;
width: 80px;
border-radius: 10px 0 0;
border-top: 1px inset var(--common-shadow-4);
border-left: 1px inset var(--common-shadow-4);
background: var(--box-bg-4);
border-top: 1px solid var(--common-shadow-1);
border-left: 1px solid var(--common-shadow-1);
background: var(--box-bg-2);
border-top-left-radius: 20px;
color: var(--tgc-yellow-1);
font-family: var(--font-title);
font-size: 10px;
@@ -405,7 +404,6 @@ function getIcon(series: number): string | undefined {
}
.version-icon-single {
border-radius: 5px;
color: var(--tgc-pink-1);
font-family: var(--font-title);
font-size: 10px;
@@ -413,7 +411,6 @@ function getIcon(series: number): string | undefined {
}
.card-left {
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
margin-right: 10px;
margin-bottom: 10px;
@@ -424,10 +421,9 @@ function getIcon(series: number): string | undefined {
/* 成就卡片 */
.card-right {
border: 1px solid var(--common-shadow-2);
border-radius: 10px;
margin: 10px;
background: var(--box-bg-2);
background: var(--box-bg-1);
color: var(--box-text-7);
}
@@ -437,9 +433,9 @@ function getIcon(series: number): string | undefined {
top: 0;
left: 0;
width: 65px;
border-right: 1px solid var(--common-shadow-4);
border-bottom: 1px solid var(--common-shadow-4);
background: var(--box-bg-1);
border-right: 1px solid var(--common-shadow-1);
border-bottom: 1px solid var(--common-shadow-1);
background: var(--box-bg-2);
border-bottom-right-radius: 20px;
color: var(--box-text-3);
font-family: var(--font-title);

37
src/pages/common/Config.vue
View File

@@ -18,8 +18,8 @@
<v-list-item-title>
应用版本
<v-btn
class="card-btn"
size="small"
variant="outlined"
@click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
>
BETA
@@ -48,15 +48,10 @@
<img class="config-icon" :src="userInfo.avatar" alt="Login" />
</template>
<template #append>
<v-btn class="card-btn" @click="confirmRefreshUser">
<template #prepend>
<img src="../../assets/icons/circle-check.svg" alt="check" />
刷新数据
</template>
</v-btn>
<v-btn class="config-btn" @click="confirmRefreshUser"> 刷新数据 </v-btn>
</template>
</v-list-item>
<v-list-subheader :inset="true" class="config-header"> 系统信息</v-list-subheader>
<v-list-subheader :inset="true" class="config-header">系统信息</v-list-subheader>
<v-divider :inset="true" class="border-opacity-75" />
<v-list-item title="系统平台">
<template #prepend>
@@ -110,12 +105,7 @@
:chips="true"
/>
<template #append>
<v-btn class="card-btn" @click="submitHome">
<template #prepend>
<img src="../../assets/icons/circle-check.svg" alt="check" />
确定
</template>
</v-btn>
<v-btn class="config-btn" @click="submitHome"> 确定 </v-btn>
</template>
</v-list-item>
<v-list-item prepend-icon="mdi-content-save" title="数据备份" @click="confirmBackup" />
@@ -673,15 +663,14 @@ function submitHome(): void {
.config-list {
border-radius: 10px;
margin: 10px;
background: var(--content-bg-2);
color: var(--content-text-3);
font-family: Genshin-Light, serif;
background: var(--box-bg-1);
color: var(--box-text-4);
font-family: var(--font-text);
}
.config-header {
margin-top: 10px;
background: var(--content-bg-2);
color: #fec90b;
color: var(--common-text-title);
font-family: Genshin, serif;
font-size: large;
}
@@ -690,8 +679,16 @@ function submitHome(): void {
width: 40px;
height: 40px;
padding: 5px;
border: 1px solid var(--common-shadow-1);
border-radius: 10px;
margin-right: 15px;
background: var(--content-bg-3);
background: var(--box-bg-2);
}
.config-btn {
width: 100px;
margin-left: 100px;
background: var(--tgc-btn-1);
color: var(--btn-text);
}
</style>

6
src/plugins/Mys/utils/parsePost.ts
View File

@@ -2,7 +2,7 @@
* @file plugins Mys utils parsePost.ts
* @description 用于解析Mys数据的工具
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.1
* @since Beta v0.3.0
*/
/**
@@ -189,7 +189,7 @@ function parseUnknown(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivEl
/**
* @description 解析文本
* @since Alpha v0.1.3
* @since Beta v0.3.0
* @param {TGApp.Plugins.Mys.Post.StructuredContent} data Mys数据
* @returns {HTMLSpanElement} 解析后的文本
*/
@@ -206,7 +206,7 @@ function parseText(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLSpanElem
if (data.attributes.color) {
let colorGet = data.attributes.color;
// 如果 colorGet 在 darkColorList 中，就设置为对应的颜色
if (isColorSimilar("#ece5d8", colorGet) || isColorSimilar("#2a2a2a", colorGet)) {
if (isColorSimilar("#ffffff", colorGet) || isColorSimilar("#000000", colorGet)) {
colorGet = "var(--post-default-text)";
}
text.style.color = colorGet;

2
src/utils/TGShare.ts
View File

@@ -68,7 +68,7 @@ function getShareImgBgColor(): string {
theme = JSON.parse(theme).theme;
}
if (theme === "dark") {
return "#0d1117";
return "#000000";
} else {
return "#ffffff";
}