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) {
document.documentElement.classList.toggle('firefox', FIREFOX);
document.documentElement.classList.toggle('moz-appearance-bug', FIREFOX && FIREFOX < 57);
document.documentElement.classList.toggle('opera', OPERA);
// TODO: remove once our manifest's minimum_chrome_version is 50+
// 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;
}
.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;
height: 8px;
width: 8px;
@ -32,12 +53,12 @@ body > div:not(#installed) {
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;
transition: fill .25s;
}
input[type="checkbox"] {
html:not(.moz-appearance-bug) input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
border: 1px solid hsl(0, 0%, 46%);
@ -51,52 +72,54 @@ input[type="checkbox"] {
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%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
.entry.disabled .style-name:hover input[type="checkbox"] {
html:not(.moz-appearance-bug) input[type="checkbox"]:hover,
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%);
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%);
}
#installed.disabled + .actions #disableAll:checked {
html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked {
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;
}
#disableAll:hover {
html:not(.moz-appearance-bug) #disableAll:hover {
border-color: hsl(0, 68%, 50%);
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%);
}
#installed.disabled + .actions #disableAll:checked:hover {
html:not(.moz-appearance-bug) #installed.disabled + .actions #disableAll:checked:hover {
border-color: hsl(0, 50%, 56%);
background-color: hsl(0, 50%, 56%);
}
.style-name .checker,
.style-name .svg-icon.checked {
html:not(.moz-appearance-bug) .style-name .checker,
html:not(.moz-appearance-bug) .style-name .svg-icon.checked {
position: absolute;
top: 7px;
left: 9px;
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;
top: 0;
left: 0;