adjust waitroom css

src/ui/WaitRoom/Chat.module.scss

@@ -11,17 +11,17 @@
   width: 100%;
   margin-top: auto;
   background-color: hsla(0, 0%, 100%, 0.07);
-  padding: 8px;
+  padding: 0.5rem;
   display: flex;
 }
 
 .dialogs {
   position: absolute;
-  padding: 8px 0;
+  padding: 0.5rem 0;
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0.25rem;
   .item {
     vertical-align: baseline;
     .name {
@@ -31,16 +31,16 @@
     .time {
       font-size: 11px;
       opacity: 0.8;
-      margin-left: 8px;
+      margin-left: 0.5rem;
     }
     .content {
       font-size: 13px;
       color: #ccc;
       margin-top: 2px;
     }
-    padding: 8px 8px;
-    margin: 0 10px;
-    border-radius: 8px;
+    padding: 0.5rem 0.5rem;
+    margin: 0 0.625rem;
+    border-radius: 0.5rem;
     transition: 0.2s;
     &:hover {
       background-color: hsla(0, 0%, 100%, 0.07);

src/ui/WaitRoom/Popover.tsx

@@ -94,7 +94,7 @@ export const TpPopover: React.FC<
 
   return (
     <Popover
-      overlayStyle={{ backdropFilter: "blur(10px)" }}
+      overlayStyle={{ backdropFilter: "blur(0.625rem)" }}
       content={
         <Space>
           {[Tp.First, Tp.Second].map((item) => (

src/ui/WaitRoom/index.module.scss

@@ -2,9 +2,9 @@
   height: 100%;
   display: flex;
   align-items: center;
-  --side-box-width: 500px;
-  --border-radius: 10px;
-  --sider-width: 300px;
+  --side-box-width: 30rem;
+  --border-radius: 0.625rem;
+  --sider-width: 18.75rem;
   .content {
     height: 100%;
     position: relative;
@@ -15,7 +15,7 @@
     justify-content: center;
     transition: transform 0.3s;
     .wrap {
-      height: 500px; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
+      height: 30rem; // TODO: 修正这里的高度，或者说修正全局的高度设置。高度不应该超过100%
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -25,11 +25,11 @@
   .sider {
     position: relative;
     width: var(--sider-width);
-    flex: 0 0 300px;
+    flex: 0 0 18.75rem;
     height: 100%;
     background-color: hsla(0, 0%, 100%, 0.05);
     transition: transform 0.3s;
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(0.3rem);
     z-index: 1;
   }
 }
@@ -37,48 +37,48 @@
 .both-side-container {
   display: flex;
   flex-direction: column;
-  gap: 30px;
+  gap: 1.8rem;
   align-items: center;
-  margin-top: 80px;
+  margin-top: 5rem;
   .side-box {
-    height: 100px;
+    height: 6.25rem;
     width: var(--side-box-width);
     border-radius: var(--border-radius);
     background: hsla(0, 0%, 100%, 0.1);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(0.625rem);
     overflow: hidden;
-    padding: 0 32px;
+    padding: 0 2rem;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 1rem;
     .inner {
       position: absolute;
       left: 0;
-      width: 150px;
-      height: 70px;
-      filter: blur(120px);
+      width: 9.4rem;
+      height: 4.375rem;
+      filter: blur(7.5rem);
       transition: 0.3s;
     }
     &.ready .inner {
-      width: 250px;
-      height: 100px;
-      filter: blur(100px) brightness(1.2) saturate(1.2);
+      width: 15.6rem;
+      height: 6.25rem;
+      filter: blur(6.25rem) brightness(1.2) saturate(1.2);
     }
     &.me {
-      box-shadow: -5px 0 20px 0 rgba(0, 115, 255, 0.15);
+      box-shadow: -0.3rem 0 1.25rem 0 rgba(0, 115, 255, 0.15);
       .inner {
         background: linear-gradient(to right, blue, rgb(0, 149, 255));
       }
       z-index: 1;
     }
     &.op {
-      box-shadow: 5px 0 20px 0 rgba(255, 0, 81, 0.1);
+      box-shadow: 0.3rem 0 1.25rem 0 rgba(255, 0, 81, 0.1);
       .inner {
         background: linear-gradient(to right, rgb(255, 0, 106), rgb(255, 0, 0));
       }
     }
     .name {
-      font-size: 18px;
+      font-size: 1.2rem;
       color: white;
       z-index: 1;
     }
@@ -108,22 +108,22 @@
 }
 
 .avatars-watch {
-  padding-left: 8px;
+  padding-left: 0.5rem;
 }
 
 .btns-side {
   position: absolute;
-  left: 10px;
-  top: 10px;
+  left: 0.625rem;
+  top: 0.625rem;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0.625rem;
   transition: 0.3s;
   .btn {
-    width: 32px;
+    width: 2rem;
     background: hsla(0, 0%, 100%, 0.1);
     justify-content: start;
-    padding: 0 8px;
+    padding: 0 0.5rem;
     overflow: hidden;
     .btn-icon {
       display: flex;
@@ -135,7 +135,7 @@
       }
     }
     &:hover {
-      width: 100px;
+      width: 6.25rem;
     }
   }
 }
@@ -153,14 +153,14 @@
 }
 
 .fake-btn-large {
-  min-width: 88px;
-  height: 40px;
+  min-width: 5.5rem;
+  height: 2.5rem;
   background: hsla(0, 0%, 100%, 0.1);
-  border-radius: 6px;
+  border-radius: 0.375rem;
   display: flex;
   align-items: center;
-  padding: 0 16px 0 16px;
-  gap: 8px;
+  padding: 0 1rem 0 1rem;
+  gap: 0.5rem;
   cursor: not-allowed;
   transition: 0.2s;
   position: relative;

src/ui/WaitRoom/index.tsx

@@ -249,7 +249,7 @@ const Controller: React.FC<{ onDeckChange: (deckName: string) => void }> = ({
       <Select
         title="卡组"
         showSearch
-        style={{ width: 250 }}
+        style={{ width: "15.6rem" }}
         defaultValue={snapDeck.decks[0].deckName}
         options={snapDeck.decks.map((deck) => ({
           value: deck.deckName,