🎨 颜色统一为hexa

src/assets/fonts/index.scss

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

src/assets/index.scss

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

src/assets/themes/dark.scss

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

src/assets/themes/default.scss

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

src/components/app/t-itemBox.vue

@@ -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);

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 {

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%);
+  background: #ffffff0d;
-  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+  box-shadow: 0 0 10px #00000080;
 }
 
 .loading-box {

src/components/pageConfig/tc-appBadge.vue

@@ -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 {

src/components/userAchi/tua-achi.vue

@@ -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);

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;

src/components/userAvatar/tua-dc-constellations.vue

@@ -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>

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;
 }
 </style>

src/components/userAvatar/tua-dc-talents.vue

@@ -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>

src/components/userAvatar/tua-dc-weapon.vue

@@ -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;

src/components/userAvatar/tua-detail-card.vue

@@ -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 {

src/components/userAvatarCard/duc-detail-ort.vue

@@ -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>

src/components/userAvatarCard/tuc-detail-card.vue

@@ -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 {

src/components/userCombat/tuc-buffs.vue

@@ -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>

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);