adjust builddeck css

src/ui/BuildDeck/CardDetail.module.scss

@@ -7,7 +7,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  padding: 0 10px 20px 10px;
+  padding: 0 0.625rem 1.25rem 0.625rem;
   transition: 0.2s;
 }
 
@@ -25,41 +25,41 @@
   box-shadow:
     -1px 0 0 2px rgba(255, 255, 255, 0.15),
     0 0 30px 0 #ffffff54;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(1.25rem);
   @include utils.noise-bg;
-  padding: 15px;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
   position: relative;
-  border-radius: 8px;
+  border-radius: 0.5rem;
 }
 
 .btn-close {
   position: absolute;
-  right: 5px;
-  top: 5px;
+  right: 0.3rem;
+  top: 0.3rem;
 }
 
 .card {
-  --width: 160px;
+  --width: 10rem;
   width: var(--width);
   height: calc(var(--width) / var(--card-ratio));
   flex-shrink: 0;
   border: 1px solid #ffffff52;
   overflow: hidden;
-  box-shadow: 0 0 6px 2px #ffffff2b;
+  box-shadow: 0 0 0.375rem 0.125rem #ffffff2b;
   transition: 0.3s;
   cursor: pointer;
   &:hover {
-    --width: 220px;
+    --width: 13.75rem;
     filter: contrast(1.1);
   }
 }
 
 .title {
-  font-size: 20px;
+  font-size: 1.25rem;
   font-family: var(--nato-serif-font);
-  margin: 20px 0 15px;
+  margin: 1.25rem 0 1rem;
   display: flex;
   justify-content: space-between;
   // color: rgba(255, 255, 255, 0.45);

src/ui/BuildDeck/CardDetail.tsx

@@ -117,7 +117,6 @@ export const CardDetail: React.FC<{
         </a>
         <div className={styles.title}>
           <span>{card?.text.name}</span>
-          {/* <Avatar size={22}>光</Avatar> */}
         </div>
         <ScrollableArea>
           <Descriptions layout="vertical" size="small" items={items} />

src/ui/BuildDeck/DeckSelect.module.scss

 .deck-select {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0.25rem;
   .item {
-    height: 40px;
-    padding: 0 20px;
+    height: 2.5rem;
+    padding: 0 1.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -17,10 +17,10 @@
       height: auto;
       top: 0;
       bottom: 0;
-      --padding-x: 5px;
+      --padding-x: 0.3rem;
       left: var(--padding-x);
       right: var(--padding-x);
-      border-radius: 4px;
+      border-radius: 0.25rem;
       transition: 0.2s;
     }
     .hover {
@@ -34,7 +34,7 @@
       transition: 0.2s;
       opacity: 0;
       display: flex;
-      gap: 4px;
+      gap: 0.25rem;
     }
     &:hover {
       .hover,
@@ -47,12 +47,12 @@
 
 .btn-add {
   position: absolute;
-  bottom: 40px;
+  bottom: 2.5rem;
   left: 0;
   right: 0;
   margin: auto;
   background-color: rgba(0, 168, 202, 0.451);
-  box-shadow: 0 0 20px 0 rgba(0, 221, 255, 0.5);
+  box-shadow: 0 0 1.25rem 0 rgba(0, 221, 255, 0.5);
   &:hover {
     background-color: rgba(0, 168, 202, 0.451) !important;
     transform: scale(1.1);

src/ui/BuildDeck/Filter.module.scss

 .title {
   text-align: center;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
-  margin: 12px 0 32px;
+  margin: 0.75rem 0 2rem;
 }
 
 .item {
@@ -10,9 +10,9 @@
   align-items: center;
   .item-name {
     display: flex;
-    gap: 4px;
+    gap: 0.25rem;
     flex: 1;
-    flex-basis: 80px;
+    flex-basis: 5rem;
     vertical-align: middle;
   }
 }
@@ -20,18 +20,18 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  padding: 8px;
+  gap: 1.25rem;
+  padding: 0.5rem;
 }
 
 .btns {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.625rem;
   align-items: center;
-  padding: 30px 0 10px;
+  padding: 1.875rem 0 0.625rem;
   & > button {
-    width: 220px;
+    width: 13.75rem;
     border-radius: 3px;
   }
 }
@@ -44,8 +44,8 @@
   }
   .divider {
     flex: 0;
-    flex-basis: 32px;
+    flex-basis: 2rem;
     text-align: center;
-    line-height: 30px;
+    line-height: 1.25rem;
   }
 }

src/ui/BuildDeck/Filter.tsx

@@ -173,7 +173,7 @@ const Item: React.FC<
       {title}
       {showTip && (
         <Tooltip title="若要输入 ? 的攻击/守备，请输入 -2">
-          <InfoCircleFilled style={{ fontSize: 10 }} />
+          <InfoCircleFilled style={{ fontSize: "0.625rem" }} />
         </Tooltip>
       )}
     </div>

src/ui/BuildDeck/index.module.scss

@@ -9,7 +9,7 @@
 }
 
 .sider {
-  --sider-width: 300px;
+  --sider-width: 18.75rem;
   width: var(--sider-width);
   flex: 0 0 var(--sider-width);
   background: transparent !important;
@@ -27,21 +27,21 @@
   padding-bottom: 0;
   padding-right: 1rem;
   .deck {
-    width: 660px;
+    width: 41.25rem;
   }
   .select {
     flex: 1;
     .select-btns {
-      padding: 5px 10px;
+      padding: 0.3rem 0.625rem;
       display: flex;
-      gap: 8px;
+      gap: 0.5rem;
     }
   }
 }
 
 .container {
   width: -webkit-fill-available;
-  height: calc(100% - 20px);
+  height: calc(100% - 1.25rem);
   border: 1px solid rgba(255, 255, 255, 0.05);
   display: flex;
   flex-direction: column;
@@ -49,8 +49,8 @@
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   .title {
-    height: 44px;
-    flex: 0 0 44px;
+    height: 2.75rem;
+    flex: 0 0 2.75rem;
     justify-content: space-between;
   }
   .deck-zone {
@@ -60,7 +60,7 @@
     --card-grid: 10;
   }
   background-color: hsla(0, 0%, 100%, 0.05);
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(0.3rem);
 }
 
 .deck .container {
@@ -75,20 +75,20 @@
 .search-cards-container {
   height: 100%;
   .search-cards {
-    --card-width: 80px;
+    --card-width: 5rem;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
     padding: 0.75rem;
-    gap: 10px;
+    gap: 0.625rem;
   }
 }
 
 .search-count {
-  font-size: 11px;
+  font-size: 0.7rem;
 }
 
 .empty {
-  gap: 20px;
+  gap: 1.25rem;
   width: 100%;
   height: 100%;
   display: flex;
@@ -103,8 +103,8 @@
   bottom: 0;
   background-color: #212332;
   color: hsla(0, 0%, 100%, 0.3);
-  font-size: 12px;
-  padding: 2px 6px;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
   font-family: var(--theme-font);
   user-select: none;
 }

src/ui/BuildDeck/index.tsx

@@ -237,11 +237,11 @@ export const DeckEditor: React.FC<{
           placeholder="请输入卡组名字"
           bordered={false}
           prefix={<EditOutlined />}
-          style={{ width: 240 }}
+          style={{ width: "8.8rem" }}
           onChange={(e) => setDeckName(e.target.value)}
           value={deckName}
         />
-        <Space style={{ marginRight: 6 }}>
+        <Space style={{ marginRight: "0.4rem" }} size={5}>
           <Button
             type="text"
             size="small"

src/ui/Shared/CardEffectText/index.module.scss

 .desc {
   line-height: 1.8;
-  font-size: 14px;
-  max-height: calc(100% - 237px);
+  font-size: 0.875rem;
+  max-height: calc(100% - 15rem);
   font-family: var(--theme-font);
   white-space: pre-wrap;
 
   .maro-item {
     display: flex;
-    gap: 8px;
+    gap: 0.5rem;
   }
 }