<!DOCTYPE html>
<html id="stylus" class="dvh100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title i18n="+optionsHeading">Stylus </title>
<%= htmlWebpackPlugin.tags.headTags %>
<% if (!__.B_CHROME) { %>
<template data-id="shortcutsFF">
<%= require('./options/shortcuts-ff.html').default %>
</template>
<% } %>
<template data-id="sites">
<input type="checkbox" id="$.sitesOnly" class="slider">
<p i18n="optionsAdvancedSites">
<a data-cmd="note" class=icon tabindex="0">
<i class=i-info></i>
</a>
<textarea id="$.sites"></textarea>
</p>
</template>
<template data-id="body">
<header>
<img src="icon/128.png" width="32" height="32">
<h1 i18n="optionsHeading"></h1>
<i class=i-close tabindex="0"></i>
</header>
<main>
<div class="block" id="updates">
<h2 i18n="optionsCustomizeUpdate"></h2>
<div class="items swap">
<label>
<p i18n="optionsUpdateInterval" data-clickable="0"></p>
<input type="number" min="0" id="updateInterval">
</label>
<label>
<p i18n="manageOnlyEnabled"></p>
<input type="checkbox" id="updateOnlyEnabled" class="slider">
</label>
</div>
</div>
<div class="block sync-options">
<h2 i18n="optionsCustomizeSync"></h2>
<div class="flex wrap center-items no-stretch" style="gap:1em">
<div class="select-wrapper">
<select class="cloud-name">
<option value="none" i18n="optionsSyncNone"></option>
</select>
</div>
<div class="actions">
<button class="connect"></button>
<button class="sync-now" i18n="optionsSyncSyncNow"></button>
<button class="sync-login" i18n="optionsSyncLogin"></button>
</div>
<div class="sync-status"></div>
<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>
</div>
<div class="block">
<h2 i18n="stylePreferSchemeLabel"></h2>
<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">
<h2 i18n="optionsCustomizeIcon"></h2>
<div class="items no-stretch">
<label>
<span class="radio-wrapper" i18n="+optionsIconAuto">
<input type="radio" name="iconset" value="-1" data-value-type="number">
</span>
<span></span>
</label>
<label>
<span class="radio-wrapper" i18n="+optionsIconDark">
<input type="radio" name="iconset" value="0" data-value-type="number">
</span>
<span>
<img src="icon/16.png">
<img src="icon/16w.png">
<img src="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="icon/light/16.png">
<img src="icon/light/16w.png">
<img src="icon/light/16x.png">
</span>
</label>
</div>
</div>
<div class="block">
<h2 i18n="optionsCustomizeBadge"></h2>
<div class="items swap">
<label>
<p i18n="prefShowBadge"></p>
<input type="checkbox" id="show-badge" class="slider">
</label>
<label>
<p i18n="optionsBadgeNormal"></p>
<input type="color" id="badgeNormal">
</label>
<label>
<p i18n="optionsBadgeDisabled"></p>
<input type="color" id="badgeDisabled">
</label>
</div>
</div>
<div class="block">
<h2 i18n="general"></h2>
<div class="items swap">
<label>
<p i18n="optionTargetIcons">
<a id="favs-note" data-cmd="note" class=icon tabindex="0"><i class=i-info></i></a>
</p>
<input type="checkbox" id="manage.newUI.favicons" class="slider">
</label>
<label show-if="manage.newUI.favicons">
<p i18n="manageFaviconsGray"></p>
<input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
</label>
<label>
<p i18n="optionCompactWidth"></p>
<input type="number" id="compactWidth" min="100" max="9999">
</label>
<label class="chromium-only">
<p i18n="optionsAdvancedContextDelete"></p>
<input type="checkbox" id="editor.contextDelete" class="slider">
</label>
<label>
<p i18n="optionsUrlInstaller">
<a id="installer-note" data-cmd="note" class=icon tabindex="0"><i class=i-info></i></a>
</p>
<input type="checkbox" id="urlInstaller" class="slider">
</label>
</div>
</div>
<div class="block">
<h2 i18n="styleManager"></h2>
<div class="items swap">
<label>
<p i18n="manageNewUI"></p>
<input type="checkbox" id="manage.newUI" class="slider">
</label>
<label>
<p i18n="optionTargetNum"></p>
<input id="manage.newUI.targets" type="number" min="0" max="99">
</label>
<label class="no-stretch">
<p i18n="manageMinColumnWidth" data-clickable="9999"></p>
<input id="manage.minColumnWidth" type="number" min="300" max="9999">
</label>
</div>
</div>
<div class="block">
<h2 i18n="optionsCustomizePopup"></h2>
<div class="items swap">
<label class="has-sidebar-only">
<p i18n="optionSidePanelPopup"></p>
<input type="checkbox" id="popup.sidePanel" class="slider">
</label>
<label class="desktop-only" show-if="!popup.sidePanel">
<p i18n="optionsPopupWidth,+genericMinimum"> — </p>
<input type="number" id="popupWidth" min="200" max="800">
</label>
<label class="desktop-only" show-if="!popup.sidePanel">
<p i18n="optionsPopupWidth,+genericMaximum"> — </p>
<input type="number" id="popupWidthMax" min="200" max="800">
</label>
<label>
<p i18n="popupStylesFirst"></p>
<input type="checkbox" id="popup.stylesFirst" class="slider">
</label>
<label>
<p i18n="popupAutoResort"></p>
<input type="checkbox" id="popup.autoResort" class="slider">
</label>
<label show-if="!popup.sidePanel.editor:radio">
<p i18n="popupOpenEditInWindow">
<a i18n="title:popupOpenEditInWindowTooltip"
data-cmd="note" class="icon" tabindex="0">
<i class="i-info"></i>
</a>
</p>
<input type="checkbox" id="openEditInWindow" class="slider">
</label>
<label show-if="openEditInWindow">
<p i18n="openAsPopupWindow"></p>
<input type="checkbox" id="openEditInWindow.popup" class="slider">
</label>
</div>
</div>
<div class="block has-sidebar-only">
<h2 i18n="optionSidePanelActions">
<a class="icon" data-cmd="note" tabindex="0"
i18n="title:optionSidePanelActionsHint?optionSidePanelPopup">
<i class="i-info"></i>
</a>
</h2>
<div class="items swap">
<label show-if="!openEditInWindow:radio">
<p i18n="styleEditor"></p>
<input type="checkbox" id="popup.sidePanel.editor" class="slider">
</label>
<label>
<p i18n="styleManager"></p>
<input type="checkbox" id="popup.sidePanel.manager" class="slider">
</label>
<label>
<p i18n="openOptions"></p>
<input type="checkbox" id="popup.sidePanel.options" class="slider">
</label>
<label show-if="!popup.sidePanel">
<p i18n="search"></p>
<input type="checkbox" id="popup.sidePanel.finder" class="slider">
</label>
<label show-if="!popup.sidePanel">
<p i18n="optionConfigSidePanel">
<a class=icon data-cmd="note" i18n="title:optionSidePanelNumberHint" tabindex="0">
<i class=i-info></i>
</a>
</p>
<input type="number" id="popup.sidePanel.config" min="-1" max="99">
</label>
</div>
</div>
<div class="block" id="advanced">
<h2 i18n="optionsAdvanced"></h2>
<div class="items swap">
<label class="mv3-only">
<p i18n="optionKeepAlive" data-clickable="-1">
<a i18n="title:optionKeepAliveNote" data-cmd="note" class=icon tabindex="0">
<i class=i-info></i>
</a>
</p>
<input id="keepAlive" type="number" min="-1" max="999">
</label>
<label class="mv3-only" show-if="keepAlive!=-1">
<p i18n="optionKeepAliveIdle" data-clickable="-1"></p>
<input type="checkbox" id="keepAliveIdle" class="slider">
</label>
<label>
<p i18n="optionsAdvancedStyleViaXhr">
<a i18n="title:optionsAdvancedStyleViaXhrNote"
data-cmd="note" class=icon tabindex="0">
<i class=i-info></i>
</a>
</p>
<input type="checkbox" id="styleViaXhr" class="slider">
</label>
<label class="sites" show-if="styleViaXhr"></label>
<label class="webRequestBlocking">
<p i18n="optionsAdvancedPatchCsp">
<a i18n="title:optionsAdvancedPatchCspNote"
data-cmd="note" class=icon tabindex="0">
<i class=i-info></i>
</a>
</p>
<input type="checkbox" id="patchCsp" class="slider">
</label>
<label class="sites" show-if="patchCsp"></label>
<label>
<p i18n="optionsAdvancedStyleViaASS"></p>
<input type="checkbox" id="styleViaASS" class="slider">
</label>
<label class="sites" show-if="styleViaASS"></label>
<label>
<p i18n="optionsAdvancedExposeIframes">
<a i18n="title:optionsAdvancedExposeIframesNote"
data-cmd="note" class=icon tabindex="0">
<i class=i-info></i>
</a>
</p>
<input type="checkbox" id="exposeIframes" class="slider">
</label>
<label class="sites" show-if="exposeIframes"></label>
<label>
<p i18n="optionsAdvancedExposeStyleName">
<a i18n="title:optionsAdvancedExposeStyleNameNote"
data-cmd="note" class=icon tabindex="0">
<i class=i-info></i>
</a>
</p>
<input type="checkbox" id="exposeStyleName" class="slider">
</label>
</div>
</div>
<div class="block">
<h2 i18n="cm_theme"></h2>
<div class="items no-stretch" i18n="optionsStylusThemes"></div>
</div>
<div class="block" id="FOUC">
<h2 i18n="optionFOUC"></h2>
<div class="items no-stretch"></div>
</div>
</main>
<footer>
<button id="reset" i18n="optionsResetButton, title:optionsReset"></button>
<button id="shortcuts" i18n="shortcuts, title:shortcutsNote"></button>
<button id="manage" i18n="confirmClose"></button>
</footer>
</template>
</head>
<body id="stylus-options">
<%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>