drop instruction styling

mp3chapters · Dec 21, 2023 · cdd885f · cdd885f
1 parent 02f3ac2
commit cdd885f
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -305,6 +305,21 @@
             text-shadow: white 0 0 10px, black 0 0 50px, black 0 0 30px;
         }
 
+        .drop-instruction {
+            border: 2px #eee dashed;
+            border-radius: 10px;
+            padding: 7px 15px;
+        }
+        [data-bs-theme="dark"] .drop-instruction {
+            border: 2px #333 dashed;
+        }
+        /* hide on small devices */
+        @media (max-width: 800px) {
+            .drop-instruction {
+                display: none;
+            }
+        }
+
         #hero {
             position: relative;
         }
@@ -424,7 +439,7 @@ <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Add chapters to your
                         </svg>
                         Select MP3 file</button>
                     <!-- or drag and drop -->
-                    <span class="text-muted">or drag and drop file <svg xmlns="http://www.w3.org/2000/svg" width="16" aria-hidden="true"
+                    <span class="text-muted drop-instruction">or drag and drop file <svg xmlns="http://www.w3.org/2000/svg" width="16" aria-hidden="true"
                             height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
                             <path
                                 d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />