Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-19 04:29:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 颜色统一为hexa

Browse Source
This commit is contained in:
BTMuli
2025-05-29 14:16:36 +08:00
parent a8d9808deb
commit 36f2adf3f7
19 changed files with 103 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/fonts/index.css → src/assets/fonts/index.scss
View File

@@ -1,8 +1,7 @@
/*
* @file assets fonts index.css
* @file assets/fonts/index.scss
* @description 字体样式文件
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.0
* @since v0.2.0-Alpha
*/
@font-face {

54
src/assets/index.scss
View File

@@ -4,9 +4,9 @@
* @since Beta v0.7.2
*/
@import "fonts/index.css";
@import "themes/default.css";
@import "themes/dark.css";
@import "fonts/index.scss";
@import "themes/default.scss";
@import "themes/dark.scss";
:root {
/* font */
@@ -14,36 +14,36 @@
--font-title: "JetBrians mono Bold", "Genshin", serif;
/* color white */
--tgc-white-1: #ffffff; /* normal white */
--tgc-white-2: #f0f1f6; /* Github mobile bg */
--tgc-white-3: #f6f8fa; /* Github web bg */
--tgc-white-4: #faf7e8; /* Genshin text */
--tgc-white-5: #ece5d8; /* Genshin text */
--tgc-white-1: #ffffffff; /* normal white */
--tgc-white-2: #f0f1f6ff; /* Github mobile bg */
--tgc-white-3: #f6f8faff; /* Github web bg */
--tgc-white-4: #faf7e8ff; /* Genshin text */
--tgc-white-5: #ece5d8ff; /* Genshin text */
/* color dark */
--tgc-dark-1: #000000; /* normal dark */
--tgc-dark-2: #202020; /* Tauri app nav */
--tgc-dark-5: #161b22; /* Github web list nav */
--tgc-dark-7: #393b40; /* Genshin btn bg */
--tgc-dark-8: #121212; /* Github web bg */
--tgc-dark-1: #000000ff; /* normal dark */
--tgc-dark-2: #202020ff; /* Tauri app nav */
--tgc-dark-5: #161b22ff; /* Github web list nav */
--tgc-dark-7: #393b40ff; /* Genshin btn bg */
--tgc-dark-8: #121212ff; /* Github web bg */
/* color other */
--tgc-blue-1: #3572a5; /* Github web lang bar */
--tgc-blue-2: #00aeec; /* Bilibili btn bg */
--tgc-blue-3: #4b5466; /* Genshin icon bg */
--tgc-pink-1: #fb7299; /* Bilibili btn bg */
--tgc-red-1: #e06c63; /* Mys bbs color */
--tgc-yellow-1: #ffcd0c; /* Genshin btn bg */
--tgc-yellow-2: #f4d8a8; /* Genshin confirm text */
--tgc-yellow-3: #e0c06b; /* Genshin btn border */
--tgc-blue-1: #3572a5ff; /* Github web lang bar */
--tgc-blue-2: #00aeecff; /* Bilibili btn bg */
--tgc-blue-3: #4b5466ff; /* Genshin icon bg */
--tgc-pink-1: #fb7299ff; /* Bilibili btn bg */
--tgc-red-1: #e06c63ff; /* Mys bbs color */
--tgc-yellow-1: #ffcd0cff; /* Genshin btn bg */
--tgc-yellow-2: #f4d8a8ff; /* Genshin confirm text */
--tgc-yellow-3: #e0c06bff; /* Genshin btn border */
/* color one-dark */
--tgc-od-blue: #61afef; /* one-dark blue */
--tgc-od-green: #98c379; /* one-dark green */
--tgc-od-orange: #d19a66; /* one-dark orange */
--tgc-od-white: #abb2bf; /* one-dark white */
--tgc-od-red: #e06c75; /* one-dark red */
--tgc-od-purple: #c678dd; /* one-dark purple */
--tgc-od-blue: #61afefff; /* one-dark blue */
--tgc-od-green: #98c379ff; /* one-dark green */
--tgc-od-orange: #d19a66ff; /* one-dark orange */
--tgc-od-white: #abb2bfff; /* one-dark white */
--tgc-od-red: #e06c75ff; /* one-dark red */
--tgc-od-purple: #c678ddff; /* one-dark purple */
/* some css same in dark and default theme */
--tgc-btn-1: var(--tgc-dark-7); /* button bg */

32
src/assets/themes/dark.css → src/assets/themes/dark.scss
View File

@@ -7,16 +7,16 @@
/* dark mode */
html.dark {
/* app container */
--app-page-bg: #1e1e1e; /* (0, 0, 0) */
--app-page-content: #d0d0d0;
--app-side-bg: #151c26;
--app-side-content: #dddddd;
--app-page-bg: #1e1e1eff; /* (0, 0, 0) */
--app-page-content: #d0d0d0ff;
--app-side-bg: #151c26ff;
--app-side-content: #ddddddff;
/* box container */
--box-bg-1: #21252b;
--box-bg-2: #323844;
--box-bg-3: #282c34;
--box-bg-4: #3d424b;
--box-bg-1: #21252bff;
--box-bg-2: #323844ff;
--box-bg-3: #282c34ff;
--box-bg-4: #3d424bff;
--box-bg-blue: var(--tgc-blue-1);
@@ -35,16 +35,16 @@ html.dark {
--btn-text: var(--tgc-yellow-1);
/* box-shadow */
--common-shadow-1: rgb(255 255 255 / 10%);
--common-shadow-2: rgb(255 255 255 / 20%);
--common-shadow-4: rgb(255 255 255 / 40%);
--common-shadow-8: rgb(255 255 255 / 80%);
--common-shadow-1: #FFFFFF1A;
--common-shadow-2: #FFFFFF33;
--common-shadow-4: #FFFFFF66;
--common-shadow-8: #FFFFFFCC;
/* box-shadow-transparent */
--common-shadow-t-1: rgb(0 0 0 / 10%);
--common-shadow-t-2: rgb(0 0 0 / 20%);
--common-shadow-t-4: rgb(0 0 0 / 40%);
--common-shadow-t-8: rgb(0 0 0 / 80%);
--common-shadow-t-1: #0000001a;
--common-shadow-t-2: #00000033;
--common-shadow-t-4: #00000066;
--common-shadow-t-8: #000000cc;
/* text */
--common-text-title: var(--tgc-yellow-2); /* title，米色 */

34
src/assets/themes/default.css → src/assets/themes/default.scss
View File

@@ -7,18 +7,18 @@
/* default(light) theme */
html.default {
/* app container */
--app-page-bg: #ffffff;
--app-page-content: #2f2f2f;
--app-side-bg: #f2f2f2;
--app-side-content: #222222;
--app-page-bg: #ffffffff;
--app-page-content: #2f2f2fff;
--app-side-bg: #f2f2f2ff;
--app-side-content: #222222ff;
/* box container */
--box-bg-1: #f9f6f2;
--box-bg-2: #f2f9f6;
--box-bg-3: #dee4e9;
--box-bg-4: #f5f5f5;
--box-bg-1: #f9f6f2ff;
--box-bg-2: #f2f9f6ff;
--box-bg-3: #dee4e9ff;
--box-bg-4: #f5f5f5ff;
--box-bg-blue: #249ffd;
--box-bg-blue: #249ffdff;
/* box bg transparent */
--box-bg-t-1: var(--tgc-dark-5);
@@ -35,16 +35,16 @@ html.default {
--btn-text: var(--tgc-yellow-2); /* with tgc-btn-1 */
/* box-shadow */
--common-shadow-1: rgb(0 0 0 / 10%);
--common-shadow-2: rgb(0 0 0 / 20%);
--common-shadow-4: rgb(0 0 0 / 40%);
--common-shadow-8: rgb(0 0 0 / 80%);
--common-shadow-1: #0000001a;
--common-shadow-2: #00000033;
--common-shadow-4: #00000066;
--common-shadow-8: #000000cc;
/* box-shadow-transparent */
--common-shadow-t-1: rgb(255 255 255 / 10%);
--common-shadow-t-2: rgb(255 255 255 / 20%);
--common-shadow-t-4: rgb(255 255 255 / 40%);
--common-shadow-t-8: rgb(255 255 255 / 80%);
--common-shadow-t-1: #FFFFFF1A;
--common-shadow-t-2: #FFFFFF33;
--common-shadow-t-4: #FFFFFF66;
--common-shadow-t-8: #FFFFFFCC;
/* common text color */
--common-text-title: var(--tgc-dark-8); /* title */

4
src/components/app/t-itemBox.vue
View File

@@ -131,7 +131,7 @@ const props = defineProps<TItemBoxProps>();
height: v-bind("props.modelValue.rtSize");
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 40%);
background: #00000066;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
color: var(--tgc-white-1);
@@ -151,7 +151,7 @@ const props = defineProps<TItemBoxProps>();
justify-content: center;
-webkit-backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));
backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));
background: rgb(20 20 20 / 40%);
background: #14141466;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: var(--tgc-white-1);

2
src/components/func/geetest.vue
View File

@@ -124,7 +124,7 @@ defineExpose({ displayBox });
align-items: center;
justify-content: center;
backdrop-filter: blur(20px);
background: rgb(0 0 0 / 50%);
background: #00000080;
}
.geetest-box {

6
src/components/func/loading.vue
View File

@@ -120,7 +120,7 @@ defineExpose({ displayBox });
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 50%);
background: #00000080;
}
.loading-container {
@@ -130,8 +130,8 @@ defineExpose({ displayBox });
box-sizing: border-box;
padding: 15px;
border-radius: 15px;
background: rgb(255 255 255 / 5%);
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
background: #ffffff0d;
box-shadow: 0 0 10px #00000080;
}
.loading-box {

2
src/components/pageConfig/tc-appBadge.vue
View File

@@ -75,7 +75,7 @@ async function toSite(): Promise<void> {
font-family: var(--font-title);
font-size: 14px;
text-align: center;
text-shadow: 0 0 2px rgb(19 84 122 / 80%);
text-shadow: 0 0 2px #13547acc;
}
.tab-info.click {

2
src/components/userAchi/tua-achi.vue
View File

@@ -193,7 +193,7 @@ async function setAchiStat(stat: boolean): Promise<void> {
height: 10px;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 50%);
background: #00000080;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: var(--tgc-white-1);

10
src/components/userAvatar/tua-avatar-box.vue
View File

@@ -146,10 +146,6 @@ function getWeaponTitle(): string {
cursor: pointer;
row-gap: 4px;
&:hover .tua-abl-bg {
filter: grayscale(0);
}
@include github-styles.github-card;
}
@@ -203,7 +199,7 @@ function getWeaponTitle(): string {
padding: 4px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgb(0 0 0 / 40%);
background: #00000066;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: var(--tgc-white-1);
@@ -263,6 +259,10 @@ function getWeaponTitle(): string {
}
}
.tua-ab-box:hover .tua-abl-bg {
filter: grayscale(0);
}
.tua-abl-skills {
position: relative;
display: flex;

6
src/components/userAvatar/tua-dc-constellations.vue
View File

@@ -37,11 +37,11 @@ const props = defineProps<TuaDcConstellationsProps>();
align-items: center;
justify-content: center;
padding: 2px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 50%;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 20%);
background: #00000033;
}
.tua-dcc-icon {
@@ -60,6 +60,6 @@ const props = defineProps<TuaDcConstellationsProps>();
justify-content: center;
padding: 5px;
border-radius: 50%;
background: rgb(0 0 0 / 50%);
background: #00000080;
}
</style>

14
src/components/userAvatar/tua-dc-relic.vue
View File

@@ -137,15 +137,15 @@ function getPropSubStyle(
align-items: center;
justify-content: flex-start;
padding: 5px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 20%);
background: #00000033;
color: var(--tgc-white-1);
font-size: 12px;
row-gap: 5px;
text-shadow: 0 0 5px rgb(0 0 0 / 50%);
text-shadow: 0 0 5px #00000080;
}
.tua-dcr-main {
@@ -241,7 +241,7 @@ function getPropSubStyle(
width: 100%;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgb(255 255 255 / 20%);
border-bottom: 1px solid #ffffff33;
column-gap: 5px;
font-family: var(--font-title);
@@ -286,12 +286,12 @@ function getPropSubStyle(
.tua-prop-time {
width: 14px;
height: 14px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 4px;
background: rgb(0 0 0 / 20%);
background: #00000033;
font-size: 10px;
line-height: 14px;
text-align: center;
text-shadow: 0 0 5px rgb(0 0 0 / 50%);
text-shadow: 0 0 5px #00000080;
}
</style>

10
src/components/userAvatar/tua-dc-talents.vue
View File

@@ -40,11 +40,11 @@ const props = defineProps<TuaDcTalentsProps>();
align-items: center;
justify-content: center;
padding: 2px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 50%;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 20%);
background: #00000033;
}
.tua-dct-icon {
@@ -63,7 +63,7 @@ const props = defineProps<TuaDcTalentsProps>();
justify-content: center;
padding: 5px;
border-radius: 50%;
background: rgb(0 0 0 / 50%);
background: #00000080;
}
.tua-dct-lock v-icon {
@@ -82,9 +82,9 @@ const props = defineProps<TuaDcTalentsProps>();
border-radius: 4px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 50%);
background: #00000080;
color: var(--tgc-white-1);
font-size: 8px;
text-shadow: 0 0 5px rgb(0 0 0 / 50%);
text-shadow: 0 0 5px #00000080;
}
</style>

8
src/components/userAvatar/tua-dc-weapon.vue
View File

@@ -75,14 +75,14 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
align-items: center;
justify-content: flex-start;
padding: 5px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 20%);
background: #00000033;
color: var(--tgc-white-1);
font-size: 12px;
text-shadow: 0 0 5px rgb(0 0 0 / 50%);
text-shadow: 0 0 5px #00000080;
}
.tua-dcw-main {
@@ -151,7 +151,7 @@ const propSub = computed<TGApp.Game.Avatar.PropMapItem | false>(() => {
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgb(255 255 255 / 20%);
border-bottom: 1px solid #ffffff33;
img {
width: 14px;

8
src/components/userAvatar/tua-detail-card.vue
View File

@@ -141,7 +141,7 @@ async function share(): Promise<void> {
position: absolute;
top: 5px;
left: 5px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
@@ -176,11 +176,11 @@ async function share(): Promise<void> {
align-items: center;
justify-content: flex-end;
padding: 5px;
border: 1px solid rgb(255 255 255 / 20%);
border: 1px solid #ffffff33;
border-radius: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 20%);
background: #00000033;
gap: 0;
}
@@ -195,7 +195,7 @@ async function share(): Promise<void> {
column-gap: 10px;
font-family: var(--font-title);
font-size: 14px;
text-shadow: 0 0 5px rgb(0 0 0 / 50%);
text-shadow: 0 0 5px #00000080;
}
.tua-dc-detail {

4
src/components/userAvatarCard/duc-detail-ort.vue
View File

@@ -46,7 +46,7 @@ const props = defineProps<DucDetailOrtProps>();
border-radius: 50%;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgb(0 0 0 / 40%);
background: #00000066;
img {
width: 100%;
@@ -62,6 +62,6 @@ const props = defineProps<DucDetailOrtProps>();
color: var(--tgc-white-1);
font-family: var(--font-title);
font-size: 16px;
text-shadow: 0 0 5px rgb(0 0 0 / 40%);
text-shadow: 0 0 5px #00000066;
}
</style>

2
src/components/userAvatarCard/tuc-detail-card.vue
View File

@@ -119,7 +119,7 @@ async function share(): Promise<void> {
left: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 20%);
background: #00000033;
}
.duc-doc-lt {

2
src/components/userCombat/tuc-buffs.vue
View File

@@ -65,7 +65,7 @@ const columnCnt = computed<number>(() => {
color: var(--tgc-white-2);
font-family: var(--font-title);
font-size: 14px;
text-shadow: 0 0 4px rgb(0 0 0 / 20%);
text-shadow: 0 0 4px #00000033;
}
}
</style>

2
src/components/userRecord/tur-home-sub.vue
View File

@@ -97,7 +97,7 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
padding: 8px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background: rgb(0 0 0 / 40%);
background: #00000066;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: var(--tgc-white-1);