<!DOCTYPE html>
<html id="stylus" class="normal-layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title i18n="styleManager"></title>
<%= htmlWebpackPlugin.tags.headTags %>
<template data-id="style">
<div class="entry">
<h2 class="style-name">
<a class="style-name-link">
<span class="style-info" data-type="version"></span>
</a>
<a target="_blank" class="homepage icon"><i class=i-external></i></a>
</h2>
<p class="applies-to">
<span class="style-info" data-type="age"></span>.
<label i18n="genericSize">:</label><span class="style-info" data-type="size"></span>.
<label i18n="appliesDisplay"></label>
<span class="targets"></span>
</p>
<p class="actions">
<a class="style-edit-link">
<button i18n="editStyleLabel" tabindex="-1"></button>
</a>
<button class="enable" i18n="enableStyleLabel"></button>
<button class="disable" i18n="disableStyleLabel"></button>
<button class="delete" i18n="deleteStyleLabel"></button>
<button class="check-update" i18n="checkForUpdate"></button>
<button class="update" i18n="installUpdate" hidden></button>
<button class="configure-usercss" i18n="configureStyle"></button>
<span class="update-note"></span>
</p>
</div>
</template>
<template data-id="styleNewUI">
<div class="entry">
<h2 class="style-name">
<input type="checkbox" i18n="title:toggleStyle">
<a class="style-name-link">
<span class="style-info" data-type="version"></span>
</a>
<a target="_blank" class="homepage icon" tabindex="0"><i class=i-external></i></a>
</h2>
<p class="actions">
<a class="delete" i18n="title:deleteStyleLabel" tabindex="0">
<i class=i-close></i>
</a>
</p>
<p class="style-info" data-type="size"></p>
<p class="style-info" data-type="age"></p>
<div class="applies-to">
<a class="expander" tabindex="0"><i>▼</i></a>
<div class="targets"></div>
</div>
</div>
</template>
<template data-id="configureIcon">
<a class="configure-usercss" i18n="title:configureStyle" tabindex="0">
<i class=i-config></i>
</a>
</template>
<template data-id="updaterIcons">
<span class="updater-icons flex">
<a class="check-update" i18n="title:checkForUpdate" tabindex="0">
<i class=i-update-check></i>
</a>
<a class="update" i18n="title:installUpdate" tabindex="0">
<i class=i-install></i>
</a>
<span class="up-to-date" i18n="title:updateCheckSucceededNoUpdate">
<i class=i-check1></i>
</span>
<span class="updated" i18n="title:updateCompleted">
<i class=i-check2></i>
</span>
<span class="update-note"></span>
</span>
</template>
<template data-id="appliesToTarget">
<span class="target"></span>
</template>
<template data-id="appliesToSeparator">
<span class="sep">, </span>
</template>
<template data-id="appliesToEverything">
<span class="target" i18n="appliesToEverything"></span>
</template>
<template data-id="extraAppliesTo">
<details class="applies-to-extra">
<summary class="applies-to-extra-expander" i18n="appliesDisplayTruncatedSuffix"></summary>
</details>
</template>
<template data-id="body">
<div id="header" class="dvh100">
<h1 i18n="styleManager"></h1>
<label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
<input id="disableAll" type="checkbox">
</label>
<div id="manage-settings">
<div class="settings-column" id="filters">
<div id="stats">
<span></span>
<a tabindex="0" i18n="title:genericResetLabel">
<i class=i-close></i>
</a>
</div>
<div class="filter-selection">
<label>
<input id="manage.onlyEnabled" type="checkbox"
data-filter=".enabled"
data-filter-hide=".disabled">
</label>
<div class="select-wrapper">
<select id="manage.onlyEnabled.invert" class="fit-width">
<option i18n="manageOnlyEnabled" value="false"></option>
<option i18n="manageOnlyDisabled" value="true"></option>
</select>
</div>
</div>
<div class="filter-selection">
<label>
<input id="manage.onlyLocal" type="checkbox"
data-filter=":not(.updatable):not(.update-done)"
data-filter-hide=".updatable, .update-done">
</label>
<div class="select-wrapper">
<select id="manage.onlyLocal.invert" i18n="title:manageOnlyLocalTooltip" class="fit-width">
<option i18n="manageOnlyLocal" value="false"></option>
<option i18n="manageOnlyExternal" value="true"></option>
</select>
</div>
</div>
<div class="filter-selection">
<label>
<input id="manage.onlyUsercss" type="checkbox"
data-filter=".usercss"
data-filter-hide=":not(.usercss)">
</label>
<div class="select-wrapper">
<select id="manage.onlyUsercss.invert" class="fit-width">
<option i18n="manageOnlyUsercss" value="false"></option>
<option i18n="manageOnlyNonUsercss" value="true"></option>
</select>
</div>
</div>
<div class="filter-selection" hidden>
<label id="only-updates" i18n="+manageOnlyUpdates">
<input type="checkbox"
data-filter=".can-update, .update-problem, .update-done"
data-filter-hide=":not(.updatable):not(.update-done),
.no-update:not(.update-problem),
.updatable:not(.can-update):not(.update-problem):not(.update-done)">
</label>
</div>
</div>
<div class="settings-column" id="wide-inputs">
<div id="search-wrapper">
<input id="search" type="search" i18n="placeholder:search" spellcheck="false"
data-filter=":not(.not-matching)"
data-filter-hide=".not-matching">
<div class="select-wrapper">
<select id="manage.searchMode" class="fit-width">
<option i18n="searchStylesName" value="name"></option>
<option i18n="searchStylesMeta" value="meta" selected></option>
<option i18n="searchStylesCode" value="code"></option>
<option i18n="searchStylesMatchUrl" value="url"></option>
<option i18n="searchStylesAll" value="all"></option>
</select>
</div>
<a tabindex="0" class="icon" data-cmd="note" i18n="title:searchStylesHelp">
<i class=i-info></i>
</a>
</div>
<div id="sort-wrapper">
<div class="select-wrapper" i18n="title:sortLabel">
<select id="manage.newUI.sort"></select>
</div>
<a tabindex="0" class="icon" data-cmd="note" i18n="title:sortStylesHelp">
<i class=i-info></i>
</a>
</div>
</div>
<div class="settings-column flex" id="actions">
<details data-pref="manage.actions.expanded">
<summary></summary>
</details>
<main class="flex wrap center-items">
<button id="check-all-updates" i18n="title:checkAllUpdates" class="icon">
<i class=i-update-check></i>
<span id="update-progress"></span>
</button>
<button id="update-history-button" i18n="title:genericHistoryLabel" class="icon">
<i class=i-log></i>
</button>
<button id="injection-order-button" i18n="title:styleInjectionOrder" class="icon">
<i class=i-reorder></i>
</button>
<button id="manage-options-button" i18n="title:openOptions" class="icon">
<svg class="hollow-gear" viewBox="0 0 20 20" stroke-width="1.25px">
<text y="100%">⚙</text>
</svg>
</button>
<a id="add-style" tabindex="-1" href="edit.html" class="icon">
<button i18n="title:addStyleLabel" class="icon">
<i class=i-plus></i>
</button>
</a>
<div id="update-all">
<template data-id="updateAll">
<button id="apply-all-updates" i18n="applyAllUpdates"></button>
<span id="update-all-no-updates" i18n="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" i18n="checkAllUpdatesForce"></button>
</template>
</div>
<div id="backup" class="flex wrap center-items">
<button id="sync-styles" class="icon flex center-items" i18n="title:optionsCustomizeSync">
<img hidden>
<i class=i-cloud></i>
</button>
<button id="import" i18n="importLabel"></button>
<span class="split-btn">
<button id="export" i18n="exportLabel"></button
><button class="split-btn-pedal" i18n="menu-compat:exportCompatible"></button>
</span>
<p></p>
</div>
</main>
</div>
<div class="settings-column" id="links">
<details data-pref="manage.links.expanded">
<summary></summary>
<main><% _.forEach([
['userstyles.world/explore', /*i18n*/'linkGetShareStyles'],
['uso.kkx.one/browse/styles', /*i18n*/'linkGetStyles'],
['github.com/openstyles/stylus/wiki', /*i18n*/'linkGetHelp'],
['github.com/openstyles/stylus', , 'GitHub'],
['explore.transifex.com/github-7/Stylus/', /*i18n*/'linkTranslate'],
], ([url, tl, text]) => { if (tl) { %>
<a href="https://<%= url %>" target="_blank" class="target" i18n="<%= tl %>"></a>
<% } else { %>
<a href="https://<%= url %>" target="_blank" class="target"><%= text %></a>
<% }}); %>
</main>
</details>
</div>
<div class="settings-column" id="backup-hint">
<details data-pref="manage.backup.expanded">
<summary></summary>
<main i18n="backupReminder"></main>
</details>
</div>
</div>
<div id="header-resizer" i18n="title:headerResizerHint"></div>
</div>
<div id="installed"></div>
</template>
</head>
<body id="stylus-manage" i18n="dragndrop-hint:dragDropMessage">
<%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>