feat: small styles

src/styles/core.scss

@@ -35,17 +35,16 @@ body {
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background: #0f131e;
-  // font: 87.5%/1.5em "Open Sans", sans-serif;
   font-size: 14px;
   display: flex;
   margin: 0;
-  // place-items: center;
   min-width: 320px;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  font-family: var(--theme-font);
 }
 
 a {
@@ -80,10 +79,6 @@ p {
 }
 
 .container {
-  // left: 50%;
-  // position: fixed;
-  // top: 50%;
-  // transform: translate(-50%, -50%);
   margin: 0 auto;
   width: 100%;
   max-width: 300px;

src/ui/BuildDeck/DeckSelect.module.scss

@@ -33,6 +33,8 @@
     .btns {
       transition: 0.2s;
       opacity: 0;
+      display: flex;
+      gap: 4px;
     }
     &:hover {
       .hover,
@@ -44,14 +46,15 @@
 }
 
 .btn-add {
-  position: fixed;
+  position: absolute;
   bottom: 40px;
-  left: calc(300px / 2); // 暂时没想到太好的办法，只能先设为sider的一半
+  left: 50%;
   transform: translate(-50%);
-  background-color: rgb(59, 0, 169);
+  background: linear-gradient(rgba(89, 0, 255, 0.611), rgba(38, 0, 255, 0.611));
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
   &:hover {
     background-color: rgb(78, 0, 223) !important;
+    box-shadow: 0 0 20px 0 rgba(128, 0, 255, 0.5);
     transform: translate(-50%) scale(1.3);
   }
 }

src/ui/BuildDeck/DeckSelect.tsx

@@ -27,13 +27,13 @@ export const DeckSelect: React.FC<{
               <Button
                 icon={<DeleteOutlined />}
                 type="text"
-                shape="circle"
+                size="small"
                 onClick={cancelBubble(() => onDelete(id))}
               />
               <Button
                 icon={<DownloadOutlined />}
                 type="text"
-                shape="circle"
+                size="small"
                 onClick={cancelBubble(() => onDownload(id))}
               />
             </div>

src/ui/BuildDeck/index.module.scss

@@ -5,19 +5,20 @@
   left: 0;
   top: var(--nav-height);
   height: calc(100% - var(--nav-height));
+  display: flex;
 }
 
 .sider {
-  max-height: 100%;
-  min-height: 100%;
-  overflow-x: hidden;
-  overflow-y: overlay;
+  --sider-width: 300px;
+  width: var(--sider-width);
+  flex: 0 0 var(--sider-width);
   background: transparent !important;
   position: relative;
-  @include utils.scrollbar;
-  // 去掉menu
-  .menu {
-    // min-height: 100%;
+  .deck-select-container {
+    max-height: 100%;
+    min-height: 100%;
+    @include utils.scrollbar;
+    padding-bottom: 1rem;
   }
 }
 

src/ui/BuildDeck/index.tsx

@@ -35,26 +35,28 @@ export const Component: React.FC = () => {
   return (
     <ConfigProvider theme={theme}>
       <Background />
-      <Layout className={styles.layout} style={{ width: "100%" }}>
-        <Sider width={300} className={styles.sider}>
-          <DeckSelect
-            decks={Array.from({ length: 17 }).map((_, i) => ({
-              name: `卡组 ${i}`,
-              id: i,
-            }))}
-            selected={4}
-            onSelect={(id) => console.log(id)}
-            onDelete={(id) => console.log(id)}
-            onDownload={(id) => console.log(id)}
-            onAdd={() => console.log("add")}
-          />
+      <div className={styles.layout} style={{ width: "100%" }}>
+        <div className={styles.sider}>
+          <div className={styles["deck-select-container"]}>
+            <DeckSelect
+              decks={Array.from({ length: 18 }).map((_, i) => ({
+                name: `卡组 ${i}`,
+                id: i,
+              }))}
+              selected={4}
+              onSelect={(id) => console.log(id)}
+              onDelete={(id) => console.log(id)}
+              onDownload={(id) => console.log(id)}
+              onAdd={() => console.log("add")}
+            />
+          </div>
           <CardDetail code={123} open={false} onClose={() => {}} />
-        </Sider>
+        </div>
         <Content className={styles.content}>
           <Deck />
           <CardSelect />
         </Content>
-      </Layout>
+      </div>
     </ConfigProvider>
   );
 };
@@ -72,6 +74,7 @@ const Deck: React.FC = () => {
             placeholder="我的卡组"
             bordered={false}
             prefix={<EditOutlined />}
+            style={{ width: 400 }}
           />
           <Space style={{ marginRight: 6 }}>
             <Button type="text" size="small" icon={<DeleteOutlined />}>
@@ -88,7 +91,7 @@ const Deck: React.FC = () => {
         <div className={styles["deck-zone"]}>
           <div className={styles.main}>
             <div className={styles["card-continer"]}>
-              {Array.from({ length: 60 }).map((_, i) => (
+              {Array.from({ length: 42 }).map((_, i) => (
                 <div className={styles.card} key={i} />
               ))}
             </div>

src/ui/Duel/Message/CardModal/Desc.module.scss

 .desc {
   line-height: 1.6;
   font-size: 14px;
-  font-family: var(--theme-font);
   max-height: calc(100% - 237px);
   overflow-y: overlay;
   &:hover {