chore: 优化样式

Author: xiaoxian521

index.html

@@ -36,9 +36,7 @@
           border-radius: 50%;
           width: 2.5em;
           height: 2.5em;
-          -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-          -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
           animation: loadAnimation 1.8s infinite ease-in-out;
         }
 
@@ -48,10 +46,7 @@
           margin: 80px auto;
           position: relative;
           text-indent: -9999em;
-          -webkit-transform: translateZ(0);
-          -ms-transform: translateZ(0);
           transform: translateZ(0);
-          -webkit-animation-delay: -0.16s;
           animation-delay: -0.16s;
           top: 0;
           transform: translate(-50%, 0);
@@ -66,26 +61,13 @@
 
         .loader:before {
           left: -3.5em;
-          -webkit-animation-delay: -0.32s;
           animation-delay: -0.32s;
         }
 
         .loader:after {
           left: 3.5em;
         }
 
-        @-webkit-keyframes loadAnimation {
-          0%,
-          80%,
-          100% {
-            box-shadow: 0 2.5em 0 -1.3em;
-          }
-
-          40% {
-            box-shadow: 0 2.5em 0 0;
-          }
-        }
-
         @keyframes loadAnimation {
           0%,
           80%,

public/html/button.html

@@ -95,7 +95,6 @@
 
     .c:active {
       transform: translate(0px, 4px);
-      -webkit-transform: translate(0px, 4px);
       box-shadow: 0px 1px 0px 0px #3486d5;
     }
 
@@ -223,8 +222,6 @@
     }
 
     input[type="checkbox"].toggle {
-      -moz-appearance: none;
-      -webkit-appearance: none;
       position: absolute;
       width: 100%;
       height: 100%;
@@ -299,36 +296,6 @@
       animation: anim-out-pseudo 0.75s;
     }
 
-    @-webkit-keyframes anim-in {
-      0% {
-        width: 0%;
-      }
-
-      100% {
-        width: 100%;
-      }
-    }
-
-    @-moz-keyframes anim-in {
-      0% {
-        width: 0%;
-      }
-
-      100% {
-        width: 100%;
-      }
-    }
-
-    @-ms-keyframes anim-in {
-      0% {
-        width: 0%;
-      }
-
-      100% {
-        width: 100%;
-      }
-    }
-
     @keyframes anim-in {
       0% {
         width: 0%;
@@ -339,36 +306,6 @@
       }
     }
 
-    @-webkit-keyframes anim-in-pseudo {
-      0% {
-        background: rgba(0, 0, 0, 0.3);
-      }
-
-      100% {
-        background: transparent;
-      }
-    }
-
-    @-moz-keyframes anim-in-pseudo {
-      0% {
-        background: rgba(0, 0, 0, 0.3);
-      }
-
-      100% {
-        background: transparent;
-      }
-    }
-
-    @-ms-keyframes anim-in-pseudo {
-      0% {
-        background: rgba(0, 0, 0, 0.3);
-      }
-
-      100% {
-        background: transparent;
-      }
-    }
-
     @keyframes anim-in-pseudo {
       0% {
         background: rgba(0, 0, 0, 0.3);
@@ -379,36 +316,6 @@
       }
     }
 
-    @-webkit-keyframes anim-out {
-      0% {
-        width: 0%;
-      }
-
-      100% {
-        width: 100%;
-      }
-    }
-
-    @-moz-keyframes anim-out {
-      0% {
-        width: 0%;
-      }
-
-      100% {
-        width: 100%;
-      }
-    }
-
-    @-ms-keyframes anim-out {
-      0% {
-        width: 0%;
-      }
-
-      100% {
-        width: 100%;
-      }
-    }
-
     @keyframes anim-out {
       0% {
         width: 0%;
@@ -419,36 +326,6 @@
       }
     }
 
-    @-webkit-keyframes anim-out-pseudo {
-      0% {
-        background: rgba(0, 0, 0, 0.35);
-      }
-
-      100% {
-        background: transparent;
-      }
-    }
-
-    @-moz-keyframes anim-out-pseudo {
-      0% {
-        background: rgba(0, 0, 0, 0.35);
-      }
-
-      100% {
-        background: transparent;
-      }
-    }
-
-    @-ms-keyframes anim-out-pseudo {
-      0% {
-        background: rgba(0, 0, 0, 0.35);
-      }
-
-      100% {
-        background: transparent;
-      }
-    }
-
     @keyframes anim-out-pseudo {
       0% {
         background: rgba(0, 0, 0, 0.35);
@@ -515,9 +392,6 @@
 
     .php,
     .php::after {
-      -webkit-transition: all 0.5s;
-      -moz-transition: all 0.5s;
-      -o-transition: all 0.5s;
       transition: all 0.5s;
     }
 

src/style/element-plus.scss

@@ -36,17 +36,17 @@
   z-index: 99999 !important;
 }
 
-/* 重置button中icon的margin */
+/* 重置 el-button 中 icon 的 margin */
 .reset-margin [class*="el-icon"] + span {
   margin-left: 2px !important;
 }
 
-/* 自定义popover的类名 */
+/* 自定义 popover 的类名 */
 .pure-popper {
   padding: 0 !important;
 }
 
-/* nprogress适配ep的primary */
+/* nprogress 适配 element-plus 的主题色 */
 #nprogress {
   & .bar {
     background-color: var(--el-color-primary) !important;

src/style/index.scss

@@ -5,36 +5,11 @@
 @import "./dark.scss";
 @import "./tailwind.css";
 
+/* 自定义全局 CssVar */
 :root {
   --pure-transition-duration: 0.016s;
 }
 
-body {
-  width: 100%;
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizelegibility;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}
-
-html {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-/* 头部用户信息样式重置 */
-.hidden {
-  display: none !important;
-}
-
 /* 灰色模式 */
 .html-grey {
   filter: grayscale(100%);
@@ -45,15 +20,7 @@ html {
   filter: invert(80%);
 }
 
-.pc-spacing {
-  margin: 10px;
-}
-
-.mobile-spacing {
-  margin: 0;
-}
-
-/* 重置vxe-table中pager样式 */
+/* 重置 vxe-table 中 pager 样式 */
 .vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
   color: #fff !important;
 }