<!DOCTYPE html> <html id="stylus"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title i18n="+optionsHeading">Stylus </title> <link rel="stylesheet" href="global.css"> <link href="global-dark.css?bugfix" rel="stylesheet"> <!-- https://crbug.com/1298600 --> <script src="js/polyfill.js"></script> <script src="js/toolbox.js"></script> <script src="js/msg.js"></script> <script src="js/prefs.js"></script> <script src="js/dom.js"></script> <script src="js/localization.js"></script> <script src="content/style-injector.js"></script> <script src="content/apply.js"></script> <link rel="stylesheet" href="options/onoffswitch.css"> <link rel="stylesheet" href="options/options.css"> <template data-id="shortcutsFF"> <p style="line-height: 1.5" i18n="shortcutsNoteFF"></p> <table style="margin: 0 auto"> <tr> <td i18n="optionsCustomizePopup"></td> <td><input id="hotkey._execute_browser_action" type="search"></td> </tr> <tr> <td i18n="openManage"></td> <td><input id="hotkey.openManage" type="search"></td> </tr> <tr> <td i18n="disableAllStyles"></td> <td><input id="hotkey.styleDisableAll" type="search"></td> </tr> </table> <p style="text-align: center"> <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/commands#Key_combinations" target="_blank" i18n="helpAlt"></a> </p> </template> <script src="options/options-sync.js"></script> <script src="js/dark-themer.js"></script> <!-- must be last in HEAD to avoid FOUC --> </head> <body id="stylus-options"> <div id="options-header"> <div id="options-title" i18n="+optionsHeading"> <div id="options-close-icon"> <svg viewBox="0 0 20 20" class="svg-icon"> <path d="M11.69,10l4.55,4.55-1.69,1.69L10,11.69,5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z"></path> </svg> </div> </div> </div> <div id="options"> <div class="options-wrapper"> <div class="block" id="updates"> <h1 i18n="optionsCustomizeUpdate"></h1> <div class="items"> <label> <span i18n="optionsUpdateInterval"> <a i18n="title:optionsUpdateImportNote" data-cmd="note" class="svg-inline-wrapper" tabindex="0"> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> </a> </span> <input type="number" min="0" id="updateInterval"> </label> </div> </div> <div class="block sync-options"> <h1 i18n="optionsCustomizeSync"></h1> <div class="items"> <label> <span class="sync-status"></span> <div class="select-resizer"> <select class="cloud-name"> <option value="none" i18n="optionsSyncNone"></option> <option value="dropbox">Dropbox</option> <option value="google">Google Drive</option> <option value="onedrive">OneDrive</option> <option value="webdav">WebDAV</option> </select> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> </div> </label> <table class="drive-options" data-drive="webdav"> <tr> <td i18n="optionsSyncUrl"></td> <td><input type="url" data-option="url"></td> </tr> <tr> <td i18n="optionsSyncUsername"></td> <td><input type="text" data-option="username"></td> </tr> <tr> <td i18n="optionsSyncPassword"></td> <td><input type="password" data-option="password"></td> </tr> </table> <div class="actions"> <button class="connect"></button> <button class="sync-now" i18n="optionsSyncSyncNow"></button> <button class="sync-login" i18n="optionsSyncLogin"></button> </div> </div> </div> <div class="block"> <h1 i18n="stylePreferSchemeLabel"></h1> <div class="items no-stretch"> <label class="radio-wrapper" i18n="+preferSchemeDark"> <input type="radio" value="dark" name="schemeSwitcher.enabled"> </label> <label class="radio-wrapper" i18n="+preferSchemeLight"> <input type="radio" value="light" name="schemeSwitcher.enabled"> </label> <label class="radio-wrapper" i18n="+optionsAdvancedAutoSwitchSchemeBySystem"> <input type="radio" value="system" name="schemeSwitcher.enabled"> </label> <label class="radio-wrapper"> <input type="radio" value="time" name="schemeSwitcher.enabled"> <span i18n="optionsAdvancedAutoSwitchSchemeByTime"></span> <input type="time" required id="schemeSwitcher.nightStart"> ~ <input type="time" required id="schemeSwitcher.nightEnd"> </label> <label class="radio-wrapper" i18n="+optionsAdvancedAutoSwitchSchemeNever"> <input type="radio" value="never" name="schemeSwitcher.enabled"> </label> </div> </div> <div class="block"> <h1 i18n="optionsCustomizeIcon"></h1> <div class="items"> <label> <span class="radio-wrapper" i18n="+optionsIconAuto"> <input type="radio" name="iconset" value="-1" data-value-type="number"> </span> </label> <label> <span class="radio-wrapper" i18n="+optionsIconDark"> <input type="radio" name="iconset" value="0" data-value-type="number"> </span> <span> <img src="/images/icon/16.png"> <img src="/images/icon/16w.png"> <img src="/images/icon/16x.png"> </span> </label> <label> <span class="radio-wrapper" i18n="+optionsIconLight"> <input type="radio" name="iconset" value="1" data-value-type="number"> </span> <span> <img src="/images/icon/light/16.png"> <img src="/images/icon/light/16w.png"> <img src="/images/icon/light/16x.png"> </span> </label> </div> </div> <div class="block"> <h1 i18n="optionsCustomizeBadge"></h1> <div class="items"> <label> <span i18n="prefShowBadge"></span> <span class="onoffswitch"> <input type="checkbox" id="show-badge" class="slider"> <span></span> </span> </label> <label> <span i18n="optionsBadgeNormal"></span> <input type="color" id="badgeNormal"> </label> <label> <span i18n="optionsBadgeDisabled"></span> <input type="color" id="badgeDisabled"> </label> </div> </div> <div class="block"> <h1 i18n="optionsCustomizePopup"></h1> <div class="items"> <label> <span i18n="optionsPopupWidth"></span> <input type="number" id="popupWidth" min="200" max="800"> </label> <label> <span i18n="popupOpenEditInWindow, title:popupOpenEditInWindowTooltip"></span> <span class="onoffswitch"> <input type="checkbox" id="openEditInWindow" class="slider"> <span></span> </span> </label> <label> <span i18n="popupOpenEditInPopup"></span> <span class="onoffswitch"> <input type="checkbox" id="openEditInWindow.popup" class="slider"> <span></span> </span> </label> <label> <span i18n="popupStylesFirst"></span> <span class="onoffswitch"> <input type="checkbox" id="popup.stylesFirst" class="slider"> <span></span> </span> </label> <label> <span i18n="popupAutoResort"></span> <span class="onoffswitch"> <input type="checkbox" id="popup.autoResort" class="slider"> <span></span> </span> </label> <label class="chromium-only chrome-no-popup-border"> <span i18n="popupBorders, title:popupBordersTooltip"></span> <span class="onoffswitch"> <input type="checkbox" id="popup.borders" class="slider"> <span></span> </span> </label> </div> </div> <div class="block"> <h1 i18n="openManage"></h1> <div class="items"> <label> <span i18n="manageNewUI"></span> <span class="onoffswitch"> <input type="checkbox" id="manage.newUI" class="slider"> <span></span> </span> </label> <label> <span i18n="manageFavicons"> <a i18n="title:manageFaviconsHelp" data-cmd="note" class="svg-inline-wrapper" tabindex="0"> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> </a> </span> <span class="onoffswitch"> <input type="checkbox" id="manage.newUI.favicons" class="slider"> <span></span> </span> </label> <label> <span i18n="manageFaviconsGray"></span> <span class="onoffswitch"> <input type="checkbox" id="manage.newUI.faviconsGray" class="slider"> <span></span> </span> </label> <label> <span i18n="manageMaxTargets"></span> <input id="manage.newUI.targets" type="number" min="1" max="99"> </label> </div> </div> <div class="block" id="advanced"> <h1 i18n="optionsAdvanced"></h1> <div class="items"> <label class="chromium-only"> <span i18n="optionsAdvancedStyleViaXhr"> <a i18n="title:optionsAdvancedStyleViaXhrNote" data-cmd="note" class="svg-inline-wrapper" tabindex="0"> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> </a> </span> <span class="onoffswitch"> <input type="checkbox" id="styleViaXhr" class="slider"> <span></span> </span> </label> <label> <span> <span i18n="html:optionsAdvancedPatchCsp"></span> <a i18n="title:optionsAdvancedPatchCspNote" data-cmd="note" class="svg-inline-wrapper" tabindex="0"> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> </a> </span> <span class="onoffswitch"> <input type="checkbox" id="patchCsp" class="slider"> <span></span> </span> </label> <label> <span i18n="optionsAdvancedExposeIframes"> <a i18n="title:optionsAdvancedExposeIframesNote" data-cmd="note" class="svg-inline-wrapper" tabindex="0"> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> </a> </span> <span class="onoffswitch"> <input type="checkbox" id="exposeIframes" class="slider"> <span></span> </span> </label> <label class="chromium-only"> <span i18n="optionsAdvancedExposeStyleName"> <a i18n="title:optionsAdvancedExposeStyleNameNote" data-cmd="note" class="svg-inline-wrapper" tabindex="0"> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> </a> </span> <span class="onoffswitch"> <input type="checkbox" id="exposeStyleName" class="slider"> <span></span> </span> </label> <label class="chromium-only"> <span i18n="optionsAdvancedContextDelete"></span> <span class="onoffswitch"> <input type="checkbox" id="editor.contextDelete" class="slider"> <span></span> </span> </label> </div> </div> <div class="block"> <h1 i18n="cm_theme"></h1> <div class="items" i18n="optionsStylusThemes" style="width:0"></div> </div> </div> <div class="block" id="actions"> <button id="reset" i18n="optionsResetButton, title:optionsReset"></button> <button id="shortcuts" i18n="shortcuts, title:shortcutsNote"></button> <button id="manage" i18n="confirmClose"></button> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;"> <symbol id="svg-icon-help" viewBox="0 0 14 16"> <circle cx="7" cy="5" r="1"/> <path d="M8,8c0-0.5-0.5-1-1-1H6C5.5,7,5,7.4,5,8h1v3c0,0.5,0.5,1,1,1h1c0.5,0,1-0.4,1-1H8V8z"/> <path d="M7,1c3.9,0,7,3.1,7,7s-3.1,7-7,7s-7-3.1-7-7S3.1,1,7,1z M7,2.3C3.9,2.3,1.3,4.9,1.3,8s2.6,5.7,5.7,5.7s5.7-2.6,5.7-5.7S10.1,2.3,7,2.3C7,2.3,7,2.3,7,2.3z"/> </symbol> <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792"> <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/> </symbol> </svg> <script src="options/options.js"></script> </body> </html>