修按鈕和 textarea 樣式

StreetVoice · Nov 11, 2024 · 0e6d70f · 0e6d70f
1 parent 9f9d593
commit 0e6d70f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -37,11 +37,16 @@ <h2>上傳歌曲</h2>
         <span class="icon-arrow text-red position-absolute"></span>
         <textarea id="lyrics-textarea" rows="1" cols="50" aria-label="請輸入歌詞" placeholder="請輸入歌詞"></textarea>
       </div>
-      <div class="text-right">
-        <button id="back-button" class="btn-white" aria-label="上一步">上一步</button>
-        <button id="reset-button" class="btn-white" aria-label="重來">重來</button>
-        <button id="copy-button" class="btn-white" aria-label="複製">複製</button>
-        <button id="export-button" class="btn-red" aria-label="匯出">匯出</button>
+      <div class="btns-wrapper">
+        <div class="d-flex">
+          <button id="back-button" class="btn-white" aria-label="上一步">上一步</button>
+          <button id="reset-button" class="btn-white" aria-label="重來">重來</button>
+          <button id="copy-button" class="btn-white" aria-label="複製">複製</button>
+        </div>
+        <div class="d-block">
+          <button id="export-button" class="btn-red" aria-label="匯出">匯出</button>
+        </div>
+      </div>
       </div>
     </section>
   </main>

diff --git a/static/style/styles.css b/static/style/styles.css
@@ -79,7 +79,10 @@ body {
 
 button {
   display: inline-flex;
-  text-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-pack: center;
+  justify-content: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
@@ -104,25 +107,14 @@ button:disabled {
   background: #fff;
   color: #666;
 }
-.btn-white:not(:disabled):hover {
-  background: #d2d2d2;
-}
 
 .btn-red {
   border: 2px solid #f9595f;
   background: #f9595f;
   color: #fff;
 }
-.btn-red:not(:disabled):hover {
-  border: 2px solid #f72830;
-  background: #f72830;
-}
 
 .btn-circle {
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-pack: center;
-  justify-content: center;
   border-radius: 50%;
   padding: 0;
   width: 60px;
@@ -138,6 +130,10 @@ button:disabled {
 .d-block {
   display: block;
 }
+.d-flex {
+  display: flex;
+}
+
 .text-center {
   text-align: center;
 }
@@ -284,12 +280,15 @@ h2 {
   resize: vertical;
   margin-bottom: 1rem;
 }
+#lyrics-textarea:focus { 
+  outline: none !important;
+  border-color: #f9595f;
+}
 .icon-arrow {
   font-size: 1.8rem;
   left: -2.2rem;
   top: 1rem;
 }
-
 /* Footer */
 footer {
   text-align: center;
@@ -387,7 +386,44 @@ footer {
 
 
 /* Responsive Design */
-@media (max-width: 992px) {
+@media (max-width: 767.98px) {
+  .btns-wrapper .d-flex {
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .btns-wrapper .btn-white {
+    width: 30%;
+    margin-left: 0;
+  }
+  .btns-wrapper .btn-red {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  .btns-wrapper {
+    display: flex;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+  }
+  .btns-wrapper .btn {
+    width: auto;
+  }
+  .btns-wrapper .btn-white,
+  .btns-wrapper .btn-red {
+    margin-left: .5rem;
+  }
+}
+@media (min-width: 992px) {
+  .btn-white:not(:disabled):hover {
+    background: #d2d2d2;
+  }
+  .btn-red:not(:disabled):hover {
+    border: 2px solid #f72830;
+    background: #f72830;
+  }
+}
+@media (max-width: 991.98px) {
   body {
     padding-bottom: 60px;
   }
@@ -442,4 +478,4 @@ footer {
   .dashed-block {
     min-height: 0;
   }
-}
+}