Compare commits
32 Commits
master
...
narco-one-
| Author | SHA1 | Date | |
|---|---|---|---|
|
2d63d931ac | ||
|
|
63a6098c2a | ||
|
686c099dbc | ||
|
|
2753461017 | ||
|
|
09496304ee | ||
|
|
fff1d8d057 | ||
|
|
7a8ef95a30 | ||
|
|
5ecba47e7f | ||
|
|
be1d6fa45d | ||
|
|
e1af6ee60c | ||
|
|
d2171dc061 | ||
|
|
d6104c87f7 | ||
|
|
5df1380426 | ||
|
|
3c1ee1cd9e | ||
|
|
2d28a7520d | ||
|
|
d1bc80282f | ||
|
|
5d73cbf240 | ||
|
|
d051bd3477 | ||
|
|
0766dd7f0a | ||
|
|
f76512e513 | ||
|
|
f52fd0d124 | ||
|
|
407e70b20c | ||
|
|
9dfafe368c | ||
|
|
e4aaa9e94f | ||
|
|
97108767e7 | ||
|
|
e83ff94ef7 | ||
|
|
4f45e633ac | ||
|
|
6474eb178a | ||
|
|
525030c15d | ||
|
|
b2af8770ee | ||
|
|
586ad8aad7 | ||
|
|
dbc26c2901 |
|
|
@ -368,8 +368,12 @@
|
||||||
"description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
|
"description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
|
||||||
},
|
},
|
||||||
"findStylesInlineTooltip": {
|
"findStylesInlineTooltip": {
|
||||||
"message": "Display search results inside this window.",
|
"message": "Display search results inside this window",
|
||||||
"description": "Text for a checkbox that displays search results within the Stylus popup."
|
"description": "Text for a checkbox that displays search results within the Stylus popup"
|
||||||
|
},
|
||||||
|
"findStylesExternalTooltip": {
|
||||||
|
"message": "Display search results on an external website",
|
||||||
|
"description": "Text for a checkbox that displays search results on an external website"
|
||||||
},
|
},
|
||||||
"genericAdd": {
|
"genericAdd": {
|
||||||
"message": "Add",
|
"message": "Add",
|
||||||
|
|
@ -767,6 +771,30 @@
|
||||||
"optionsOpenManager": {
|
"optionsOpenManager": {
|
||||||
"message": "Manage styles"
|
"message": "Manage styles"
|
||||||
},
|
},
|
||||||
|
"optionsPopupActionElements": {
|
||||||
|
"message": "Action elements",
|
||||||
|
"description": "Label in the options page to alter the popup action elements to show either text or icons"
|
||||||
|
},
|
||||||
|
"optionsPopupClassicUI": {
|
||||||
|
"message": "Text and buttons",
|
||||||
|
"description": "Tooltip displayed when hovering the popup action elements option to choose the classic text & button format"
|
||||||
|
},
|
||||||
|
"optionsPopupIconUI": {
|
||||||
|
"message": "Vector icons",
|
||||||
|
"description": "Tooltip displayed when hovering the popup action elements option to choose displaying vector icons instead of text"
|
||||||
|
},
|
||||||
|
"optionsPopupClickAction": {
|
||||||
|
"message": "Style name click action",
|
||||||
|
"description": "Label in the options page for the action performed when clicking on a style name in the popup"
|
||||||
|
},
|
||||||
|
"optionsPopupClickActionLink": {
|
||||||
|
"message": "Edit style",
|
||||||
|
"description": "Tooltip displayed when hovering the popup click action option to choose to edit the style when clicking on the style name in the popup"
|
||||||
|
},
|
||||||
|
"optionsPopupClickActionToggle": {
|
||||||
|
"message": "Toggle style",
|
||||||
|
"description": "Tooltip displayed when hovering the popup click action option to choose to toggle a style (on or off) when clicking the style name in the popup"
|
||||||
|
},
|
||||||
"optionsPopupWidth": {
|
"optionsPopupWidth": {
|
||||||
"message": "Popup width (in pixels)"
|
"message": "Popup width (in pixels)"
|
||||||
},
|
},
|
||||||
|
|
@ -851,6 +879,10 @@
|
||||||
"message": "Temporarily applies the changes without saving.\nSave the style to make the changes permanent.",
|
"message": "Temporarily applies the changes without saving.\nSave the style to make the changes permanent.",
|
||||||
"description": "Tooltip for the checkbox in style editor to enable live preview while editing."
|
"description": "Tooltip for the checkbox in style editor to enable live preview while editing."
|
||||||
},
|
},
|
||||||
|
"reEnableAllStyles": {
|
||||||
|
"message": "Turn all previously enabled styles back on",
|
||||||
|
"description": "Label for the element which turns all disabled styles back on."
|
||||||
|
},
|
||||||
"replace": {
|
"replace": {
|
||||||
"message": "Replace",
|
"message": "Replace",
|
||||||
"description": "Label before the replace input field in the editor shown on Ctrl-H"
|
"description": "Label before the replace input field in the editor shown on Ctrl-H"
|
||||||
|
|
@ -1051,15 +1083,6 @@
|
||||||
},
|
},
|
||||||
"description": "Error displayed when the value of @var color is invalid"
|
"description": "Error displayed when the value of @var color is invalid"
|
||||||
},
|
},
|
||||||
"styleMetaErrorRangeOrNumber": {
|
|
||||||
"message": "Invalid @var $type$: value must be an array containing at least one number at index zero",
|
|
||||||
"description": "Error displayed when the value of @var number or @var range is invalid",
|
|
||||||
"placeholders": {
|
|
||||||
"type": {
|
|
||||||
"content": "$1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"styleMetaErrorPreprocessor": {
|
"styleMetaErrorPreprocessor": {
|
||||||
"message": "Unsupported @preprocessor: $preprocessor$",
|
"message": "Unsupported @preprocessor: $preprocessor$",
|
||||||
"placeholders": {
|
"placeholders": {
|
||||||
|
|
@ -1261,10 +1284,6 @@
|
||||||
"message": "Updates installed:",
|
"message": "Updates installed:",
|
||||||
"description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
|
"description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
|
||||||
},
|
},
|
||||||
"usercssAvoidOverwriting": {
|
|
||||||
"message": "Please change the value of @name or @namespace to avoid overwriting an existing style.",
|
|
||||||
"description": "Shown in a message box when attempting to save a new Usercss style that would overwrite an existing one."
|
|
||||||
},
|
|
||||||
"usercssConfigIncomplete": {
|
"usercssConfigIncomplete": {
|
||||||
"message": "The style was updated or deleted after the configuration dialog was shown. These variables were not saved to avoid corrupting the style's metadata:"
|
"message": "The style was updated or deleted after the configuration dialog was shown. These variables were not saved to avoid corrupting the style's metadata:"
|
||||||
},
|
},
|
||||||
|
|
@ -1291,6 +1310,10 @@
|
||||||
"message": "Write style for: ",
|
"message": "Write style for: ",
|
||||||
"description": "Label for toolbar pop-up that precedes the links to write a new style"
|
"description": "Label for toolbar pop-up that precedes the links to write a new style"
|
||||||
},
|
},
|
||||||
|
"writeStyleForInfo": {
|
||||||
|
"message": "Create a new style by selecting a target URL.\nAvailable options shown in hover tooltips.",
|
||||||
|
"description": "Popup style creation actions tooltip to accompany icon"
|
||||||
|
},
|
||||||
"writeStyleForURL": {
|
"writeStyleForURL": {
|
||||||
"message": "this URL",
|
"message": "this URL",
|
||||||
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
|
||||||
|
|
|
||||||
|
|
@ -272,7 +272,7 @@
|
||||||
</template>
|
</template>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="stylus-edit">
|
<body id="stylus-edit" class="truegray-alpha-2">
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<h1 id="heading"> </h1> <!-- nbsp allocates the actual height which prevents page shift -->
|
<h1 id="heading"> </h1> <!-- nbsp allocates the actual height which prevents page shift -->
|
||||||
<section id="basic-info">
|
<section id="basic-info">
|
||||||
|
|
|
||||||
|
|
@ -222,56 +222,61 @@ function createAppliesToLineWidget(cm) {
|
||||||
requestAnimationFrame(updateWidgetStyle);
|
requestAnimationFrame(updateWidgetStyle);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const MIN_LUMA = .05;
|
if (prefs.get('editor.theme') !== 'default') {
|
||||||
const MIN_LUMA_DIFF = .4;
|
const MIN_LUMA = .05;
|
||||||
const color = {
|
const MIN_LUMA_DIFF = .4;
|
||||||
wrapper: colorMimicry.get(cm.display.wrapper),
|
const color = {
|
||||||
gutter: colorMimicry.get(cm.display.gutters, {
|
wrapper: colorMimicry.get(cm.display.wrapper),
|
||||||
bg: 'backgroundColor',
|
gutter: colorMimicry.get(cm.display.gutters, {
|
||||||
border: 'borderRightColor',
|
bg: 'backgroundColor',
|
||||||
}),
|
border: 'borderRightColor',
|
||||||
line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
|
}),
|
||||||
comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
|
line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
|
||||||
};
|
comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
|
||||||
const hasBorder =
|
};
|
||||||
color.gutter.style.borderRightWidth !== '0px' &&
|
const hasBorder =
|
||||||
!/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
|
color.gutter.style.borderRightWidth !== '0px' &&
|
||||||
const diff = {
|
!/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
|
||||||
wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
|
const diff = {
|
||||||
border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
|
wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
|
||||||
line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
|
border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
|
||||||
};
|
line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
|
||||||
const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
|
};
|
||||||
const fore = preferLine ? color.line.fore : color.wrapper.fore;
|
const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
|
||||||
|
const fore = preferLine ? color.line.fore : color.wrapper.fore;
|
||||||
|
|
||||||
const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
|
const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
|
||||||
const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
|
const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
|
||||||
|
|
||||||
actualStyle.textContent = `
|
actualStyle.textContent = `
|
||||||
.applies-to {
|
.applies-to {
|
||||||
background-color: ${color.gutter.bg};
|
background-color: ${color.gutter.bg};
|
||||||
border-top: ${borderStyleForced};
|
border-top: ${borderStyleForced};
|
||||||
border-bottom: ${borderStyleForced};
|
border-bottom: ${borderStyleForced};
|
||||||
}
|
}
|
||||||
.applies-to label {
|
.applies-to label {
|
||||||
color: ${fore};
|
color: ${fore};
|
||||||
}
|
}
|
||||||
.applies-to input,
|
.applies-to input,
|
||||||
.applies-to button,
|
.applies-to select {
|
||||||
.applies-to select {
|
background-color: rgba(255, 255, 255, ${
|
||||||
background: rgba(255, 255, 255, ${
|
Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
|
||||||
Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
|
});
|
||||||
});
|
border: ${borderStyleForced};
|
||||||
border: ${borderStyleForced};
|
transition: none;
|
||||||
transition: none;
|
color: ${fore};
|
||||||
color: ${fore};
|
}
|
||||||
}
|
.applies-to .svg-icon.select-arrow {
|
||||||
.applies-to .svg-icon.select-arrow {
|
fill: ${fore} !important;
|
||||||
fill: ${fore};
|
}
|
||||||
transition: none;
|
.applies-to select option {
|
||||||
}
|
background-color: ${color.gutter.bg};
|
||||||
`;
|
}
|
||||||
document.documentElement.appendChild(actualStyle);
|
`;
|
||||||
|
document.documentElement.appendChild(actualStyle);
|
||||||
|
} else if (prefs.get('editor.theme') === 'default') {
|
||||||
|
actualStyle.textContent = '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function doUpdate() {
|
function doUpdate() {
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ function beautify(event) {
|
||||||
]),
|
]),
|
||||||
]));
|
]));
|
||||||
|
|
||||||
$('#help-popup').className = 'wide';
|
$('#help-popup').className = 'main-bg wide';
|
||||||
|
|
||||||
scope.forEach(cm => {
|
scope.forEach(cm => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,48 @@
|
||||||
|
:root {
|
||||||
|
--applies-to-pseudo: hsla(214, 100%, 90%, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/************ CM default ************/
|
||||||
|
.CodeMirror.cm-s-default {
|
||||||
|
background: var(--gray-lightness-93);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror {
|
||||||
|
outline-style: solid;
|
||||||
|
outline-color: transparent;
|
||||||
|
outline-width: 1px;
|
||||||
|
outline-offset: -1px;
|
||||||
|
transition: outline-color .25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-focused {
|
||||||
|
outline-color: var(--focus-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror.cm-s-default .CodeMirror-gutters {
|
||||||
|
background-color: var(--truegray-alpha-1);
|
||||||
|
border-right: 1px solid var(--truegray-alpha-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror.cm-s-default .CodeMirror-activeline-background {
|
||||||
|
background: var(--cm-activeline-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror-hints.default {
|
||||||
|
background-color: var(--main-bg);
|
||||||
|
}
|
||||||
|
|
||||||
.CodeMirror-hints {
|
.CodeMirror-hints {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* match Windows select hover, so no variables */
|
||||||
.CodeMirror-hint:hover {
|
.CodeMirror-hint:hover {
|
||||||
color: white;
|
color: #fff;
|
||||||
background: #08f;
|
background: #08f;
|
||||||
}
|
}
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
border: solid #CCC 1px;
|
border: 1px solid var(--gray-lightness-76);
|
||||||
}
|
}
|
||||||
.CodeMirror-lint-mark-warning {
|
.CodeMirror-lint-mark-warning {
|
||||||
background: none;
|
background: none;
|
||||||
|
|
@ -14,17 +50,6 @@
|
||||||
.CodeMirror-dialog {
|
.CodeMirror-dialog {
|
||||||
-webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
|
-webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
|
||||||
}
|
}
|
||||||
.CodeMirror-focused {
|
|
||||||
outline: -webkit-focus-ring-color auto 5px;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
@supports (-moz-appearance:none) {
|
|
||||||
/* restrict to FF */
|
|
||||||
.CodeMirror-focused {
|
|
||||||
outline: #7dadd9 auto 1px;
|
|
||||||
outline-offset: -1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.CodeMirror-search-field {
|
.CodeMirror-search-field {
|
||||||
width: 10em;
|
width: 10em;
|
||||||
}
|
}
|
||||||
|
|
@ -32,22 +57,14 @@
|
||||||
width: 5em;
|
width: 5em;
|
||||||
}
|
}
|
||||||
.CodeMirror-search-hint {
|
.CodeMirror-search-hint {
|
||||||
color: #888;
|
color: var(--truegray);
|
||||||
}
|
}
|
||||||
.cm-uso-variable {
|
.cm-uso-variable {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.cm-searching.cm-matchhighlight {
|
|
||||||
/* tokens found by manual search should not animate by cm-matchhighlight */
|
|
||||||
animation-name: search-and-match-highlighter !important;
|
|
||||||
}
|
|
||||||
@keyframes search-and-match-highlighter {
|
|
||||||
from { background-color: rgba(255, 255, 0, .4); } /* search color */
|
|
||||||
to { background-color: rgba(100, 255, 100, .4); } /* sarch + highlight */
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeMirror-activeline .applies-to:before {
|
.CodeMirror-activeline .applies-to:before {
|
||||||
background-color: hsla(214, 100%, 90%, 0.15);
|
background-color: var(--applies-to-pseudo);
|
||||||
content: "";
|
content: "";
|
||||||
top: 1em;
|
top: 1em;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
||||||
|
|
@ -299,6 +299,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
value = null;
|
value = null;
|
||||||
|
document.body.removeAttribute('data-match-highlight');
|
||||||
}
|
}
|
||||||
option = 'highlightSelectionMatches';
|
option = 'highlightSelectionMatches';
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
113
edit/edit.css
113
edit/edit.css
|
|
@ -1,8 +1,17 @@
|
||||||
:root {
|
:root {
|
||||||
--header-narrow-min-height: 12em;
|
--header-narrow-min-height: 12em;
|
||||||
|
--match-highlighter-alpha-15: hsla(193, 99%, 38%, .15);
|
||||||
|
--regexp-report-mark-alpha-5: hsla(60, 100%, 50%, .5);
|
||||||
|
--section-label-highlight: hsl(60, 100%, 80%);
|
||||||
|
--cm-activeline-bg: hsl(180, 22%, 88%);
|
||||||
|
--darkgreen: hsl(120, 100%, 20%);
|
||||||
|
--global-progress: hsla(180, 66%, 36%, .25);
|
||||||
|
--beautify-select-gradient-left: hsla(0, 0%, 0%, .07);
|
||||||
|
--beautify-select-gradient-right: hsla(0, 0%, 0%, .05);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font: 12px arial,sans-serif;
|
font: 12px arial,sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -13,8 +22,8 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: hsla(180, 66%, 36%, .25);
|
background-color: var(--global-progress);
|
||||||
border-left: 0 solid darkcyan;
|
border-left: 0 solid var(--darkcyan);
|
||||||
z-index: 2147483647;
|
z-index: 2147483647;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 2s;
|
transition: opacity 2s;
|
||||||
|
|
@ -27,7 +36,7 @@ body {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/************ checkbox & select************/
|
/************ checkbox & select ************/
|
||||||
.options-column > div[class="option"] {
|
.options-column > div[class="option"] {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -49,9 +58,9 @@ label {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-right: 1px dashed #AAA;
|
border-right: 1px dashed var(--gray-lightness-66);
|
||||||
-webkit-box-shadow: 0 0 3rem -1.2rem black;
|
-webkit-box-shadow: 0 0 3rem -1.2rem var(--black);
|
||||||
box-shadow: 0 0 3rem -1.2rem black;
|
box-shadow: 0 0 3rem -1.2rem var(--black);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -61,6 +70,7 @@ label {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
#sections {
|
#sections {
|
||||||
|
flex-grow: 1;
|
||||||
padding-left: 280px;
|
padding-left: 280px;
|
||||||
}
|
}
|
||||||
#sections h2 {
|
#sections h2 {
|
||||||
|
|
@ -122,7 +132,7 @@ label {
|
||||||
|
|
||||||
#preview-errors {
|
#preview-errors {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
color: white;
|
color: var(--white);
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
border-radius: 9px;
|
border-radius: 9px;
|
||||||
margin-left: -.5em;
|
margin-left: -.5em;
|
||||||
|
|
@ -164,19 +174,19 @@ label {
|
||||||
.svg-icon:hover,
|
.svg-icon:hover,
|
||||||
.svg-icon.info,
|
.svg-icon.info,
|
||||||
.svg-icon.settings {
|
.svg-icon.settings {
|
||||||
fill: #666;
|
fill: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
.svg-icon,
|
.svg-icon,
|
||||||
.svg-icon.info:hover,
|
.svg-icon.info:hover,
|
||||||
.svg-icon.settings:hover {
|
.svg-icon.settings:hover {
|
||||||
fill: #000;
|
fill: var(--black);
|
||||||
}
|
}
|
||||||
#options span .svg-icon {
|
#options span .svg-icon {
|
||||||
margin-top: -3px; /* inline info and config icons */
|
margin-top: -3px; /* inline info and config icons */
|
||||||
}
|
}
|
||||||
input:invalid {
|
input:invalid {
|
||||||
background-color: rgba(255, 0, 0, 0.1);
|
background-color: var(--truegray-alpha-05);
|
||||||
color: darkred;
|
color: var(--darkred);
|
||||||
}
|
}
|
||||||
#enabled {
|
#enabled {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
@ -198,7 +208,7 @@ input:invalid {
|
||||||
}
|
}
|
||||||
|
|
||||||
#header summary:hover h2 {
|
#header summary:hover h2 {
|
||||||
border-color: #bbb;
|
border-color: var(--truegray-alpha-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header summary svg {
|
#header summary svg {
|
||||||
|
|
@ -272,7 +282,7 @@ input:invalid {
|
||||||
padding: 0 1rem .3rem;
|
padding: 0 1rem .3rem;
|
||||||
}
|
}
|
||||||
#sections > *:not(:first-child) {
|
#sections > *:not(:first-child) {
|
||||||
border-top: 2px solid hsl(0, 0%, 80%);
|
border-top: 2px solid var(--truegray-alpha-3);
|
||||||
}
|
}
|
||||||
.add-section:after {
|
.add-section:after {
|
||||||
content: attr(short-text);
|
content: attr(short-text);
|
||||||
|
|
@ -348,18 +358,23 @@ input:invalid {
|
||||||
.resize-grip-enabled .CodeMirror-scrollbar-filler {
|
.resize-grip-enabled .CodeMirror-scrollbar-filler {
|
||||||
bottom: 7px; /* make space for resize-grip */
|
bottom: 7px; /* make space for resize-grip */
|
||||||
}
|
}
|
||||||
body[data-match-highlight="token"] .cm-matchhighlight-approved .cm-matchhighlight,
|
.CodeMirror-vscrollbar,
|
||||||
body[data-match-highlight="token"] .CodeMirror-selection-highlight-scrollbar {
|
.CodeMirror-hscrollbar {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .cm-matchhighlight,
|
||||||
|
body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .CodeMirror-selection-highlight-scrollbar {
|
||||||
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
|
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
body[data-match-highlight="selection"] .cm-matchhighlight-approved .cm-matchhighlight,
|
body[data-match-highlight="selection"]:not(.find-open) .cm-matchhighlight,
|
||||||
body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar {
|
body[data-match-highlight="selection"]:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
|
||||||
background-color: rgba(1, 151, 193, 0.1);
|
background-color: var(--match-highlighter-alpha-15);
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes highlight {
|
@-webkit-keyframes highlight {
|
||||||
from {
|
from {
|
||||||
background-color: #ff9;
|
background-color: var(--section-label-highlight);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
|
|
@ -375,7 +390,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
}
|
}
|
||||||
@keyframes fadein-match-highlighter {
|
@keyframes fadein-match-highlighter {
|
||||||
from { background-color: transparent; }
|
from { background-color: transparent; }
|
||||||
to { background-color: rgba(1, 151, 193, 0.1); }
|
to { background-color: var(--match-highlighter-alpha-15); }
|
||||||
}
|
}
|
||||||
.resize-grip {
|
.resize-grip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -416,7 +431,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0 .2em 0 0;
|
margin: 0 .35em 0 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.applies-to ul {
|
.applies-to ul {
|
||||||
|
|
@ -468,14 +483,14 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
.add-applies-to .svg-icon,
|
.add-applies-to .svg-icon,
|
||||||
.remove-applies-to .svg-icon {
|
.remove-applies-to .svg-icon {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
fill: hsl(0, 0%, 60%);
|
fill: var(--gray-lightness-60);
|
||||||
height: 12px;
|
height: 12px;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
}
|
}
|
||||||
.add-applies-to:hover .svg-icon,
|
.add-applies-to:hover .svg-icon,
|
||||||
.remove-applies-to:hover .svg-icon {
|
.remove-applies-to:hover .svg-icon {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
fill: hsl(0, 0%, 0%);
|
fill: var(--black);
|
||||||
}
|
}
|
||||||
.test-regexp {
|
.test-regexp {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -487,7 +502,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.regexp-report mark {
|
.regexp-report mark {
|
||||||
background-color: rgba(255, 255, 0, .5);
|
background-color: var(--regexp-report-mark-alpha-5);
|
||||||
}
|
}
|
||||||
.regexp-report details {
|
.regexp-report details {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
|
|
@ -504,10 +519,10 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
.regexp-report details[data-type="full"] {
|
.regexp-report details[data-type="full"] {
|
||||||
color: darkgreen;
|
color: var(--darkgreen);
|
||||||
}
|
}
|
||||||
.regexp-report details[data-type="partial"] {
|
.regexp-report details[data-type="partial"] {
|
||||||
color: darkgray;
|
color: var(--truegray-alpha-6);
|
||||||
}
|
}
|
||||||
.regexp-report details[data-type="invalid"] {
|
.regexp-report details[data-type="invalid"] {
|
||||||
color: maroon;
|
color: maroon;
|
||||||
|
|
@ -538,7 +553,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
.regexp-report-note {
|
.regexp-report-note {
|
||||||
color: #999;
|
color: var(--truegray);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: 0 0.5rem 0 0;
|
margin: 0 0.5rem 0 0;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
|
|
@ -550,8 +565,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
max-width: 50vw;
|
max-width: 50vw;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: none;
|
display: none;
|
||||||
background-color: white;
|
box-shadow: 3px 3px 30px var(--black-alpha-5);
|
||||||
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
|
|
@ -560,7 +574,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
#help-popup.big {
|
#help-popup.big {
|
||||||
box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
|
box-shadow: var(--black-alpha-5) 0px 0px 0px 100000px !important;
|
||||||
left: calc(280px - 3rem);
|
left: calc(280px - 3rem);
|
||||||
}
|
}
|
||||||
#help-popup.big .CodeMirror {
|
#help-popup.big .CodeMirror {
|
||||||
|
|
@ -569,7 +583,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
}
|
}
|
||||||
#help-popup .title {
|
#help-popup .title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: rgba(0,0,0,0.05);
|
background-color: var(--truegray-alpha-15);
|
||||||
margin: -0.5rem -0.5rem 0.5rem;
|
margin: -0.5rem -0.5rem 0.5rem;
|
||||||
padding: .5rem 32px .5rem .5rem;
|
padding: .5rem 32px .5rem .5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -594,10 +608,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
.keymap-list input {
|
.keymap-list input {
|
||||||
|
background-color: var(--main-bg);
|
||||||
|
border: 1px solid var(--truegray-alpha-6);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.keymap-list tr:nth-child(odd) {
|
.keymap-list tr:nth-child(odd) {
|
||||||
background-color: rgba(0, 0, 0, 0.07);
|
background-color: var(--truegray-alpha-1);
|
||||||
}
|
}
|
||||||
.keymap-list td:first-child {
|
.keymap-list td:first-child {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -663,7 +679,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#lint tr:hover {
|
#lint tr:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
background-color: var(--black-alpha-1);
|
||||||
}
|
}
|
||||||
#lint td[role="severity"] {
|
#lint td[role="severity"] {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
|
@ -716,12 +732,15 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
}
|
}
|
||||||
.beautify-options select {
|
.beautify-options select {
|
||||||
border: none;
|
border: none;
|
||||||
background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px);
|
background: linear-gradient(90deg, var(--beautify-select-gradient-left) 18px, var(--beautify-select-gradient-right) 24px);
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
.beautify-options select option{
|
||||||
|
background-color: var(--truegray-alpha-2)
|
||||||
|
}
|
||||||
|
|
||||||
/************ single editor **************/
|
/************ single editor **************/
|
||||||
.usercss body {
|
.usercss body {
|
||||||
|
|
@ -751,8 +770,9 @@ html:not(.usercss) .usercss-only,
|
||||||
}
|
}
|
||||||
|
|
||||||
.usercss #name {
|
.usercss #name {
|
||||||
background-color: #eee;
|
background-color: var(--truegray-alpha-07);
|
||||||
color: #888;
|
color: var(--truegray);
|
||||||
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sections .single-editor,
|
#sections .single-editor,
|
||||||
|
|
@ -770,14 +790,8 @@ html:not(.usercss) .usercss-only,
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer a {
|
.single-editor .CodeMirror.cm-s-default {
|
||||||
color: #333;
|
outline: none !important;
|
||||||
transition: color .5s;
|
|
||||||
text-decoration-skip: ink;
|
|
||||||
}
|
|
||||||
|
|
||||||
#footer a:hover {
|
|
||||||
color: #666;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.usercss.firefox #sections,
|
.usercss.firefox #sections,
|
||||||
|
|
@ -788,11 +802,18 @@ html:not(.usercss) .usercss-only,
|
||||||
|
|
||||||
/************ line widget *************/
|
/************ line widget *************/
|
||||||
.CodeMirror-linewidget .applies-to {
|
.CodeMirror-linewidget .applies-to {
|
||||||
|
font: normal 12px Arial, system-ui, sans-serif;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
padding: .75rem .75rem .25rem;
|
padding: .75rem .75rem .25rem;
|
||||||
padding-right: calc(1em + 20px);
|
padding-right: calc(1em + 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CodeMirror.cm-s-default .CodeMirror-linewidget .applies-to {
|
||||||
|
background-color: var(--gray-lightness-90);
|
||||||
|
border-top: 1px solid var(--truegray-alpha-3);
|
||||||
|
border-bottom: 1px solid var(--truegray-alpha-3);
|
||||||
|
}
|
||||||
|
|
||||||
.CodeMirror-linewidget .applies-to li {
|
.CodeMirror-linewidget .applies-to li {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -821,7 +842,7 @@ html:not(.usercss) .usercss-only,
|
||||||
width: unset;
|
width: unset;
|
||||||
position: inherit;
|
position: inherit;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #AAA;
|
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
#actions {
|
#actions {
|
||||||
|
|
@ -933,7 +954,7 @@ html:not(.usercss) .usercss-only,
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
#sections > * {
|
#sections > * {
|
||||||
margin: 0 .5rem .5rem;
|
margin: 0 .5rem .5rem;
|
||||||
|
|
|
||||||
|
|
@ -524,7 +524,7 @@ function showToMozillaHelp(event) {
|
||||||
|
|
||||||
function showHelp(title = '', body) {
|
function showHelp(title = '', body) {
|
||||||
const div = $('#help-popup');
|
const div = $('#help-popup');
|
||||||
div.className = '';
|
div.className = 'main-bg';
|
||||||
|
|
||||||
const contents = $('.contents', div);
|
const contents = $('.contents', div);
|
||||||
contents.textContent = '';
|
contents.textContent = '';
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,9 @@
|
||||||
max-width: calc(100vw - 4rem);
|
max-width: calc(100vw - 4rem);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
background-color: white;
|
background-color: var(--white);
|
||||||
box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5);
|
box-shadow: 4px 5px 20px -6px var(--black-alpha-5);
|
||||||
border: 1px solid hsla(0, 0%, 50%, .4);
|
border: 1px solid var(--truegray-alpha-4);
|
||||||
transition: opacity .25s;
|
transition: opacity .25s;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
padding-right: .75em;
|
padding-right: .75em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background-color: hsla(0, 0%, 50%, .1);
|
background-color: var(--truegray-alpha-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-replace-dialog [data-type="content"] {
|
#search-replace-dialog [data-type="content"] {
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
padding: .25rem .25rem .25rem .5rem;
|
padding: .25rem .25rem .25rem .5rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: white;
|
background-color: var(--white);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
|
color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
|
||||||
|
|
@ -118,7 +118,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-color: hsla(180, 100%, 30%, .5);
|
border-color: var(--darkcyan-alpha-5);
|
||||||
border-style: none none solid none;
|
border-style: none none solid none;
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -160,11 +160,11 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: hsla(0, 0%, 100%, .75);
|
background-color: var(--white-alpha-75);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-replace-dialog [data-type="status"] {
|
#search-replace-dialog [data-type="status"] {
|
||||||
background-color: hsla(0, 0%, 50%, .2);
|
background-color: var(--truegray-alpha-2);
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
padding-left: .5rem;
|
padding-left: .5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -181,17 +181,33 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*********** CodeMirror ****************/
|
/*********** CodeMirror search. Shouldn't need variables ****************/
|
||||||
|
body.find-open .search-target-editor {
|
||||||
.search-target-editor {
|
outline-color: darkorange !important;
|
||||||
outline: 1px solid darkorange;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#stylus .search-target-match {
|
body.find-open .cm-searching {
|
||||||
|
background-color: rgba(255, 255, 0, .4);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.find-open .cm-searching.search-target-match {
|
||||||
background-color: darkorange;
|
background-color: darkorange;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.find-open .CodeMirror-search-match {
|
||||||
|
background: gold;
|
||||||
|
border-top: 1px solid orange;
|
||||||
|
border-bottom: 1px solid orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hide default CM search highlighting */
|
||||||
|
body .cm-searching,
|
||||||
|
body .CodeMirror-search-match {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
#search-replace-dialog {
|
#search-replace-dialog {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
||||||
|
|
@ -753,8 +753,14 @@ onDOMready().then(() => {
|
||||||
function makeTargetVisible(element) {
|
function makeTargetVisible(element) {
|
||||||
const old = $('.' + TARGET_CLASS);
|
const old = $('.' + TARGET_CLASS);
|
||||||
if (old !== element) {
|
if (old !== element) {
|
||||||
if (old) old.classList.remove(TARGET_CLASS);
|
if (old) {
|
||||||
if (element) element.classList.add(TARGET_CLASS);
|
old.classList.remove(TARGET_CLASS);
|
||||||
|
document.body.classList.remove('find-open');
|
||||||
|
}
|
||||||
|
if (element) {
|
||||||
|
element.classList.add(TARGET_CLASS);
|
||||||
|
document.body.classList.add('find-open');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
236
global.css
236
global.css
|
|
@ -1,3 +1,124 @@
|
||||||
|
:root {
|
||||||
|
--white: hsl(0, 0%, 100%);
|
||||||
|
--white-alpha-75: hsla(0, 0%, 100%, 0.75);
|
||||||
|
--gray-lightness-10: hsl(0, 0%, 10%);
|
||||||
|
--gray-lightness-20: hsl(0, 0%, 20%);
|
||||||
|
--gray-lightness-24: hsl(0, 0%, 24%);
|
||||||
|
--gray-lightness-25: hsl(0, 0%, 25%);
|
||||||
|
--gray-lightness-27: hsl(0, 0%, 27%);
|
||||||
|
--gray-lightness-30: hsl(0, 0%, 30%);
|
||||||
|
--gray-lightness-33: hsl(0, 0%, 33%);
|
||||||
|
--gray-lightness-38: hsl(0, 0%, 38%);
|
||||||
|
--gray-lightness-40: hsl(0, 0%, 40%);
|
||||||
|
--gray-lightness-45: hsl(0, 0%, 45%);
|
||||||
|
--gray-lightness-46: hsl(0, 0%, 46%);
|
||||||
|
--truegray: hsl(0, 0%, 50%);
|
||||||
|
--gray-lightness-60: hsl(0, 0%, 60%);
|
||||||
|
--gray-lightness-65: hsl(0, 0%, 65%);
|
||||||
|
--gray-lightness-66: hsl(0, 0%, 66%);
|
||||||
|
--gray-lightness-73: hsl(0, 0%, 73%);
|
||||||
|
--gray-lightness-76: hsl(0, 0%, 76%);
|
||||||
|
--gray-lightness-80: hsl(0, 0%, 80%);
|
||||||
|
--gray-lightness-84: hsl(0, 0%, 84%);
|
||||||
|
--gray-lightness-85: hsl(0, 0%, 85%);
|
||||||
|
--gray-lightness-86: hsl(0, 0%, 86%);
|
||||||
|
--gray-lightness-87: hsl(0, 0%, 87%);
|
||||||
|
--gray-lightness-88: hsl(0, 0%, 88%);
|
||||||
|
--gray-lightness-90: hsl(0, 0%, 90%);
|
||||||
|
--main-bg: hsl(0, 0%, 90%);
|
||||||
|
--gray-lightness-92: hsl(0, 0%, 92%);
|
||||||
|
--gray-lightness-93: hsl(0, 0%, 93%);
|
||||||
|
--gray-lightness-95: hsl(0, 0%, 95%);
|
||||||
|
--truegray-alpha-05: hsla(0, 0%, 50%, .05);
|
||||||
|
--truegray-alpha-06: hsla(0, 0%, 50%, .06);
|
||||||
|
--truegray-alpha-07: hsla(0, 0%, 50%, .07);
|
||||||
|
--truegray-alpha-1: hsla(0, 0%, 50%, .1);
|
||||||
|
--truegray-alpha-15: hsla(0, 0%, 50%, .15);
|
||||||
|
--truegray-alpha-2: hsla(0, 0%, 50%, .2);
|
||||||
|
--truegray-alpha-25: hsla(0, 0%, 50%, .25);
|
||||||
|
--truegray-alpha-3: hsla(0, 0%, 50%, .3);
|
||||||
|
--truegray-alpha-4: hsla(0, 0%, 50%, .4);
|
||||||
|
--truegray-alpha-5: hsla(0, 0%, 50%, .5);
|
||||||
|
--truegray-alpha-6: hsla(0, 0%, 50%, .6);
|
||||||
|
--truegray-alpha-7: hsla(0, 0%, 50%, .7);
|
||||||
|
--black: hsl(0, 0%, 0%);
|
||||||
|
--black-alpha-05: hsla(0, 0%, 0%, .05);
|
||||||
|
--black-alpha-1: hsla(0, 0%, 0%, .1);
|
||||||
|
--black-alpha-15: hsla(0, 0%, 0%, .15);
|
||||||
|
--black-alpha-25: hsla(0, 0%, 0%, .25);
|
||||||
|
--black-alpha-3: hsla(0, 0%, 0%, .3);
|
||||||
|
--black-alpha-4: hsla(0, 0%, 0%, .4);
|
||||||
|
--black-alpha-45: hsla(0, 0%, 0%, .45);
|
||||||
|
--black-alpha-5: hsla(0, 0%, 0%, .5);
|
||||||
|
--black-alpha-7: hsla(0, 0%, 0%, .7);
|
||||||
|
--black-alpha-75: hsla(0, 0%, 0%, .75);
|
||||||
|
--darker-red: hsl(0, 100%, 42%);
|
||||||
|
--darkred: hsl(0, 100%, 27%);
|
||||||
|
--maroon: hsl(0, 100%, 25%);
|
||||||
|
--darker-maroon: hsl(0, 100%, 20%);
|
||||||
|
--red-alpha-05: hsla(0, 100%, 50%, .05);
|
||||||
|
--red-alpha-1: hsla(0, 100%, 50%, .1);
|
||||||
|
--darkgreen: hsl(120, 100%, 20%);
|
||||||
|
--darkcyan: hsl(180, 100%, 27%);
|
||||||
|
--darkcyan-alpha-5: hsla(180, 100%, 27%, .5);
|
||||||
|
--darkcyan-alpha-75: hsla(180, 100%, 27%, .75);
|
||||||
|
--focus-outline: hsl(180, 100%, 34%);
|
||||||
|
--selection: hsl(180, 50%, 34%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* in case custom browser bg is specified */
|
||||||
|
html {
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
a, .disabled a:hover {
|
||||||
|
color: var(--black);
|
||||||
|
transition: color .5s;
|
||||||
|
text-decoration-skip: ink;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--gray-lightness-40);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-bg {
|
||||||
|
background-color: var(--main-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.truegray-alpha-05 {
|
||||||
|
background-color: var(--truegray-alpha-05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.truegray-alpha-06 {
|
||||||
|
background-color: var(--truegray-alpha-06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.truegray-alpha-1 {
|
||||||
|
background-color: var(--truegray-alpha-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.truegray-alpha-15 {
|
||||||
|
background-color: var(--truegray-alpha-15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.truegray-alpha-2 {
|
||||||
|
background-color: var(--truegray-alpha-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
outline-color: var(--focus-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: var(--white);
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
color: var(--white);
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font: normal 12px Arial, system-ui, sans-serif;
|
font: normal 12px Arial, system-ui, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -24,49 +145,66 @@ button {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
padding: 2px 7px;
|
padding: 2px 7px;
|
||||||
border: 1px solid hsl(0, 0%, 62%);
|
border: 1px solid var(--gray-lightness-60);
|
||||||
font: inherit;
|
font: inherit;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #000;
|
color: var(--gray-lightness-10);
|
||||||
background-color: hsl(0, 0%, 100%);
|
background-color: var(--gray-lightness-95);
|
||||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-size: 100% 100%;
|
background-size: auto 100%;
|
||||||
transition: background-color .25s, border-color .25s;
|
transition: color .25s, background-color .25s, border-color .25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:not(:disabled):hover {
|
button:not(:disabled):hover {
|
||||||
background-color: hsl(0, 0%, 95%);
|
color: var(--black);
|
||||||
border-color: hsl(0, 0%, 52%);
|
background-color: var(--gray-lightness-90);
|
||||||
|
border-color: var(--truegray);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active {
|
button:active {
|
||||||
background-color: hsl(0, 0%, 95%);
|
background-color: var(--gray-lightness-90);
|
||||||
border-color: hsl(0, 0%, 52%);
|
border-color: var(--truegray);
|
||||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
|
|
||||||
#message-box-buttons button:not(:disabled):hover {
|
|
||||||
background-color: hsl(0, 0%, 90%);
|
|
||||||
border-color: hsl(0, 0%, 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type]) {
|
input:not([type]),
|
||||||
background: #fff;
|
input[type="text"],
|
||||||
color: #000;
|
input[type="search"] {
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--gray-lightness-93);
|
||||||
height: 22px;
|
height: 22px;
|
||||||
min-height: 22px!important;
|
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
padding: 0 3px;
|
padding: 0 3px;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
border: 1px solid hsl(0, 0%, 66%);
|
border: 1px solid var(--gray-lightness-66);
|
||||||
|
transition: border-color .25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-focused-via-click]:not([type]):focus,
|
||||||
|
input[data-focused-via-click][type="number"]:focus,
|
||||||
|
input[data-focused-via-click][type="search"]:focus,
|
||||||
|
label[data-focused-via-click] input[type="number"]:focus,
|
||||||
|
label[data-focused-via-click] + input[type="number"]:focus,
|
||||||
|
input[data-focused-via-click].config-value:focus,
|
||||||
|
label[data-focused-via-click] input.config-value:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--focus-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"] {
|
||||||
|
height: 22px;
|
||||||
|
color: var(--black);
|
||||||
|
background: var(--gray-lightness-93);
|
||||||
|
border: 1px solid var(--gray-lightness-66);
|
||||||
|
padding-top: 2px;
|
||||||
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon.checked {
|
.svg-icon.checked {
|
||||||
|
|
@ -74,7 +212,7 @@ input:not([type]) {
|
||||||
height: 8px;
|
height: 8px;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
display: none;
|
display: none;
|
||||||
fill: #000;
|
fill: var(--gray-lightness-20);
|
||||||
margin: 2px 0 0 2px;
|
margin: 2px 0 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -89,19 +227,19 @@ input[type="checkbox"]:not(.slider) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
border: 1px solid hsl(0, 0%, 46%);
|
border: 1px solid var(--gray-lightness-46);
|
||||||
height: 12px;
|
height: 12px;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background-color: hsla(0, 0%, 0%, .1);
|
background-color: var(--truegray-alpha-15);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: background-color .1s, border-color .1s;
|
transition: background-color .1s, border-color .1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:not(.slider):hover {
|
input[type="checkbox"]:not(.slider):hover {
|
||||||
border-color: hsl(0, 0%, 32%);
|
border-color: var(--black);
|
||||||
background-color: hsl(0, 0%, 82%);
|
background-color: var(--truegray-alpha-25);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
||||||
|
|
@ -113,31 +251,46 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
|
||||||
|
|
||||||
input[type="checkbox"]:not(.slider):disabled {
|
input[type="checkbox"]:not(.slider):disabled {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: hsl(0, 0%, 50%);
|
border-color: var(--truegray);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
|
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
|
||||||
fill: hsl(0, 0%, 50%);
|
fill: var(--truegray);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
|
input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
|
||||||
color: hsl(0, 0%, 50%);
|
color: var(--truegray);
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
color: var(--gray-lightness-20);
|
||||||
transition: color .1s;
|
transition: color .1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label:hover {
|
||||||
|
color: var(--black)
|
||||||
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAIGBgYGAgIGBgSS07UcAAAAEdFJOUwAiFQpfOvseAAAAFklEQVQI12NgZGBkwA+YoZAJDhkhEAACSgAd0bXODAAAAABJRU5ErkJggg==);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-size: 100% 100%;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
color: #000;
|
color: var(--gray-lightness-20);
|
||||||
background-color: transparent;
|
background-color: var(--gray-lightness-88);
|
||||||
border: 1px solid hsl(0, 0%, 66%);
|
border: 1px solid var(--gray-lightness-60);
|
||||||
padding: 0 20px 0 6px;
|
padding: 0 20px 0 6px;
|
||||||
transition: color .5s;
|
transition: color .5s, background-color .5s, border-color .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
select:hover,
|
||||||
|
select:focus {
|
||||||
|
color: var(--black);
|
||||||
|
background-color: var(--main-bg);
|
||||||
|
border-color: var(--truegray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-resizer {
|
.select-resizer {
|
||||||
|
|
@ -152,19 +305,24 @@ select {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
fill: #000;
|
fill: var(--gray-lightness-30);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
transition: fill .5s;
|
transition: fill .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select:hover + .svg-icon.select-arrow,
|
||||||
|
select:focus + .svg-icon.select-arrow {
|
||||||
|
fill: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
background: hsl(0, 0%, 88%);
|
background: var(--gray-lightness-88);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid hsl(0, 0%, 60%);
|
border: 1px solid var(--gray-lightness-60);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
width: 13px;
|
width: 13px;
|
||||||
|
|
@ -186,7 +344,7 @@ input[type="radio"]:after {
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"]:checked:after {
|
input[type="radio"]:checked:after {
|
||||||
background-color: hsl(0, 0%, 30%);
|
background-color: var(--gray-lightness-30);
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -235,9 +393,6 @@ select[disabled] > option {
|
||||||
/* We can customize everything about number inputs except arrows. They're horrible in Linux FF, so we'll hide them unless hovered or focused. */
|
/* We can customize everything about number inputs except arrows. They're horrible in Linux FF, so we'll hide them unless hovered or focused. */
|
||||||
.firefox.non-windows input[type="number"] {
|
.firefox.non-windows input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
background: #fff;
|
|
||||||
color: #000;
|
|
||||||
border: 1px solid hsl(0, 0%, 66%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.firefox.non-windows input[type="number"]:not(:disabled):hover,
|
.firefox.non-windows input[type="number"]:not(:disabled):hover,
|
||||||
|
|
@ -246,8 +401,7 @@ select[disabled] > option {
|
||||||
}
|
}
|
||||||
|
|
||||||
.firefox.non-windows input[type="color"] {
|
.firefox.non-windows input[type="color"] {
|
||||||
background: #fff;
|
border: 1px solid var(--gray-lightness-66);
|
||||||
border: 1px solid hsl(0, 0%, 66%);
|
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,17 @@
|
||||||
|
:root{
|
||||||
|
--install-btn-default: hsl(176, 50%, 35%);
|
||||||
|
--install-btn-default-hover: hsl(176, 50%, 40%);
|
||||||
|
--install-btn-update: hsl(140, 100%, 13%);
|
||||||
|
--install-btn-update-hover: hsl(140, 100%, 18%);
|
||||||
|
--warning-border: hsl(0, 28%, 60%);
|
||||||
|
--warnings-bg: hsl(0, 100%, 94%);
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font: 12px arial, sans-serif;
|
font: 12px arial, sans-serif;
|
||||||
background: white;
|
background: var(--main-bg);
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #000;
|
|
||||||
transition: color .5s;
|
|
||||||
text-decoration-skip: ink;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #666;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img.icon,
|
img.icon,
|
||||||
|
|
@ -23,16 +22,16 @@ img.icon,
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
fill: #000;
|
fill: var(--black);
|
||||||
transition: fill .5s;
|
transition: fill .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover .svg-icon {
|
a:hover .svg-icon {
|
||||||
fill: #666;
|
fill: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled + span {
|
input:disabled + span {
|
||||||
color: rgb(128, 128, 128);
|
color: var(--truegray);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -45,8 +44,8 @@ input:disabled + span {
|
||||||
flex: 0 0 280px;
|
flex: 0 0 280px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-right: 1px dashed #aaa;
|
border-right: 1px dashed var(--gray-lightness-66);
|
||||||
box-shadow: 0 0 50px -18px black;
|
box-shadow: 0 0 50px -18px var(--black);
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
@ -60,9 +59,9 @@ input:disabled + span {
|
||||||
display: none;
|
display: none;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
flex-basis: auto;
|
flex-basis: auto;
|
||||||
background: #ffe2e2;
|
background: var(--warnings-bg);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #aaa;
|
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-warnings .warnings {
|
.has-warnings .warnings {
|
||||||
|
|
@ -111,19 +110,19 @@ h1 small {
|
||||||
.install {
|
.install {
|
||||||
font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
|
font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background-color: hsl(0, 0%, 33%);
|
background-color: var(--gray-lightness-33);
|
||||||
color: #eee;
|
color: var(--gray-lightness-93);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 4px 38px 4px 10px;
|
padding: 4px 38px 4px 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-shadow: 1px 1px 1px #333;
|
text-shadow: 1px 1px 1px var(--gray-lightness-20);
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
margin-bottom: 1ex;
|
margin-bottom: 1ex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset 1px 0 0 0 hsl(0, 0%, 24%);
|
box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset 1px 0 0 0 var(--gray-lightness-24);
|
||||||
transition: color .25s, background-color .25s;
|
transition: color .25s, background-color .25s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -135,8 +134,8 @@ h1 small {
|
||||||
}
|
}
|
||||||
|
|
||||||
.install:hover:not(:disabled) {
|
.install:hover:not(:disabled) {
|
||||||
background-color: hsl(0, 0%, 38%);
|
background-color: var(--gray-lightness-38);
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,8 +153,8 @@ h1 small {
|
||||||
}
|
}
|
||||||
|
|
||||||
.install:before {
|
.install:before {
|
||||||
border-left: 1px solid rgba(0, 0, 0, .3);
|
border-left: 1px solid var(--black-alpha-3);
|
||||||
box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%);
|
box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset -1px 0 0 0 var(--gray-lightness-38);
|
||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
transition: background-color .25s;
|
transition: background-color .25s;
|
||||||
}
|
}
|
||||||
|
|
@ -163,11 +162,11 @@ h1 small {
|
||||||
.install:before,
|
.install:before,
|
||||||
.install:active:before,
|
.install:active:before,
|
||||||
.install:active:hover:before {
|
.install:active:hover:before {
|
||||||
background-color: hsl(176, 50%, 35%);
|
background-color: var(--install-btn-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install:hover:before {
|
.install:hover:before {
|
||||||
background-color: hsl(176, 50%, 40%);
|
background-color: var(--install-btn-default-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install:active,
|
.install:active,
|
||||||
|
|
@ -179,7 +178,7 @@ h1 small {
|
||||||
|
|
||||||
.install:active,
|
.install:active,
|
||||||
.install:active:hover {
|
.install:active:hover {
|
||||||
background-color: hsl(0, 0%, 33%);
|
background-color: var(--gray-lightness-33);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install:after {
|
.install:after {
|
||||||
|
|
@ -190,7 +189,7 @@ h1 small {
|
||||||
|
|
||||||
.install:disabled {
|
.install:disabled {
|
||||||
opacity: .25;
|
opacity: .25;
|
||||||
color: white;
|
color: var(--white);
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -201,25 +200,25 @@ h1 small {
|
||||||
.install.reinstall:before,
|
.install.reinstall:before,
|
||||||
.install.reinstall:active:before,
|
.install.reinstall:active:before,
|
||||||
.install.reinstall:active:hover:before {
|
.install.reinstall:active:hover:before {
|
||||||
background-color: hsl(0, 0%, 20%);
|
background-color: var(--gray-lightness-20);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install.reinstall:hover:before {
|
.install.reinstall:hover:before {
|
||||||
background-color: hsl(0, 0%, 25%);
|
background-color: var(--gray-lightness-25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install.reinstall:hover:before {
|
.install.reinstall:hover:before {
|
||||||
background-color: #444;
|
background-color: var(--gray-lightness-27);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install.update:before,
|
.install.update:before,
|
||||||
.install.update:active:before,
|
.install.update:active:before,
|
||||||
.install.update:active:hover:before {
|
.install.update:active:hover:before {
|
||||||
background-color: hsl(140, 100%, 13%);
|
background-color: var(--install-btn-update);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install.update:hover:before {
|
.install.update:hover:before {
|
||||||
background-color: hsl(140, 100%, 18%);
|
background-color: var(--install-btn-update-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.install.update:after {
|
.install.update:after {
|
||||||
|
|
@ -281,6 +280,19 @@ li {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/************ CM default ************/
|
||||||
|
.CodeMirror.cm-s-default {
|
||||||
|
background: var(--gray-lightness-93) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror.cm-s-default .CodeMirror-gutters {
|
||||||
|
background-color: var(--truegray-alpha-1) !important;
|
||||||
|
border-right: 1px solid var(--truegray-alpha-2) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
/* spinner-related */
|
/* spinner-related */
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
|
|
@ -457,7 +469,7 @@ label:not(.unavailable) {
|
||||||
#header {
|
#header {
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #AAA;
|
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -530,7 +542,7 @@ label:not(.unavailable) {
|
||||||
max-height: 20%;
|
max-height: 20%;
|
||||||
}
|
}
|
||||||
.warning:not(:last-child) {
|
.warning:not(:last-child) {
|
||||||
border-bottom: 1px dashed #b57c7c;
|
border-bottom: 1px dashed var(--warning-border);
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
ul.applies-to,
|
ul.applies-to,
|
||||||
|
|
|
||||||
|
|
@ -89,6 +89,12 @@ var prefs = new function Prefs() {
|
||||||
'iconset': 0, // 0 = dark-themed icon
|
'iconset': 0, // 0 = dark-themed icon
|
||||||
// 1 = light-themed icon
|
// 1 = light-themed icon
|
||||||
|
|
||||||
|
'popupui': 0, // 0 = new UI
|
||||||
|
// 1 = classic UI
|
||||||
|
|
||||||
|
'popupclick': 0, // 0 = edit
|
||||||
|
// 1 = toggle
|
||||||
|
|
||||||
'badgeDisabled': '#8B0000', // badge background color when disabled
|
'badgeDisabled': '#8B0000', // badge background color when disabled
|
||||||
'badgeNormal': '#006666', // badge background color
|
'badgeNormal': '#006666', // badge background color
|
||||||
|
|
||||||
|
|
|
||||||
14
manage.html
14
manage.html
|
|
@ -167,9 +167,9 @@
|
||||||
<script src="js/storage-util.js" async></script>
|
<script src="js/storage-util.js" async></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
|
<body id="stylus-manage" class="truegray-alpha-15" i18n-dragndrop-hint="dragDropMessage">
|
||||||
|
|
||||||
<div id="header">
|
<div id="header" class="truegray-alpha-06">
|
||||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||||
|
|
||||||
<div id="manage-settings">
|
<div id="manage-settings">
|
||||||
|
|
@ -325,16 +325,18 @@
|
||||||
|
|
||||||
<div id="newUIoptions">
|
<div id="newUIoptions">
|
||||||
<div>
|
<div>
|
||||||
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
|
<div class="favicon-label-wrapper">
|
||||||
<input id="manage.newUI.favicons" type="checkbox">
|
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
<input id="manage.newUI.favicons" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
|
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
|
||||||
<svg class="svg-icon select-arrow">
|
<svg class="svg-icon select-arrow">
|
||||||
<title i18n-text="optionsSubheading"></title>
|
<title i18n-text="optionsSubheading"></title>
|
||||||
<use xlink:href="#svg-icon-select-arrow"/>
|
<use xlink:href="#svg-icon-select-arrow"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</label>
|
</div>
|
||||||
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
|
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
|
||||||
<div>
|
<div>
|
||||||
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
|
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,28 @@
|
||||||
--name-padding-right: 40px;
|
--name-padding-right: 40px;
|
||||||
--actions-width: 75px;
|
--actions-width: 75px;
|
||||||
--onoffswitch-width: 60px;
|
--onoffswitch-width: 60px;
|
||||||
|
--manage-zebra-alpha-bg: hsla(0, 0%, 50%, .07);
|
||||||
|
--styles-hidden: hsla(180, 40%, 45%, .3);
|
||||||
|
--usercss-label: hsl(180, 100%, 20%);
|
||||||
|
--exit-filters: hsla(180, 50%, 27%, .5);
|
||||||
|
--exit-filters-hover: hsl(180, 50%, 27%);
|
||||||
|
--tooltip-default-border: hsl(52, 52%, 73%);
|
||||||
|
--tooltip-default-bg: hsl(54, 100%, 92%);
|
||||||
|
--tooltip-action-complete-border: hsl(179, 38%, 66%);
|
||||||
|
--tooltip-action-complete-bg: hsl(166, 100%, 88%);
|
||||||
|
--palered: hsl(0, 81%, 67%);
|
||||||
|
--lightred: hsl(0, 98%, 62%);
|
||||||
|
--red: hsl(0, 100%, 50%);
|
||||||
|
--stylename-manage-hover-text: hsl(180, 100%, 15%);
|
||||||
|
--stylename-hover-garadient-left: hsla(180, 50%, 30%, 0.2);
|
||||||
|
--stylename-hover-garadient-middle: hsla(180, 20%, 10%, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* Firefox: fill the entire page for drag'n'drop to work */
|
/* Firefox: fill the entire page for drag'n'drop to work */
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header:lang(ja) h1 {
|
#header:lang(ja) h1 {
|
||||||
|
|
@ -22,7 +37,7 @@ body.all-styles-hidden-by-filters:before,
|
||||||
body.all-styles-hidden-by-filters:after {
|
body.all-styles-hidden-by-filters:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(3rem + var(--header-width));
|
left: calc(3rem + var(--header-width));
|
||||||
color: hsla(180, 40%, 45%, .3);
|
color: var(--styles-hidden);
|
||||||
animation: fadein 3s;
|
animation: fadein 3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -38,25 +53,15 @@ body.all-styles-hidden-by-filters:after {
|
||||||
top: 3rem;
|
top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, .disabled a:hover {
|
|
||||||
color: #000;
|
|
||||||
transition: color .5s;
|
|
||||||
text-decoration-skip: ink;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
width: var(--header-width);
|
width: var(--header-width);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-right: 1px dashed #AAA;
|
border-right: 1px dashed var(--gray-lightness-66);
|
||||||
-webkit-box-shadow: 0 0 50px -18px black;
|
-webkit-box-shadow: 0 0 50px -18px var(--black);
|
||||||
box-shadow: 0 0 50px -18px black;
|
box-shadow: 0 0 50px -18px var(--black);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
|
@ -71,11 +76,6 @@ a:hover {
|
||||||
max-width: calc(100% - 30px);
|
max-width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#check-all-updates-force {
|
|
||||||
white-space: normal;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header h1 {
|
#header h1 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: .3em;
|
margin-bottom: .3em;
|
||||||
|
|
@ -103,7 +103,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
|
#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
|
||||||
fill: #aaa;
|
fill: var(--gray-lightness-66);
|
||||||
}
|
}
|
||||||
|
|
||||||
#add-style-as-usercss-wrapper input {
|
#add-style-as-usercss-wrapper input {
|
||||||
|
|
@ -127,7 +127,7 @@ a:hover {
|
||||||
.entry {
|
.entry {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 1.25em 2em;
|
padding: 1.25em 2em;
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid var(--gray-lightness-86);
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry:first-child {
|
.entry:first-child {
|
||||||
|
|
@ -140,11 +140,11 @@ a:hover {
|
||||||
transition: fill .5s;
|
transition: fill .5s;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
fill: #666;
|
fill: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon:hover {
|
.svg-icon:hover {
|
||||||
fill: #000;
|
fill: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-icon.info {
|
.svg-icon.info {
|
||||||
|
|
@ -209,7 +209,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.applies-to .target:hover {
|
.applies-to .target:hover {
|
||||||
background-color: rgba(128, 128, 128, .15);
|
background-color: var(--truegray-alpha-15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.applies-to-extra:not([open]) {
|
.applies-to-extra:not([open]) {
|
||||||
|
|
@ -239,7 +239,7 @@ a:hover {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
background: rgba(128, 128, 128, .2);
|
background: var(--truegray-alpha-2);
|
||||||
padding: 2px 5px 3px;
|
padding: 2px 5px 3px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-left: 1ex;
|
margin-left: 1ex;
|
||||||
|
|
@ -250,8 +250,8 @@ a:hover {
|
||||||
|
|
||||||
.entry.usercss .style-name-link::after {
|
.entry.usercss .style-name-link::after {
|
||||||
content: "usercss";
|
content: "usercss";
|
||||||
background-color: hsla(180, 100%, 20%, 1);
|
background-color: var(--usercss-label);
|
||||||
color: white;
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled h2 .style-name-link,
|
.disabled h2 .style-name-link,
|
||||||
|
|
@ -292,8 +292,8 @@ a:hover {
|
||||||
padding-top: .1rem;
|
padding-top: .1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#options-buttons button,
|
#options-buttons > *,
|
||||||
#backup-buttons button {
|
#backup-buttons > * {
|
||||||
margin: 0 .2rem .5rem 0;
|
margin: 0 .2rem .5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -330,7 +330,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#header summary:hover h2 {
|
#header summary:hover h2 {
|
||||||
border-color: #bbb;
|
border-color: var(--gray-lightness-73);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* compact layout */
|
/* compact layout */
|
||||||
|
|
@ -352,7 +352,7 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry.odd {
|
.newUI .entry.odd {
|
||||||
background-color: rgba(128, 128, 128, 0.05);
|
background-color: var(--manage-zebra-alpha-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry > * {
|
.newUI .entry > * {
|
||||||
|
|
@ -405,6 +405,8 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-selection select {
|
.filter-selection select {
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
border: none;
|
border: none;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
@ -412,6 +414,10 @@ a:hover {
|
||||||
padding-right: 14px;
|
padding-right: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filter-selection select option {
|
||||||
|
background-color: var(--main-bg)
|
||||||
|
}
|
||||||
|
|
||||||
.filter-selection .select-arrow {
|
.filter-selection .select-arrow {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -434,7 +440,7 @@ a:hover {
|
||||||
|
|
||||||
#filters label:hover,
|
#filters label:hover,
|
||||||
#filters .filter-selection:hover {
|
#filters .filter-selection:hover {
|
||||||
background-color: hsla(0, 0%, 50%, .2);
|
background-color: var(--truegray-alpha-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkmate {
|
.checkmate {
|
||||||
|
|
@ -463,7 +469,7 @@ a:hover {
|
||||||
|
|
||||||
.newUI .entry .svg-icon.checked,
|
.newUI .entry .svg-icon.checked,
|
||||||
.newUI .entry:hover .svg-icon.checked {
|
.newUI .entry:hover .svg-icon.checked {
|
||||||
fill: #000;
|
fill: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry input[type="checkbox"]:not(.slider) {
|
.newUI .entry input[type="checkbox"]:not(.slider) {
|
||||||
|
|
@ -479,19 +485,26 @@ a:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry .style-name:hover::before {
|
.newUI .entry .style-name::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
|
background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .1s;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newUI .entry .style-name:hover::before {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry.enabled .style-name:hover .style-name-link {
|
.newUI .entry.enabled .style-name:hover .style-name-link {
|
||||||
color: hsla(180, 100%, 15%, 1);
|
color: var(--stylename-manage-hover-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .style-name:after {
|
.newUI .style-name:after {
|
||||||
|
|
@ -526,15 +539,15 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry .svg-icon {
|
.newUI .entry .svg-icon {
|
||||||
fill: #999;
|
fill: var(--gray-lightness-60);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry:hover .svg-icon {
|
.newUI .entry:hover .svg-icon {
|
||||||
fill: #666;
|
fill: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .entry:hover .svg-icon:hover {
|
.newUI .entry:hover .svg-icon:hover {
|
||||||
fill: #000;
|
fill: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .checking-update .check-update {
|
.newUI .checking-update .check-update {
|
||||||
|
|
@ -570,17 +583,17 @@ a:hover {
|
||||||
|
|
||||||
.newUI .can-update[data-details$="locally edited"] .update svg,
|
.newUI .can-update[data-details$="locally edited"] .update svg,
|
||||||
.newUI .update-problem .check-update svg {
|
.newUI .update-problem .check-update svg {
|
||||||
fill: #ef6969;
|
fill: var(--palered);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .can-update[data-details$="locally edited"]:hover .update svg,
|
.newUI .can-update[data-details$="locally edited"]:hover .update svg,
|
||||||
.newUI .entry.update-problem:hover .check-update svg {
|
.newUI .entry.update-problem:hover .check-update svg {
|
||||||
fill: #fd4040;
|
fill: var(--lightred);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
|
.newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
|
||||||
.newUI .entry.update-problem:hover .check-update svg:hover {
|
.newUI .entry.update-problem:hover .check-update svg:hover {
|
||||||
fill: red;
|
fill: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .actions {
|
.newUI .actions {
|
||||||
|
|
@ -593,19 +606,19 @@ a:hover {
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
margin-left: -36px;
|
margin-left: -36px;
|
||||||
padding: 1ex 1.5ex;
|
padding: 1ex 1.5ex;
|
||||||
border: 1px solid #ded597;
|
border: 1px solid var(--tooltip-default-border);
|
||||||
background-color: #fffbd6;
|
background-color: var(--tooltip-default-bg);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 2px 3px 10px rgba(0,0,0,.25);
|
box-shadow: 2px 3px 10px var(--black-alpha-25);
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
animation: fadeout 10s;
|
animation: fadeout 10s;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .update-problem .check-update:after {
|
.newUI .update-problem .check-update:after {
|
||||||
background-color: red;
|
background-color: var(--red);
|
||||||
border: 1px solid #d40000;
|
border: 1px solid var(--darker-red);
|
||||||
color: white;
|
color: var(--white);
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -614,8 +627,8 @@ a:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .can-update:not([data-details$="locally edited"]) .update:after {
|
.newUI .can-update:not([data-details$="locally edited"]) .update:after {
|
||||||
background-color: #c0fff0;
|
background-color: var(--tooltip-action-complete-bg);
|
||||||
border: 1px solid #89cac9;
|
border: 1px solid var(--tooltip-action-complete-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .applies-to {
|
.newUI .applies-to {
|
||||||
|
|
@ -721,8 +734,7 @@ a:hover {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: relative;
|
margin-left: 1px;
|
||||||
top: -1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#newUIoptions [data-toggle-on-click] > svg {
|
#newUIoptions [data-toggle-on-click] > svg {
|
||||||
|
|
@ -815,15 +827,6 @@ input[id^="manage.newUI"] {
|
||||||
margin-top: 1ex;
|
margin-top: 1ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
#update-all-no-updates[data-skipped-edited="true"] {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#update-all-no-updates[data-skipped-edited="true"]::after {
|
|
||||||
font-weight: normal;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* highlight updated/added styles */
|
/* highlight updated/added styles */
|
||||||
.highlight {
|
.highlight {
|
||||||
animation: highlight 10s cubic-bezier(0,.82,.47,.98);
|
animation: highlight 10s cubic-bezier(0,.82,.47,.98);
|
||||||
|
|
@ -834,7 +837,7 @@ input[id^="manage.newUI"] {
|
||||||
|
|
||||||
@keyframes highlight {
|
@keyframes highlight {
|
||||||
from {
|
from {
|
||||||
background-color: rgba(128, 128, 128, .5);
|
background-color: var(--truegray-alpha-5);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
background-color: none;
|
background-color: none;
|
||||||
|
|
@ -859,7 +862,7 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#filters > label:hover {
|
#filters > label:hover {
|
||||||
background-color: hsla(0, 0%, 50%, .4);
|
background-color: var(--truegray-alpha-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
#filters {
|
#filters {
|
||||||
|
|
@ -867,9 +870,9 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active #filters-stats {
|
.active #filters-stats {
|
||||||
background-color: darkcyan;
|
background-color: var(--darkcyan);
|
||||||
border-color: darkcyan;
|
border-color: var(--darkcyan);
|
||||||
color: white;
|
color: var(--white);
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
|
|
@ -891,8 +894,17 @@ input[id^="manage.newUI"] {
|
||||||
margin-top: 4px
|
margin-top: 4px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.favicon-label-wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favicon-label-wrapper a:hover .svg-icon {
|
||||||
|
fill: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
#reset-filters svg {
|
#reset-filters svg {
|
||||||
fill: hsla(180, 50%, 27%, .5);
|
fill: var(--exit-filters);
|
||||||
width: 24px; /* widen the click area a bit */
|
width: 24px; /* widen the click area a bit */
|
||||||
height: 20px;
|
height: 20px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
|
@ -900,7 +912,7 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#reset-filters:hover svg {
|
#reset-filters:hover svg {
|
||||||
fill: hsla(180, 50%, 27%, 1);
|
fill: var(--exit-filters-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
#filters summary:not(.active) #reset-filters,
|
#filters summary:not(.active) #reset-filters,
|
||||||
|
|
@ -932,16 +944,20 @@ input[id^="manage.newUI"] {
|
||||||
|
|
||||||
#search {
|
#search {
|
||||||
max-width: calc(100% - 30px);
|
max-width: calc(100% - 30px);
|
||||||
|
background-color: var(--gray-lightness-93);
|
||||||
|
border: 1px solid var(--gray-lightness-60);
|
||||||
|
transition: border-color .25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search[data-focused-via-click]:focus {
|
||||||
|
border-color: var(--focus-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search, #manage\.newUI\.sort {
|
#search, #manage\.newUI\.sort {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
background: #fff;
|
|
||||||
height: 20px;
|
height: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 3px 3px 3px 4px;
|
padding: 3px 3px 3px 4px;
|
||||||
color: #000;
|
|
||||||
border: 1px solid hsl(0, 0%, 66%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#manage\.newUI\.sort {
|
#manage\.newUI\.sort {
|
||||||
|
|
@ -970,12 +986,12 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-text mark {
|
.help-text mark {
|
||||||
background-color: rgba(128, 128, 128, .15);
|
background-color: var(--truegray-alpha-15);
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-family: Consolas, monospace;
|
font-family: Consolas, monospace;
|
||||||
border: 1px solid rgba(128, 128, 128, .25);
|
border: 1px solid var(--truegray-alpha-25);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
|
|
@ -998,15 +1014,15 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#import pre {
|
#import pre {
|
||||||
background: #eee;
|
background: var(--main-bg);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: 0 0 .5em 0;
|
margin: 0 0 .5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* drag-n-drop on import button */
|
/* drag-n-drop on import button */
|
||||||
.dropzone:after {
|
.dropzone:after {
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
background-color: var(--black-alpha-7);
|
||||||
color: white;
|
color: var(--white);
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -1015,7 +1031,7 @@ input[id^="manage.newUI"] {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
padding: calc(50vh - 3em) calc(50vw - 5em);
|
padding: calc(50vh - 3em) calc(50vw - 5em);
|
||||||
content: attr(dragndrop-hint);
|
content: attr(dragndrop-hint);
|
||||||
text-shadow: 1px 1px 10px black;
|
text-shadow: 1px 1px 10px var(--black);
|
||||||
font-size: xx-large;
|
font-size: xx-large;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
|
animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
|
||||||
|
|
@ -1029,7 +1045,7 @@ input[id^="manage.newUI"] {
|
||||||
|
|
||||||
/* post-import report */
|
/* post-import report */
|
||||||
#message-box details:not([data-id="invalid"]) div:hover {
|
#message-box details:not([data-id="invalid"]) div:hover {
|
||||||
background-color: rgba(128, 128, 128, .3);
|
background-color: var(--truegray-alpha-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box details:not(:last-child) {
|
#message-box details:not(:last-child) {
|
||||||
|
|
@ -1141,7 +1157,7 @@ input[id^="manage.newUI"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: static;
|
position: static;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #AAA;
|
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||||
}
|
}
|
||||||
|
|
||||||
#manage-settings {
|
#manage-settings {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
:root {
|
||||||
|
--message-box-title: hsl(170, 40%, 69%);
|
||||||
|
--firebrick: hsl(0, 68%, 42%);
|
||||||
|
}
|
||||||
|
|
||||||
#message-box {
|
#message-box {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -5,7 +10,7 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-color: rgba(0, 0, 0, 0.45);
|
background-color: var(--black-alpha-45);
|
||||||
animation: fadein .25s ease-in-out;
|
animation: fadein .25s ease-in-out;
|
||||||
z-index: 9999990;
|
z-index: 9999990;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
|
@ -21,8 +26,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: white;
|
box-shadow: 5px 5px 50px var(--black-alpha-25);
|
||||||
box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.225);
|
|
||||||
z-index: 9999991;
|
z-index: 9999991;
|
||||||
-moz-user-select: text;
|
-moz-user-select: text;
|
||||||
}
|
}
|
||||||
|
|
@ -57,7 +61,7 @@
|
||||||
|
|
||||||
#message-box-title {
|
#message-box-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: rgb(145, 208, 198);
|
background-color: var(--message-box-title);
|
||||||
padding: .75rem 24px .75rem 52px;
|
padding: .75rem 24px .75rem 52px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -79,8 +83,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box.danger #message-box-title {
|
#message-box.danger #message-box-title {
|
||||||
background-color: firebrick;
|
background-color: var(--firebrick);
|
||||||
color: white;
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box.danger #message-box-title::before {
|
#message-box.danger #message-box-title::before {
|
||||||
|
|
@ -92,11 +96,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box.danger #message-box-close-icon svg {
|
#message-box.danger #message-box-close-icon svg {
|
||||||
fill: maroon;
|
fill: var(--maroon);
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box.danger #message-box-close-icon svg:hover {
|
#message-box.danger #message-box-close-icon svg:hover {
|
||||||
fill: #600;
|
fill: var(--darker-maroon);
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box-close-icon {
|
#message-box-close-icon {
|
||||||
|
|
@ -117,6 +121,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-grow: 9;
|
flex-grow: 9;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box-contents p:first-child {
|
#message-box-contents p:first-child {
|
||||||
|
|
@ -129,7 +134,6 @@
|
||||||
|
|
||||||
#message-box-buttons {
|
#message-box-buttons {
|
||||||
padding: .75rem .375rem;
|
padding: .75rem .375rem;
|
||||||
background-color: #f0f0f0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ function messageBox({
|
||||||
const id = 'message-box';
|
const id = 'message-box';
|
||||||
messageBox.element =
|
messageBox.element =
|
||||||
$create({id, className}, [
|
$create({id, className}, [
|
||||||
$create([
|
$create('div.main-bg', [
|
||||||
$create(`#${id}-title`, title),
|
$create(`#${id}-title`, title),
|
||||||
$create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
|
$create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
|
||||||
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
|
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
|
||||||
|
|
@ -120,7 +120,7 @@ function messageBox({
|
||||||
'5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
|
'5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
|
||||||
}))),
|
}))),
|
||||||
$create(`#${id}-contents`, tHTML(contents)),
|
$create(`#${id}-contents`, tHTML(contents)),
|
||||||
$create(`#${id}-buttons`,
|
$create(`#${id}-buttons.truegray-alpha-2`,
|
||||||
buttons.map((content, buttonIndex) => content &&
|
buttons.map((content, buttonIndex) => content &&
|
||||||
$create('button', Object.assign({
|
$create('button', Object.assign({
|
||||||
buttonIndex,
|
buttonIndex,
|
||||||
|
|
|
||||||
55
options.html
55
options.html
|
|
@ -28,7 +28,7 @@
|
||||||
<script src="content/apply.js"></script>
|
<script src="content/apply.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="stylus-options">
|
<body id="stylus-options" class="truegray-alpha-2">
|
||||||
<div id="options">
|
<div id="options">
|
||||||
|
|
||||||
<div class="block">
|
<div class="block">
|
||||||
|
|
@ -105,6 +105,57 @@
|
||||||
<span></span>
|
<span></span>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
<div class="radio-outer-wrapper action-elements">
|
||||||
|
<div class="radio-title" i18n-text="optionsPopupActionElements"></div>
|
||||||
|
<div class="radio-inner-wrapper">
|
||||||
|
<label i18n-title="optionsPopupIconUI">
|
||||||
|
<div class="popupui">
|
||||||
|
<input type="radio" name="popupui">
|
||||||
|
<div class="icon-wrapper use-svg">
|
||||||
|
<svg class="svg-icon vector" viewBox="0 0 40 22">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="m 36.9,0.95 c -1.2,0 -2.4,0.8 -2.9,1.9 H 23.8 v -2.5 h -7.5 v 2.5 H 6 C 5.5,1.75 4.4,0.95 3.1,0.95 1.3,0.95 0,2.35 0,4.05 c 0,1.7 1.4,3.1 3.1,3.1 1.2,0 2.4,-0.8 2.9,-1.9 h 6.4 c -3,2 -5.2,5.1 -6.2,8.8 H 3.8 v 7.6 h 7.5 v -7.5 H 8.8 c 1.1,-3.6 4,-6.6 7.5,-7.9 v 1.6 h 7.5 v -1.6 c 3.6,1.4 6.4,4.2 7.5,7.9 h -2.5 v 7.5 h 7.5 v -7.5 h -2.4 c -1,-3.6 -3.2,-6.8 -6.2,-8.8 H 34 c 0.5,1.1 1.6,1.9 2.9,1.9 1.8,0 3.1,-1.4 3.1,-3.1 0,-1.8 -1.4,-3.2 -3.1,-3.2 z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label i18n-title="optionsPopupClassicUI">
|
||||||
|
<div class="popupui">
|
||||||
|
<input type="radio" name="popupui">
|
||||||
|
<div class="icon-wrapper use-text">
|
||||||
|
<svg class="svg-icon text" viewBox="0 0 8 8">
|
||||||
|
<path d="M0 0v2h.5c0-.55.45-1 1-1h1.5v5.5c0 .28-.22.5-.5.5h-.5v1h4v-1h-.5c-.28 0-.5-.22-.5-.5v-5.5h1.5c.55 0 1 .45 1 1h.5v-2h-8z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="radio-outer-wrapper style-name-action">
|
||||||
|
<div class="radio-title" i18n-text="optionsPopupClickAction"></div>
|
||||||
|
<div class="radio-inner-wrapper">
|
||||||
|
<label i18n-title="optionsPopupClickActionLink">
|
||||||
|
<div class="popupclick ">
|
||||||
|
<input type="radio" name="popupclick">
|
||||||
|
<div class="icon-wrapper use-edit">
|
||||||
|
<svg class="svg-icon edit" viewBox="0 0 1024 1024">
|
||||||
|
<path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
|
||||||
|
<path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label i18n-title="optionsPopupClickActionToggle">
|
||||||
|
<div class="popupclick">
|
||||||
|
<input type="radio" name="popupclick">
|
||||||
|
<div class="icon-wrapper use-toggle">
|
||||||
|
<svg class="svg-icon double-toggle" viewBox="0 0 1024 1024">
|
||||||
|
<path d="M692.053333 474.502095 331.897905 474.502095c-119.369143 0-216.088381-100.766476-216.088381-225.060571S212.528762 24.380952 331.897905 24.380952l360.131048 0c119.369143 0 216.137143 100.766476 216.137143 225.060571S811.398095 474.502095 692.053333 474.502095zM692.053333 61.878857 331.897905 61.878857c-99.449905 0-180.077714 83.992381-180.077714 187.562667s80.62781 187.562667 180.077714 187.562667l360.131048 0c99.474286 0 180.077714-83.992381 180.077714-187.562667S791.527619 61.878857 692.053333 61.878857zM331.897905 399.433143c-79.579429 0-144.067048-67.145143-144.067048-149.991619s64.512-150.064762 144.067048-150.064762c79.555048 0 144.042667 67.193905 144.042667 150.064762S411.452952 399.433143 331.897905 399.433143zM331.897905 549.497905l360.131048 0c119.369143 0 216.137143 100.790857 216.137143 225.060571S811.398095 999.619048 692.053333 999.619048L331.897905 999.619048c-119.369143 0-216.088381-100.766476-216.088381-225.03619S212.528762 549.497905 331.897905 549.497905zM692.053333 924.623238c79.60381 0 144.11581-67.193905 144.11581-150.040381s-64.512-150.064762-144.11581-150.064762c-79.579429 0-144.042667 67.218286-144.042667 150.064762S612.473905 924.623238 692.053333 924.623238z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -167,7 +218,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="block" id="actions">
|
<div class="block truegray-alpha-2" id="actions">
|
||||||
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
|
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
|
||||||
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
|
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
|
||||||
<div data-cmd="check-updates">
|
<div data-cmd="check-updates">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,11 @@
|
||||||
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
|
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--slider-enabled-bg: hsl(165, 45%, 84%);
|
||||||
|
--slider-enabled-border: hsl(165, 45%, 82%);
|
||||||
|
--slider-enabled-circle: hsl(171, 96%, 37%);
|
||||||
|
}
|
||||||
|
|
||||||
.onoffswitch {
|
.onoffswitch {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 1ex 0;
|
margin: 1ex 0;
|
||||||
|
|
@ -33,10 +39,10 @@
|
||||||
height: 12px;
|
height: 12px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
border: 0 solid #E3E3E3;
|
border: 1px solid var(--gray-lightness-84);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background-color: #E0E0E0;
|
background-color: var(--gray-lightness-87);
|
||||||
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
|
box-shadow: inset 2px 2px 4px var(--black-alpha-15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.onoffswitch span::before {
|
.onoffswitch span::before {
|
||||||
|
|
@ -45,21 +51,21 @@
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
margin: -3px;
|
margin: -3px;
|
||||||
background: #efefef;
|
background: var(--gray-lightness-92);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 46px;
|
right: 46px;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
|
box-shadow: 0 3px 13px 0 var(--black-alpha-45);
|
||||||
}
|
}
|
||||||
|
|
||||||
.onoffswitch input:checked + span {
|
.onoffswitch input:checked + span {
|
||||||
background-color: #CAEBE3;
|
background-color: var(--slider-enabled-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
|
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
|
||||||
border-color: #CAEBE3;
|
border-color: var(--slider-enabled-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.onoffswitch input:checked + span .onoffswitch-inner {
|
.onoffswitch input:checked + span .onoffswitch-inner {
|
||||||
|
|
@ -69,5 +75,5 @@
|
||||||
.onoffswitch input:checked + span::before {
|
.onoffswitch input:checked + span::before {
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #04BA9F;
|
background-color: #04BA9F;
|
||||||
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: 3px 6px 18px 0 var(--black-alpha-25);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,8 @@ html.opera body {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
display: flex;
|
||||||
|
background: var(--main-bg);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
@ -18,13 +19,35 @@ body {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.radio-outer-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-inner-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-inner-wrapper label > :first-child {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-title + label {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
@supports (-moz-appearance:none) {
|
@supports (-moz-appearance:none) {
|
||||||
body {
|
body {
|
||||||
--addons-page-left-padding: 6px;
|
--addons-page-left-padding: 6px;
|
||||||
|
--match-ff-bg: hsl(240, 9%, 98%);
|
||||||
/* compensate 'html.firefox .block' padding-left */
|
/* compensate 'html.firefox .block' padding-left */
|
||||||
width: calc(100% - var(--addons-page-left-padding));
|
width: calc(100% - var(--addons-page-left-padding));
|
||||||
/* match the default FF theme */
|
/* match the default FF theme */
|
||||||
background-color: #f9f9fa;
|
background-color: var(--match-ff-bg)
|
||||||
}
|
}
|
||||||
html.firefox .block {
|
html.firefox .block {
|
||||||
padding-left: var(--addons-page-left-padding);
|
padding-left: var(--addons-page-left-padding);
|
||||||
|
|
@ -39,7 +62,7 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
border-bottom: 1px dotted #ccc;
|
border-bottom: 1px dotted var(--gray-lightness-80);
|
||||||
padding: 0 16px .75em;
|
padding: 0 16px .75em;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -86,13 +109,17 @@ label > :first-child {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
label:not([disabled]) > :first-child {
|
label:not([disabled]),
|
||||||
cursor: default;
|
label:not([disabled]) * {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:not([disabled]) input[type=number] {
|
||||||
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
label:not([disabled]):hover > :first-child {
|
label:not([disabled]):hover > :first-child {
|
||||||
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
|
text-shadow: 0 0 0.01px var(--black-alpha-25);
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=number],
|
input[type=number],
|
||||||
|
|
@ -117,8 +144,8 @@ input[type=number] {
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=number]:invalid {
|
input[type=number]:invalid {
|
||||||
background-color: rgba(255, 0, 0, 0.1);
|
background-color: var(--red-alpha-1);
|
||||||
color: darkred;
|
color: var(--darkred);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="color"] {
|
input[type="color"] {
|
||||||
|
|
@ -143,7 +170,6 @@ input[type="color"] {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
background-color: rgba(0, 0, 0, .05);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -221,7 +247,7 @@ html:not(.firefox):not(.opera) #updates {
|
||||||
#advanced.collapsible h1 {
|
#advanced.collapsible h1 {
|
||||||
width: unset;
|
width: unset;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #333;
|
color: var(--gray-lightness-20);
|
||||||
transition: color .5s;
|
transition: color .5s;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -234,32 +260,91 @@ html:not(.firefox):not(.opera) #updates {
|
||||||
}
|
}
|
||||||
|
|
||||||
#advanced.collapsible:not(.collapsed) h1:hover {
|
#advanced.collapsible:not(.collapsed) h1:hover {
|
||||||
color: #666;
|
color: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
|
|
||||||
#advanced.collapsible.collapsed h1 {
|
#advanced.collapsible.collapsed h1 {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #666;
|
color: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
|
|
||||||
#advanced.collapsible.collapsed:hover h1 {
|
#advanced.collapsible.collapsed:hover h1 {
|
||||||
color: #333;
|
color: var(--gray-lightness-20);
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsible-resizer .svg-icon {
|
.collapsible-resizer .svg-icon {
|
||||||
fill: #333;
|
fill: var(--gray-lightness-20);
|
||||||
transition: fill .5s;
|
transition: fill .5s;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action-elements {
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-elements input,
|
||||||
|
.style-name-action input {
|
||||||
|
margin: 0 3px -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper.use-text {
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper.use-edit {
|
||||||
|
margin: 0 5px 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-elements label > :first-child,
|
||||||
|
.style-name-action label > :first-child {
|
||||||
|
margin: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-elements label,
|
||||||
|
.style-name-action label {
|
||||||
|
width: 56px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper .svg-icon {
|
||||||
|
fill: var(--gray-lightness-40);
|
||||||
|
transition: fill .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
label:hover .icon-wrapper .svg-icon,
|
||||||
|
input:checked + .icon-wrapper .svg-icon {
|
||||||
|
fill: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon.text,
|
||||||
|
.svg-icon.vector {
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon.edit {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon.double-toggle {
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
#advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
|
#advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
|
||||||
#advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
|
#advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
|
||||||
fill: #666;
|
fill: var(--gray-lightness-40);
|
||||||
}
|
}
|
||||||
|
|
||||||
#advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
|
#advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
|
||||||
fill: #333;
|
fill: var(--gray-lightness-20);
|
||||||
}
|
}
|
||||||
|
|
||||||
#advanced.collapsible h1 .svg-icon {
|
#advanced.collapsible h1 .svg-icon {
|
||||||
|
|
@ -278,12 +363,12 @@ html:not(.firefox):not(.opera) #updates {
|
||||||
.svg-inline-wrapper .svg-icon {
|
.svg-inline-wrapper .svg-icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
fill: #666;
|
fill: var(--gray-lightness-40);
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-inline-wrapper:hover .svg-icon {
|
.svg-inline-wrapper:hover .svg-icon {
|
||||||
fill: #000;
|
fill: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box.note > div {
|
#message-box.note > div {
|
||||||
|
|
@ -306,7 +391,7 @@ html:not(.firefox):not(.opera) #updates {
|
||||||
.expanded-note {
|
.expanded-note {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
color: #666;
|
color: var(--gray-lightness-40);
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
164
popup.html
164
popup.html
|
|
@ -25,18 +25,31 @@
|
||||||
<template data-id="style">
|
<template data-id="style">
|
||||||
<div class="entry">
|
<div class="entry">
|
||||||
<div class="main-controls">
|
<div class="main-controls">
|
||||||
|
<a class="style-edit-link-accessibility directLinkUI-el" href="edit.html?id=" tabindex="0"></a>
|
||||||
<label class="style-name">
|
<label class="style-name">
|
||||||
<input class="checker" type="checkbox">
|
<input class="checker toggleUI-el" type="checkbox">
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
<svg class="svg-icon checked toggleUI-el"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
|
|
||||||
<a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
|
|
||||||
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
|
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
|
||||||
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
|
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
|
||||||
</a>
|
</a>
|
||||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
|
<a href="#" class="enable directLinkUI-el" i18n-title="enableStyleLabel" tabindex="0">
|
||||||
|
<svg class="svg-icon toggled-off" viewbox="0 0 24 24">
|
||||||
|
<path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M7,15c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3s3,1.34,3,3C10,13.66,8.66,15,7,15z"/>
|
||||||
|
<path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10 c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
|
||||||
|
<path d="M7,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C10,10.34,8.66,9,7,9z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="disable directLinkUI-el" i18n-title="disableStyleLabel" tabindex="0">
|
||||||
|
<svg class="svg-icon toggled-on" viewbox="0 0 24 24">
|
||||||
|
<path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M17,15c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3s3,1.34,3,3C20,13.66,18.66,15,17,15z"/>
|
||||||
|
<path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10 c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
|
||||||
|
<path d="M17,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C20,10.34,18.66,9,17,9z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a class="style-edit-link toggleUI-el" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
|
||||||
<svg class="svg-icon edit" viewBox="0 0 14 16">
|
<svg class="svg-icon edit" viewBox="0 0 14 16">
|
||||||
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
|
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -50,6 +63,14 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template data-id="confirmHotkey">
|
||||||
|
<a id="popup-confirm-icon" class="action-wrapper iconUI-el" i18n-title="confirmOK">
|
||||||
|
<svg class="svg-icon thumbsup" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M13.991 13.991c-.05.69-1.269 1-1.998 1H5.666l-1.668-1V7.995c1.359 0 2.108-.75 3.128-1.879 1.229-1.359 1.139-2.558.879-4.127-.08-.5.5-1 1-1 .829 0 1.998 2.729 1.998 3.998l-.02 1.03c0 .689.33.969 1.02.969H14c.63 0 .98.36 1 .999l-1 5.996-.01.01zm0-7.995h-2.018l.02-.98C11.993 3.719 10.823 0 8.994 0c-.58 0-1.169.3-1.559.77-.36.41-.5.909-.42 1.409.25 1.479.28 2.278-.629 3.278-1 1.089-1.48 1.549-2.388 1.549h-2C.94 6.996 0 7.935 0 8.994v3.998c0 1.06.94 1.999 1.999 1.999h1.719l1.439.86c.16.089.33.139.52.139h6.325c1.13 0 2.839-.5 2.999-1.879l.979-5.946c.02-.08.02-.14.02-.2-.03-1.17-.84-1.969-1.999-1.969h-.01z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template data-id="writeStyle">
|
<template data-id="writeStyle">
|
||||||
<a class="write-style-link"></a>
|
<a class="write-style-link"></a>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -169,10 +190,22 @@
|
||||||
<body id="stylus-popup">
|
<body id="stylus-popup">
|
||||||
|
|
||||||
<div id="confirm">
|
<div id="confirm">
|
||||||
<div>
|
<div class="main-bg">
|
||||||
<b>Style's Name</b>
|
<b>Style's Name</b>
|
||||||
<span i18n-text="deleteStyleConfirm"></span>
|
<span i18n-text="deleteStyleConfirm"></span>
|
||||||
<div>
|
<div class="iconUI-el">
|
||||||
|
<a id="popup-delete-icon" href="#" class="action-wrapper" i18n-title="confirmDelete" data-cmd="ok" tabindex="0">
|
||||||
|
<svg class="svg-icon remove" viewBox="0 0 14 16">
|
||||||
|
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a id="popup-cancel-icon" href="#" class="action-wrapper iconUI-el" i18n-title="confirmCancel" data-cmd="cancel" tabindex="0">
|
||||||
|
<svg class="svg-icon cancel" viewBox="0 0 14 16">
|
||||||
|
<path fill-rule="evenodd" d="M7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 1.3c1.3 0 2.5.44 3.47 1.17l-8 8A5.755 5.755 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zm0 11.41c-1.3 0-2.5-.44-3.47-1.17l8-8c.73.97 1.17 2.17 1.17 3.47 0 3.14-2.56 5.7-5.7 5.7z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="classicUI-el">
|
||||||
<button i18n-text="confirmDelete" data-cmd="ok"></button>
|
<button i18n-text="confirmDelete" data-cmd="ok"></button>
|
||||||
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
|
<button i18n-text="confirmCancel" data-cmd="cancel"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -183,40 +216,95 @@
|
||||||
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
|
<aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="actions">
|
<div id="popup-manage-wrapper" class="action-wrapper">
|
||||||
<div id="disable-all-wrapper">
|
<button id="popup-manage-button" data-href="manage.html" i18n-title="popupManageTooltip">
|
||||||
<div class="main-controls">
|
<span class="classicUI-el" i18n-text="openManage"></span>
|
||||||
<label id="disableAll-label" i18n-text="disableAllStyles">
|
<svg class="iconUI-el svg-icon manager" viewBox="0 0 14 14">
|
||||||
<input id="disableAll" type="checkbox">
|
<path d="M2.33 6.33a.5.5 0 0 1-.5-.5V1.75a.5.5 0 0 1 1 0v4.08a.5.5 0 0 1-.5.5zM7 12.75a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 1 0v5.25a.5.5 0 0 1-.5.5zM11.67 7.5a.5.5 0 0 1-.5-.5V1.75a.5.5 0 0 1 1 0V7a.5.5 0 0 1-.5.5zM4.08 7.67H.58a.5.5 0 0 0 0 1h1.25v3.58a.5.5 0 0 0 1 0V8.67h1.25a.5.5 0 0 0 0-1zM8.75 4.17H7.5V1.75a.5.5 0 0 0-1 0v2.42H5.25a.5.5 0 0 0 0 1h3.5a.5.5 0 0 0 0-1zM13.42 8.83h-3.5a.5.5 0 0 0 0 1h1.25v2.42a.5.5 0 0 0 1 0V9.83h1.25a.5.5 0 0 0 0-1z"/>
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="popup-options-wrapper" class="action-wrapper">
|
||||||
|
<button id="popup-options-button" i18n-title="openOptionsPopup">
|
||||||
|
<span class="classicUI-el" i18n-text="openOptionsPopup"></span>
|
||||||
|
<svg class="iconUI-el svg-icon options" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
|
||||||
|
<div id="find-styles">
|
||||||
|
<a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
|
||||||
|
<a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
|
||||||
|
<svg class="svg-icon search" viewBox="0 0 24 24">
|
||||||
|
<path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7 L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<span id="find-styles-inline-group">
|
||||||
|
<label i18n-title="findStylesInlineTooltip">
|
||||||
|
<input id="popup.findStylesInline" class="checker toggle-inline classicUI-el" type="checkbox">
|
||||||
|
<svg class="svg-icon checked classicUI-el"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
<span class="classicUI-el" i18n-text="findStylesInline"></span>
|
||||||
|
<a id="find-inline-icon" href="#" class="iconUI-el" tabindex="0">
|
||||||
|
<svg viewBox="0 0 20 20" class="svg-icon inline">
|
||||||
|
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M 17,9 H 11 V 3 l 2,2 4,-4 2,2 -4,4 z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a id="find-external-icon" href="#" class="iconUI-el" i18n-title="findStylesExternalTooltip" tabindex="0">
|
||||||
|
<svg class="svg-icon external" viewBox="0 0 20 20">
|
||||||
|
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
<div id="find-external-icon-noclick" class="iconUI-el" i18n-title="findStylesExternalTooltip">
|
||||||
|
<svg class="svg-icon external noclick" viewBox="0 0 20 20">
|
||||||
|
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="popup-wiki-wrapper" class="action-wrapper">
|
||||||
|
<button id="popup-wiki-button" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki">
|
||||||
|
<span class="classicUI-el" i18n-text="linkStylusWiki"></span>
|
||||||
|
<svg class="iconUI-el svg-icon wiki" viewBox="0 0 24 24">
|
||||||
|
<path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="disable-all-wrapper" class="action-wrapper">
|
||||||
<div class="main-controls">
|
<div class="main-controls">
|
||||||
<div id="find-styles">
|
<label id="disableAll-label" class="classicUI-el" i18n-text="disableAllStyles">
|
||||||
<a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"></a>
|
<input id="disableAll" type="checkbox">
|
||||||
<span id="find-styles-inline-group">
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
<label i18n-title="findStylesInlineTooltip">
|
</label>
|
||||||
<input id="popup.findStylesInline" class="checker" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
<span i18n-text="findStylesInline"></span>
|
|
||||||
</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div id="write-style">
|
|
||||||
<span id="write-style-for" i18n-text="writeStyleFor"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<a id="disable-all-icon" class="iconUI-el" href="#" tabindex="0">
|
||||||
|
<div i18n-title="disableAllStyles">
|
||||||
|
<svg class="svg-icon toggle-all-off" viewBox="0 0 24 24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z"/>
|
||||||
|
<path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div i18n-title="reEnableAllStyles">
|
||||||
|
<svg class="svg-icon toggle-all-on" viewBox="0 0 24 24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z"/>
|
||||||
|
<path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Actions -->
|
<div id="write-style-wrapper">
|
||||||
<div id="popup-options">
|
<div id="write-style">
|
||||||
<button id="popup-manage-button" i18n-text="openManage"
|
<span id="write-style-for" i18n-text="writeStyleFor">
|
||||||
data-href="manage.html" i18n-title="popupManageTooltip"></button>
|
<div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
|
||||||
<button id="popup-options-button" i18n-text="openOptionsPopup"></button>
|
<svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
|
||||||
<button id="popup-wiki-button"
|
<path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
|
||||||
i18n-text="linkStylusWiki"
|
<path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
|
||||||
i18n-title="linkGetHelp"
|
</svg>
|
||||||
data-href="https://github.com/openstyles/stylus/wiki"></button>
|
</div>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -240,8 +328,8 @@
|
||||||
<path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"/>
|
<path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
|
|
||||||
<symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
|
<symbol id="svg-icon-config-uso" viewBox="0 0 20 20">
|
||||||
<path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"/>
|
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
|
|
||||||
<symbol id="svg-icon-help" viewBox="0 0 14 16">
|
<symbol id="svg-icon-help" viewBox="0 0 14 16">
|
||||||
|
|
|
||||||
|
|
@ -120,7 +120,7 @@ var hotkeys = (() => {
|
||||||
const container = $('#hotkey-info');
|
const container = $('#hotkey-info');
|
||||||
let title;
|
let title;
|
||||||
container.onclick = ({target}) => {
|
container.onclick = ({target}) => {
|
||||||
if (target.localName === 'button') {
|
if (target.localName === 'button' || target.id === 'popup-confirm-icon') {
|
||||||
close();
|
close();
|
||||||
} else if (!container.dataset.active) {
|
} else if (!container.dataset.active) {
|
||||||
open();
|
open();
|
||||||
|
|
@ -174,10 +174,11 @@ var hotkeys = (() => {
|
||||||
}));
|
}));
|
||||||
[
|
[
|
||||||
linesToElements(t('popupHotkeysInfo')),
|
linesToElements(t('popupHotkeysInfo')),
|
||||||
$create('button', t('confirmOK')),
|
$create('button', {className: 'classicUI-el', id: 'confirm-button'}, t('confirmOK')),
|
||||||
].forEach(child => {
|
].forEach(child => {
|
||||||
container.appendChild($create('div', child));
|
container.appendChild($create('div', child));
|
||||||
});
|
});
|
||||||
|
$('#confirm-button').insertAdjacentElement('afterend', template.confirmHotkey);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
853
popup/popup.css
853
popup/popup.css
File diff suppressed because it is too large
Load Diff
|
|
@ -5,12 +5,21 @@
|
||||||
let installed;
|
let installed;
|
||||||
let tabURL;
|
let tabURL;
|
||||||
const handleEvent = {};
|
const handleEvent = {};
|
||||||
|
const doc = document.documentElement;
|
||||||
|
|
||||||
const ENTRY_ID_PREFIX_RAW = 'style-';
|
const ENTRY_ID_PREFIX_RAW = 'style-';
|
||||||
const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
|
const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
|
||||||
|
|
||||||
toggleSideBorders();
|
toggleSideBorders();
|
||||||
|
|
||||||
|
doc.classList.add(prefs.get('popupui') === 1 ? 'classicUI' : 'iconUI');
|
||||||
|
|
||||||
|
doc.classList.add(prefs.get('popupclick') === 1 ? 'toggleUI' : 'directLinkUI');
|
||||||
|
|
||||||
|
if (!prefs.get('popup.stylesFirst')) {
|
||||||
|
doc.classList.add('actions-top');
|
||||||
|
}
|
||||||
|
|
||||||
getActiveTab().then(tab =>
|
getActiveTab().then(tab =>
|
||||||
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
|
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
|
||||||
? getTabRealURLFirefox(tab)
|
? getTabRealURLFirefox(tab)
|
||||||
|
|
@ -81,8 +90,17 @@ function initPopup() {
|
||||||
|
|
||||||
// action buttons
|
// action buttons
|
||||||
$('#disableAll').onchange = function () {
|
$('#disableAll').onchange = function () {
|
||||||
installed.classList.toggle('disabled', this.checked);
|
document.body.classList.toggle('disabled', this.checked);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$('#find-styles-icon').onclick = () => {
|
||||||
|
$('#find-styles-link').click();
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#disable-all-icon').onclick = () => {
|
||||||
|
$('#disableAll').click();
|
||||||
|
};
|
||||||
|
|
||||||
setupLivePrefs();
|
setupLivePrefs();
|
||||||
|
|
||||||
Object.assign($('#popup-manage-button'), {
|
Object.assign($('#popup-manage-button'), {
|
||||||
|
|
@ -91,6 +109,16 @@ function initPopup() {
|
||||||
oncontextmenu: handleEvent.openManager,
|
oncontextmenu: handleEvent.openManager,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#find-external-icon').onclick = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
$('input.toggle-inline').click()
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#find-inline-icon').onclick = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
$('input.toggle-inline').click()
|
||||||
|
};
|
||||||
|
|
||||||
$('#popup-options-button').onclick = () => {
|
$('#popup-options-button').onclick = () => {
|
||||||
chrome.runtime.openOptionsPage();
|
chrome.runtime.openOptionsPage();
|
||||||
window.close();
|
window.close();
|
||||||
|
|
@ -98,12 +126,6 @@ function initPopup() {
|
||||||
|
|
||||||
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
|
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
|
||||||
|
|
||||||
if (!prefs.get('popup.stylesFirst')) {
|
|
||||||
document.body.insertBefore(
|
|
||||||
$('body > .actions'),
|
|
||||||
installed);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!tabURL) {
|
if (!tabURL) {
|
||||||
document.body.classList.add('blocked');
|
document.body.classList.add('blocked');
|
||||||
document.body.insertBefore(template.unavailableInfo, document.body.firstChild);
|
document.body.insertBefore(template.unavailableInfo, document.body.firstChild);
|
||||||
|
|
@ -241,6 +263,9 @@ function showStyles(styles) {
|
||||||
}
|
}
|
||||||
window.dispatchEvent(new Event('showStyles:done'));
|
window.dispatchEvent(new Event('showStyles:done'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
|
||||||
|
installed.classList.toggle('reverse-stripe', reverseZebra);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -272,6 +297,12 @@ function createStyleElement({
|
||||||
onclick: handleEvent.openLink,
|
onclick: handleEvent.openLink,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const editLinkAccess = $('.style-edit-link-accessibility', entry);
|
||||||
|
Object.assign(editLinkAccess, {
|
||||||
|
href: editLinkAccess.getAttribute('href') + style.id,
|
||||||
|
onclick: handleEvent.openLink,
|
||||||
|
});
|
||||||
|
|
||||||
const styleName = $('.style-name', entry);
|
const styleName = $('.style-name', entry);
|
||||||
Object.assign(styleName, {
|
Object.assign(styleName, {
|
||||||
htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
|
htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
|
||||||
|
|
@ -330,13 +361,16 @@ Object.assign(handleEvent, {
|
||||||
},
|
},
|
||||||
|
|
||||||
name(event) {
|
name(event) {
|
||||||
this.checkbox.dispatchEvent(new MouseEvent('click'));
|
if (prefs.get('popupclick') === 1) {
|
||||||
|
this.checkbox.dispatchEvent(new MouseEvent('click'));
|
||||||
|
} else {
|
||||||
|
const entry = handleEvent.getClickedStyleElement(event);
|
||||||
|
$('.style-edit-link', entry).click();
|
||||||
|
}
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
},
|
},
|
||||||
|
|
||||||
toggle(event) {
|
toggle(event) {
|
||||||
// when fired on checkbox, prevent the parent label from seeing the event, see #501
|
|
||||||
event.stopPropagation();
|
|
||||||
API.saveStyle({
|
API.saveStyle({
|
||||||
id: handleEvent.getClickedStyleId(event),
|
id: handleEvent.getClickedStyleId(event),
|
||||||
enabled: this.matches('.enable') || this.checked,
|
enabled: this.matches('.enable') || this.checked,
|
||||||
|
|
@ -350,9 +384,12 @@ Object.assign(handleEvent, {
|
||||||
box.dataset.display = true;
|
box.dataset.display = true;
|
||||||
box.style.cssText = '';
|
box.style.cssText = '';
|
||||||
$('b', box).textContent = $('.style-name', entry).textContent;
|
$('b', box).textContent = $('.style-name', entry).textContent;
|
||||||
$('[data-cmd="ok"]', box).focus();
|
$('button[data-cmd="ok"]', box).focus();
|
||||||
$('[data-cmd="ok"]', box).onclick = () => confirm(true);
|
$('button[data-cmd="ok"]', box).onclick = () => confirm(true);
|
||||||
$('[data-cmd="cancel"]', box).onclick = () => confirm(false);
|
$('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
|
||||||
|
$('a[data-cmd="ok"]', box).focus();
|
||||||
|
$('a[data-cmd="ok"]', box).onclick = () => confirm(true);
|
||||||
|
$('a[data-cmd="cancel"]', box).onclick = () => confirm(false);
|
||||||
window.onkeydown = event => {
|
window.onkeydown = event => {
|
||||||
const keyCode = event.keyCode || event.which;
|
const keyCode = event.keyCode || event.which;
|
||||||
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
|
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
|
||||||
|
|
@ -438,7 +475,7 @@ Object.assign(handleEvent, {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
getActiveTab()
|
getActiveTab()
|
||||||
.then(activeTab => API.openURL({
|
.then(activeTab => API.openURL({
|
||||||
url: this.href || this.dataset.href,
|
url: this.hasAttribute('data-href') ? this.dataset.href : this.href,
|
||||||
index: activeTab.index + 1,
|
index: activeTab.index + 1,
|
||||||
message: tryJSONparse(this.dataset.sendMessage),
|
message: tryJSONparse(this.dataset.sendMessage),
|
||||||
}))
|
}))
|
||||||
|
|
@ -483,6 +520,9 @@ function handleDelete(id) {
|
||||||
if (!$('.entry')) {
|
if (!$('.entry')) {
|
||||||
installed.appendChild(template.noStyles.cloneNode(true));
|
installed.appendChild(template.noStyles.cloneNode(true));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
|
||||||
|
installed.classList.toggle('reverse-stripe', reverseZebra);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,19 @@
|
||||||
|
:root {
|
||||||
|
--search-result-meta: hsla(0, 0%, 93%, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
body.search-results-shown {
|
body.search-results-shown {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-results:not([data-empty]):before {
|
#search-results:not([data-empty]):before {
|
||||||
background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
|
background-image: linear-gradient(transparent, var(--black-alpha-3) 200px);
|
||||||
content: "";
|
content: "";
|
||||||
top: -50px;
|
top: -50px;
|
||||||
left: -1000px;
|
left: -1000px;
|
||||||
right: -1000px;
|
right: -1000px;
|
||||||
bottom: -12px;
|
bottom: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
animation: fadein 1s;
|
animation: fadein 1s;
|
||||||
|
|
@ -18,15 +22,17 @@ body.search-results-shown {
|
||||||
|
|
||||||
#search-results {
|
#search-results {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: -1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-results-error {
|
#search-results-error {
|
||||||
background-color: rgba(255, 0, 0, 0.4);
|
flex-basis: 100%;
|
||||||
|
background-color: var(--darkred);
|
||||||
|
color: var(--white);
|
||||||
|
text-shadow: 2px 1px 1px var(--black);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 0 var(--outer-padding);
|
margin: 0 var(--outer-padding) var(--outer-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-results-list {
|
#search-results-list {
|
||||||
|
|
@ -39,24 +45,29 @@ body.search-results-shown {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 8px 8px 21px;
|
padding: 8px 8px 21px;
|
||||||
min-height: 160px;
|
min-height: 160px;
|
||||||
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result {
|
.search-result {
|
||||||
box-shadow: 1px 1px 10px rgba(0, 0, 0, .75);
|
box-shadow: 1px 1px 10px var(--black-alpha-75);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid #555;
|
border: 1px solid var(--gray-lightness-33);
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
background-color: #eee;
|
background-color: var(--gray-lightness-93);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result:hover {
|
.search-result:hover {
|
||||||
border-color: #000;
|
border-color: var(--black);
|
||||||
background-color: #fff;
|
background-color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result .lds-spinner {
|
.search-result .lds-spinner {
|
||||||
transform: scale(.5);
|
transform: scale(.5);
|
||||||
filter: invert(1) drop-shadow(1px 1px 3px #000);
|
filter: invert(1) drop-shadow(1px 1px 3px var(--black));
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-empty .lds-spinner {
|
.search-result-empty .lds-spinner {
|
||||||
|
|
@ -79,7 +90,7 @@ body.search-results-shown {
|
||||||
.search-result-title {
|
.search-result-title {
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
display: block;
|
display: block;
|
||||||
color: #555;
|
color: var(--gray-lightness-33);
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -103,14 +114,14 @@ body.search-results-shown {
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: hsla(180, 100%, 27%, .75);
|
background-color: var(--darkcyan-alpha-75);
|
||||||
color: #fff;
|
color: var(--white);
|
||||||
transition: background-color .5s;
|
transition: background-color .5s;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-screenshot:hover ~ .search-result-status {
|
.search-result-screenshot:hover ~ .search-result-status {
|
||||||
background-color: hsla(180, 100%, 27%, 1);
|
background-color: var(--darkcyan);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-actions {
|
.search-result-actions {
|
||||||
|
|
@ -131,13 +142,13 @@ body.search-results-shown {
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-actions button {
|
.search-result-actions button {
|
||||||
box-shadow: 2px 2px 20px #000;
|
box-shadow: 2px 2px 20px var(--black);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-meta {
|
.search-result-meta {
|
||||||
background-color: hsla(0, 0%, 93%, 0.75);
|
background-color: var(--search-result-meta);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -150,7 +161,7 @@ body.search-results-shown {
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result:hover .search-result-meta {
|
.search-result:hover .search-result-meta {
|
||||||
background-color: hsla(0, 0%, 100%, 0.75);
|
background-color: var(--white-alpha-75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-meta dt {
|
.search-result-meta dt {
|
||||||
|
|
@ -179,16 +190,13 @@ body.search-results-shown {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-meta [data-type="rating"][data-class="good"] dd {
|
.search-result-meta [data-type="rating"][data-class="good"] dd,
|
||||||
color: darkgreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-result-meta [data-type="rating"][data-class="okay"] dd {
|
.search-result-meta [data-type="rating"][data-class="okay"] dd {
|
||||||
color: darkgreen;
|
color: var(--darkgreen);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-meta [data-type="rating"][data-class="bad"] dd {
|
.search-result-meta [data-type="rating"][data-class="bad"] dd {
|
||||||
color: darkred;
|
color: var(--darkred);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-meta [data-type="rating"][data-class="none"] dd {
|
.search-result-meta [data-type="rating"][data-class="none"] dd {
|
||||||
|
|
@ -227,8 +235,7 @@ body.search-results-shown {
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-results-nav[data-type="bottom"] {
|
.search-results-nav[data-type="bottom"] {
|
||||||
margin-top: -1em;
|
margin: 1.25rem 0 .5rem;
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-results .search-results-nav button {
|
#search-results .search-results-nav button {
|
||||||
|
|
@ -249,12 +256,7 @@ body.search-results-shown {
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-results .search-results-nav button:not(:disabled):hover {
|
#search-results .search-results-nav button:not(:disabled):hover {
|
||||||
text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
|
text-shadow: 0 1px 4px var(--black-alpha-5);
|
||||||
}
|
|
||||||
|
|
||||||
#find-styles-inline-group label {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* spinner: https://github.com/loadingio/css-spinner */
|
/* spinner: https://github.com/loadingio/css-spinner */
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,9 @@ window.addEventListener('showStyles:done', function _() {
|
||||||
function init() {
|
function init() {
|
||||||
setTimeout(() => document.body.classList.add(BODY_CLASS));
|
setTimeout(() => document.body.classList.add(BODY_CLASS));
|
||||||
|
|
||||||
$('#find-styles-inline-group').classList.add('hidden');
|
if(prefs.get('popupui') === 1) {
|
||||||
|
$('#find-styles-inline-group').classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
dom.container = $('#search-results');
|
dom.container = $('#search-results');
|
||||||
dom.container.dataset.empty = '';
|
dom.container.dataset.empty = '';
|
||||||
|
|
@ -207,6 +209,7 @@ window.addEventListener('showStyles:done', function _() {
|
||||||
dom.error.classList.remove('hidden');
|
dom.error.classList.remove('hidden');
|
||||||
dom.container.classList.toggle('hidden', !processedResults.length);
|
dom.container.classList.toggle('hidden', !processedResults.length);
|
||||||
document.body.classList.toggle('search-results-shown', processedResults.length > 0);
|
document.body.classList.toggle('search-results-shown', processedResults.length > 0);
|
||||||
|
document.body.classList.add('error-shown');
|
||||||
if (dom.error.getBoundingClientRect().bottom < 0) {
|
if (dom.error.getBoundingClientRect().bottom < 0) {
|
||||||
dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
|
dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user