Responsive layout
Give me a minute.
This commit is contained in:
narcolepticinsomniac
GitHub
parent
d37b113d0d
commit
f13b7b72ca
234
edit.html
234
edit.html
|
|
@ -101,14 +101,20 @@
|
|||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<input name="applies-value" class="applies-value style-contributor" spellcheck="false">
|
||||
<button class="remove-applies-to" i18n-text="appliesRemove"></button>
|
||||
<button class="add-applies-to" i18n-text="appliesAdd"></button>
|
||||
<div class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove">
|
||||
<svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
|
||||
</div>
|
||||
<div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template data-id="appliesToEverything">
|
||||
<li class="applies-to-everything" i18n-text="appliesToEverything">
|
||||
<button class="add-applies-to" i18n-text="appliesSpecify"></button>
|
||||
<div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||
<svg id="svg-icon-add" class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -124,10 +130,12 @@
|
|||
</label>
|
||||
<ul class="applies-to-list"></ul>
|
||||
</div>
|
||||
<button class="remove-section" i18n-text="sectionRemove"></button>
|
||||
<button class="add-section" i18n-text="sectionAdd"></button>
|
||||
<button class="beautify-section" i18n-text="styleBeautify"></button>
|
||||
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
|
||||
<div class="edit-actions">
|
||||
<button class="remove-section" i18n-text="sectionRemove"></button>
|
||||
<button class="add-section" i18n-text="sectionAdd"></button>
|
||||
<button class="beautify-section" i18n-text="styleBeautify"></button>
|
||||
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -276,109 +284,117 @@
|
|||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</h2>
|
||||
<button id="from-mozilla" i18n-text="importLabel"></button>
|
||||
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
||||
<div id="mozilla-format-buttons">
|
||||
<button id="from-mozilla" i18n-text="importLabel"></button>
|
||||
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<details id="options" data-pref="editor.options.expanded">
|
||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||
<div class="option">
|
||||
<label id="lineWrapping-label" i18n-text="cm_lineWrapping">
|
||||
<input id="editor.lineWrapping" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<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 id="options-wrapper">
|
||||
<div class="options-column">
|
||||
<div class="option">
|
||||
<label id="lineWrapping-label" i18n-text="cm_lineWrapping">
|
||||
<input id="editor.lineWrapping" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
</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 class="option">
|
||||
<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>
|
||||
<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>
|
||||
</details>
|
||||
<details id="lint" class="hidden" data-pref="editor.lint.expanded">
|
||||
|
|
@ -438,6 +454,14 @@
|
|||
<symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
|
||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="svg-icon-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>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ button {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 2px 7px;
|
||||
border: 1px solid hsl(0, 0%, 62%);
|
||||
font: 400 13.3333px Arial;
|
||||
|
|
|
|||
|
|
@ -45,40 +45,44 @@
|
|||
</head>
|
||||
<body id="stylus-install-usercss">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>
|
||||
<span class="meta-name"></span>
|
||||
<small class="meta-version"></small>
|
||||
</h1>
|
||||
<div class="actions">
|
||||
<h2 class="installed" i18n-text="installButtonInstalled"></h2>
|
||||
<button class="install" i18n-text="installButton"></button>
|
||||
<p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
|
||||
<label class="set-update-url">
|
||||
<input type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span></span>
|
||||
<p></p>
|
||||
</label>
|
||||
<label class="live-reload">
|
||||
<input type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span i18n-text="liveReloadLabel"></span>
|
||||
</label>
|
||||
<div id="header">
|
||||
<div id="header-content-wrapper">
|
||||
<h1>
|
||||
<span class="meta-name"></span>
|
||||
<small class="meta-version"></small>
|
||||
</h1>
|
||||
<div class="actions">
|
||||
<h2 class="installed" i18n-text="installButtonInstalled"></h2>
|
||||
<button class="install" i18n-text="installButton"></button>
|
||||
<p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
|
||||
<label class="set-update-url">
|
||||
<input type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span></span>
|
||||
<p></p>
|
||||
</label>
|
||||
<label class="live-reload">
|
||||
<input type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<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>
|
||||
<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 class="main">
|
||||
<div class="warnings"></div>
|
||||
|
|
|
|||
375
manage.html
375
manage.html
|
|
@ -171,197 +171,204 @@
|
|||
|
||||
<div id="header">
|
||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||
|
||||
<details id="filters" data-pref="manage.filters.expanded">
|
||||
<summary>
|
||||
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
|
||||
<a id="reset-filters" href="#" tabindex="0">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<title i18n-text="genericResetLabel"></title>
|
||||
<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>
|
||||
</summary>
|
||||
|
||||
<div class="filter-selection">
|
||||
<label>
|
||||
<div class="checkmate">
|
||||
<input id="manage.onlyEnabled" type="checkbox"
|
||||
data-filter=".enabled"
|
||||
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"/>
|
||||
|
||||
<div id="manage-settings">
|
||||
<div class="settings-column">
|
||||
<details id="filters" data-pref="manage.filters.expanded">
|
||||
<summary>
|
||||
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
|
||||
<a id="reset-filters" href="#" tabindex="0">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<title i18n-text="genericResetLabel"></title>
|
||||
<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>
|
||||
</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">
|
||||
</summary>
|
||||
|
||||
<div class="filter-selection">
|
||||
<label>
|
||||
<div class="checkmate">
|
||||
<input id="manage.onlyEnabled" type="checkbox"
|
||||
data-filter=".enabled"
|
||||
data-filter-hide=".disabled">
|
||||
<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 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>
|
||||
<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>
|
||||
|
||||
</details>
|
||||
|
||||
<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>
|
||||
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<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>
|
||||
</p>
|
||||
|
||||
</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>
|
||||
<p>
|
||||
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
|
||||
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<p 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>
|
||||
</p>
|
||||
|
||||
<div class="settings-column">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user