1145141919810

for-the-zero · for-the-zero · commit bccc8086c9c7 · 2025-01-26T16:49:33.000+08:00
diff --git a/showon/index.css b/showon/index.css
@@ -31,14 +31,15 @@
 body{
     font-family: 'Google Sans', 'Noto Sans SC';
     color: #202020;
-    background-color: #dfdfdf;
+    background-color: var(--md-sys-color-background);
     margin: 0;
     padding: 0;
     display: flex;
     height: 100vh;
     align-items: center;
     justify-content: center;
     overflow-y: hidden;
+    box-sizing: border-box;
 }
 h1{
     font-size: 3rem;
@@ -53,7 +54,7 @@ span{
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    gap: 20px;
+    gap: 10px;
     max-height: 90vh;
     overflow-y: auto;
     overflow-x: hidden;
@@ -72,7 +73,7 @@ span{
 input[type="color"]{
     border-radius: 0px;
     border-color: transparent;
-    background-color: #dfdfdf;
+    background-color: var(--md-sys-color-background);
     width: 20%;
 }
 md-outlined-text-field{
@@ -87,4 +88,20 @@ md-outlined-text-field{
     width: 100%;
     max-width: 525px;
     margin-bottom: 20px;
+}
+.start-btn{
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+}
+
+@media screen and (max-aspect-ratio: 1/1){
+    .header,.container{
+        width: 90vw;
+        max-width: 90vw;
+    }
+    .selections{
+        width: 100%;
+        max-width: 100%;
+    }
 }
diff --git a/showon/index.html b/showon/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>ShowOn</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap">
@@ -18,15 +19,15 @@ <h1 class="mdui-prose">ShowOn</h1>
             </md-icon-button>
         </div>
         <div class="container">
-            <div class="selections">
+            <div class="selections text">
                 <span>文本：</span>
                 <md-outlined-text-field type="textarea" label="输入文本" rows="1"></mdui-text-field>
             </div>
             <div class="selections">
                 <span>字体颜色：</span>
                 <input type="color" class="font-color" value="#202020">
                 <span>背景颜色：</span>
-                <input type="color" class="background-color" value="#dfdfdf">
+                <input type="color" class="background-color" value="#fcfcff">
             </div>
             <div class="selections">
                 <span>模式：</span>
@@ -37,7 +38,7 @@ <h1 class="mdui-prose">ShowOn</h1>
                     <label for="scroll">滚动显示</label>
                 </form>
             </div>
-            <md-filled-tonal-button>
+            <md-filled-tonal-button class="start-btn">
                 启动！
                 <md-icon slot="icon">send</md-icon>
             </md-filled-tonal-button>
