Fix checked icon size
This commit is contained in:
Rob Garrison
parent
0d87689078
commit
9b408aaad4
69
manage.html
69
manage.html
|
|
@ -33,9 +33,10 @@
|
|||
<div class="entry-col entry-filter">
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input class="entry-filter-toggle" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -43,9 +44,10 @@
|
|||
<div class="entry-col entry-state">
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input class="entry-state-toggle" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -325,9 +327,10 @@
|
|||
<input id="manage.onlyEnabled" type="checkbox"
|
||||
data-filter=".enabled"
|
||||
data-filter-hide=".disabled">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span class="select-resizer">
|
||||
|
|
@ -344,9 +347,10 @@
|
|||
<input id="manage.onlyLocal" type="checkbox"
|
||||
data-filter=":not(.updatable):not(.update-done)"
|
||||
data-filter-hide=".updatable, .update-done">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span class="select-resizer">
|
||||
|
|
@ -363,9 +367,10 @@
|
|||
<input id="manage.onlyUsercss" type="checkbox"
|
||||
data-filter=".usercss"
|
||||
data-filter-hide=":not(.usercss)">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span class="select-resizer">
|
||||
|
|
@ -384,9 +389,10 @@
|
|||
data-filter-hide=":not(.updatable):not(.update-done),
|
||||
.no-update:not(.update-problem),
|
||||
.updatable:not(.can-update):not(.update-problem):not(.update-done)">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
<span i18n-text="manageOnlyUpdates"></span>
|
||||
</label>
|
||||
|
|
@ -399,11 +405,11 @@
|
|||
<div>
|
||||
<label class="checkmate toggle-all" tabindex="0">
|
||||
<input id="toggle-all-filters" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 14 14">
|
||||
<path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0
|
||||
0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
|
||||
<path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
|
||||
<path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
<path class="indeterminate" d="M2.5 4.5h5v1h-5v-1z"/>
|
||||
</svg>
|
||||
</label>
|
||||
<span id="bulk-filter-count"></span>
|
||||
|
|
@ -446,7 +452,6 @@
|
|||
|
||||
</span>
|
||||
|
||||
|
||||
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
|
||||
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
|
||||
7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
|
||||
|
|
@ -509,10 +514,10 @@
|
|||
<div id="appliesToConfig">
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input id="manage.newUI.favicons" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16
|
||||
8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
<span i18n-text="manageFavicons"></span>
|
||||
</label>
|
||||
|
|
@ -520,10 +525,10 @@
|
|||
<p></p>
|
||||
<label class="checkmate" tabindex="0">
|
||||
<input id="manage.newUI.faviconsGray" type="checkbox">
|
||||
<svg class="svg-icon checkbox" viewBox="0 0 24 24">
|
||||
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16
|
||||
8.01 8.01 0 0 1 0 16z"/>
|
||||
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
|
||||
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
|
||||
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
|
||||
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
|
||||
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
|
||||
</svg>
|
||||
<span i18n-text="manageFaviconsGray"></span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -12,13 +12,16 @@
|
|||
--header-icon-color: #888;
|
||||
--header-icon-hover-color: hsla(180, 99%, 58%, 1);
|
||||
|
||||
--tools-bg-color: #ccc;
|
||||
|
||||
--entry-header-bg-color: #ddd;
|
||||
--entry-header-text-color: #111;
|
||||
|
||||
--checked-bg-color: hsla(180, 38%, 25%, 1);
|
||||
--checked-count-bg-color: hsla(180, 100%, 20%, 1);
|
||||
--checked-bg-color: hsla(180, 100%, 20%, 1);
|
||||
--checked-mark-color: #fff;
|
||||
--entry-icon-color: #666;
|
||||
--entry-icon-hover-color: hsla(180, 38%, 25%, 1);
|
||||
--entry-icon-hover-color: hsla(180, 100%, 20%, 1);
|
||||
--delete-icon-hover-color: #d40000;
|
||||
}
|
||||
|
||||
|
|
@ -425,14 +428,15 @@ a svg, .svg-icon.sort {
|
|||
}
|
||||
|
||||
/* Checkbox */
|
||||
.checkmate input:checked + svg.checkbox {
|
||||
background: var(--checked-bg-color);
|
||||
border-radius: var(--entry-icon-size);
|
||||
.checkmate input:checked + svg.checkbox .filled-circle {
|
||||
fill: var(--checked-bg-color);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkmate input[type="checkbox"],
|
||||
.checkmate input:checked + svg.checkbox .circle,
|
||||
.checkmate input:not(:checked) + svg .checkmark,
|
||||
.checkmate input:not(:checked) + svg.checkbox .filled-circle,
|
||||
.checkmate input:not(:indeterminate) + svg .indeterminate {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -642,7 +646,7 @@ details.applies-to-extra[open] {
|
|||
|
||||
/* bulk actions */
|
||||
#tools-wrapper {
|
||||
background: #ddd;
|
||||
background: var(--tools-bg-color);
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
|
|
@ -708,16 +712,10 @@ details.applies-to-extra[open] {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
#filters-wrapper filter-selection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active #filters-stats,
|
||||
#bulk-filter-count:not(:empty) {
|
||||
background-color: darkcyan;
|
||||
border-color: darkcyan;
|
||||
background-color: var(--checked-count-bg-color);
|
||||
border-color: var(--checked-count-bg-color);
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user