358 lines
14 KiB
HTML
358 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html id="stylus">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title i18n-text-append="optionsHeading">Stylus </title>
|
|
<link rel="stylesheet" href="global.css">
|
|
<link href="global-dark.css" rel="stylesheet">
|
|
|
|
<script src="js/polyfill.js"></script>
|
|
<script src="js/toolbox.js"></script>
|
|
<script src="js/msg.js"></script>
|
|
<script src="js/localization.js"></script>
|
|
<script src="js/prefs.js"></script>
|
|
<script src="js/dom.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">
|
|
<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-text-append="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">
|
|
<h1 i18n-text="cm_theme"></h1>
|
|
<div class="items">
|
|
<div class="label">
|
|
<a i18n-text="optionsStylusThemes" target="_blank"
|
|
href="https://33kk.github.io/uso-archive/?category=chrome-extension&search=Stylus"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1 i18n-text="stylePreferSchemeLabel"></h1>
|
|
<div class="items no-stretch">
|
|
<label class="radio-wrapper" i18n-text-append="preferSchemeDark">
|
|
<input type="radio" value="dark" name="schemeSwitcher.enabled">
|
|
</label>
|
|
<label class="radio-wrapper" i18n-text-append="preferSchemeLight">
|
|
<input type="radio" value="light" name="schemeSwitcher.enabled">
|
|
</label>
|
|
<label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeBySystem">
|
|
<input type="radio" value="system" name="schemeSwitcher.enabled">
|
|
</label>
|
|
<label class="radio-wrapper">
|
|
<input type="radio" value="time" name="schemeSwitcher.enabled">
|
|
<span i18n-text="optionsAdvancedAutoSwitchSchemeByTime"></span>
|
|
<input type="time" required id="schemeSwitcher.nightStart">
|
|
~
|
|
<input type="time" required id="schemeSwitcher.nightEnd">
|
|
</label>
|
|
<label class="radio-wrapper" i18n-text-append="optionsAdvancedAutoSwitchSchemeNever">
|
|
<input type="radio" value="never" name="schemeSwitcher.enabled">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1 i18n-text="optionsCustomizeIcon"></h1>
|
|
<div class="items">
|
|
<label>
|
|
<span class="radio-wrapper" i18n-text-append="optionsIconAuto">
|
|
<input type="radio" name="iconset" value="-1" data-value-type="number">
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span class="radio-wrapper" i18n-text-append="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-text-append="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-text="optionsCustomizeBadge"></h1>
|
|
<div class="items">
|
|
<label>
|
|
<span i18n-text="prefShowBadge"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="show-badge" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span i18n-text="optionsBadgeNormal"></span>
|
|
<input type="color" id="badgeNormal">
|
|
</label>
|
|
<label>
|
|
<span i18n-text="optionsBadgeDisabled"></span>
|
|
<input type="color" id="badgeDisabled">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block">
|
|
<h1 i18n-text="optionsCustomizePopup"></h1>
|
|
<div class="items">
|
|
<label>
|
|
<span i18n-text="optionsPopupWidth"></span>
|
|
<input type="number" id="popupWidth" min="200" max="800">
|
|
</label>
|
|
<label>
|
|
<span i18n-text="popupOpenEditInWindow"
|
|
i18n-title="popupOpenEditInWindowTooltip"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="openEditInWindow" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span i18n-text="popupOpenEditInPopup"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="openEditInWindow.popup" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span i18n-text="popupStylesFirst"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="popup.stylesFirst" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span i18n-text="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-text="popupBorders" i18n-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-text="openManage"></h1>
|
|
<div class="items">
|
|
<label>
|
|
<span i18n-text="manageNewUI"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="manage.newUI" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span i18n-text="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-text="manageFaviconsGray"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
<label>
|
|
<span i18n-text="manageMaxTargets"></span>
|
|
<input id="manage.newUI.targets" type="number" min="1" max="99">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block" id="updates">
|
|
<h1 i18n-text="optionsCustomizeUpdate"></h1>
|
|
<div class="items">
|
|
<label>
|
|
<span i18n-text="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-text="optionsCustomizeSync"></h1>
|
|
<div class="items">
|
|
<div class="label">
|
|
<span class="sync-status"></span>
|
|
<div class="select-resizer">
|
|
<select class="cloud-name">
|
|
<option value="none" i18n-text="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>
|
|
</div>
|
|
<fieldset class="drive-options">
|
|
<div class="webdav-options" data-drive="webdav">
|
|
<label class="url">
|
|
<span i18n-text="optionsSyncUrl"></span>
|
|
<input type="text" data-option="url">
|
|
</label>
|
|
<label class="username">
|
|
<span i18n-text="optionsSyncUsername"></span>
|
|
<input type="text" data-option="username">
|
|
</label>
|
|
<label class="password">
|
|
<span i18n-text="optionsSyncPassword"></span>
|
|
<input type="password" data-option="password">
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<div class="actions">
|
|
<button type="button" class="connect" i18n-text="optionsSyncConnect"></button>
|
|
<button type="button" class="disconnect" i18n-text="optionsSyncDisconnect"></button>
|
|
<button type="button" class="sync-now" i18n-text="optionsSyncSyncNow"></button>
|
|
<button type="button" class="sync-login" i18n-text="optionsSyncLogin"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block" id="advanced">
|
|
<h1 i18n-text="optionsAdvanced"></h1>
|
|
<div class="items">
|
|
<label class="chromium-only">
|
|
<span i18n-text="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-text="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-text="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-text="optionsAdvancedContextDelete"></span>
|
|
<span class="onoffswitch">
|
|
<input type="checkbox" id="editor.contextDelete" class="slider">
|
|
<span></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="block" id="actions">
|
|
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
|
|
<button data-cmd="open-manage" i18n-text="styleCancelEditLabel"></button>
|
|
<div data-cmd="check-updates">
|
|
<button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
|
|
<span id="update-progress"></span>
|
|
</button>
|
|
<div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
|
|
</div>
|
|
<button data-cmd="open-keyboard" class="chromium-only" i18n-text="shortcuts" i18n-title="shortcutsNote"></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>
|