feat: remove useless css

package-lock.json

@@ -34,6 +34,7 @@
         "react-router-dom": "^6.10.0",
         "react-scripts": "^2.1.3",
         "sql.js": "^1.8.0",
+        "u-reset.css": "^2.0.1",
         "uuid": "^9.0.0",
         "valtio": "^1.10.4",
         "vite-plugin-svgr": "^2.4.0",
@@ -26071,6 +26072,11 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/u-reset.css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/u-reset.css/-/u-reset.css-2.0.1.tgz",
+      "integrity": "sha512-qMMlm4IibUmtA5TbjwVE5B5ZhM77DXAQk6hQzFoHCGDGUUK8J7ivwIA/DJeNDiKuQ8mLJ1B4h2+53a9NjsDgnw=="
+    },
     "node_modules/uglify-es": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
@@ -48585,6 +48591,11 @@
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
+    "u-reset.css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/u-reset.css/-/u-reset.css-2.0.1.tgz",
+      "integrity": "sha512-qMMlm4IibUmtA5TbjwVE5B5ZhM77DXAQk6hQzFoHCGDGUUK8J7ivwIA/DJeNDiKuQ8mLJ1B4h2+53a9NjsDgnw=="
+    },
     "uglify-es": {
       "version": "3.3.9",
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",

package.json

@@ -29,6 +29,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "^2.1.3",
     "sql.js": "^1.8.0",
+    "u-reset.css": "^2.0.1",
     "uuid": "^9.0.0",
     "valtio": "^1.10.4",
     "vite-plugin-svgr": "^2.4.0",

src/main.tsx

@@ -14,6 +14,9 @@
  * - Store模块：进行全局状态的管理。
  *
  * */
+import "u-reset.css";
+import "@/styles/core.scss";
+
 import { ProConfigProvider } from "@ant-design/pro-provider";
 import { ConfigProvider, theme } from "antd";
 import zhCN from "antd/locale/zh_CN";

src/styles/_commom.scss

-.link {
-    font-size: 24px;
-    font-family: 'FontAwesome';
-    line-height: 24px;
-    
-    &-github:before {
-        content: "\f09b";
-    }
-    &-github:hover {
-        color: #E2EEF9;
-    }
-    &-twitter:before {
-        content: "\f099";
-    }
-    &-twitter:hover {
-        color: #00ACEE;
-    }
-    &-google:before {
-         content: "\f1a0";
-    }
-    &-google:hover {
-        color: #E04006;
-    }
-    &-facebook:before {
-         content: "\f082";
-    }
-    &-facebook:hover {
-        color: #4267B2;
-    }
-}
-
-.btn {
-  outline: none;
-  border: 0;
-  padding: 0;
-  overflow: hidden;
-  transform: translate(0, 0);
-  background: transparent;
-}
-
-button {
-    overflow: visible;
-    cursor: pointer;
-}

src/styles/_header.scss

-//=========================================================
-//  Header
-//---------------------------------------------------------
-
-.header {
-  padding: 10px 0;
-  height: 60px;
-  overflow: hidden;
-  line-height: 40px;
-}
-
-
-.header__title {
-  float: left;
-  font-size: 14px;
-  font-weight: 400;
-  text-rendering: auto;
-  transform: translate(0,0);
-
-  &:before {
-    content: "\f111";
-    padding-right: 5px;
-    color: #fff;
-    font-family: 'FontAwesome';
-    line-height: 20px;
-  }
-}
-
-
-.header__actions {
-  float: right;
-  padding: 8px 0;
-  line-height: 24px;
-
-  li {
-    float: left;
-    list-style: none;
-
-    &:last-child {
-      margin-left: 12px;
-      padding-left: 12px;
-      border-left: 1px solid #333;
-    }
-
-    &:first-child {
-      border: none;
-    }
-  }
-
-  .btn {
-    display: block;
-    margin: 0;
-    color: #999;
-    font-size: 14px;
-    line-height: 24px;
-  }
-
-  .link {
-    display: block;
-    color: inherit;
-    font-size: 14px;
-    text-decoration: none;
-    text-rendering: auto;
-    transform: translate(0,0);
-  }
-
-
-  .link--github {
-    font-size: 24px;
-
-    &:before {
-      content: "\f09b";
-      font-family: 'FontAwesome';
-      line-height: 24px;
-    }
-    
-    &:hover {
-        color: #E2EEF9;
-    }
-  }
-}

src/styles/_login-form.scss

-#login {
-	width: 280px;
-}
-
-#login form span {
-	background-color: #363b41;
-	border-radius: 3px 0px 0px 3px;
-	color: #606468;
-	display: block;
-	float: left;
-	height: 50px;
-	line-height: 50px;
-	text-align: center;
-	width: 50px;
-}
-
-#login form input {
-	height: 50px;
-}
-
-#login form input[type="text"], input[type="password"] {
-	background-color: #3b4148;
-	border-radius: 0px 3px 3px 0px;
-	color: #606468;
-	margin-bottom: 1em;
-	padding: 0 16px;
-	width: 230px;
-}
-
-#login form input[type="submit"] {
-	border-radius: 3px;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	background-color: #ea4c88;
-	color: #eee;
-	font-weight: bold;
-	margin-bottom: 10px;
-	text-transform: uppercase;
-	width: 280px;
-}
-
-#login form input[type="submit"]:hover {
-	background-color: #d44179;
-}
-
-#login > p {
-	text-align: center;
-}
-
-#login > p span {
-	padding-left: 5px;
-}

src/styles/_sign-in.scss

-//=========================================================
-//  SignIn
-//---------------------------------------------------------
-
-.sign-in {
-  margin-top: 90px;
-  max-width: 300px;
-
-  &__actions {
-    margin-top: 40px;
-    li {
-      float: left;
-      list-style: none;
-      width: 25%;
-      text-align: center;
-      
-      a {
-         cursor: pointer;
-      }
-    }
-  }
-}
-
-.sign-up {
-  &__actions {
-    a{
-      color: #eee;
-      padding-right: 5px;
-    }
-    p {
-      text-align: center;
-    }
-  }
-}

src/styles/core.scss

-// ref: https://github.com/jvcjunior/login-react-redux
-// thanks!
 @charset "utf-8";
 @import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-#root {
-  margin: 0 auto;
-  width: 100%;
-}
-
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"),
-  "commom", "header", "login-form", "sign-in";
-
 body {
-  color-scheme: light dark;
+  color-scheme: dark;
   color: rgba(255, 255, 255, 0.87);
   background: #0f131e;
   font-size: 14px;
@@ -45,68 +15,21 @@ body {
   left: 0;
   right: 0;
   font-family: var(--theme-font);
-}
-
-a {
-  text-decoration: none;
-}
-
-input {
-  border: none;
-  font-family: "Open Sans", Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.5em;
-  padding: 0;
-  -webkit-appearance: none;
-}
-
-p {
-  line-height: 1.5em;
-}
-
-.clearfix {
-  *zoom: 1;
-
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-
-  &:after {
-    clear: both;
+  --theme-font: "Electrolize", sans-serif;
+  --header-height: 56px;
+  #root {
+    margin: 0 auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
   }
 }
 
-.container {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 300px;
-  margin-top: 200px;
-}
-
-.g-row {
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1000px;
-}
-
 img {
   user-select: none;
   -webkit-user-drag: none;
 }
 
-div,
-p,
-section,
-span,
-image,
-img,
-nav {
+* {
   box-sizing: border-box;
 }
-
-body {
-  --theme-font: "Electrolize", sans-serif;
-  --header-height: 56px;
-}

src/ui/Layout/index.module.scss

@@ -33,3 +33,7 @@
   align-items: center;
   gap: 12px;
 }
+
+.main {
+  flex: 1;
+}

src/ui/Layout/index.tsx

-import "@/styles/core.scss";
-
 import { Avatar } from "antd";
 import { type LoaderFunction, NavLink, Outlet } from "react-router-dom";
 import { useSnapshot } from "valtio";
@@ -38,7 +36,9 @@ export const Component = () => {
           <NavLink to="/profile">个人中心</NavLink>
         </span>
       </nav>
-      <Outlet />
+      <main className={styles.main}>
+        <Outlet />
+      </main>
     </>
   );
 };

src/ui/NewMatch/index.module.scss

-.main {
+.container {
   position: fixed;
   top: var(--header-height);
   height: calc(100% - var(--header-height));
@@ -6,7 +6,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  .container {
+  .wrap {
     display: flex;
     flex-direction: column;
     align-items: center;

src/ui/NewMatch/index.tsx

@@ -23,8 +23,8 @@ export const Component: React.FC = () => {
   return (
     <>
       <Background />
-      <main className={styles.main}>
-        <div className={styles.container}>
+      <div className={styles.container}>
+        <div className={styles.wrap}>
           <Space size={16}>
             <Select
               title="服务器"
@@ -84,7 +84,7 @@ export const Component: React.FC = () => {
             />
           </div>
         </div>
-      </main>
+      </div>
     </>
   );
 };

src/ui/NewWaitRoom/index.module.scss

 .container {
-  height: calc(100% - var(--header-height));
+  // height: calc(100% - var(--header-height));
+  height: 100%;
   display: flex;
   --side-box-width: 400px;
   --battle-icon-width: 50px;

src/ui/NewWaitRoom/index.tsx

-import { CaretRightOutlined, CheckCircleFilled } from "@ant-design/icons";
+import { CheckCircleFilled } from "@ant-design/icons";
 import { Avatar, Button, ConfigProvider, Skeleton, Space } from "antd";
 import classNames from "classnames";
 import { useState } from "react";

src/ui/Start/index.module.scss

-.wrapper {
+.wrap {
   position: relative;
   text-align: center;
   height: calc(100% - var(--header-height));

src/ui/Start/index.tsx

@@ -15,7 +15,7 @@ export const Component: React.FC = () => {
   return (
     <>
       <Background />
-      <div className={styles.wrapper}>
+      <div className={styles.wrap}>
         {/* <div className={styles["particles-container"]}>
           {Array.from({ length: 100 }).map((_, key) => (
             <div key={key} className={styles["particle-container"]}>