search page checkbox styling
Change checkboxes to color-inverting icons
This commit is contained in:
parent
184cc4cf28
commit
4ac4128388
@ -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>
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
Loading…
Reference in New Issue
Block a user