From 36f2adf3f7d8c63bcf5368ac833af6c2a446a989 Mon Sep 17 00:00:00 2001 From: BTMuli Date: Thu, 29 May 2025 14:16:36 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E9=A2=9C=E8=89=B2=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E4=B8=BAhexa?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/fonts/{index.css => index.scss} | 5 +- src/assets/index.scss | 54 +++++++++---------- src/assets/themes/{dark.css => dark.scss} | 32 +++++------ .../themes/{default.css => default.scss} | 34 ++++++------ src/components/app/t-itemBox.vue | 4 +- src/components/func/geetest.vue | 2 +- src/components/func/loading.vue | 6 +-- src/components/pageConfig/tc-appBadge.vue | 2 +- src/components/userAchi/tua-achi.vue | 2 +- src/components/userAvatar/tua-avatar-box.vue | 10 ++-- .../userAvatar/tua-dc-constellations.vue | 6 +-- src/components/userAvatar/tua-dc-relic.vue | 14 ++--- src/components/userAvatar/tua-dc-talents.vue | 10 ++-- src/components/userAvatar/tua-dc-weapon.vue | 8 +-- src/components/userAvatar/tua-detail-card.vue | 8 +-- .../userAvatarCard/duc-detail-ort.vue | 4 +- .../userAvatarCard/tuc-detail-card.vue | 2 +- src/components/userCombat/tuc-buffs.vue | 2 +- src/components/userRecord/tur-home-sub.vue | 2 +- 19 files changed, 103 insertions(+), 104 deletions(-) rename src/assets/fonts/{index.css => index.scss} (83%) rename src/assets/themes/{dark.css => dark.scss} (55%) rename src/assets/themes/{default.css => default.scss} (57%) diff --git a/src/assets/fonts/index.css b/src/assets/fonts/index.scss similarity index 83% rename from src/assets/fonts/index.css rename to src/assets/fonts/index.scss index 98d19d1d..21088bda 100644 --- a/src/assets/fonts/index.css +++ b/src/assets/fonts/index.scss @@ -1,8 +1,7 @@ /* - * @file assets fonts index.css + * @file assets/fonts/index.scss * @description 字体样式文件 - * @author BTMuli - * @since Alpha v0.2.0 + * @since v0.2.0-Alpha */ @font-face { diff --git a/src/assets/index.scss b/src/assets/index.scss index 64c8291d..d8757b1c 100644 --- a/src/assets/index.scss +++ b/src/assets/index.scss @@ -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 */ diff --git a/src/assets/themes/dark.css b/src/assets/themes/dark.scss similarity index 55% rename from src/assets/themes/dark.css rename to src/assets/themes/dark.scss index 251bd62c..e06e267c 100644 --- a/src/assets/themes/dark.css +++ b/src/assets/themes/dark.scss @@ -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，米色 */ diff --git a/src/assets/themes/default.css b/src/assets/themes/default.scss similarity index 57% rename from src/assets/themes/default.css rename to src/assets/themes/default.scss index 8d5bac0d..f57b5686 100644 --- a/src/assets/themes/default.css +++ b/src/assets/themes/default.scss @@ -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 */ diff --git a/src/components/app/t-itemBox.vue b/src/components/app/t-itemBox.vue index 6c951f2d..a22eeefa 100644 --- a/src/components/app/t-itemBox.vue +++ b/src/components/app/t-itemBox.vue @@ -131,7 +131,7 @@ const props = defineProps(); 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(); 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); diff --git a/src/components/func/geetest.vue b/src/components/func/geetest.vue index 9468940e..4823ab9b 100644 --- a/src/components/func/geetest.vue +++ b/src/components/func/geetest.vue @@ -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 { diff --git a/src/components/func/loading.vue b/src/components/func/loading.vue index b7f5638f..ee00aae1 100644 --- a/src/components/func/loading.vue +++ b/src/components/func/loading.vue @@ -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 { diff --git a/src/components/pageConfig/tc-appBadge.vue b/src/components/pageConfig/tc-appBadge.vue index d94b3ed6..053a0767 100644 --- a/src/components/pageConfig/tc-appBadge.vue +++ b/src/components/pageConfig/tc-appBadge.vue @@ -75,7 +75,7 @@ async function toSite(): Promise { 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 { diff --git a/src/components/userAchi/tua-achi.vue b/src/components/userAchi/tua-achi.vue index c50ff2ed..f6aa6df5 100644 --- a/src/components/userAchi/tua-achi.vue +++ b/src/components/userAchi/tua-achi.vue @@ -193,7 +193,7 @@ async function setAchiStat(stat: boolean): Promise { 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); diff --git a/src/components/userAvatar/tua-avatar-box.vue b/src/components/userAvatar/tua-avatar-box.vue index 239d8072..bb5bc3a8 100644 --- a/src/components/userAvatar/tua-avatar-box.vue +++ b/src/components/userAvatar/tua-avatar-box.vue @@ -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; diff --git a/src/components/userAvatar/tua-dc-constellations.vue b/src/components/userAvatar/tua-dc-constellations.vue index accd4976..c7dcab50 100644 --- a/src/components/userAvatar/tua-dc-constellations.vue +++ b/src/components/userAvatar/tua-dc-constellations.vue @@ -37,11 +37,11 @@ const props = defineProps(); 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(); justify-content: center; padding: 5px; border-radius: 50%; - background: rgb(0 0 0 / 50%); + background: #00000080; } diff --git a/src/components/userAvatar/tua-dc-relic.vue b/src/components/userAvatar/tua-dc-relic.vue index 2d28c014..be432880 100644 --- a/src/components/userAvatar/tua-dc-relic.vue +++ b/src/components/userAvatar/tua-dc-relic.vue @@ -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; } diff --git a/src/components/userAvatar/tua-dc-talents.vue b/src/components/userAvatar/tua-dc-talents.vue index 45877d5f..ba0bdd39 100644 --- a/src/components/userAvatar/tua-dc-talents.vue +++ b/src/components/userAvatar/tua-dc-talents.vue @@ -40,11 +40,11 @@ const props = defineProps(); 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(); 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(); 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; } diff --git a/src/components/userAvatar/tua-dc-weapon.vue b/src/components/userAvatar/tua-dc-weapon.vue index 30cb690c..a0f95412 100644 --- a/src/components/userAvatar/tua-dc-weapon.vue +++ b/src/components/userAvatar/tua-dc-weapon.vue @@ -75,14 +75,14 @@ const propSub = computed(() => { 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(() => { 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; diff --git a/src/components/userAvatar/tua-detail-card.vue b/src/components/userAvatar/tua-detail-card.vue index 855e43ed..6ddf3763 100644 --- a/src/components/userAvatar/tua-detail-card.vue +++ b/src/components/userAvatar/tua-detail-card.vue @@ -141,7 +141,7 @@ async function share(): Promise { 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 { 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 { 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 { diff --git a/src/components/userAvatarCard/duc-detail-ort.vue b/src/components/userAvatarCard/duc-detail-ort.vue index 2af8802e..dda7c684 100644 --- a/src/components/userAvatarCard/duc-detail-ort.vue +++ b/src/components/userAvatarCard/duc-detail-ort.vue @@ -46,7 +46,7 @@ const props = defineProps(); 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(); 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; } diff --git a/src/components/userAvatarCard/tuc-detail-card.vue b/src/components/userAvatarCard/tuc-detail-card.vue index 43552f4d..008b3d70 100644 --- a/src/components/userAvatarCard/tuc-detail-card.vue +++ b/src/components/userAvatarCard/tuc-detail-card.vue @@ -119,7 +119,7 @@ async function share(): Promise { left: 0; width: 100%; height: 100%; - background: rgb(0 0 0 / 20%); + background: #00000033; } .duc-doc-lt { diff --git a/src/components/userCombat/tuc-buffs.vue b/src/components/userCombat/tuc-buffs.vue index b256e755..a7d6dd7a 100644 --- a/src/components/userCombat/tuc-buffs.vue +++ b/src/components/userCombat/tuc-buffs.vue @@ -65,7 +65,7 @@ const columnCnt = computed(() => { 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; } } diff --git a/src/components/userRecord/tur-home-sub.vue b/src/components/userRecord/tur-home-sub.vue index e1057a85..9f0c18f2 100644 --- a/src/components/userRecord/tur-home-sub.vue +++ b/src/components/userRecord/tur-home-sub.vue @@ -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);