alex/yomichan
1
Fork 0
Code Releases Activity

search page checkbox styling

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ext/bg/search.html
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>
</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>

6
ext/mixed/css/display-dark.css
View File

@ -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;
}

6
ext/mixed/css/display-default.css
View File

@ -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;
}

16
ext/mixed/css/display.css
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
*/