Optimize UI interface

src/assets/css/style.scss

@@ -9,8 +9,8 @@
   --color-header-bg: white;
   --color-tooltip-bg: white;
   --color-tooltip-shadow: #bbbbbb;
-  --color-font-1: black;
-  --color-font-2: gray;
+  --color-font-1: rgb(75,85,99);
+  --color-font-2: rgb(46, 46, 46);
   --color-font-active-1: white;
   --color-font-active-2: whitesmoke;
   --color-item-bg: white;
@@ -19,6 +19,7 @@
   --color-main-active: rgb(12, 140, 233);
   --toolbar-width: 700rem;
   //--toolbar-width: 50vw;
+
 }
 
 html[data-theme='dark'] {
@@ -30,7 +31,8 @@ html[data-theme='dark'] {
   //--color-tooltip-bg: rgb(60, 63, 65);
   --color-tooltip-bg: #252525;
   --color-tooltip-shadow: #3b3b3b;
-  --color-font-1: white;
+  --color-font-1: rgba(249, 250, 251, 0.8);
+  --color-font-2: rgba(255, 255, 255, 0.8);
   --color-item-bg: gray;
 }
 
@@ -40,8 +42,7 @@ $anim-time: 0.3s;
 }
 
 
-$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-'Helvetica Neue', sans-serif;
+$font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
 html, body {
   padding: 0;
   margin: 0;
@@ -204,8 +205,9 @@ footer {
     align-items: center;
     gap: 8rem;
 
-    .word {
+    .title {
       font-size: 20rem;
+      color: var(--color-font-1);
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
       display: flex;
     }
@@ -217,6 +219,7 @@ footer {
   }
 }
 
-.item-translate {
+.sub-title {
   font-size: 16rem;
+  color: var(--color-font-2);
 }

src/components/ListItem.vue

@@ -113,7 +113,13 @@ defineEmits<{
 
   &.active {
     background: var(--color-item-active);
-    color: white !important;
+
+    :deep(.sub-title) {
+      color: white !important;
+    }
+    :deep(.title) {
+      color: white !important;
+    }
 
     $c: #E6A23C;
 

src/components/Practice/PracticeWord/Typing.vue

@@ -46,7 +46,7 @@ watch(() => props.word, () => {
   wordRepeatCount = 0
   inputLock = false
   if (settingStore.wordSound) {
-    volumeIconRef?.play(400,true)
+    volumeIconRef?.play(400, true)
   }
 })
 
@@ -147,33 +147,33 @@ defineExpose({del, showWord, hideWord})
 
 <template>
   <div class="typing-word">
-      <div class="translate"
-           :style="{
+    <div class="translate"
+         :style="{
       fontSize: settingStore.fontSize.wordTranslateFontSize +'rem',
       opacity: settingStore.translate ? 1 : 0
     }"
+    >
+      <div v-for="i in word.trans">{{ i }}</div>
+    </div>
+    <div class="word-wrapper">
+      <div class="word"
+           :class="wrong && 'is-wrong'"
+           :style="{fontSize: settingStore.fontSize.wordForeignFontSize +'rem'}"
       >
-        <div v-for="i in word.trans">{{ i }}</div>
-      </div>
-      <div class="word-wrapper">
-        <div class="word"
-             :class="wrong && 'is-wrong'"
-             :style="{fontSize: settingStore.fontSize.wordForeignFontSize +'rem'}"
-        >
-          <span class="input" v-if="input">{{ input }}</span>
-          <span class="wrong" v-if="wrong">{{ wrong }}</span>
-          <template v-if="settingStore.dictation">
+        <span class="input" v-if="input">{{ input }}</span>
+        <span class="wrong" v-if="wrong">{{ wrong }}</span>
+        <template v-if="settingStore.dictation">
           <span class="letter" v-if="!showFullWord"
                 @mouseenter="settingStore.allowWordTip && (showFullWord = true)">{{
               displayWord.split('').map(() => '_').join('')
             }}</span>
-            <span class="letter" v-else @mouseleave="showFullWord = false">{{ displayWord }}</span>
-          </template>
-          <span class="letter" v-else>{{ displayWord }}</span>
-        </div>
-        <VolumeIcon ref="volumeIconRef" :simple="true" :cb="()=>playWordAudio(word.name)"/>
+          <span class="letter" v-else @mouseleave="showFullWord = false">{{ displayWord }}</span>
+        </template>
+        <span class="letter" v-else>{{ displayWord }}</span>
       </div>
-      <div class="phonetic">{{ settingStore.wordSoundType === 'us' ? word.usphone : word.ukphone }}</div>
+      <VolumeIcon ref="volumeIconRef" :simple="true" :cb="()=>playWordAudio(word.name)"/>
+    </div>
+    <div class="phonetic">{{ settingStore.wordSoundType === 'us' ? word.usphone : word.ukphone }}</div>
   </div>
 </template>
 
@@ -195,16 +195,18 @@ defineExpose({del, showWord, hideWord})
     transition: all .3s;
   }
 
-  .translate{
+  .translate {
     position: absolute;
     transform: translateY(-50%);
     margin-bottom: 90rem;
+    color: var(--color-font-2);
   }
 
   .word-wrapper {
     display: flex;
     align-items: center;
     gap: 10rem;
+    color: var(--color-font-1);
 
     .word {
       font-size: 48rem;

src/components/WordList.vue

@@ -77,11 +77,11 @@ const {
         @del="delWrongWord(word)"
     >
       <div class="word-wrapper">
-        <span class="word">{{ word.name }}</span>
+        <span class="title">{{ word.name }}</span>
         <span class="phonetic">{{ word.usphone }}</span>
         <VolumeIcon class="volume" @click="playWordAudio(word.name)"></VolumeIcon>
       </div>
-      <div class="item-translate" v-if="word.trans.length">
+      <div class="sub-title" v-if="word.trans.length">
         <div v-for="item in word.trans">{{item}}</div>
       </div>
     </ListItem>