diff --git a/src/assets/index.css b/src/assets/index.css index a41797a9..00b630f8 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,8 +1,7 @@ /* - * @file assets index.css + * @file assets/index.css * @description 全局样式文件 - * @author BTMuli - * @since Beta v0.3.0 + * @since Beta v0.3.5 */ @import "fonts/index.css"; @@ -36,6 +35,7 @@ --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 */ /* some css same in dark and default theme */ --tgc-btn-1: var(--tgc-dark-7); /* button bg */ diff --git a/src/components/func/confirm.vue b/src/components/func/confirm.vue index 7d521b28..9e3be231 100644 --- a/src/components/func/confirm.vue +++ b/src/components/func/confirm.vue @@ -3,9 +3,7 @@
-
- {{ data.title }} -
+
{{ data.title }}
-
- {{ data.text }} -
+
{{ data.text }}
- - + +
@@ -178,7 +166,16 @@ defineExpose({ align-items: center; justify-content: center; backdrop-filter: blur(10px); - background: var(--common-shadow-t-1); + + /* 颜色变量 */ + --confirm-title: var(--tgc-dark-7); + --confirm-bg: var(--tgc-white-1); +} + +/* 深色模式 */ +.dark .confirm-overlay { + --confirm-title: var(--tgc-white-1); + --confirm-bg: var(--tgc-dark-7); } .confirm-box { @@ -190,14 +187,16 @@ defineExpose({ justify-content: space-between; padding: 10px; border: 1px solid var(--common-shadow-1); - border-radius: 5px; - background: var(--box-bg-4); - color: var(--box-text-1); + border-radius: 15px; + background: var(--confirm-bg); + box-shadow: 0 0 10px var(--common-shadow-t-1); + color: var(--tgc-yellow-3); } .confirm-title { width: 100%; - border-bottom: 1px solid var(--common-shadow-4); + border-bottom: 1px solid var(--confirm-title); + color: var(--confirm-title); font-family: var(--font-title); font-size: 30px; text-align: center; @@ -206,7 +205,6 @@ defineExpose({ .confirm-subtitle { overflow: hidden; width: 100%; - color: var(--box-text-4); font-family: var(--font-text); font-size: 20px; text-align: center; @@ -229,10 +227,10 @@ defineExpose({ width: 50%; height: 100%; padding: 5px; - border: 1px solid var(--common-shadow-4); + border: 1px solid var(--confirm-title); border-radius: 5px; background: inherit; - color: var(--box-text-1); + color: var(--confirm-title); } .confirm-btn-box { @@ -249,11 +247,17 @@ defineExpose({ height: 60px; align-items: center; justify-content: center; - border: 1px solid var(--common-shadow-4); - border-radius: 5px; - color: var(--btn-text); + border-radius: 15px; cursor: pointer; font-family: var(--font-title); font-size: 20px; } + +.no-btn { + border: 1px solid var(--tgc-yellow-1); +} + +.ok-btn { + background: var(--confirm-title); +}