adjust modal styles

src/ui/Duel/Message/CardListModal.tsx

@@ -8,7 +8,8 @@ import { YgoCard } from "@/ui/Shared";
 
 import { showCardModal } from "./CardModal";
 
-const CARD_WIDTH = 100;
+const CARD_WIDTH = "6.25rem";
+const DRAWER_WIDTH = "10rem";
 
 // TODO: 显示的位置还需要细细斟酌
 
@@ -46,7 +47,7 @@ export const CardListModal = () => {
       open={isOpen}
       onClose={handleOkOrCancel}
       // headerStyle={{ display: "none" }}
-      width={CARD_WIDTH + 66}
+      width={DRAWER_WIDTH}
       style={{ maxHeight: "100%" }}
       mask={false}
     >

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

 .desc {
   line-height: 1.6;
-  font-size: 14px;
-  max-height: calc(100% - 237px);
+  font-size: 0.875rem;
+  max-height: calc(100% - 14.8rem);
 
   .maro-item {
     display: flex;
-    gap: 8px;
+    gap: 0.5rem;
   }
 }

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

@@ -5,19 +5,19 @@
 }
 
 .drawer {
-  width: 90% !important;
+  width: 20vw !important;
   left: 10%;
-  --height: 640px;
+  --height: 40rem;
   top: calc((100% - var(--height)) / 2);
   height: var(--height) !important;
   position: relative;
-  border-radius: 6px;
+  border-radius: 0.375rem;
   background: #242424;
   :global(.ant-drawer-header) {
-    padding: 15px 0;
+    padding: 1rem 0;
     :global(.ant-drawer-header-title) {
       flex-direction: row-reverse;
-      padding-left: 24px;
+      padding-left: 1.5rem;
     }
   }
 }
@@ -34,19 +34,19 @@
     font-family: var(--theme-font);
   }
   .number {
-    font-size: 30px;
-    line-height: 36px;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
   }
 }
 
 .attline {
   display: flex;
   flex-wrap: wrap;
-  row-gap: 10px;
+  row-gap: 0.625rem;
 }
 
 .info {
   justify-content: space-between;
   position: relative;
-  height: 230px; // TODO - fix this
+  height: 15rem; // TODO - fix this
 }

src/ui/Duel/Message/CardModal/index.tsx

@@ -16,7 +16,7 @@ import {
 import { Desc } from "./Desc";
 import styles from "./index.module.scss";
 
-const CARD_WIDTH = 140;
+const CARD_WIDTH = "8.75rem";
 
 const defaultStore = {
   isOpen: false,
@@ -86,7 +86,7 @@ export const CardModal = () => {
             {/* TODO: 展示星级/LINK数 */}
           </Space>
         </Space>
-        <Divider style={{ margin: "14px 0" }}></Divider>
+        <Divider style={{ margin: "0.875rem 0" }}></Divider>
         <Desc desc={desc} />
       </div>
     </Drawer>

src/ui/Duel/Message/EndModal/index.module.scss

@@ -3,13 +3,13 @@
   text-align: center;
 
   .result {
-    font-size: 30px;
+    font-size: 1.875rem;
     font-family: var(--theme-font);
     color: var(--text-color);
   }
 
   .reason {
-    font-size: 20px;
+    font-size: 1.25rem;
     font-family: var(--theme-font);
   }
 }

src/ui/Duel/Message/OptionModal.tsx

@@ -72,7 +72,7 @@ export const OptionModal = () => {
               style={{
                 display: "grid",
                 gridTemplateColumns: "repeat(2, 1fr)",
-                gap: "10px",
+                gap: "0.625rem",
               }}
               onChange={(values: any) => {
                 const v = selecteds.map((x, i) => (i === page ? values : x));
@@ -83,7 +83,8 @@ export const OptionModal = () => {
                 <CheckCard
                   key={idx}
                   style={{
-                    width: "200px",
+                    width: "12.5rem",
+                    fontSize: "1rem",
                     marginInlineEnd: 0,
                     marginBlockEnd: 0,
                   }}
@@ -108,7 +109,7 @@ const Selector: React.FC<{
     <Segmented
       block
       options={Array.from({ length: maxPage }).map((_, idx) => idx)}
-      style={{ margin: "10px 0" }}
+      style={{ margin: "0.625rem 0" }}
       value={page}
       onChange={onChange as any}
     ></Segmented>

src/ui/Duel/Message/SelectCardsModal/index.module.scss

@@ -5,7 +5,7 @@
     top: 50%;
     display: flex;
     justify-content: space-between;
-    padding: 0 10px;
+    padding: 0 0.625rem;
     box-sizing: border-box;
     height: 0;
     button {
@@ -13,7 +13,7 @@
     }
   }
   :global(.ant-pro-checkcard) {
-    border-radius: 4px;
+    border-radius: 0.25rem;
     overflow: hidden;
   }
   // 多选卡片的样式
@@ -36,11 +36,11 @@
 .check-group {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
+  gap: 0.625rem;
 }
 
 .check-card {
-  width: 100px;
+  width: 6.25rem;
   aspect-ratio: var(--card-ratio);
   margin-inline-end: 0;
   margin-block-end: 0;

src/ui/Duel/Message/SelectCardsModal/index.tsx

@@ -110,7 +110,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
           <span>{single ? "每次选择一张" : ""}</span>
         </>
       } // TODO: 这里可以再细化一些
-      width={600}
+      width={"37.5rem"}
       okButtonProps={{
         disabled: !submitable,
       }}

src/ui/Duel/Message/SortCardModal.tsx

@@ -114,7 +114,7 @@ const SortableItem = (props: { id: number; meta: CardMeta }) => {
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <Card
-        style={{ width: 100 }}
+        style={{ width: "6.25rem" }}
         cover={
           <img
             alt={props.meta.id.toString()}

src/ui/Duel/Message/YesNoModal/index.tsx

@@ -25,7 +25,7 @@ export const YesNoModal: React.FC = () => {
     <NeosModal
       title={`${preHintMsg} ${msg}`}
       open={isOpen}
-      width={400}
+      width={"25rem"}
       afterClose={() => (matStore.hint.esHint = undefined)}
       footer={
         <>

src/ui/Duel/PlayMat/Menu/index.module.scss

@@ -2,16 +2,16 @@
   position: fixed;
   display: flex;
   // flex-direction: column;
-  gap: 6px;
-  bottom: 20px;
-  right: 35px;
+  gap: 0.375rem;
+  bottom: 1.25rem;
+  right: 2.2rem;
   z-index: 999;
   background-color: #323232;
-  padding: 8px;
-  border-radius: 6px;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
   overflow: hidden;
 }
 
 :global(.ant-dropdown-menu-item) {
-  gap: 8px;
+  gap: 0.5rem;
 }

src/ui/Shared/YgoCard/index.tsx

@@ -11,7 +11,7 @@ interface Props {
   code?: number;
   // cardName?: string;
   style?: CSSProperties;
-  width?: number;
+  width?: number | string;
   onClick?: () => void;
   onLoad?: () => void;
 }

src/ui/Side/TpModal.module.scss

@@ -3,10 +3,10 @@
   align-items: center;
   justify-content: center;
   flex-direction: row;
-  gap: 80px;
+  gap: 5rem;
   button {
-    width: 100px;
-    height: 50px;
-    font-size: 16px;
+    width: 6.25rem;
+    height: 3rem;
+    font-size: 1rem;
   }
 }