songs2slides

commit bc3a94a4948de9f275d17bfd5afb1dd9154367b9
parent ef48e04a5fc43f6d69d004b0e3649276e3f1d203
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sun,  2 Aug 2020 14:45:42 -0700

Improve remove song buttons.

Diffstat:
M
Songs2Slides/static/global.css
 | 
6
+++---
M
Songs2Slides/static/home.css
 | 
8
+++++---
M
Songs2Slides/templates/home.html
 | 
2
+-

3 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/Songs2Slides/static/global.css b/Songs2Slides/static/global.css
@@ -19,14 +19,14 @@ body {
     background-color: var(--background-color);
 }
 
-button, input, select, textarea {
+button:not(.songRemove), input, select, textarea {
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
     color: var(--foreground-color);
     border-radius: 0px;
 }
 
-button:hover:enabled {
+button:hover:enabled:not(.songRemove) {
     cursor: pointer;
     background-color: var(--hover-color);
 }
@@ -79,7 +79,7 @@ body.dark {
     color: #000000;
 }
 
-.dark button, .dark input, .dark select {
+.dark button:not(.songRemove), .dark input, .dark select {
     --background-color: #222426;
 }
 
diff --git a/Songs2Slides/static/home.css b/Songs2Slides/static/home.css
@@ -28,11 +28,13 @@ h3 {
     border-radius: 5px;
 }
 
-.songRemove, .dark .songRemove {
+.songRemove {
+    border: none;
+    padding: 0px;
+    margin: 0px;
     cursor: pointer;
-    margin-left: 3px;
-    margin-right: 3px;
     color: var(--foreground-color);
+    background-color: var(--song-color);
 }
 
 #addSong {
diff --git a/Songs2Slides/templates/home.html b/Songs2Slides/templates/home.html
@@ -13,7 +13,7 @@
             <div class="song">
                 <input type="text" class="title" placeholder="Song Title"/>
                 <input type="text" class="artist" placeholder="Song Artist"/>
-                <a id="remove" class="songRemove">╳</a>
+                <button id="remove" class="songRemove">╳</button>
             </div>
         </template>
         <div id="songs"></div>