search page checkbox styling

Change checkboxes to color-inverting icons

4 files changed, 33 insertions, 9 deletions

diff --git a/ext/bg/search.html b/ext/bg/search.html
index c7f97712..54c5fb6c 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -25,18 +25,14 @@
                 <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
             </div>
 
-            <div class="input-group" style="padding-top: 10px; font-size: 20px; user-select: none;">
+            <div class="input-group" style="padding-top: 10px;">
                 <span title="Enable kana input method" class="input-group-text">
-                    <label class="scan-disable">
-                        あ
-                        <input type="checkbox" id="wanakana-enable" />
-                    </label>
+                    <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
+                    <label for="wanakana-enable" class="scan-disable">あ</label>
                 </span>
                 <span title="Enable clipboard monitor" class="input-group-text">
-                    <label>
-                        <span class="glyphicon glyphicon-paste"></span>
-                        <input type="checkbox" id="clipboard-monitor-enable" />
-                    </label>
+                    <input type="checkbox" id="clipboard-monitor-enable" class="icon-checkbox" />
+                    <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
                 </span>
             </div>
 
diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index 34a0ccd1..681d248c 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -48,3 +48,9 @@ hr { border-top-color: #2f2f2f; }
 .expression-rare, .expression-rare .kanji-link {
     color: #666666;
 }
+
+.icon-checkbox:checked + label {
+    /* invert colors */
+    background-color: #d4d4d4;
+    color: #1e1e1e;
+}
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index 176c5387..add0a9c8 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -48,3 +48,9 @@ hr { border-top-color: #eeeeee; }
 .expression-rare, .expression-rare .kanji-link {
     color: #999999;
 }
+
+.icon-checkbox:checked + label {
+    /* invert colors */
+    background-color: #333333;
+    color: #ffffff;
+}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7793ddeb..7ee6f5ac 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -74,6 +74,22 @@ ol, ul {
 
 
 /*
+ * Search page
+ */
+
+.icon-checkbox {
+    display: none;
+}
+
+.icon-checkbox + label {
+    cursor: pointer;
+    font-size: 22px;
+    padding: 2px;
+    user-select: none;
+}
+
+
+/*
  * Entries
  */