save

src/Mobile.vue

@@ -449,7 +449,7 @@ html, body {
 .mobile {
   width: 100vw;
   height: 100vh;
-  background: $dark-main-bg;
+  background: var(--color-background);
   overflow: hidden;
 
   canvas {

src/assets/css/style.scss

@@ -135,13 +135,6 @@ html.dark {
   transition: background var(--anim-time), color var(--anim-time), border var(--anim-time);
 }
 
-.word-font-family {
-  font-family: var(--word-font-family);
-  //font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif; //medium
-  //font-family: Optimistic Text,-apple-system,ui-sans-serif,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; // react
-  //font-family: Google Sans Text,Noto Sans,Noto Sans JP,Noto Sans KR,Noto Naskh Arabic,Noto Sans Thai,Noto Sans Hebrew,Noto Sans Bengali,sans-serif; //android-dev
-  line-height: 30rem;
-}
 
 html, body {
   font-size: 1px;
@@ -150,30 +143,27 @@ html, body {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  color: $font-color;
+  color: rgb(187, 187, 187);
   //color: var(--color-font-1);
   //font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.en-word {
-  font-family: var(--word-font-family);
-}
-
 #app {
   width: 100%;
   height: 100%;
 }
 
 a {
+  $main: rgb(64,158,255);
   color: $main;
   text-decoration: none;
 }
 
 .base-textarea {
   flex: 1;
-  font-family: $font-family;
+  font-family: var(--font-family);
   font-size: 18rem;
   outline: none;
   border: 1px solid transparent;
@@ -220,6 +210,7 @@ a {
 }
 
 footer {
+  $footer-height: 60rem;
   box-sizing: content-box;
   height: $footer-height;
   display: flex;

src/assets/css/variable.scss

@@ -1,16 +0,0 @@
-//$dark-main-bg: rgb(46, 46, 46);
-$dark-main-bg: rgba(0, 5, 24, 1);
-$dark-second-bg: rgb(60, 63, 65);
-
-$font-color: rgb(187, 187, 187);
-
-$main: rgb(64,158,255);
-//$main: rgb(121,187,255);
-//$second: rgb(75, 110, 175);
-$second: rgb(59, 87, 138);
-$item-hover: rgb(75, 75, 75);
-$footer-height: 40rem;
-$card-radius: 8rem;
-
-$font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
-$word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

src/components/DictListPanel.vue

@@ -143,6 +143,7 @@ const groupedByCategoryAndTag = $computed(() => {
         gap: 6rem;
 
         &.active {
+          $main: rgb(64,158,255);
           border-bottom: 2px solid $main;
         }
 

src/components/Input.vue

@@ -67,7 +67,7 @@ useDisableEventListener(() => focus)
   }
 
   input {
-    font-family: $font-family;
+    font-family: var(--font-family);
     font-size: 18rem;
     outline: none;
     min-height: 20rem;

src/components/Ring.vue

@@ -64,6 +64,7 @@ $w2: calc($w / 2);
     position: absolute;
 
     .circle-full {
+      $item-hover: rgb(75, 75, 75);
       stroke: $item-hover;
     }
 

src/components/dialog/ArticleContentDialog.vue

@@ -34,7 +34,7 @@ onUnmounted(() => {
       :header="false"
       v-model="show">
     <div class="content">
-      <div class="article-content word-font-family">
+      <div class="article-content">
         <div class="title">
           <div>{{ article.title }}</div>
         </div>

src/pages/dict/components/ArticleDictDetail.vue

@@ -359,7 +359,7 @@ defineExpose({getDictDetail, add, editDict})
           <Empty v-else/>
         </div>
       </div>
-      <div class="article-content word-font-family">
+      <div class="article-content">
         <div class="title">
           <div>{{ article.title }}</div>
           <BaseIcon

src/pages/practice/Statistics.vue

@@ -128,6 +128,10 @@ const isEnd = $computed(() => {
 <style scoped lang="scss">
 @import "@/assets/css/style";
 
+$card-radius: 8rem;
+$dark-second-bg: rgb(60, 63, 65);
+$item-hover: rgb(75, 75, 75);
+
 .statistics {
   width: 800rem;
   padding: var(--space);
@@ -184,6 +188,7 @@ const isEnd = $computed(() => {
       }
 
       .notice {
+        $main: rgb(64,158,255);
         background: $main;
         height: 40rem;
         display: flex;

src/pages/practice/practice-word/Typing.vue

@@ -223,7 +223,7 @@ defineExpose({del, showWord, hideWord, play})
 
   .phonetic {
     margin-top: 5rem;
-    font-family: $word-font-family;
+    font-family: var(--word-font-family);
   }
 
   .translate {
@@ -259,7 +259,7 @@ defineExpose({del, showWord, hideWord, play})
     .word {
       font-size: 48rem;
       line-height: 1;
-      font-family: $word-font-family;
+      font-family: var(--word-font-family);
       letter-spacing: 5rem;
 
       .input {

src/pages/practice/practice-word/TypingWord.vue

@@ -406,7 +406,7 @@ onUnmounted(() => {
     .word {
       font-size: 24rem;
       margin-bottom: 4rem;
-      font-family: $word-font-family;
+      font-family: var(--word-font-family);
     }
 
     .prev {