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

extract checkboxes to global.css, fixes

Browse Source
This commit is contained in:
tophf 2017-12-04 19:14:04 +03:00
parent 7339643ec3
commit a6f63d096e
16 changed files with 183 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
edit.html
View File

@ -3,6 +3,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="edit/edit.css">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@supports (-moz-appearance:none) {
@ -21,7 +24,6 @@
<script src="js/script-loader.js"></script>
<script src="js/moz-parser.js"></script>
<script src="content/apply.js"></script>
<link rel="stylesheet" href="edit/edit.css">
<script src="edit/lint.js"></script>
<script src="edit/util.js"></script>
<script src="edit/regexp-tester.js"></script>

8
edit/beautify.js
View File

@ -29,12 +29,16 @@ function beautify(event) {
optionHtml('border: none;', 'newline_between_properties', true) +
optionHtml('display: block;', 'newline_before_close_brace', true) +
optionHtml('}', 'newline_between_rules') +
`<label style="display: block; clear: both;"><input data-option="indent_conditional" type="checkbox"
${options.indent_conditional !== false ? 'checked' : ''}>` +
`<label style="display: block; clear: both;">
<input data-option="indent_conditional" type="checkbox"
${options.indent_conditional !== false ? 'checked' : ''}>
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>` +
t('styleBeautifyIndentConditional') + '</label>' +
'</div>' +
'<div><button role="undo"></button></div>');
$('#help-popup').className = 'wide';
const undoButton = $('#help-popup button[role="undo"]');
undoButton.textContent = t(scope.length === 1 ? 'undo' : 'undoGlobal');
undoButton.addEventListener('click', () => {

135
edit/edit.css
View File

@ -28,39 +28,6 @@ body {
}
/************ checkbox & select************/
select {
-moz-appearance: none;
-webkit-appearance: none;
height: 22px;
background-color: transparent;
border: 1px solid hsl(0, 0%, 66%);
padding: 0 20px 0 6px;
transition: color .5s;
}
.firefox select {
padding: 0 20px 0 2px;
}
.select-resizer {
display: inline-flex!important;
cursor: default;
position: relative;
}
.svg-icon.select-arrow {
pointer-events: none;
cursor: default;
display: inline-flex;
height: 14px;
width: 14px;
fill: #000;
position: absolute;
top: 4px;
right: 4px;
transition: fill .5s;
}
#options > div[class="option"] {
margin-bottom: 4px;
}
@ -69,59 +36,9 @@ select {
margin-top: 2px;
}
.svg-icon.checked {
position: absolute;
height: 8px;
width: 8px;
display: none;
fill: #000;
margin: 2px 0 0 2px;
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
display: inline-flex;
transition: fill .25s;
}
input[type="checkbox"]:not(.slider) {
position: absolute;
left: 0;
top: 0;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: none;
border: 1px solid hsl(0, 0%, 46%);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
background-color: hsl(0, 0%, 94%);
outline: none;
margin: 0;
transition: background-color .25s, border-color .25s;
}
input[type="checkbox"]:not(.slider):checked:hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
label {
padding-left: 16px;
position: relative;
transition: color .25s;
}
/************ header ************/
@ -151,15 +68,12 @@ label {
margin-left: 1.7rem;
}
.aligned {
display: flex;
margin-bottom: 4px;
display: table-row;
}
#options .option:nth-last-of-type(5) {
margin-top: 10px;
}
.aligned > * {
display: inline-flex;
align-items: center;
.aligned > *:not(.svg-inline-wrapper) {
display: table-cell;
margin-top: 0.1rem;
min-height: 1.4rem;
}
/* basic info */
@ -265,8 +179,8 @@ input:invalid {
padding-left: .25em;
}
#options .option.aligned > label {
padding: 0 0.25rem 0 0;
width: 60px;
padding: .1rem .25rem 0 0;
vertical-align: middle;
}
.set-option-progress {
position: absolute;
@ -502,9 +416,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
padding: 0.5rem;
z-index: 99;
}
#help-popup.big,
#help-popup.wide {
max-width: 100%;
}
#help-popup.big {
box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
max-width: 100%;
left: calc(280px - 3rem);
}
#help-popup.big .CodeMirror {
@ -631,23 +548,25 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
/************ CSS beautifier ************/
.beautify-options {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 180px;
padding-left: 6px;
white-space: nowrap;
font-family: monospace;
}
.beautify-options div {
float: left;
display: flex;
align-items: center;
}
.beautify-options div[newline="true"] + div {
clear: left;
}
.beautify-options div[newline="true"] + div span[indent] {
padding-left: 2rem;
}
.beautify-options > label {
margin: 6px 0;
top: 1em;
margin: 1ex 0;
}
.beautify-options + div {
padding-left: 6px;
.firefox .beautify-options > label input {
top: 1px;
}
.beautify-options:after {
clear: both;
@ -657,11 +576,15 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
}
.beautify-options span {
font-weight: bold;
display: inline-flex;
font-family: monospace;
}
.beautify-options select {
border: none;
background-color: rgba(0, 0, 0, 0.05);
background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px);
font-family: monospace;
font-weight: bold;
padding-left: 4px;
margin-left: 4px;
}
/************ single editor **************/

2
edit/edit.js
View File

@ -543,7 +543,7 @@ function showToggleStyleHelp() {
function showHelp(title = '', body) {
const div = $('#help-popup');
div.classList.remove('big');
div.className = '';
const contents = $('.contents', div);
contents.textContent = '';
if (body) {

95
global.css Normal file
View File

@ -0,0 +1,95 @@
.svg-icon.checked {
position: absolute;
height: 8px;
width: 8px;
display: none;
fill: #000;
margin: 2px 0 0 2px;
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
display: inline-flex;
transition: fill .1s;
}
input[type="checkbox"]:not(.slider) {
position: absolute;
left: 0;
top: 0;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: none;
border: 1px solid hsl(0, 0%, 46%);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
background-color: hsla(0, 0%, 0%, .1);
outline: none;
margin: 0;
transition: background-color .1s, border-color .1s;
}
input[type="checkbox"]:not(.slider):hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
label {
transition: color .1s;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
height: 22px;
background-color: transparent;
border: 1px solid hsl(0, 0%, 66%);
padding: 0 20px 0 6px;
transition: color .5s;
}
.firefox select {
padding: 0 20px 0 2px;
}
.select-resizer {
display: inline-flex!important;
cursor: default;
position: relative;
}
.svg-icon.select-arrow {
pointer-events: none;
cursor: default;
display: inline-flex;
height: 14px;
width: 14px;
fill: #000;
position: absolute;
top: 4px;
right: 4px;
transition: fill .5s;
}
@supports (-moz-appearance: none) {
.moz-appearance-bug .svg-icon.checked {
display: none !important;
}
.moz-appearance-bug input[type="checkbox"] {
-moz-appearance: checkbox !important;
}
.moz-appearance-bug button {
padding-left: .75ex;
padding-right: .75ex;
}
}

1
install-usercss.html
View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Loading...</title>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="/install-usercss/install-usercss.css">
<script src="/js/messaging.js"></script>
<script src="/js/prefs.js"></script>

103
install-usercss/install-usercss.css
View File

@ -239,60 +239,9 @@ li {
user-select: auto;
}
/************ checkbox ************/
.svg-icon.checked {
position: absolute;
height: 8px;
width: 8px;
display: none;
fill: #000;
margin: 2px 0 0 2px;
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
display: inline-flex;
transition: fill .25s;
}
input[type="checkbox"]:not(.slider) {
position: absolute;
left: 0;
top: 0;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: none;
border: 1px solid hsl(0, 0%, 46%);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
background-color: hsl(0, 0%, 94%);
outline: none;
margin: 0;
transition: background-color .25s, border-color .25s;
}
input[type="checkbox"]:not(.slider):checked:hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
label {
padding-left: 16px;
position: relative;
transition: color .25s;
}
/* spinner: https://github.com/loadingio/css-spinner */
@ -408,58 +357,6 @@ label {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
/* https://github.com/lukehaas/css-loaders */
/*
.spinner {
--color: currentColor;
--background-color: currentColor;
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 200px;
height: 200px;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.spinner:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.spinner:after {
background: #0dc5c1;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
*/
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);

4
js/dom.js
View File

@ -250,7 +250,9 @@ function $create(selector = 'div', properties, children) {
if (ns) {
for (const attr in opt) {
element.setAttributeNS(null, attr, opt[attr]);
const i = attr.indexOf(':') + 1;
const attrNS = i && `http://www.w3.org/1999/${attr.slice(0, i - 1)}`;
element.setAttributeNS(attrNS || null, attr, opt[attr]);
}
} else {
Object.assign(element, opt);

3
js/messaging.js
View File

@ -17,7 +17,7 @@ if (!CHROME && !chrome.browserAction.openPopup) {
FIREFOX = 50;
browser.runtime.getBrowserInfo().then(info => {
FIREFOX = parseFloat(info.version);
document.documentElement.classList.toggle('moz-appearance-bug', FIREFOX && FIREFOX < 54);
document.documentElement.classList.add('moz-appearance-bug', FIREFOX && FIREFOX < 54);
});
}
@ -62,7 +62,6 @@ 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 < 54);
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

17
manage.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title i18n-text="manageTitle"></title>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="manage/manage.css">
<link rel="stylesheet" href="msgbox/msgbox.css">
<link rel="stylesheet" href="options/onoffswitch.css">
@ -183,9 +184,7 @@
<option i18n-text="manageOnlyEnabled" value="false"></option>
<option i18n-text="manageOnlyDisabled" value="true"></option>
</select>
<svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
</div>
@ -203,9 +202,7 @@
<option i18n-text="manageOnlyLocal" value="false"></option>
<option i18n-text="manageOnlyExternal" value="true"></option>
</select>
<svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
</div>
@ -223,9 +220,7 @@
<option i18n-text="manageOnlyUsercss" value="false"></option>
<option i18n-text="manageOnlyNonUsercss" value="true"></option>
</select>
<svg class="svg-icon select-arrow" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
</div>
@ -344,6 +339,10 @@
<symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
</symbol>
<symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</symbol>
</svg>
</body>

9
manage/config-dialog.js
View File

@ -110,9 +110,12 @@ function configDialog(style) {
case 'dropdown':
case 'image':
// TODO: a image picker input?
va.input = $create('select',
va.options.map(o =>
$create('option', {value: o.name}, o.label)));
va.input = $create('.select-resizer', [
$create('select', va.options.map(o =>
$create('option', {value: o.name}, o.label))),
$create('SVG:svg.svg-icon.select-arrow',
$create('SVG:use', {'xlink:href': '#svg-icon-select-arrow'})),
]);
va.input.onchange = () => {
va.dirty = true;
va.value = va.input.value;

107
manage/manage.css
View File

@ -94,6 +94,10 @@ select {
fill: #aaa;
}
#usercss-wiki svg {
margin-top: -2px;
}
.nobreak {
white-space: nowrap;
}
@ -288,7 +292,6 @@ label.nobreak input {
.newUI #installed {
display: table;
table-layout: fixed;
margin-top: .75rem;
margin-bottom: .75rem;
}
@ -352,15 +355,22 @@ label.nobreak input {
}
.filter-selection select {
-moz-appearance: none;
-webkit-appearance: none;
height: 18px;
outline: none;
background-color: transparent;
border: none;
max-width: 100%;
padding-left: 4px;
padding-right: 14px;
transition: color .5s
}
.firefox .filter-selection select {
padding-left: 0;
}
.filter-selection .select-arrow {
margin-top: 2px;
top: 0;
right: 0;
}
.select-resizer {
@ -369,27 +379,13 @@ label.nobreak input {
max-width: calc(100% - 2em);
position: absolute;
top: 0;
left: 20px;
left: 16px;
}
.firefox .select-resizer {
left: 16px;
}
.svg-icon.select-arrow {
pointer-events: none;
cursor: default;
display: inline-flex;
margin-top: 2px;
height: 14px;
width: 14px;
fill: #000;
position: absolute;
top: 0;
right: 0;
transition: fill .5s;
}
fieldset > label,
fieldset > .filter-selection {
transition: background-color .25s;
@ -412,15 +408,6 @@ fieldset > .filter-selection:hover {
margin: -2px 1ex 0 0;
}
.svg-icon.checked {
position: absolute;
height: 8px;
width: 8px;
display: none;
fill: #000;
margin: 2px 0 0 2px;
}
.newUI .entry .svg-icon.checked,
.newUI .entry:hover .svg-icon.checked {
fill: #000;
@ -430,50 +417,6 @@ fieldset > .filter-selection:hover {
pointer-events: all;
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
display: inline-flex;
transition: fill .25s;
}
input[type="checkbox"]:not(.slider) {
position: absolute;
left: 0;
top: 0;
-moz-appearance: none;
-webkit-appearance: none;
pointer-events: none;
border: 1px solid hsl(0, 0%, 46%);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
background-color: hsl(0, 0%, 94%);
outline: none;
margin: 0;
transition: background-color .25s, border-color .25s;
}
input[type="checkbox"]:not(.slider):checked:hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):hover {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
label {
transition: color .25s;
}
.newUI .style-name {
font-size: 14px;
font-family: sans-serif;
@ -930,6 +873,10 @@ fieldset > label {
align-items: center;
}
.config-dialog .select-resizer {
position: static;
}
.config-dialog label:first-child {
padding-top: 0;
}
@ -966,10 +913,13 @@ fieldset > label {
vertical-align: middle;
}
.config-dialog .select-resizer,
.config-dialog select {
width: auto;
min-width: var(--onoffswitch-width);
max-width: 124px;
left: auto;
position: relative;
}
.config-dialog .onoffswitch {
@ -986,7 +936,7 @@ fieldset > label {
flex-shrink: 0;
}
.config-dialog label > :last-child:not(.onoffswitch) > :not(:last-child) {
.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
margin-right: 4px;
}
@ -1161,12 +1111,3 @@ fieldset > label {
word-break: break-all;
}
}
@supports (-moz-appearance:none) {
/* fixes for Firefox quirks */
#newStyleAsUsercss-wrapper svg {
margin-top: -2px;
}
}

2
msgbox/msgbox.css
View File

@ -28,7 +28,7 @@
}
#message-box.fadeout {
animation: fadeout .5s ease-in-out;
animation: fadeout .25s ease-in-out;
}
#message-box.center {

1
popup.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="popup/popup.css">
<style id="firefox-transitions-bug-suppressor">

39
popup/popup.css
View File

@ -24,47 +24,16 @@ body > div:not(#installed) {
}
/************ checkbox ************/
.svg-icon.checked {
position: absolute;
height: 8px;
width: 8px;
display: none;
fill: #000;
margin: 2px 0 0 2px;
}
input[type="checkbox"]:checked + .svg-icon.checked {
display: inline-flex;
transition: fill .25s;
}
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
border: 1px solid hsl(0, 0%, 46%);
height: 12px;
width: 12px;
display: inline-flex;
border-radius: 2px;
background-color: hsl(0, 0%, 94%);
outline: none;
margin: 0;
transition: background-color .25s, border-color .25s;
}
input[type="checkbox"]:checked:hover,
.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"] {
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
#disable-all-wrapper input[type="checkbox"]:not(.slider),
#disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
position: absolute;
top: 0;
@ -98,18 +67,14 @@ input[type="checkbox"]:hover,
background-color: hsl(0, 50%, 56%);
}
.style-name .checker,
.style-name .svg-icon.checked {
#installed .style-name .checker,
#installed .style-name .svg-icon.checked {
position: absolute;
top: 7px;
left: 9px;
pointer-events: none;
}
label {
transition: color .25s;
}
#disable-all-wrapper {
padding: 0.3em 0 0.6em;
}

2
vendor-overwrites/colorpicker/colorpicker.js
View File

@ -929,7 +929,7 @@
((cm.display.renderedView || [])[0] || {}).text || cm.display.lineDiv;
for (let el = start; el; el = el.parentElement) {
const bgColor = getComputedStyle(el).backgroundColor;
const [r, g, b, a = 255] = bgColor.match(/\d+/g).map(Number);
const [r, g, b, a = 255] = (bgColor.match(/\d+/g) || []).map(Number);
if (!a) {
continue;
}