fix: lint

.stylelintignore

@@ -0,0 +1,2 @@
+dist/
+backend/**/target

package.json

@@ -13,6 +13,7 @@
     "lint": "run-s lint:*",
     "lint:prettier": "prettier --check .",
     "lint:eslint": "eslint --cache .",
+    "lint:styles": "stylelint --cache --allow-empty-input \"**/*.{css,scss}\"",
     "lint:ts": "tsc --noEmit",
     "lint:backend": "cargo clippy --manifest-path ./backend/Cargo.toml --all-targets --all-features",
     "fmt": "run-p fmt:*",

src/assets/styles/anime.scss

@@ -5,10 +5,10 @@
 
 .page-enter-active {
   opacity: 1;
-  transform: scale(1);
   transition:
     opacity 300ms,
     transform 300ms;
+  transform: scale(1);
 }
 
 .page-exit {
@@ -18,8 +18,8 @@
 
 .page-exit-active {
   opacity: 0;
-  transform: scale(0.9);
   transition:
     opacity 300ms,
     transform 300ms;
+  transform: scale(0.9);
 }

src/assets/styles/index.scss

@@ -1,23 +1,24 @@
+@import "./layout.scss";
+@import "./page.scss";
+@import "./anime.scss";
+
 body {
   margin: 0;
+  overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-
   user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+  -webkit-font-smoothing: antialiased;
 }
 
 :root {
   --primary-main: #5b5c9d;
   --text-primary: #637381;
   --selection-color: #f5f5f5;
   --scroller-color: #90939980;
-  --background-color: #ffffff;
-  --background-color-alpha: rgba(24, 103, 192, 0.1);
+  --background-color: #fff;
+  --background-color-alpha: rgb(24 103 192 / 10%);
   --border-radius: 12px;
 }
 
@@ -31,28 +32,18 @@ body {
   height: 6px;
   background: transparent;
 }
+
 *::-webkit-scrollbar-thumb {
-  border-radius: 6px;
   background-color: var(--scroller-color);
+  border-radius: 6px;
 }
 
-body {
-  overflow: hidden;
-}
-
-@import "./layout.scss";
-@import "./page.scss";
-@import "./anime.scss";
-
 @media (prefers-color-scheme: dark) {
   :root {
-    background-color: rgba(18, 18, 18, 1);
+    background-color: rgb(18 18 18 / 100%);
   }
 }
 
 .user-none {
   user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
 }

src/assets/styles/layout.scss

@@ -1,38 +1,35 @@
 .layout {
+  display: flex;
   width: 100%;
   height: 100vh;
-  display: flex;
   overflow: hidden;
 
   &__left {
-    flex: 1 0 25%;
+    position: relative;
+    box-sizing: border-box;
     display: flex;
-    height: 100%;
-    max-width: 225px;
+    flex: 1 0 25%;
+    flex-direction: column;
     min-width: 125px;
+    max-width: 225px;
+    height: 100%;
     padding: 36px 0 28px;
-    position: relative;
-    flex-direction: column;
-    box-sizing: border-box;
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     overflow: hidden;
+    user-select: none;
     background-color: var(--background-color-alpha);
 
     $maxLogo: 100px;
 
     .the-logo {
       position: relative;
+      box-sizing: border-box;
       flex: 0 1 $maxLogo;
       width: 100%;
       max-width: $maxLogo + 32px;
       max-height: $maxLogo;
-      margin: 0 auto;
       padding: 0 16px;
+      margin: 0 auto;
       text-align: center;
-      box-sizing: border-box;
 
       img,
       svg {
@@ -49,15 +46,15 @@
       .the-newbtn {
         position: absolute;
         right: 10px;
-        bottom: 0px;
+        bottom: 0;
         transform: scale(0.8);
       }
     }
 
     .the-menu {
       flex: 1 1 80%;
-      overflow-y: auto;
       margin-bottom: 8px;
+      overflow-y: auto;
     }
 
     .the-traffic {
@@ -79,19 +76,16 @@
       position: absolute;
       top: 2px;
       right: 8px;
-      height: 36px;
+      z-index: 2;
+      box-sizing: border-box;
       display: flex;
       align-items: center;
-      box-sizing: border-box;
-      z-index: 2;
+      height: 36px;
     }
 
     .the-content {
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 28px;
-      bottom: 28px;
+      inset: 0 28px 28px 0;
     }
   }
 }
@@ -101,6 +95,7 @@
 .unknown {
   &.layout {
     $maxLogo: 115px;
+
     .layout__left .the-logo {
       flex: 0 1 $maxLogo;
       max-width: $maxLogo + 32px;
@@ -118,6 +113,7 @@
     .layout__left {
       padding-top: 24px;
     }
+
     .layout__right .the-content {
       top: 20px;
     }

src/assets/styles/page.scss

@@ -1,19 +1,19 @@
 .base-page {
-  width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
 
   > header {
-    flex: 0 0 58px;
-    width: 100%;
-    // max-width: 850px;
-    margin: 0 auto;
-    padding-right: 4px;
     box-sizing: border-box;
     display: flex;
+    flex: 0 0 58px;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
+    padding-right: 4px;
+    // max-width: 850px;
+    margin: 0 auto;
   }
 
   .base-container {
@@ -23,22 +23,22 @@
 
     > section {
       position: relative;
+      box-sizing: border-box;
       flex: 1 1 100%;
       width: 100%;
       height: 100%;
-      overflow: auto;
       padding: 28px 0;
-      box-sizing: border-box;
-      scrollbar-gutter: stable;
+      overflow: auto;
       background-color: var(--background-color);
+      scrollbar-gutter: stable;
 
       .base-content {
         width: 90%;
         // max-width: 850px;
         margin: 0 auto;
-        animation: baseContentIn 0.3s normal 1 forwards;
+        animation: base-content-in 0.3s normal 1 forwards;
 
-        @keyframes baseContentIn {
+        @keyframes base-content-in {
           0% {
             opacity: 0;
             transform: translateY(50%) scale(0.9);