save

src/App.vue

@@ -10,7 +10,6 @@ import {cloneDeep} from "lodash-es";
 import Backgorund from "@/components/Backgorund.vue";
 import useTheme from "@/hooks/useTheme.ts";
 import * as localforage from "localforage";
-import {useStartKeyboardEventListener} from "@/hooks/event.ts";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -69,8 +68,6 @@ onMounted(() => {
   <Backgorund/>
   <div class="main-page anim">
     <Practice/>
-    <!--    <AddArticle/>-->
-    <!--      <Side/>-->
   </div>
 </template>
 

src/assets/css/anim.scss

@@ -18,7 +18,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: all .3s ease;
+  transition: all .5s ease;
 }
 
 .fade-enter-from,

src/assets/css/style.scss

@@ -30,10 +30,11 @@
 
   --practice-wrapper-padding-right: 1px;
   --toolbar-width: 700rem;
-  --toolbar-height: 60rem;
+  --toolbar-height: 54rem;
   --panel-width: 400rem;
   --space: 20rem;
   --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 24rem);
+  --anim-time: 0.5s;
 }
 
 html.dark {
@@ -112,9 +113,8 @@ html.dark {
   }
 }
 
-$anim-time: .3s;
 .anim {
-  transition: background $anim-time, color $anim-time, border $anim-time;
+  transition: background var(--anim-time), color var(--anim-time), border var(--anim-time);
 }
 
 html, body {
@@ -124,6 +124,7 @@ html, body {
   width: 100%;
   height: 100%;
   color: $font-color;
+  //color: var(--color-font-1);
   font-family: $font-family;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/components/Practice/Footer.vue

@@ -101,12 +101,12 @@ onUnmounted(() => {
     box-sizing: border-box;
     border-radius: 10rem;
     background: var(--color-second-bg);
-    padding: 3rem 10rem 10rem 10rem;
+    padding: 3rem var(--space) 6rem var(--space);
     z-index: 2;
     border: 1px solid var(--color-item-border);
 
     .stat {
-      margin-top: 10rem;
+      margin-top: 8rem;
       display: flex;
       justify-content: space-around;
 
@@ -114,13 +114,14 @@ onUnmounted(() => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 10rem;
+        gap: 5rem;
         width: 80rem;
 
         .line {
           height: 1px;
           width: 100%;
-          background: gainsboro;
+          //background: gainsboro;
+          background: var(--color-font-1);
         }
       }
     }

src/components/toolbar/Toolbar.vue

@@ -60,7 +60,7 @@ watch(() => store.load, n => {
 </script>
 
 <template>
-  <header ref="headerRef" class="anim">
+  <header ref="headerRef">
     <div class="content">
       <div class="dict-name">
         <Tooltip
@@ -191,7 +191,7 @@ watch(() => store.load, n => {
 }
 </style>
 <style scoped lang="scss">
-@import "@/assets/css/variable";
+@import "@/assets/css/style";
 
 .test-enter-active,
 .test-leave-active {
@@ -211,10 +211,11 @@ header {
   margin-bottom: 30rem;
   position: relative;
   z-index: 2;
-  padding: 10rem var(--space);
+  padding: 4rem var(--space);
   box-sizing: border-box;
   gap: 10rem;
   border: 1px solid var(--color-item-border);
+  transition: all var(--anim-time);
 
   .content {
     min-height: var(--toolbar-height);