summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsiikamiika <siikamiika@users.noreply.github.com>2019-11-10 03:15:55 +0200
committersiikamiika <siikamiika@users.noreply.github.com>2019-11-10 03:15:55 +0200
commit4ac41283880fdbdf9bf0b82e255004a300d62e8b (patch)
treedb77d0a3a75a18796c99e8400035407781441cdf
parent184cc4cf28594f3bef9e141a8cbf9d7eb7a39e88 (diff)
search page checkbox styling
Change checkboxes to color-inverting icons
-rw-r--r--ext/bg/search.html14
-rw-r--r--ext/mixed/css/display-dark.css6
-rw-r--r--ext/mixed/css/display-default.css6
-rw-r--r--ext/mixed/css/display.css16
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
*/