793dc20722
* linter and compact layout improvements Closes #748 While investigating the best way to fix linter scrolling, when I double-checked the compact layout, an old bug I meant to fix a long time ago was immediately apparent. Basically, the linter adds/removes errors as you type, causing the editor to bounce up and down, making it practically unusable. This PR fixes scrolling, and also collapses options and the linter in the compact layout, but always shows the collapsed linter so you're aware of the error count without the content jumping. It also collapses options in the non-compact layout if the viewport is too short to accommodate them, factoring in the min-height of the linter. All automatic collapsing factors in whether a linter is active so they can adjust accordingly, and disables the setting of collapsed state prefs, since we're deciding the pref anyway, and this allows for re-expanding on resize based on the previous pref. It's quite possible I failed to account for certain scenarios, so try to break it. Also think it's problematic for the linter to not always be visible if enabled, so I hooked up a 40px fixed header on scroll with just the linter in it for the compact layout. A few other little details are included. I removed redundant line and column numbers spelled out at the end of lint messages to prevent horizontal overflow. I noticed that the expand/collapse prefs do not toggle correctly when clicking directly on the details-marker arrow. Simplest solution was covering them with the `h2` (we may wanna hook up the manager as well). Also, unrelated, but I switched to opacity to hide resizing sectioned editors, because `visibility: hidden;` breaks editor auto-focus. If either of you guys wanna fix any bugs, or improve any code, feel free to just commit to this PR directly. * linter and compact layout improvements * linter and compact layout improvements * No usercss scroll listener and delay header check * Some code tweaks
508 lines
24 KiB
HTML
508 lines
24 KiB
HTML
<html id="stylus">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link href="global.css" rel="stylesheet">
|
|
<link href="edit/edit.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="msgbox/msgbox.css">
|
|
|
|
<style id="firefox-transitions-bug-suppressor">
|
|
/* restrict to FF */
|
|
@supports (-moz-appearance:none) {
|
|
/* increased specificity to override sane selectors in user styles */
|
|
html#stylus.firefox #stylus-edit #header *,
|
|
html#stylus.firefox #stylus-edit #sections * {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet">
|
|
<script src="vendor/codemirror/lib/codemirror.js"></script>
|
|
|
|
<script src="vendor/codemirror/mode/css/css.js"></script>
|
|
|
|
<link href="vendor/codemirror/addon/dialog/dialog.css" rel="stylesheet">
|
|
<script src="vendor/codemirror/addon/dialog/dialog.js"></script>
|
|
|
|
<script src="vendor/codemirror/addon/edit/closebrackets.js"></script>
|
|
|
|
<link href="vendor/codemirror/addon/search/matchesonscrollbar.css" rel="stylesheet">
|
|
<script src="vendor/codemirror/addon/search/matchesonscrollbar.js"></script>
|
|
<script src="vendor/codemirror/addon/scroll/annotatescrollbar.js"></script>
|
|
<script src="vendor/codemirror/addon/search/searchcursor.js"></script>
|
|
|
|
<script src="vendor/codemirror/addon/comment/comment.js"></script>
|
|
<script src="vendor/codemirror/addon/selection/active-line.js"></script>
|
|
<script src="vendor/codemirror/addon/edit/matchbrackets.js"></script>
|
|
|
|
<link href="vendor/codemirror/addon/fold/foldgutter.css" rel="stylesheet" />
|
|
<script src="vendor/codemirror/addon/fold/foldcode.js"></script>
|
|
<script src="vendor/codemirror/addon/fold/foldgutter.js"></script>
|
|
<script src="vendor/codemirror/addon/fold/brace-fold.js"></script>
|
|
<script src="vendor/codemirror/addon/fold/indent-fold.js"></script>
|
|
<script src="vendor/codemirror/addon/fold/comment-fold.js"></script>
|
|
|
|
<link href="vendor/codemirror/addon/lint/lint.css" rel="stylesheet" />
|
|
<script src="vendor/codemirror/addon/lint/lint.js"></script>
|
|
|
|
|
|
<link href="vendor/codemirror/addon/hint/show-hint.css" rel="stylesheet" />
|
|
<script src="vendor/codemirror/addon/hint/show-hint.js"></script>
|
|
<script src="vendor/codemirror/addon/hint/css-hint.js"></script>
|
|
|
|
<script src="vendor/codemirror/keymap/sublime.js"></script>
|
|
<script src="vendor/codemirror/keymap/emacs.js"></script>
|
|
<script src="vendor/codemirror/keymap/vim.js"></script>
|
|
|
|
<link href="vendor-overwrites/colorpicker/colorpicker.css" rel="stylesheet">
|
|
<script src="vendor-overwrites/colorpicker/colorconverter.js"></script>
|
|
<script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
|
|
<script src="vendor-overwrites/colorpicker/colorview.js"></script>
|
|
|
|
<script src="vendor-overwrites/codemirror-addon/match-highlighter.js"></script>
|
|
|
|
<script src="js/polyfill.js"></script>
|
|
<script src="js/promisify.js"></script>
|
|
<script src="js/dom.js"></script>
|
|
<script src="js/messaging.js"></script>
|
|
<script src="js/prefs.js"></script>
|
|
<script src="js/localization.js"></script>
|
|
<script src="js/script-loader.js"></script>
|
|
<script src="js/storage-util.js"></script>
|
|
<script src="js/msg.js"></script>
|
|
<script src="js/worker-util.js"></script>
|
|
|
|
<script src="content/style-injector.js"></script>
|
|
<script src="content/apply.js"></script>
|
|
|
|
<link href="edit/global-search.css" rel="stylesheet">
|
|
<script src="edit/global-search.js"></script>
|
|
|
|
<link href="edit/codemirror-default.css" rel="stylesheet">
|
|
<script src="edit/codemirror-default.js"></script>
|
|
|
|
<script src="edit/util.js"></script>
|
|
<script src="edit/regexp-tester.js"></script>
|
|
<script src="edit/live-preview.js"></script>
|
|
<script src="edit/applies-to-line-widget.js"></script>
|
|
<script src="edit/reroute-hotkeys.js"></script>
|
|
<script src="edit/codemirror-factory.js"></script>
|
|
<script src="edit/colorpicker-helper.js"></script>
|
|
<script src="edit/beautify.js"></script>
|
|
<script src="edit/show-keymap-help.js"></script>
|
|
<script src="edit/refresh-on-view.js"></script>
|
|
<script src="edit/codemirror-themes.js"></script>
|
|
|
|
<script src="edit/source-editor.js"></script>
|
|
<script src="edit/sections-editor-section.js"></script>
|
|
<script src="edit/sections-editor.js"></script>
|
|
|
|
<script src="edit/edit.js"></script>
|
|
|
|
<script src="msgbox/msgbox.js" async></script>
|
|
|
|
<script src="edit/linter.js"></script>
|
|
<script src="edit/linter-defaults.js"></script>
|
|
<script src="edit/linter-engines.js"></script>
|
|
<script src="edit/linter-meta.js"></script>
|
|
<script src="edit/linter-help-dialog.js"></script>
|
|
<script src="edit/linter-report.js"></script>
|
|
<script src="edit/linter-config-dialog.js"></script>
|
|
|
|
<link id="cm-theme" rel="stylesheet">
|
|
|
|
<template data-id="appliesTo">
|
|
<li class="applies-to-item">
|
|
<div class="select-resizer">
|
|
<select name="applies-type" class="applies-type style-contributor">
|
|
<option value="url" i18n-text="appliesUrlOption"></option>
|
|
<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
|
|
<option value="domain" i18n-text="appliesDomainOption"></option>
|
|
<option value="regexp" i18n-text="appliesRegexpOption"></option>
|
|
</select>
|
|
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
|
</div>
|
|
<div class="applies-value-wrapper">
|
|
<input name="applies-value" class="applies-value style-contributor" spellcheck="false">
|
|
<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>
|
|
</template>
|
|
|
|
<template data-id="appliesToEverything">
|
|
<li class="applies-to-everything" i18n-text="appliesToEverything">
|
|
<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>
|
|
</template>
|
|
|
|
<template data-id="section">
|
|
<div class="section">
|
|
<!-- not using DIV to make our CSS work for #sections > div:only-of-type .remove-section -->
|
|
<p class="deleted-section">
|
|
<button class="restore-section" i18n-text="sectionRestore"></button>
|
|
</p>
|
|
<label i18n-text="sectionCode" class="code-label"></label>
|
|
<div class="applies-to">
|
|
<label i18n-text="appliesLabel">
|
|
<a href="#" class="svg-inline-wrapper applies-to-help" tabindex="0">
|
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
</a>
|
|
</label>
|
|
<ul class="applies-to-list"></ul>
|
|
</div>
|
|
<div class="edit-actions">
|
|
<button class="remove-section" i18n-text="sectionRemove"></button>
|
|
<button class="add-section" i18n-long-text="sectionAdd" i18n-short-text="genericAdd"></button>
|
|
<button class="clone-section" i18n-text="genericClone"></button>
|
|
<button class="move-section-up"></button>
|
|
<button class="move-section-down"></button>
|
|
<button class="beautify-section" i18n-text="styleBeautify"></button>
|
|
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template data-id="searchReplaceDialog">
|
|
<div id="search-replace-dialog">
|
|
<div data-type="main">
|
|
<div data-type="content"></div>
|
|
<div data-type="actions">
|
|
<a data-action="case" i18n-title="searchCaseSensitive" href="#" tabindex="0">Aa</a>
|
|
<a data-action="prev" i18n-title="genericPrevious" href="#" data-hotkey-tooltip="findPrev" tabindex="0">
|
|
<svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
|
|
</a>
|
|
<a data-action="next" i18n-title="genericNext" href="#" data-hotkey-tooltip="findNext" tabindex="0">
|
|
<svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
|
|
</a>
|
|
<a data-action="close" i18n-title="confirmClose" href="#" data-hotkey-tooltip="=Esc" tabindex="0">
|
|
<svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div data-type="status">
|
|
<div class="CodeMirror-search-hint" i18n-text="searchRegexp"></div>
|
|
<div data-type="tally" i18n-title="searchNumberOfResults"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template data-id="clearSearch">
|
|
<div data-type="hover" i18n-title="confirmDelete">
|
|
<svg data-action="clear" class="svg-icon"><use xlink:href="#svg-icon-close"></use></svg>
|
|
</div>
|
|
</template>
|
|
|
|
<template data-id="find">
|
|
<div data-type="content">
|
|
<div data-type="input-wrapper">
|
|
<textarea class="CodeMirror-search-field" rows="1" spellcheck="false" required
|
|
i18n-placeholder="search"></textarea>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template data-id="replace">
|
|
<div data-type="content">
|
|
<div data-type="input-wrapper">
|
|
<textarea data-type="replace-from"
|
|
i18n-placeholder="replace"
|
|
class="CodeMirror-search-field" rows="1" required
|
|
spellcheck="false"></textarea>
|
|
</div>
|
|
<div data-type="input-wrapper">
|
|
<textarea data-type="replace-to"
|
|
i18n-placeholder="replaceWith"
|
|
class="CodeMirror-search-field" rows="1" required
|
|
spellcheck="false"></textarea>
|
|
</div>
|
|
<button data-action="replace" i18n-text="replace" disabled></button>
|
|
<button data-action="replaceAll" i18n-text="replaceAll" disabled></button>
|
|
<button data-action="undo" i18n-text="undo" disabled></button>
|
|
<!--
|
|
Using a separate set of buttons because
|
|
1. FF can display tooltips only when specified on the <button>, ignores the nested <title> in <svg>
|
|
2. the icon doesn't fill the entire button area so tooltips aren't shown when the edges are hovered
|
|
-->
|
|
<button class="hidden" data-action="replace" i18n-title="replace" disabled>
|
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
|
<polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
|
|
</svg>
|
|
</button>
|
|
<button class="hidden" data-action="replaceAll" i18n-title="replaceAll" disabled>
|
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
|
<polygon points="15.8,1.8 8.8,8.8 5.2,5.3 3.5,6.9 8.8,12.2 17.5,3.4 "/>
|
|
<polygon points="15.8,7.8 8.8,14.8 5.2,11.3 3.5,12.9 8.8,18.2 17.5,9.4 "/>
|
|
</svg>
|
|
</button>
|
|
<button class="hidden" data-action="undo" i18n-title="undo" disabled>
|
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
|
<path d="M11.3,5.5H8.7V1.4L1.9,6.5l6.8,5.1V7.5h2.6c1.8,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2H7.8v2h3.5c2.9,0,5.2-2.3,5.2-5.2S14.2,5.5,11.3,5.5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template data-id="jumpToLine">
|
|
<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
|
|
</template>
|
|
|
|
<template data-id="regexpTestPartial">
|
|
<a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></a>
|
|
</template>
|
|
|
|
<template data-id="resizeGrip">
|
|
<div class="resize-grip" i18n-title="cm_resizeGripHint"></div>
|
|
</template>
|
|
|
|
<template data-id="keymapHelp">
|
|
<table class="keymap-list">
|
|
<thead>
|
|
<tr>
|
|
<th><input i18n-placeholder="helpKeyMapHotkey" type="search" class="can-close-on-esc"></th>
|
|
<th><input i18n-placeholder="helpKeyMapCommand" type="search" class="can-close-on-esc" spellcheck="false"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</head>
|
|
|
|
<body id="stylus-edit">
|
|
<div id="header">
|
|
<h1 id="heading"> </h1> <!-- nbsp allocates the actual height which prevents page shift -->
|
|
<section id="basic-info">
|
|
<div id="basic-info-name">
|
|
<input id="name" class="style-contributor" spellcheck="false" required>
|
|
<a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
|
|
</div>
|
|
<div id="basic-info-enabled">
|
|
<label id="enabled-label"
|
|
i18n-text="styleEnabledLabel"
|
|
i18n-title="toggleStyle"
|
|
data-hotkey-tooltip="toggleStyle">
|
|
<input type="checkbox" id="enabled" class="style-contributor">
|
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
</label>
|
|
<label id="preview-label" i18n-text="previewLabel" i18n-title="previewTooltip" class="hidden">
|
|
<input type="checkbox" id="editor.livePreview">
|
|
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
|
</label>
|
|
<span id="preview-errors" class="hidden">!</span>
|
|
</div>
|
|
</section>
|
|
<section id="actions">
|
|
<div>
|
|
<button id="save-button" i18n-text="styleSaveLabel" data-hotkey-tooltip="save"></button>
|
|
<button id="beautify" i18n-text="styleBeautify"></button>
|
|
<a href="manage.html" tabindex="-1"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
|
|
</div>
|
|
<div id="mozilla-format-container">
|
|
<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading">
|
|
<a id="to-mozilla-help" class="svg-inline-wrapper" href="#" tabindex="0">
|
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
</a>
|
|
</h2>
|
|
<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 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>
|
|
<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-unless-compact" data-pref="editor.lint.expanded">
|
|
<summary>
|
|
<h2 i18n-text="linterIssues">: <span id="issue-count"></span>
|
|
<a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click" tabindex="0">
|
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
</a>
|
|
</h2>
|
|
</summary>
|
|
<div class="lint-scroll-container">
|
|
<div class="lint-report-container"></div>
|
|
</div>
|
|
</details>
|
|
<div id="footer" class="hidden">
|
|
<a href="https://github.com/openstyles/stylus/wiki/Usercss"
|
|
i18n-text="externalUsercssDocument"
|
|
target="_blank"></a>
|
|
</div>
|
|
</div>
|
|
<section id="sections">
|
|
<!--
|
|
It seems that we don't use these anymore
|
|
https://github.com/openstyles/stylus/blob/5cbe8a8d780a6eb9fce11d5846e92bf244c3a3f3/edit/sections.js#L18
|
|
-->
|
|
<!-- <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span>
|
|
<a id="sections-help" href="#" class="svg-inline-wrapper" tabindex="0">
|
|
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
|
</a>
|
|
</h2> -->
|
|
</section>
|
|
<div id="help-popup">
|
|
<div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
|
|
<div class="contents"></div>
|
|
</div>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
|
|
|
|
<symbol id="svg-icon-external-link" viewBox="0 0 8 8">
|
|
<path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-help" viewBox="0 0 14 16" i18n-alt="helpAlt">
|
|
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-close" viewBox="0 0 12 16">
|
|
<path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-v" viewBox="0 0 16 16">
|
|
<path d="M8,11.5L2.8,6.3l1.5-1.5L8,8.6l3.7-3.7l1.5,1.5L8,11.5z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-settings" viewBox="0 0 16 16">
|
|
<path d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
|
|
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
|
|
</symbol>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|