search page checkbox styling

Change checkboxes to color-inverting icons

3 files changed, 28 insertions, 0 deletions

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
  */