search page checkbox styling

Change checkboxes to color-inverting icons
This commit is contained in:
siikamiika 2019-11-10 03:15:55 +02:00
parent 184cc4cf28
commit 4ac4128388
4 changed files with 33 additions and 9 deletions

View File

@ -25,18 +25,14 @@
<p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p> <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
</div> </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"> <span title="Enable kana input method" class="input-group-text">
<label class="scan-disable"> <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
<label for="wanakana-enable" class="scan-disable"></label>
<input type="checkbox" id="wanakana-enable" />
</label>
</span> </span>
<span title="Enable clipboard monitor" class="input-group-text"> <span title="Enable clipboard monitor" class="input-group-text">
<label> <input type="checkbox" id="clipboard-monitor-enable" class="icon-checkbox" />
<span class="glyphicon glyphicon-paste"></span> <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
<input type="checkbox" id="clipboard-monitor-enable" />
</label>
</span> </span>
</div> </div>

View File

@ -48,3 +48,9 @@ hr { border-top-color: #2f2f2f; }
.expression-rare, .expression-rare .kanji-link { .expression-rare, .expression-rare .kanji-link {
color: #666666; color: #666666;
} }
.icon-checkbox:checked + label {
/* invert colors */
background-color: #d4d4d4;
color: #1e1e1e;
}

View File

@ -48,3 +48,9 @@ hr { border-top-color: #eeeeee; }
.expression-rare, .expression-rare .kanji-link { .expression-rare, .expression-rare .kanji-link {
color: #999999; color: #999999;
} }
.icon-checkbox:checked + label {
/* invert colors */
background-color: #333333;
color: #ffffff;
}

View File

@ -73,6 +73,22 @@ ol, ul {
} }
/*
* Search page
*/
.icon-checkbox {
display: none;
}
.icon-checkbox + label {
cursor: pointer;
font-size: 22px;
padding: 2px;
user-select: none;
}
/* /*
* Entries * Entries
*/ */