open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FF: don't style checkboxes in FF < 57

Browse Source
This commit is contained in:
tophf 2017-12-03 07:02:50 +03:00
parent e9a38c8eda
commit e6e762505f
2 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/messaging.js
View File

@ -61,6 +61,7 @@ if (BG && !BG.getStyles && BG !== window) {
} }
if (!BG || BG !== window) { if (!BG || BG !== window) {
document.documentElement.classList.toggle('firefox', FIREFOX); document.documentElement.classList.toggle('firefox', FIREFOX);
document.documentElement.classList.toggle('moz-appearance-bug', FIREFOX && FIREFOX < 57);
document.documentElement.classList.toggle('opera', OPERA); document.documentElement.classList.toggle('opera', OPERA);
// TODO: remove once our manifest's minimum_chrome_version is 50+ // TODO: remove once our manifest's minimum_chrome_version is 50+
// Chrome 49 doesn't report own extension pages in webNavigation apparently // Chrome 49 doesn't report own extension pages in webNavigation apparently

53
popup/popup.css
View File

@ -23,7 +23,28 @@ body > div:not(#installed) {
display: none; display: none;
} }
.svg-icon.checked { /* there's a bug in FF 52 ESR so until we find a better workaround we won't style checkboxes in FF */
html.moz-appearance-bug .svg-icon.checked {
display: none;
}
html.moz-appearance-bug input[type="checkbox"] {
position: absolute;
left: 8px;
top: 0;
bottom: 0;
margin: auto;
}
html.moz-appearance-bug #disableAll {
left: -1px;
}
html.moz-appearance-bug #disableAll-label {
padding-left: 16px !important;
}
html:not(.moz-appearance-bug) .svg-icon.checked {
position: absolute; position: absolute;
height: 8px; height: 8px;
width: 8px; width: 8px;
@ -32,12 +53,12 @@ body > div:not(#installed) {
margin: 2px 0 0 2px; margin: 2px 0 0 2px;
} }
input[type="checkbox"]:checked + .svg-icon.checked { html:not(.moz-appearance-bug) input[type="checkbox"]:checked + .svg-icon.checked {
display: inline-flex; display: inline-flex;
transition: fill .25s; transition: fill .25s;
} }
input[type="checkbox"] { html:not(.moz-appearance-bug) input[type="checkbox"] {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
border: 1px solid hsl(0, 0%, 46%); border: 1px solid hsl(0, 0%, 46%);
@ -51,52 +72,54 @@ input[type="checkbox"] {
transition: background-color .25s, border-color .25s; transition: background-color .25s, border-color .25s;
} }
input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked { html:not(.moz-appearance-bug) input[type="checkbox"]:checked:hover,
html:not(.moz-appearance-bug) .style-name:hover input[type="checkbox"]:checked {
border-color: hsl(0, 0%, 32%); border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%); background-color: hsl(0, 0%, 82%);
} }
input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"], html:not(.moz-appearance-bug) input[type="checkbox"]:hover,
.entry.disabled .style-name:hover input[type="checkbox"] { html:not(.moz-appearance-bug) .style-name:hover input[type="checkbox"],
html:not(.moz-appearance-bug) .entry.disabled .style-name:hover input[type="checkbox"] {
border-color: hsl(0, 0%, 32%); border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%); background-color: hsl(0, 0%, 82%);
} }
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked { html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
fill: hsl(0, 68%, 42%); fill: hsl(0, 68%, 42%);
} }
#installed.disabled + .actions #disableAll:checked { html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked {
border-color: hsl(0, 68%, 50%); border-color: hsl(0, 68%, 50%);
} }
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked { html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
fill: #fff; fill: #fff;
} }
#disableAll:hover { html:not(.moz-appearance-bug) #disableAll:hover {
border-color: hsl(0, 68%, 50%); border-color: hsl(0, 68%, 50%);
background-color: hsl(20, 70%, 75%); background-color: hsl(20, 70%, 75%);
} }
#disableAll:hover + .svg-icon + label { html:not(.moz-appearance-bug) #disableAll:hover + .svg-icon + label {
color: hsl(0, 68%, 42%); color: hsl(0, 68%, 42%);
} }
#installed.disabled + .actions #disableAll:checked:hover { html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover {
border-color: hsl(0, 50%, 56%); border-color: hsl(0, 50%, 56%);
background-color: hsl(0, 50%, 56%); background-color: hsl(0, 50%, 56%);
} }
.style-name .checker, html:not(.moz-appearance-bug) .style-name .checker,
.style-name .svg-icon.checked { html:not(.moz-appearance-bug) .style-name .svg-icon.checked {
position: absolute; position: absolute;
top: 7px; top: 7px;
left: 9px; left: 9px;
pointer-events: none; pointer-events: none;
} }
#disable-all-wrapper .main-controls .svg-icon.checked { html:not(.moz-appearance-bug) #disable-all-wrapper .main-controls .svg-icon.checked {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;