Responsive layout (#410)
This commit is contained in:
narcolepticinsomniac
tophf
parent
165f7b5684
commit
70b8a1172f
238
edit.html
238
edit.html
|
|
@ -100,15 +100,23 @@
|
||||||
</select>
|
</select>
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<input name="applies-value" class="applies-value style-contributor" spellcheck="false">
|
<div class="applies-value-wrapper">
|
||||||
<button class="remove-applies-to" i18n-text="appliesRemove"></button>
|
<input name="applies-value" class="applies-value style-contributor" spellcheck="false">
|
||||||
<button class="add-applies-to" i18n-text="appliesAdd"></button>
|
<a class="remove-applies-to" href="#" i18n-text="appliesRemove" i18n-title="appliesRemove">
|
||||||
|
<svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
|
||||||
|
</a>
|
||||||
|
<a class="add-applies-to" href="#" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||||
|
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template data-id="appliesToEverything">
|
<template data-id="appliesToEverything">
|
||||||
<li class="applies-to-everything" i18n-text="appliesToEverything">
|
<li class="applies-to-everything" i18n-text="appliesToEverything">
|
||||||
<button class="add-applies-to" i18n-text="appliesSpecify"></button>
|
<a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" href="#">
|
||||||
|
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||||
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -124,10 +132,12 @@
|
||||||
</label>
|
</label>
|
||||||
<ul class="applies-to-list"></ul>
|
<ul class="applies-to-list"></ul>
|
||||||
</div>
|
</div>
|
||||||
<button class="remove-section" i18n-text="sectionRemove"></button>
|
<div class="edit-actions">
|
||||||
<button class="add-section" i18n-text="sectionAdd"></button>
|
<button class="remove-section" i18n-text="sectionRemove"></button>
|
||||||
<button class="beautify-section" i18n-text="styleBeautify"></button>
|
<button class="add-section" i18n-text="sectionAdd"></button>
|
||||||
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
|
<button class="beautify-section" i18n-text="styleBeautify"></button>
|
||||||
|
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -276,109 +286,117 @@
|
||||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||||
</a>
|
</a>
|
||||||
</h2>
|
</h2>
|
||||||
<button id="from-mozilla" i18n-text="importLabel"></button>
|
<div id="mozilla-format-buttons">
|
||||||
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
<button id="from-mozilla" i18n-text="importLabel"></button>
|
||||||
|
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<details id="options" data-pref="editor.options.expanded">
|
<details id="options" data-pref="editor.options.expanded">
|
||||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||||
<div class="option">
|
<div id="options-wrapper">
|
||||||
<label id="lineWrapping-label" i18n-text="cm_lineWrapping">
|
<div class="options-column">
|
||||||
<input id="editor.lineWrapping" type="checkbox">
|
<div class="option">
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
<label id="lineWrapping-label" i18n-text="cm_lineWrapping">
|
||||||
</label>
|
<input id="editor.lineWrapping" type="checkbox">
|
||||||
</div>
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
<div class="option">
|
</label>
|
||||||
<label id="smartIndent-label" i18n-text="cm_smartIndent">
|
|
||||||
<input id="editor.smartIndent" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="option">
|
|
||||||
<label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
|
|
||||||
<input id="editor.indentWithTabs" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="option">
|
|
||||||
<label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
|
|
||||||
<input id="editor.autoCloseBrackets" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="option">
|
|
||||||
<label i18n-text="cm_autocompleteOnTyping">
|
|
||||||
<input id="editor.autocompleteOnTyping" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="option">
|
|
||||||
<label i18n-text="cm_selectByTokens"
|
|
||||||
i18n-title="cm_selectByTokensTooltip">
|
|
||||||
<input id="editor.selectByTokens" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="option">
|
|
||||||
<label i18n-text="cm_colorpicker">
|
|
||||||
<input id="editor.colorpicker" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
<a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
|
|
||||||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="option usercss-only">
|
|
||||||
<label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
|
|
||||||
<input id="editor.appliesToLineWidget" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="option aligned">
|
|
||||||
<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
|
|
||||||
<input id="editor.tabSize" type="number" min="0">
|
|
||||||
</div>
|
|
||||||
<div class="option aligned">
|
|
||||||
<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="editor.keyMap"></select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
<a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
|
|
||||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="option aligned">
|
|
||||||
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="editor.theme"></select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="option aligned">
|
|
||||||
<label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="editor.matchHighlight">
|
|
||||||
<option i18n-text="cm_matchHighlightToken" value="token">
|
|
||||||
<option i18n-text="cm_matchHighlightSelection" value="selection">
|
|
||||||
<option i18n-text="genericDisabledLabel" value="">
|
|
||||||
</select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="option aligned">
|
|
||||||
<label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="editor.linter">
|
|
||||||
<option value="csslint" selected>CSSLint</option>
|
|
||||||
<option value="stylelint">Stylelint</option>
|
|
||||||
<option value="" i18n-text="genericDisabledLabel"></option>
|
|
||||||
</select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
</div>
|
||||||
<a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
|
<div class="option">
|
||||||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
<label id="smartIndent-label" i18n-text="cm_smartIndent">
|
||||||
</a>
|
<input id="editor.smartIndent" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
|
||||||
|
<input id="editor.indentWithTabs" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
|
||||||
|
<input id="editor.autoCloseBrackets" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label i18n-text="cm_autocompleteOnTyping">
|
||||||
|
<input id="editor.autocompleteOnTyping" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label i18n-text="cm_selectByTokens"
|
||||||
|
i18n-title="cm_selectByTokensTooltip">
|
||||||
|
<input id="editor.selectByTokens" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<label i18n-text="cm_colorpicker">
|
||||||
|
<input id="editor.colorpicker" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
<a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
|
||||||
|
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="option usercss-only">
|
||||||
|
<label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
|
||||||
|
<input id="editor.appliesToLineWidget" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="options-column">
|
||||||
|
<div class="option aligned">
|
||||||
|
<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
|
||||||
|
<input id="editor.tabSize" type="number" min="0">
|
||||||
|
</div>
|
||||||
|
<div class="option aligned">
|
||||||
|
<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="editor.keyMap"></select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
<a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
|
||||||
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="option aligned">
|
||||||
|
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="editor.theme"></select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="option aligned">
|
||||||
|
<label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="editor.matchHighlight">
|
||||||
|
<option i18n-text="cm_matchHighlightToken" value="token">
|
||||||
|
<option i18n-text="cm_matchHighlightSelection" value="selection">
|
||||||
|
<option i18n-text="genericDisabledLabel" value="">
|
||||||
|
</select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="option aligned">
|
||||||
|
<label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="editor.linter">
|
||||||
|
<option value="csslint" selected>CSSLint</option>
|
||||||
|
<option value="stylelint">Stylelint</option>
|
||||||
|
<option value="" i18n-text="genericDisabledLabel"></option>
|
||||||
|
</select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
<a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
|
||||||
|
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details id="lint" class="hidden" data-pref="editor.lint.expanded">
|
<details id="lint" class="hidden" data-pref="editor.lint.expanded">
|
||||||
|
|
@ -439,6 +457,14 @@
|
||||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="svg-icon-plus" viewBox="0 0 8 8">
|
||||||
|
<path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="svg-icon-minus" viewBox="0 0 8 8">
|
||||||
|
<path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -34,13 +34,14 @@ function createAppliesToLineWidget(cm) {
|
||||||
$create('li.applies-to-everything', t('appliesToEverything')),
|
$create('li.applies-to-everything', t('appliesToEverything')),
|
||||||
};
|
};
|
||||||
|
|
||||||
$('button', TPL.listItem).insertAdjacentElement('beforebegin',
|
$('.applies-value', TPL.listItem).insertAdjacentElement('afterend',
|
||||||
$create('button.test-regexp', t('styleRegexpTestButton')));
|
$create('button.test-regexp', t('styleRegexpTestButton')));
|
||||||
|
|
||||||
CLICK_ROUTE = {
|
CLICK_ROUTE = {
|
||||||
'.test-regexp': showRegExpTester,
|
'.test-regexp': showRegExpTester,
|
||||||
|
|
||||||
'.remove-applies-to': (item, apply) => {
|
'.remove-applies-to': (item, apply, event) => {
|
||||||
|
event.preventDefault();
|
||||||
const applies = item.closest('.applies-to').__applies;
|
const applies = item.closest('.applies-to').__applies;
|
||||||
const i = applies.indexOf(apply);
|
const i = applies.indexOf(apply);
|
||||||
let repl;
|
let repl;
|
||||||
|
|
@ -72,7 +73,8 @@ function createAppliesToLineWidget(cm) {
|
||||||
applies.splice(i, 1);
|
applies.splice(i, 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
'.add-applies-to': (item, apply) => {
|
'.add-applies-to': (item, apply, event) => {
|
||||||
|
event.preventDefault();
|
||||||
const applies = item.closest('.applies-to').__applies;
|
const applies = item.closest('.applies-to').__applies;
|
||||||
const i = applies.indexOf(apply);
|
const i = applies.indexOf(apply);
|
||||||
const pos = apply.mark.find().to;
|
const pos = apply.mark.find().to;
|
||||||
|
|
@ -109,12 +111,13 @@ function createAppliesToLineWidget(cm) {
|
||||||
changeItem(item, apply, 'value', target.value);
|
changeItem(item, apply, 'value', target.value);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onclick({target}) {
|
onclick(event) {
|
||||||
|
const {target} = event;
|
||||||
for (const selector in CLICK_ROUTE) {
|
for (const selector in CLICK_ROUTE) {
|
||||||
const routed = target.closest(selector);
|
const routed = target.closest(selector);
|
||||||
if (routed) {
|
if (routed) {
|
||||||
const item = routed.closest('.applies-to-item');
|
const item = routed.closest('.applies-to-item');
|
||||||
CLICK_ROUTE[selector].call(routed, item, item.__apply);
|
CLICK_ROUTE[selector].call(routed, item, item.__apply, event);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
286
edit/edit.css
286
edit/edit.css
|
|
@ -28,17 +28,12 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/************ checkbox & select************/
|
/************ checkbox & select************/
|
||||||
#options > div[class="option"] {
|
.options-column > div[class="option"] {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#options > div.option:nth-last-of-type(7) {
|
.options-column > .usercss-only {
|
||||||
margin-bottom: 12px;
|
margin-bottom: .75rem;
|
||||||
}
|
|
||||||
|
|
||||||
#options > div.option:nth-last-of-type(7) + .usercss-only {
|
|
||||||
margin-top: -8px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
@ -53,7 +48,7 @@ label {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 15px;
|
padding: 1rem;
|
||||||
border-right: 1px dashed #AAA;
|
border-right: 1px dashed #AAA;
|
||||||
-webkit-box-shadow: 0 0 3rem -1.2rem black;
|
-webkit-box-shadow: 0 0 3rem -1.2rem black;
|
||||||
box-shadow: 0 0 3rem -1.2rem black;
|
box-shadow: 0 0 3rem -1.2rem black;
|
||||||
|
|
@ -154,7 +149,7 @@ label {
|
||||||
margin: -2px 0 0 .1rem;
|
margin: -2px 0 0 .1rem;
|
||||||
}
|
}
|
||||||
.svg-inline-wrapper.applies-to-help {
|
.svg-inline-wrapper.applies-to-help {
|
||||||
margin: -2px 0 0 .25rem;
|
margin: 0 0 0 .25rem;
|
||||||
}
|
}
|
||||||
.aligned .svg-inline-wrapper {
|
.aligned .svg-inline-wrapper {
|
||||||
margin: -2px 0 0 .3rem;
|
margin: -2px 0 0 .3rem;
|
||||||
|
|
@ -191,8 +186,8 @@ input:invalid {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: -13px;
|
margin-left: -13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top: 8px;
|
margin-top: .5rem;
|
||||||
margin-bottom: 8px;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header summary h2 {
|
#header summary h2 {
|
||||||
|
|
@ -210,8 +205,31 @@ input:invalid {
|
||||||
margin-top: -3px;
|
margin-top: -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#actions {
|
#actions > * {
|
||||||
margin-bottom: .5rem;
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mozilla-format-container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mozilla-format-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actions > div > a {
|
||||||
|
height: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actions button,
|
||||||
|
#actions > div > a {
|
||||||
|
margin: 0 .2rem .5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#actions #cancel-button {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#options:not([open]) + #lint h2 {
|
#options:not([open]) + #lint h2 {
|
||||||
|
|
@ -248,16 +266,23 @@ input:invalid {
|
||||||
/************ content ***********/
|
/************ content ***********/
|
||||||
#sections > div {
|
#sections > div {
|
||||||
margin: 0.7rem;
|
margin: 0.7rem;
|
||||||
padding: 1rem;
|
padding: 1rem 1rem .3rem;
|
||||||
|
}
|
||||||
|
#sections > div:first-of-type {
|
||||||
|
padding: 0 1rem .3rem;
|
||||||
}
|
}
|
||||||
#sections > div:not(:first-of-type) {
|
#sections > div:not(:first-of-type) {
|
||||||
border-top: 2px solid black;
|
border-top: 2px solid hsl(0, 0%, 80%);
|
||||||
}
|
}
|
||||||
#sections > div:only-of-type .remove-section {
|
#sections > div:only-of-type .remove-section {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#sections > div > button:not(:first-of-type) {
|
.edit-actions {
|
||||||
margin-left: 0.2rem;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.edit-actions button {
|
||||||
|
margin: 0 .2rem .5rem 0;
|
||||||
}
|
}
|
||||||
.dirty > label::before {
|
.dirty > label::before {
|
||||||
content: "*";
|
content: "*";
|
||||||
|
|
@ -294,7 +319,7 @@ input:invalid {
|
||||||
margin-bottom: 7px; /* make space for resize-grip */
|
margin-bottom: 7px; /* make space for resize-grip */
|
||||||
}
|
}
|
||||||
.resize-grip-enabled .CodeMirror-hscrollbar {
|
.resize-grip-enabled .CodeMirror-hscrollbar {
|
||||||
bottom: 7px; /* make space for resize-grip */
|
bottom: 7px; /* make space for resize-grip */
|
||||||
}
|
}
|
||||||
.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 */
|
||||||
|
|
@ -358,45 +383,76 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
||||||
/* applies-to */
|
/* applies-to */
|
||||||
.applies-to {
|
.applies-to {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
min-height: 30px;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.applies-to label {
|
.applies-to label {
|
||||||
flex: auto;
|
display: flex;
|
||||||
margin-top: 0.2rem;
|
padding: 0;
|
||||||
|
height: 22px;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 .2em 0 0;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.applies-to ul {
|
.applies-to ul {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
flex-grow: 99;
|
flex-grow: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.applies-to li {
|
.applies-to li {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 0.35rem;
|
|
||||||
}
|
}
|
||||||
.applies-to li > *:not(button):not(.select-resizer) {
|
.applies-to li.applies-to-everything {
|
||||||
flex: auto;
|
align-items: unset;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.applies-to li > input {
|
||||||
min-height: 1.4rem;
|
min-height: 1.4rem;
|
||||||
margin-left: 0.35rem;
|
|
||||||
}
|
}
|
||||||
html:not(.usercss) .applies-to li .add-applies-to {
|
.applies-to li:not(.applies-to-everything) > * {
|
||||||
visibility: hidden;
|
margin: 0 .2rem .5rem 0;
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
html:not(.usercss) .applies-to li:last-child .add-applies-to {
|
|
||||||
visibility: visible
|
|
||||||
}
|
}
|
||||||
.applies-to li .add-applies-to:first-child {
|
.applies-to li .add-applies-to:first-child {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
.applies-to li .applies-value-wrapper {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.applies-to li .applies-value {
|
.applies-to li .applies-value {
|
||||||
flex-grow: 99;
|
flex-grow: 1;
|
||||||
padding-left: 0.2rem;
|
padding-left: 0.2rem;
|
||||||
}
|
}
|
||||||
.applies-to img {
|
.applies-to img {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
.add-applies-to,
|
||||||
|
.remove-applies-to {
|
||||||
|
font-size: 0;
|
||||||
|
height: 22px;
|
||||||
|
width: 22px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.add-applies-to .svg-icon,
|
||||||
|
.remove-applies-to .svg-icon {
|
||||||
|
pointer-events: none;
|
||||||
|
fill: hsl(0, 0%, 60%);
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
.add-applies-to:hover .svg-icon,
|
||||||
|
.remove-applies-to:hover .svg-icon {
|
||||||
|
pointer-events: none;
|
||||||
|
fill: hsl(0, 0%, 0%);
|
||||||
|
}
|
||||||
.test-regexp {
|
.test-regexp {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -563,7 +619,7 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
#lint > div {
|
#lint > div {
|
||||||
margin-top: 4em;
|
margin-top: 2.75rem;
|
||||||
}
|
}
|
||||||
#lint table {
|
#lint table {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
|
@ -657,12 +713,26 @@ html:not(.usercss) .usercss-only,
|
||||||
display: none !important; /* hide during page init */
|
display: none !important; /* hide during page init */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#lint {
|
||||||
|
padding: 1rem 0 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options:not([open]) + #lint {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options-wrapper .options-column:nth-child(2) {
|
||||||
|
margin-top: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.usercss #name {
|
.usercss #name {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sections .single-editor {
|
#sections .single-editor,
|
||||||
|
#sections > div.single-editor:first-of-type {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -695,7 +765,7 @@ html:not(.usercss) .usercss-only,
|
||||||
/************ line widget *************/
|
/************ line widget *************/
|
||||||
.CodeMirror-linewidget .applies-to {
|
.CodeMirror-linewidget .applies-to {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
padding: 1em;
|
padding: .75rem .75rem .25rem;
|
||||||
padding-right: calc(1em + 20px);
|
padding-right: calc(1em + 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -717,19 +787,26 @@ html:not(.usercss) .usercss-only,
|
||||||
|
|
||||||
/************ reponsive layouts ************/
|
/************ reponsive layouts ************/
|
||||||
@media(max-width: 850px) {
|
@media(max-width: 850px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
#header {
|
#header {
|
||||||
width: auto;
|
flex: 0 1 auto;
|
||||||
height: auto;
|
height: unset;
|
||||||
|
width: unset;
|
||||||
position: inherit;
|
position: inherit;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #AAA;
|
border-bottom: 1px dashed #AAA;
|
||||||
min-height: var(--header-narrow-min-height);
|
padding: 0;
|
||||||
max-height: 50vh;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
}
|
||||||
#header section:not(:last-child) {
|
#actions {
|
||||||
margin-bottom: .5rem;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 1rem;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
#header input[type="checkbox"] {
|
#header input[type="checkbox"] {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -739,45 +816,41 @@ html:not(.usercss) .usercss-only,
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#basic-info {
|
#basic-info {
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
flex-wrap: wrap;
|
||||||
flex: 1;
|
|
||||||
margin-right: 2em;
|
|
||||||
}
|
|
||||||
#basic-info > * {
|
|
||||||
flex: auto;
|
|
||||||
}
|
}
|
||||||
#basic-info > *:first-child {
|
#basic-info > *:first-child {
|
||||||
flex-grow: 99;
|
flex-grow: 1;
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
#basic-info > *:not(:last-child) {
|
#basic-info > *:not(:last-child) {
|
||||||
margin-right: 0.8rem;
|
margin-right: 0.8rem;
|
||||||
}
|
}
|
||||||
#basic-info #name {
|
#basic-info #name {
|
||||||
width: auto;
|
flex-grow: 1;
|
||||||
flex-grow: 99;
|
|
||||||
}
|
}
|
||||||
#actions {
|
#options-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 1rem .5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.options-column {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-right: .5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
#options-wrapper .options-column:nth-child(2) {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#actions > * {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#options {
|
|
||||||
-webkit-column-count: 3;
|
|
||||||
-moz-column-count: 3;
|
|
||||||
column-count: 3;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
#options:not([open]),
|
#options:not([open]),
|
||||||
#lint:not([open]) {
|
#lint:not([open]) {
|
||||||
column-count: 1;
|
|
||||||
overflow: initial;
|
overflow: initial;
|
||||||
}
|
}
|
||||||
#options:not([open]) + #lint:not([open]) {
|
#options:not([open]) + #lint:not([open]) {
|
||||||
margin-top: -1em;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
#lint {
|
#lint {
|
||||||
overflow: initial;
|
overflow: initial;
|
||||||
|
|
@ -786,14 +859,18 @@ html:not(.usercss) .usercss-only,
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
#lint tbody {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
#options summary {
|
#options summary {
|
||||||
margin-top: -.25em;
|
margin-left: 0;
|
||||||
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
#options h2 {
|
#options h2 {
|
||||||
margin: 0 0 .5em;
|
margin: 0 0 .5em;
|
||||||
}
|
}
|
||||||
.option label {
|
.option label {
|
||||||
line-height: 1.25rem;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#options [type="number"] {
|
#options [type="number"] {
|
||||||
|
|
@ -804,11 +881,18 @@ html:not(.usercss) .usercss-only,
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0.2rem;
|
top: 0.2rem;
|
||||||
}
|
}
|
||||||
#options:not([open]) ~ #lint {
|
|
||||||
margin-top: -1em;
|
|
||||||
}
|
|
||||||
#lint > div {
|
#lint > div {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#lint {
|
||||||
|
padding: 0 1rem .5rem;
|
||||||
|
}
|
||||||
|
#lint > summary {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
#lint caption {
|
||||||
|
text-indent: 4px;
|
||||||
}
|
}
|
||||||
#lint table {
|
#lint table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -820,13 +904,20 @@ html:not(.usercss) .usercss-only,
|
||||||
margin: .25em 0 -1em .25em;
|
margin: .25em 0 -1em .25em;
|
||||||
}
|
}
|
||||||
#sections {
|
#sections {
|
||||||
|
height: unset !important;
|
||||||
|
min-height: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
#sections > div {
|
#sections > div {
|
||||||
padding: 0;
|
margin: 0 .5rem .5rem;
|
||||||
|
padding: .5rem 0 0;
|
||||||
}
|
}
|
||||||
#sections > *:not(h2) {
|
#sections > div:first-of-type {
|
||||||
padding-left: 0.4rem;
|
margin: .5rem;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.usercss .CodeMirror-scroll {
|
.usercss .CodeMirror-scroll {
|
||||||
max-height: calc(100vh - var(--header-narrow-min-height));
|
max-height: calc(100vh - var(--header-narrow-min-height));
|
||||||
|
|
@ -835,27 +926,28 @@ html:not(.usercss) .usercss-only,
|
||||||
.usercss #lint:not([open]) + #footer {
|
.usercss #lint:not([open]) + #footer {
|
||||||
margin-top: -.25em;
|
margin-top: -.25em;
|
||||||
}
|
}
|
||||||
#help-popup.big {
|
#help-popup.big[style="display: block;"],
|
||||||
left: 3rem;
|
#help-popup[style="display: block;"] {
|
||||||
}
|
width: max-content;
|
||||||
}
|
height: min-content;
|
||||||
|
max-width: 90%;
|
||||||
@media (max-width: 720px) {
|
max-height: 90vh;
|
||||||
#options {
|
top: 0;
|
||||||
-webkit-column-count: 2;
|
bottom: 0;
|
||||||
-moz-column-count: 2;
|
left: 0;
|
||||||
column-count: 2;
|
right: 0;
|
||||||
}
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
#help-popup[style*="left:"] {
|
||||||
@media (max-width: 450px) {
|
left: 1rem !important;
|
||||||
#options {
|
margin-top: -2.35rem;
|
||||||
-webkit-column-count: 1;
|
}
|
||||||
-moz-column-count: 1;
|
#help-popup:not([style*="display: block;"]),
|
||||||
column-count: 1;
|
#help-popup .CodeMirror-lint-markers,
|
||||||
}
|
#help-popup .CodeMirror-guttermarker-subtle {
|
||||||
#actions {
|
display: none !important;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
white-space: normal;
|
#help-popup .CodeMirror-linenumber {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,7 @@ function addSection(event, section) {
|
||||||
div.classList.toggle('has-regexp', show);
|
div.classList.toggle('has-regexp', show);
|
||||||
appliesTo.oninput = appliesTo.oninput || show && (event => {
|
appliesTo.oninput = appliesTo.oninput || show && (event => {
|
||||||
if (event.target.matches('.applies-value') &&
|
if (event.target.matches('.applies-value') &&
|
||||||
$('.applies-type', event.target.parentElement).value === 'regexp') {
|
$('.applies-type', event.target.closest('.applies-to-item')).value === 'regexp') {
|
||||||
regExpTester.update(getRegExps());
|
regExpTester.update(getRegExps());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -150,31 +150,46 @@ function addSection(event, section) {
|
||||||
return div;
|
return div;
|
||||||
}
|
}
|
||||||
|
|
||||||
function addAppliesTo(list, name, value) {
|
// may be invoked as a DOM listener
|
||||||
const showingEverything = $('.applies-to-everything', list) !== null;
|
function addAppliesTo(list, type, value) {
|
||||||
|
let clickedItem;
|
||||||
|
if (this instanceof Node) {
|
||||||
|
clickedItem = this.closest('.applies-to-item');
|
||||||
|
list = this.closest('.applies-to-list');
|
||||||
|
// dummy <a> wrapper was clicked
|
||||||
|
if (arguments[0] instanceof Event) arguments[0].preventDefault();
|
||||||
|
}
|
||||||
|
const showingEverything = $('.applies-to-everything', list);
|
||||||
// blow away 'Everything' if it's there
|
// blow away 'Everything' if it's there
|
||||||
if (showingEverything) {
|
if (showingEverything) {
|
||||||
list.removeChild(list.firstChild);
|
list.removeChild(list.firstChild);
|
||||||
}
|
}
|
||||||
let e;
|
let item, toFocus;
|
||||||
if (name) {
|
|
||||||
e = template.appliesTo.cloneNode(true);
|
// a section is added with known applies-to
|
||||||
$('[name=applies-type]', e).value = name;
|
if (type) {
|
||||||
$('[name=applies-value]', e).value = value;
|
item = template.appliesTo.cloneNode(true);
|
||||||
$('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
|
$('[name=applies-type]', item).value = type;
|
||||||
} else if (showingEverything || list.hasChildNodes()) {
|
$('[name=applies-value]', item).value = value;
|
||||||
e = template.appliesTo.cloneNode(true);
|
$('.remove-applies-to', item).addEventListener('click', removeAppliesTo);
|
||||||
if (list.hasChildNodes()) {
|
|
||||||
$('[name=applies-type]', e).value = $('li:last-child [name="applies-type"]', list).value;
|
// a "+" button was clicked
|
||||||
|
} else if (showingEverything || clickedItem) {
|
||||||
|
item = template.appliesTo.cloneNode(true);
|
||||||
|
toFocus = $('[name=applies-type]', item);
|
||||||
|
if (clickedItem) {
|
||||||
|
$('[name=applies-type]', item).value = $('[name="applies-type"]', clickedItem).value;
|
||||||
}
|
}
|
||||||
$('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
|
$('.remove-applies-to', item).addEventListener('click', removeAppliesTo);
|
||||||
|
|
||||||
|
// a global section is added
|
||||||
} else {
|
} else {
|
||||||
e = template.appliesToEverything.cloneNode(true);
|
item = template.appliesToEverything.cloneNode(true);
|
||||||
}
|
}
|
||||||
$('.add-applies-to', e).addEventListener('click', function () {
|
|
||||||
addAppliesTo(this.parentNode.parentNode);
|
$('.add-applies-to', item).addEventListener('click', addAppliesTo);
|
||||||
}, false);
|
list.insertBefore(item, clickedItem && clickedItem.nextElementSibling);
|
||||||
list.appendChild(e);
|
if (toFocus) toFocus.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupCodeMirror(sectionDiv, code, index) {
|
function setupCodeMirror(sectionDiv, code, index) {
|
||||||
|
|
@ -403,8 +418,9 @@ function getSectionsHashes() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeAppliesTo(event) {
|
function removeAppliesTo(event) {
|
||||||
const appliesTo = event.target.parentNode;
|
event.preventDefault();
|
||||||
const appliesToList = appliesTo.parentNode;
|
const appliesTo = event.target.closest('.applies-to-item');
|
||||||
|
const appliesToList = appliesTo.closest('.applies-to-list');
|
||||||
removeAreaAndSetDirty(appliesTo);
|
removeAreaAndSetDirty(appliesTo);
|
||||||
if (!appliesToList.hasChildNodes()) {
|
if (!appliesToList.hasChildNodes()) {
|
||||||
addAppliesTo(appliesToList);
|
addAppliesTo(appliesToList);
|
||||||
|
|
@ -437,7 +453,7 @@ function removeAreaAndSetDirty(area) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
updateTitle();
|
updateTitle();
|
||||||
area.parentNode.removeChild(area);
|
area.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeSectionVisible(cm) {
|
function makeSectionVisible(cm) {
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,10 @@ button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
max-width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
padding: 2px 7px;
|
padding: 2px 7px;
|
||||||
border: 1px solid hsl(0, 0%, 62%);
|
border: 1px solid hsl(0, 0%, 62%);
|
||||||
font: 400 13.3333px Arial;
|
font: 400 13.3333px Arial;
|
||||||
|
|
|
||||||
|
|
@ -45,40 +45,44 @@
|
||||||
</head>
|
</head>
|
||||||
<body id="stylus-install-usercss">
|
<body id="stylus-install-usercss">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div id="header">
|
||||||
<h1>
|
<div id="header-content-wrapper">
|
||||||
<span class="meta-name"></span>
|
<h1>
|
||||||
<small class="meta-version"></small>
|
<span class="meta-name"></span>
|
||||||
</h1>
|
<small class="meta-version"></small>
|
||||||
<div class="actions">
|
</h1>
|
||||||
<h2 class="installed" i18n-text="installButtonInstalled"></h2>
|
<div class="actions">
|
||||||
<button class="install" i18n-text="installButton"></button>
|
<h2 class="installed" i18n-text="installButtonInstalled"></h2>
|
||||||
<p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
|
<button class="install" i18n-text="installButton"></button>
|
||||||
<label class="set-update-url">
|
<p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
|
||||||
<input type="checkbox">
|
<label class="set-update-url">
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
<input type="checkbox">
|
||||||
<span></span>
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
<p></p>
|
<span></span>
|
||||||
</label>
|
<p></p>
|
||||||
<label class="live-reload">
|
</label>
|
||||||
<input type="checkbox">
|
<label class="live-reload">
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
<input type="checkbox">
|
||||||
<span i18n-text="liveReloadLabel"></span>
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
</label>
|
<span i18n-text="liveReloadLabel"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p class="meta-description"></p>
|
||||||
|
<div>
|
||||||
|
<h3 i18n-text="author"></h3>
|
||||||
|
<span class="meta-author"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 i18n-text="license"></h3>
|
||||||
|
<span class="meta-license"></span>
|
||||||
|
</div>
|
||||||
|
<div class="external-link"></div>
|
||||||
|
<div id="applies-to-wrapper">
|
||||||
|
<h3 i18n-text="appliesLabel"></h3>
|
||||||
|
<ul class="applies-to">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="meta-description"></p>
|
|
||||||
<div>
|
|
||||||
<h3 i18n-text="author"></h3>
|
|
||||||
<span class="meta-author"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 i18n-text="license"></h3>
|
|
||||||
<span class="meta-license"></span>
|
|
||||||
</div>
|
|
||||||
<h3 i18n-text="appliesLabel"></h3>
|
|
||||||
<ul class="applies-to">
|
|
||||||
</ul>
|
|
||||||
<div class="external-link"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="warnings"></div>
|
<div class="warnings"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
body {
|
body {
|
||||||
|
overflow: hidden;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font: 12px arial, sans-serif;
|
font: 12px arial, sans-serif;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -37,20 +38,13 @@ input:disabled + span {
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
align-items: stretch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
#header,
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header,
|
|
||||||
.warnings {
|
.warnings {
|
||||||
flex: 0 0 280px;
|
flex: 0 0 280px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 15px;
|
padding: 1rem;
|
||||||
border-right: 1px dashed #aaa;
|
border-right: 1px dashed #aaa;
|
||||||
box-shadow: 0 0 50px -18px black;
|
box-shadow: 0 0 50px -18px black;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
|
@ -58,7 +52,7 @@ input:disabled + span {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header.meta-init-error {
|
#header.meta-init-error {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,7 +66,7 @@ input:disabled + span {
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-warnings .warnings {
|
.has-warnings .warnings {
|
||||||
display: initial;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
.warning {
|
||||||
|
|
@ -280,19 +274,21 @@ li {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main,
|
||||||
.main .CodeMirror {
|
.main .CodeMirror {
|
||||||
height: auto;
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* spinner-related */
|
/* spinner-related */
|
||||||
|
|
||||||
.header {
|
#header {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header:not(.meta-init) > *:not(.lds-spinner),
|
#header:not(.meta-init) > *:not(.lds-spinner),
|
||||||
.header.meta-init > .lds-spinner {
|
#header.meta-init > .lds-spinner {
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
|
|
@ -301,7 +297,7 @@ li {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header.meta-init > * {
|
#header.meta-init > * {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity .5s;
|
transition: opacity .5s;
|
||||||
-webkit-user-select: auto;
|
-webkit-user-select: auto;
|
||||||
|
|
@ -451,19 +447,82 @@ label {
|
||||||
|
|
||||||
/************ reponsive layouts ************/
|
/************ reponsive layouts ************/
|
||||||
|
|
||||||
@media (max-width:10in) {
|
@media (max-width: 850px) {
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.container {
|
.container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.header {
|
#header {
|
||||||
flex-basis: auto;
|
flex: 0 1 auto;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #AAA;
|
border-bottom: 1px dashed #AAA;
|
||||||
max-height: 50%;
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.has-warnings .header {
|
#header:not(.meta-init) {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
#header-content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: .5rem 0 0 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: min-content;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > * {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 1rem .5rem 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > .meta-description + .flex-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > .meta-description + .flex-wrapper > * {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 1rem .5rem 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.flex-wrapper ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > .meta-description {
|
||||||
|
flex-basis: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.set-update-url p {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.actions label {
|
||||||
|
min-width: 100px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.actions label span {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.has-warnings #header {
|
||||||
min-height: 4em;
|
min-height: 4em;
|
||||||
max-height: 20%;
|
max-height: 20%;
|
||||||
}
|
}
|
||||||
|
|
@ -474,53 +533,32 @@ label {
|
||||||
border-bottom: 1px dashed #b57c7c;
|
border-bottom: 1px dashed #b57c7c;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
}
|
}
|
||||||
.header,
|
ul.applies-to,
|
||||||
.warning {
|
.actions label {
|
||||||
-webkit-column-count: 3;
|
margin: 0;
|
||||||
-moz-column-count: 3;
|
|
||||||
column-count: 3;
|
|
||||||
}
|
}
|
||||||
h1 {
|
#header-content-wrapper > h1 {
|
||||||
-webkit-column-span: all;
|
font-size: 1.75em;
|
||||||
column-span: all;
|
|
||||||
margin-bottom: .5em;
|
|
||||||
}
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > h1 > .meta-version {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > h1 > .meta-name {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
#header-content-wrapper > * h3 {
|
||||||
|
margin: 0 0 .5rem;
|
||||||
}
|
}
|
||||||
.install {
|
.install {
|
||||||
|
flex-shrink: 0;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:7in) {
|
|
||||||
.header,
|
|
||||||
.warning {
|
|
||||||
-webkit-column-count: 2;
|
|
||||||
-moz-column-count: 2;
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:4in) {
|
|
||||||
.header {
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
.header,
|
|
||||||
.warning {
|
|
||||||
-webkit-column-count: 1;
|
|
||||||
-moz-column-count: 1;
|
|
||||||
column-count: 1;
|
|
||||||
}
|
|
||||||
.warning {
|
|
||||||
border: none;
|
|
||||||
padding-bottom: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Retina-specific stuff here */
|
/* Retina-specific stuff here */
|
||||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||||
.install:after {
|
.install:after {
|
||||||
|
|
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!installed) {
|
if (!installed) {
|
||||||
$('.header').appendChild($create('.lds-spinner',
|
$('#header').appendChild($create('.lds-spinner',
|
||||||
new Array(12).fill($create('div')).map(e => e.cloneNode())));
|
new Array(12).fill($create('div')).map(e => e.cloneNode())));
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 200);
|
||||||
|
|
@ -133,8 +133,8 @@
|
||||||
$('.external-link').appendChild(externalLink);
|
$('.external-link').appendChild(externalLink);
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.header').classList.add('meta-init');
|
$('#header').classList.add('meta-init');
|
||||||
$('.header').classList.remove('meta-init-error');
|
$('#header').classList.remove('meta-init-error');
|
||||||
setTimeout(() => $.remove('.lds-spinner'), 1000);
|
setTimeout(() => $.remove('.lds-spinner'), 1000);
|
||||||
|
|
||||||
showError('');
|
showError('');
|
||||||
|
|
@ -222,7 +222,7 @@
|
||||||
API.buildUsercss({sourceCode, checkDup: true})
|
API.buildUsercss({sourceCode, checkDup: true})
|
||||||
.then(init)
|
.then(init)
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
$('.header').classList.add('meta-init-error');
|
$('#header').classList.add('meta-init-error');
|
||||||
showError(err);
|
showError(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
372
manage.html
372
manage.html
|
|
@ -172,196 +172,208 @@
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||||
|
|
||||||
<details id="filters" data-pref="manage.filters.expanded">
|
<div id="manage-settings">
|
||||||
<summary>
|
<div class="settings-column">
|
||||||
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
|
<details id="filters" data-pref="manage.filters.expanded">
|
||||||
<a id="reset-filters" href="#" tabindex="0">
|
<summary>
|
||||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
<h2 i18n-text="manageFilters">:
|
||||||
<title i18n-text="genericResetLabel"></title>
|
<div class="filter-stats-wrapper">
|
||||||
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
|
<span id="filters-stats"></span>
|
||||||
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
|
<a id="reset-filters" href="#" tabindex="0">
|
||||||
</svg>
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||||
</a>
|
<title i18n-text="genericResetLabel"></title>
|
||||||
</summary>
|
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
|
||||||
|
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</h2>
|
||||||
|
</summary>
|
||||||
|
|
||||||
<div class="filter-selection">
|
<div class="filter-selection">
|
||||||
<label>
|
<label>
|
||||||
<div class="checkmate">
|
<div class="checkmate">
|
||||||
<input id="manage.onlyEnabled" type="checkbox"
|
<input id="manage.onlyEnabled" type="checkbox"
|
||||||
data-filter=".enabled"
|
data-filter=".enabled"
|
||||||
data-filter-hide=".disabled">
|
data-filter-hide=".disabled">
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="manage.onlyEnabled.invert">
|
|
||||||
<option i18n-text="manageOnlyEnabled" value="false"></option>
|
|
||||||
<option i18n-text="manageOnlyDisabled" value="true"></option>
|
|
||||||
</select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-selection">
|
|
||||||
<label>
|
|
||||||
<div class="checkmate">
|
|
||||||
<input id="manage.onlyLocal" type="checkbox"
|
|
||||||
data-filter=":not(.updatable):not(.update-done)"
|
|
||||||
data-filter-hide=".updatable, .update-done">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
|
|
||||||
<option i18n-text="manageOnlyLocal" value="false"></option>
|
|
||||||
<option i18n-text="manageOnlyExternal" value="true"></option>
|
|
||||||
</select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="filter-selection">
|
|
||||||
<label>
|
|
||||||
<div class="checkmate">
|
|
||||||
<input id="manage.onlyUsercss" type="checkbox"
|
|
||||||
data-filter=".usercss"
|
|
||||||
data-filter-hide=":not(.usercss)">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
<div class="select-resizer">
|
|
||||||
<select id="manage.onlyUsercss.invert">
|
|
||||||
<option i18n-text="manageOnlyUsercss" value="false"></option>
|
|
||||||
<option i18n-text="manageOnlyNonUsercss" value="true"></option>
|
|
||||||
</select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label id="only-updates" class="hidden">
|
|
||||||
<input type="checkbox"
|
|
||||||
data-filter=".can-update, .update-problem, .update-done"
|
|
||||||
data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
<span i18n-text="manageOnlyUpdates"></span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div id="search-wrapper">
|
|
||||||
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
|
|
||||||
data-filter=":not(.not-matching)"
|
|
||||||
data-filter-hide=".not-matching">
|
|
||||||
<a href="#" id="search-help" tabindex="0">
|
|
||||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<div id="sort-wrapper">
|
|
||||||
<div class="sorter-selection" i18n-title="sortLabel">
|
|
||||||
<select id="manage.newUI.sort"></select>
|
|
||||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
||||||
</div>
|
|
||||||
<a href="#" id="sorter-help" tabindex="0">
|
|
||||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="nowrap">
|
|
||||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
|
||||||
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
|
|
||||||
<svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
|
|
||||||
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
|
||||||
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
|
|
||||||
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div id="add-style-wrapper">
|
|
||||||
<a href="edit.html">
|
|
||||||
<button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1" class="nowrap"></button>
|
|
||||||
</a>
|
|
||||||
<label id="add-style-as-usercss-wrapper">
|
|
||||||
<input type="checkbox" id="newStyleAsUsercss">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
<span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
|
|
||||||
<a id="usercss-wiki"
|
|
||||||
href="https://github.com/openstyles/stylus/wiki/Usercss"
|
|
||||||
i18n-title="externalUsercssDocument"
|
|
||||||
tabindex="0">
|
|
||||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
|
||||||
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<details id="options" data-pref="manage.options.expanded">
|
|
||||||
|
|
||||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input id="manage.newUI" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
<span i18n-text="manageNewUI"></span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div id="newUIoptions">
|
|
||||||
<div>
|
|
||||||
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
|
|
||||||
<input id="manage.newUI.favicons" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
||||||
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
|
|
||||||
<svg class="svg-icon select-arrow">
|
|
||||||
<title i18n-text="optionsSubheading"></title>
|
|
||||||
<use xlink:href="#svg-icon-select-arrow"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</label>
|
|
||||||
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
|
|
||||||
<div>
|
|
||||||
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
|
|
||||||
<input id="manage.newUI.faviconsGray" type="checkbox">
|
|
||||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
</label>
|
</div>
|
||||||
|
</label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="manage.onlyEnabled.invert">
|
||||||
|
<option i18n-text="manageOnlyEnabled" value="false"></option>
|
||||||
|
<option i18n-text="manageOnlyDisabled" value="true"></option>
|
||||||
|
</select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-selection">
|
||||||
|
<label>
|
||||||
|
<div class="checkmate">
|
||||||
|
<input id="manage.onlyLocal" type="checkbox"
|
||||||
|
data-filter=":not(.updatable):not(.update-done)"
|
||||||
|
data-filter-hide=".updatable, .update-done">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
|
||||||
|
<option i18n-text="manageOnlyLocal" value="false"></option>
|
||||||
|
<option i18n-text="manageOnlyExternal" value="true"></option>
|
||||||
|
</select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-selection">
|
||||||
|
<label>
|
||||||
|
<div class="checkmate">
|
||||||
|
<input id="manage.onlyUsercss" type="checkbox"
|
||||||
|
data-filter=".usercss"
|
||||||
|
data-filter-hide=":not(.usercss)">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<div class="select-resizer">
|
||||||
|
<select id="manage.onlyUsercss.invert">
|
||||||
|
<option i18n-text="manageOnlyUsercss" value="false"></option>
|
||||||
|
<option i18n-text="manageOnlyNonUsercss" value="true"></option>
|
||||||
|
</select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label id="only-updates" class="hidden">
|
||||||
|
<input type="checkbox"
|
||||||
|
data-filter=".can-update, .update-problem, .update-done"
|
||||||
|
data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
<span i18n-text="manageOnlyUpdates"></span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div id="search-wrapper">
|
||||||
|
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
|
||||||
|
data-filter=":not(.not-matching)"
|
||||||
|
data-filter-hide=".not-matching">
|
||||||
|
<a href="#" id="search-help" tabindex="0">
|
||||||
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div id="sort-wrapper">
|
||||||
|
<div class="sorter-selection" i18n-title="sortLabel">
|
||||||
|
<select id="manage.newUI.sort"></select>
|
||||||
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||||
|
</div>
|
||||||
|
<a href="#" id="sorter-help" tabindex="0">
|
||||||
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="style-actions">
|
||||||
|
<div id="update-check">
|
||||||
|
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||||
|
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
|
||||||
|
<svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
|
||||||
|
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="update-all">
|
||||||
|
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
||||||
|
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
|
||||||
|
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="add-style-wrapper">
|
||||||
|
<a href="edit.html">
|
||||||
|
<button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
|
||||||
|
</a>
|
||||||
|
<label id="add-style-as-usercss-wrapper">
|
||||||
|
<input type="checkbox" id="newStyleAsUsercss">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
<span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
|
||||||
|
<a id="usercss-wiki"
|
||||||
|
href="https://github.com/openstyles/stylus/wiki/Usercss"
|
||||||
|
i18n-title="externalUsercssDocument"
|
||||||
|
tabindex="0">
|
||||||
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||||
|
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<div class="settings-column">
|
||||||
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
<details id="options" data-pref="manage.options.expanded">
|
||||||
<button id="manage-shortcuts-button" class="chromium-only"
|
|
||||||
i18n-text="shortcuts"
|
|
||||||
i18n-title="shortcutsNote"></button>
|
|
||||||
<a id="find-editor-styles"
|
|
||||||
href="https://userstyles.org/styles/browse/chrome-extension"
|
|
||||||
i18n-title="editorStylesButton"
|
|
||||||
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</details>
|
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||||
|
|
||||||
<details id="backup" data-pref="manage.backup.expanded">
|
<label>
|
||||||
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
|
<input id="manage.newUI" type="checkbox">
|
||||||
<span id="backup-message" i18n-text="backupMessage"></span>
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
<p>
|
<span i18n-text="manageNewUI"></span>
|
||||||
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
|
</label>
|
||||||
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
|
|
||||||
</p>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<p id="manage-text">
|
<div id="newUIoptions">
|
||||||
<span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
|
<div>
|
||||||
<span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
|
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
|
||||||
<span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
|
<input id="manage.newUI.favicons" type="checkbox">
|
||||||
</p>
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
|
||||||
|
<svg class="svg-icon select-arrow">
|
||||||
|
<title i18n-text="optionsSubheading"></title>
|
||||||
|
<use xlink:href="#svg-icon-select-arrow"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
|
||||||
|
<div>
|
||||||
|
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
|
||||||
|
<input id="manage.newUI.faviconsGray" type="checkbox">
|
||||||
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="options-buttons">
|
||||||
|
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
||||||
|
<button id="manage-shortcuts-button" class="chromium-only"
|
||||||
|
i18n-text="shortcuts"
|
||||||
|
i18n-title="shortcutsNote"></button>
|
||||||
|
<a id="find-editor-styles"
|
||||||
|
href="https://userstyles.org/styles/browse/chrome-extension"
|
||||||
|
i18n-title="editorStylesButton"
|
||||||
|
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details id="backup" data-pref="manage.backup.expanded">
|
||||||
|
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
|
||||||
|
<span id="backup-message" i18n-text="backupMessage"></span>
|
||||||
|
<div id="backup-buttons">
|
||||||
|
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
|
||||||
|
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div id="manage-text">
|
||||||
|
<span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
|
||||||
|
<span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
|
||||||
|
<span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -49,22 +49,12 @@ select {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nowrap {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowrap > * {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow-x: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
width: var(--header-width);
|
width: var(--header-width);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
padding: 15px;
|
padding: 1rem;
|
||||||
border-right: 1px dashed #AAA;
|
border-right: 1px dashed #AAA;
|
||||||
-webkit-box-shadow: 0 0 50px -18px black;
|
-webkit-box-shadow: 0 0 50px -18px black;
|
||||||
box-shadow: 0 0 50px -18px black;
|
box-shadow: 0 0 50px -18px black;
|
||||||
|
|
@ -73,8 +63,13 @@ select {
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#update-check,
|
||||||
|
#update-all {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
#check-all-updates {
|
#check-all-updates {
|
||||||
max-width: 220px;
|
max-width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#header h1 {
|
#header h1 {
|
||||||
|
|
@ -90,14 +85,12 @@ select {
|
||||||
#add-style-wrapper {
|
#add-style-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 1.25em;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#add-style-wrapper > * {
|
#add-style-wrapper > * {
|
||||||
/* in case the children are wrapped */
|
/* in case the children are wrapped */
|
||||||
margin-bottom: .25em;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#add-style-as-usercss-wrapper {
|
#add-style-as-usercss-wrapper {
|
||||||
|
|
@ -233,6 +226,11 @@ select {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.newUI .style-name::after,
|
||||||
|
.newUI .style-name-link::after {
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
|
||||||
.disabled h2::after, .entry.usercss .style-name-link::after {
|
.disabled h2::after, .entry.usercss .style-name-link::after {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
|
@ -272,17 +270,25 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* collapsibles */
|
/* collapsibles */
|
||||||
#header details:not(#filters) {
|
#add-style-wrapper {
|
||||||
padding-bottom: .7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#add-style-wrapper,
|
|
||||||
#backup :last-child {
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#options p:last-of-type {
|
#backup-buttons {
|
||||||
margin-top: 0;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options-buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top: .1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options-buttons button,
|
||||||
|
#backup-buttons button {
|
||||||
|
margin: 0 .2rem .5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header details:not([open]),
|
#header details:not([open]),
|
||||||
|
|
@ -291,17 +297,27 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
#header details[open] summary {
|
#header details[open] summary {
|
||||||
padding-bottom: .5em;
|
padding-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header summary {
|
#header summary {
|
||||||
|
margin-top: .25rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: -13px;
|
margin-left: -13px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#header #filters summary {
|
||||||
|
margin: 0 0 -2px -13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header #filters summary h2 {
|
||||||
|
margin-left: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
#header summary h2 {
|
#header summary h2 {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
border-bottom: 1px dotted transparent;
|
border-bottom: 1px dotted transparent;
|
||||||
margin-top: .1em;
|
margin-top: .1em;
|
||||||
margin-bottom: .1em;
|
margin-bottom: .1em;
|
||||||
|
|
@ -362,6 +378,7 @@ select {
|
||||||
#header label {
|
#header label {
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .filter-selection label {
|
#header .filter-selection label {
|
||||||
|
|
@ -369,7 +386,6 @@ select {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
width: 100%;
|
|
||||||
padding: 0 0 0 8px;
|
padding: 0 0 0 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -430,6 +446,7 @@ select {
|
||||||
#manage-text {
|
#manage-text {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
|
padding-top: .35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#manage-text > :not(:last-child):after {
|
#manage-text > :not(:last-child):after {
|
||||||
|
|
@ -456,7 +473,7 @@ select {
|
||||||
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;
|
||||||
|
|
@ -465,6 +482,13 @@ select {
|
||||||
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, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 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 {
|
||||||
|
|
@ -726,9 +750,9 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#faviconsHelp div {
|
#faviconsHelp div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 1ex;
|
margin-top: 1ex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Default, no update buttons */
|
/* Default, no update buttons */
|
||||||
|
|
@ -834,10 +858,6 @@ input[id^="manage.newUI"] {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#filters summary h2 {
|
|
||||||
margin-left: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active #filters-stats {
|
.active #filters-stats {
|
||||||
background-color: darkcyan;
|
background-color: darkcyan;
|
||||||
border-color: darkcyan;
|
border-color: darkcyan;
|
||||||
|
|
@ -846,13 +866,21 @@ input[id^="manage.newUI"] {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#reset-filters {
|
.filter-stats-wrapper {
|
||||||
position: absolute;
|
display: flex;
|
||||||
margin-top: 2px;
|
align-items: center;
|
||||||
display: inline-block;
|
margin-left: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header #filters summary {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header #filters summary ::-webkit-details-marker {
|
||||||
|
margin-top: 4px
|
||||||
}
|
}
|
||||||
|
|
||||||
#reset-filters svg {
|
#reset-filters svg {
|
||||||
|
|
@ -876,21 +904,30 @@ input[id^="manage.newUI"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sort-wrapper {
|
#search-wrapper {
|
||||||
margin-top: .25em;
|
margin-top: .35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sort-wrapper .sorter-selection {
|
#sort-wrapper .sorter-selection {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-grow: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(100% - 15px);
|
max-width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#manage\.newUI\.sort {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
max-width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#search, #manage\.newUI\.sort {
|
#search, #manage\.newUI\.sort {
|
||||||
max-width: 100%;
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin: 0.25rem 0 0;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -910,11 +947,11 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-help, #sorter-help {
|
#search-help, #sorter-help {
|
||||||
margin: 4px -5px 0 2px;
|
margin: 0 -5px 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sort-wrapper .select-arrow {
|
#sort-wrapper .select-arrow {
|
||||||
top: 7px;
|
top: 3px;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -989,11 +1026,11 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box details:not(:last-child) {
|
#message-box details:not(:last-child) {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#message-box details small div {
|
#message-box details small div {
|
||||||
margin-left: 1.5em;
|
margin-left: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.update-history-log {
|
.update-history-log {
|
||||||
|
|
@ -1045,38 +1082,9 @@ input[id^="manage.newUI"] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 675px) {
|
@media (max-width: 850px) {
|
||||||
#installed {
|
|
||||||
position: static;
|
|
||||||
padding-left: 0;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header p,
|
|
||||||
#backup {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#find-editor-styles {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#backup {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#backup p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
body {
|
body {
|
||||||
flex-direction: column;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.all-styles-hidden-by-filters:before {
|
body.all-styles-hidden-by-filters:before {
|
||||||
|
|
@ -1090,16 +1098,58 @@ input[id^="manage.newUI"] {
|
||||||
left: 3.75rem;
|
left: 3.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html:not(.newUI) .applies-to {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
#installed {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newUI .entry .actions {
|
||||||
|
padding-right: 30px
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-wrapper,
|
||||||
|
#sort-wrapper,
|
||||||
|
#header summary {
|
||||||
|
max-width: 247px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message-box > div {
|
||||||
|
left: 0;
|
||||||
|
right: 0!important;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-selection {
|
||||||
|
max-width: 226px;
|
||||||
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
|
display: table-header-group;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
position: static;
|
position: static;
|
||||||
width: auto;
|
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: 1px dashed #AAA;
|
border-bottom: 1px dashed #AAA;
|
||||||
overflow: visible;
|
}
|
||||||
-webkit-column-count: 2;
|
|
||||||
-moz-column-count: 2;
|
#manage-settings {
|
||||||
column-count: 2;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
padding: .5rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#manage-settings > .settings-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 1rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#installed {
|
#installed {
|
||||||
|
|
@ -1114,38 +1164,50 @@ input[id^="manage.newUI"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#backup-buttons {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header summary {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-bottom: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.newUI .entry {
|
.newUI .entry {
|
||||||
margin: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .style-name {
|
.newUI .entry .checkmate {
|
||||||
width: 50%;
|
position: absolute;
|
||||||
|
left: 14px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .target {
|
.newUI .entry .style-name {
|
||||||
max-width: calc(50vw - var(--actions-width));
|
padding: .5rem 0 .5rem 34px;
|
||||||
}
|
text-indent: unset;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
#header {
|
|
||||||
-webkit-column-count: 1;
|
|
||||||
-moz-column-count: 1;
|
|
||||||
column-count: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI #header > *:not(h1),
|
.newUI .entry .actions {
|
||||||
.newUI #newUIoptions,
|
width: 104px;
|
||||||
#newUIoptions > * {
|
padding: .5rem 0 .5rem 6px;
|
||||||
display: inline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#header label {
|
.newUI .entry .applies-to {
|
||||||
white-space: nowrap;
|
padding: .25rem .5rem .25rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newUI .style-name {
|
.newUI .entry .target {
|
||||||
word-break: break-all;
|
max-width: 100%;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newUI .style-name::after,
|
||||||
|
.newUI .style-name-link::after {
|
||||||
|
text-indent: 0;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.firefox body {
|
.firefox body {
|
||||||
background-color: #fff;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
|
||||||
|
|
@ -208,6 +208,24 @@ html[style] .entry {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.entry .style-name::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .1s;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry .style-name:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.entry .main-controls {
|
.entry .main-controls {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user