spanish-quizzer

commit c53981fe6593dbb8b5a5d002cff8fcdadb6d0eb0
parent f5f0f908185dc45a19ab2303bd0526db9963500d
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sat,  1 Aug 2020 21:25:23 -0700

Improve remove item buttons.

Diffstat:
M
Styles/Global.css
 | 
6
+++---
M
Styles/Settings.css
 | 
6
+++++-
M
index.html
 | 
4
++--

3 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/Styles/Global.css b/Styles/Global.css
@@ -23,14 +23,14 @@ body {
 
 
 /******** Control styles ********/
-button, input, select {
+button:not(.itemRemove), input, select {
     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(.itemRemove) {
     cursor: pointer;
     background-color: var(--hover-color);
 }
@@ -93,7 +93,7 @@ body.dark {
     --border-color: #505050;
 }
 
-.dark button, .dark input, .dark select {
+.dark button:not(.itemRemove), .dark input, .dark select {
     --background-color: #222426;
 }
 
diff --git a/Styles/Settings.css b/Styles/Settings.css
@@ -31,9 +31,13 @@ h3 {
     width: 160px;
 }
 
-.itemRemove, .dark .itemRemove {
+.itemRemove {
+    border: none;
+    padding: 0px;
+    margin: 0px;
     cursor: pointer;
     color: var(--foreground-color);
+    background-color: var(--background-color);
 }
 
 #settingsStart, #settingsResume {
diff --git a/index.html b/index.html
@@ -61,7 +61,7 @@
                             <option>Orthographic</option>
                             <option>Irregular</option>
                         </select>
-                        <a id="verbFilterRemove" class="itemRemove">╳</a>
+                        <button id="verbFilterRemove" class="itemRemove">╳</button>
                     </div>
                 </template>
                 
@@ -113,7 +113,7 @@
                         <select id="vocabSetFilter" class="vocabSetFilter">
                             <!-- Generated by VocabSetChanged() -->
                         </select>
-                        <a id="vocabSetRemove" class="itemRemove">╳</a>
+                        <button id="vocabSetRemove" class="itemRemove">╳</button>
                     </div>
                 </template>