🚚 重命名&美化

2025-12-12 09:18:14 +08:00 · 2023-06-26 14:48:37 +08:00
parent 6b67953cfe
commit ff293d0006
19 changed files with 71 additions and 69 deletions
--- a/src/assets/css/anno-parser.css
+++ b/src/assets/css/anno-parser.css
@@ -13,13 +13,13 @@

 .anno-title {
  font-family: var(--font-title);
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-size: 24px;
 }

 .anno-subtitle {
  font-size: 16px;
-  color: var(--common-text-3);
+  color: var(--common-text-quote);
 }

 .anno-img {
--- a/src/assets/css/post-parser.css
+++ b/src/assets/css/post-parser.css
@@ -14,13 +14,13 @@

 .mys-post-title {
  font-family: var(--font-title);
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-size: 24px;
 }

 .mys-post-subtitle {
  font-size: 16px;
-  color: var(--common-text-3);
+  color: var(--common-text-quote);
 }

 .mys-post-content {
--- a/src/assets/themes/dark.css
+++ b/src/assets/themes/dark.css
@@ -7,14 +7,20 @@

 /* 主题色 */
 html.dark {
-  --common-bg: rgb(255 255 255 / 10%);
-  --common-bg-2: rgb(255 255 255 / 20%);
-  --common-bg-4: rgb(255 255 255 / 40%);
-  --common-bg-8: rgb(255 255 255 / 80%);
+  /* 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-text: var(--common-color-white); /* title */
-  --common-text-2: var(--common-color-white); /* text */
-  --common-text-3: var(--common-color-grey); /* quote */
+  /* box bg */
+  --common-bg-1: #3d424b; /* 一级背景色 */
+  --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
+
+  /* text */
+  --common-text-title: var(--common-color-white); /* title */
+  --common-text-content: var(--common-color-white); /* text */
+  --common-text-quote: var(--common-color-grey); /* quote */

  --calendar-btn-bg: #1e1e1e;
  --back-top-shadow: #000000;
--- a/src/assets/themes/default.css
+++ b/src/assets/themes/default.css
@@ -7,14 +7,19 @@

 /* 主题色 */
 html.default {
-  --common-bg: rgb(0 0 0 / 10%);
-  --common-bg-2: rgb(0 0 0 / 20%);
-  --common-bg-4: rgb(0 0 0 / 40%);
-  --common-bg-8: rgb(0 0 0 / 80%);
+  /* 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-text: var(--common-color-blue); /* title */
-  --common-text-2: var(--common-color-blue-2); /* text */
-  --common-text-3: var(--common-color-blue-3); /* quote */
+  /* box bg */
+  --common-bg-1: #faf7e8; /* 一级背景色 */
+  --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
+
+  --common-text-title: #393b40; /* title */
+  --common-text-content: var(--common-color-blue-2); /* text */
+  --common-text-quote: var(--common-color-blue-3); /* quote */

  --calendar-btn-bg: #393b40;
  --back-top-shadow: #546d8b;
--- a/src/components/main/t-itembox.vue
+++ b/src/components/main/t-itembox.vue
@@ -188,7 +188,7 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
  width: 100%;
  height: v-bind(getOuterHeight);
  text-align: center;
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-size: v-bind(getOuterFont);
 }
 </style>
--- a/src/components/main/t-pool.vue
+++ b/src/components/main/t-pool.vue
@@ -8,8 +8,9 @@
      <v-card v-for="pool in poolCards" :key="pool.post_id" class="pool-card">
        <v-list class="pool-list">
          <v-list-item :title="pool.title" :subtitle="pool.subtitle">
+            <!-- todo 点击播放语音 -->
            <template #prepend>
-              <img :src="pool.voice.icon" class="pool-sideIcon" alt="icon" />
+              <img :src="pool.voice.icon" class="pool-voice-icon" alt="icon" />
            </template>
            <template v-if="pool.voice.url" #append>
              <audio :src="pool.voice.url" controls />
@@ -156,7 +157,7 @@ onMounted(async () => {
  loading.value = false;
 });

-// 检测是否有新的限时祈愿
+// 检测新卡池
 function checkCover(data: GachaData[]) {
  // 如果没有缓存
  if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
@@ -220,12 +221,12 @@ onUnmounted(() => {
 .pool-box {
  margin-bottom: 10px;
  padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
  border-radius: 5px;
 }

 .pool-title {
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-family: var(--font-title);
  font-size: 20px;
  display: flex;
@@ -237,7 +238,7 @@ onUnmounted(() => {
  transform: translate(0, 2px);
  margin-right: 10px;
  border-radius: 50%;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
 }

 .pool-grid {
@@ -248,27 +249,21 @@ onUnmounted(() => {
 }

 .pool-card {
-  background: #45b787; /* 蛙绿 */
-  color: #eef7f2; /* 丹白 */
+  background: var(--common-bg-1);
+  color: var(--common-bgt-1);
  border-radius: 5px;
 }

-.dark .pool-card {
-  background: #1f2623; /* 苷蓝绿 */
-}
-
 .pool-list {
  font-family: var(--font-title);
  background: inherit;
  color: inherit;
 }

-.pool-sideIcon {
-  margin-top: 10px;
+.pool-voice-icon {
  width: 40px;
  height: 40px;
-  border-radius: 50%;
-  background: var(--common-bg-2);
+  transform: translateY(-5px);
 }

 .pool-cover {
--- a/src/components/main/t-position.vue
+++ b/src/components/main/t-position.vue
@@ -140,12 +140,12 @@ onUnmounted(() => {
 .position-box {
  margin-bottom: 10px;
  padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
  border-radius: 5px;
 }

 .position-title {
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-family: var(--font-title);
  font-size: 20px;
  display: flex;
@@ -167,15 +167,11 @@ onUnmounted(() => {
 }

 .position-card {
-  background: #45b787; /* 蛙绿 */
-  color: #eef7f2; /* 月白 */
+  background: var(--common-bg-1);
+  color: var(--common-bgt-1);
  border-radius: 5px;
 }

-.dark .position-card {
-  background: #1f2623; /* 苷蓝绿 */
-}
-
 .position-list {
  font-family: var(--font-title);
  background: inherit;
--- a/src/components/main/t-subline.vue
+++ b/src/components/main/t-subline.vue
@@ -15,7 +15,7 @@ defineProps({
 </script>
 <style lang="css" scoped>
 .tsl-box {
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
  display: flex;
  align-items: center;
  height: 30px;
--- a/src/components/userAbyss/tua-detail-battle.vue
+++ b/src/components/userAbyss/tua-detail-battle.vue
@@ -31,6 +31,6 @@ const props = defineProps<TuaDetailBattleProps>();
  width: 100%;
  text-align: left;
  font-size: 12px;
-  color: var(--common-text-3);
+  color: var(--common-text-quote);
 }
 </style>
--- a/src/components/userAbyss/tua-detail-level.vue
+++ b/src/components/userAbyss/tua-detail-level.vue
@@ -20,6 +20,6 @@ const props = defineProps<TuaDetailLevelProps>();
  border-radius: 5px;
  width: 100%;
  height: 1px;
-  background: var(--common-text-2);
+  background: var(--common-text-content);
 }
 </style>
--- a/src/components/userAbyss/tua-detail-title.vue
+++ b/src/components/userAbyss/tua-detail-title.vue
@@ -46,7 +46,7 @@ const getFontSize: ComputedRef<string> = computed(() => {

 .tud-t-title {
  font-size: v-bind(getFontSize);
-  color: var(--common-text-2);
+  color: var(--common-text-content);
 }

 .tud-t-val {
--- a/src/components/userAbyss/tua-detail.vue
+++ b/src/components/userAbyss/tua-detail.vue
@@ -29,7 +29,7 @@ const props = defineProps<TuaDetailProps>();
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
  padding: 10px;
 }

--- a/src/components/userAbyss/tua-overview.vue
+++ b/src/components/userAbyss/tua-overview.vue
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
  height: auto;
  padding: 10px;
  border-radius: 5px;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
 .tuao-title {
  font-family: var(--font-title);
  font-size: 20px;
-  color: var(--common-text-2);
+  color: var(--common-text-content);
 }

 .tuao-val-text {
--- a/src/components/userCharacter/tuc-role-box.vue
+++ b/src/components/userCharacter/tuc-role-box.vue
@@ -92,7 +92,7 @@ function getAvatarName() {
 <style lang="css" scoped>
 .tuc-rb-box {
  padding: 5px;
-  border: 1px inset var(--common-bg-4);
+  border: 1px inset var(--common-shadow-4);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
@@ -139,7 +139,7 @@ function getAvatarName() {
  left: 0;
  width: 100%;
  height: 100%;
-  background: var(--common-bg-4);
+  background: var(--common-shadow-4);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
--- a/src/components/userRecord/tur-overview-sub.vue
+++ b/src/components/userRecord/tur-overview-sub.vue
@@ -26,7 +26,7 @@ defineProps<TAOProps>();
  height: auto;
  padding: 5px;
  border-radius: 5px;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -36,7 +36,7 @@ defineProps<TAOProps>();
 .tur-os-title {
  font-family: var(--font-title);
  font-size: 20px;
-  color: var(--common-text-2);
+  color: var(--common-text-content);
 }

 .tur-os-text {
--- a/src/components/userRecord/tur-world-sub.vue
+++ b/src/components/userRecord/tur-world-sub.vue
@@ -87,7 +87,7 @@ async function listenOnTheme() {
  display: flex;
  justify-content: center;
  align-items: center;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
 }

 .tur-ws-icon {
@@ -102,7 +102,7 @@ async function listenOnTheme() {
 }

 .tur-ws-content {
-  color: var(--common-text-2);
+  color: var(--common-text-content);
  width: calc(100% - 60px);
  height: 100%;
 }
@@ -110,7 +110,7 @@ async function listenOnTheme() {
 .tur-ws-title {
  font-family: var(--font-title);
  font-size: 20px;
-  border-bottom: 1px inset var(--common-text-2);
+  border-bottom: 1px inset var(--common-text-content);
 }

 .tur-ws-sub {
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -142,7 +142,7 @@ async function shareAbyss(): Promise<void> {
 </script>
 <style lang="css" scoped>
 .ua-box {
-  box-shadow: 0 0 10px 0 var(--common-bg-4);
+  box-shadow: 0 0 10px 0 var(--common-shadow-4);
  display: flex;
  justify-content: left;
  align-items: center;
@@ -152,7 +152,7 @@ async function shareAbyss(): Promise<void> {

 .ua-tab {
  font-family: var(--font-text);
-  color: var(--common-text);
+  color: var(--common-text-title);
  width: 100px;
  height: 100%;
 }
@@ -166,7 +166,7 @@ async function shareAbyss(): Promise<void> {

 .ua-btn {
  margin-top: 15px;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
  color: var(--common-color-white);
 }

@@ -181,13 +181,13 @@ async function shareAbyss(): Promise<void> {
  padding: 10px;
  overflow-y: auto;
  border-radius: 5px;
-  box-shadow: 0 0 10px var(--common-bg-2);
+  box-shadow: 0 0 10px var(--common-shadow-2);
 }

 .uaw-title {
  display: flex;
  align-items: center;
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-size: 20px;
  font-family: var(--font-title);
 }
@@ -222,7 +222,7 @@ async function shareAbyss(): Promise<void> {
  position: absolute;
  top: calc(50vh - 200px);
  left: calc(50vw - 400px);
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
  border-radius: 5px;
  width: 800px;
  height: 400px;
@@ -230,7 +230,7 @@ async function shareAbyss(): Promise<void> {
  flex-direction: column;
  align-items: center;
  font-size: 1.5rem;
-  color: var(--common-text);
+  color: var(--common-text-title);
  font-family: var(--font-title);
 }
 </style>
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -124,7 +124,7 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
  width: 100%;
  border-radius: 5px;
  padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
 }

 .uc-top {
@@ -140,13 +140,13 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
  font-family: var(--font-title);
  font-size: 20px;
  margin-right: 10px;
-  color: var(--common-text);
+  color: var(--common-text-title);
 }

 .uc-top-btn {
  font-family: var(--font-text);
  border-radius: 5px;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
  color: var(--common-color-white);
  margin-left: 15px;
 }
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -117,7 +117,7 @@ function getTheme() {
  width: 100%;
  border-radius: 5px;
  padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
 }

 .ur-top {
@@ -133,13 +133,13 @@ function getTheme() {
  font-family: var(--font-title);
  font-size: 20px;
  margin-right: 10px;
-  color: var(--common-text);
+  color: var(--common-text-title);
 }

 .ur-top-btn {
  font-family: var(--font-text);
  border-radius: 5px;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
  color: var(--common-color-white);
  margin-left: 15px;
 }