<!DOCTYPE html>
<html id="stylus">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= htmlWebpackPlugin.tags.headTags %>
<%= require('./popup/search.html').default %>
<template data-id="style">
<div class="entry">
<div class="entry-content">
<div class="main-controls">
<label class="style-name">
<input type=checkbox>
</label>
</div>
<div class="actions">
<a class="configure" tabindex="0">
<i class="i-config"></i>
</a>
<a class="style-edit-link" href="edit.html" i18n="title:editStyleLabel">
<i class=i-edit></i>
</a>
<a class="menu-button" i18n="title:popupMenuButtonTooltip" tabindex="0">
<i class=i-menu></i>
</a>
</div>
</div>
</div>
</template>
<template data-id="errEmpty">
<i class=i-empty data-cmd="note" tabindex="0" i18n="title:emptyCode"></i>
</template>
<template data-id="errCsp">
<a class="icon csp-problem-indicator" data-cmd="note" tabindex="0"><i class="i-attention"></i></a>
</template>
<template data-id="errRegexp">
<a class="icon regexp-problem-indicator" data-cmd="note" tabindex="0"
i18n="title:styleRegexpProblemTooltip"><i class="i-attention"></i></a>
</template>
<template data-id="unreachableInfo">
<div class="blocked-info">
<b i18n="unreachableContentScript"></b>
</div>
</template>
<template data-id="writeForFrames">
<div id="write-for-frames" tabindex="0"><iframe>...</div>
</template>
<template data-id="body">
<div id="unstylable" class="blocked-info if-blocked">
<a data-cmd="note" tabindex="0" i18n="title:stylusUnavailableForURLdetails">
<i class="i-info" style="margin: 0 3px 0 -2px"></i>
<span i18n="stylusUnavailableForURL" style="vertical-align: middle"></span>
</a>
</div>
<div id="no-styles" class="if-no-styles if-not-blocked">
<div i18n="noStylesForSite"></div>
<b i18n="findStylesOnline"></b>
</div>
<main id="installed"></main>
<aside id="toggler" class="if-styles">
<details>
<summary i18n="toggleStylesHeading" class="non-touch-dimmed"></summary>
<% _.forEach([
/*i18n*/'toggleStylesPerm',
/*i18n*/'toggleStylesTab',
], (text, i) => { i = i ? 't' : ''; %>
<div>
<input type="checkbox" data-toggle="+<%= i %>" i18n="title:enableStyleLabel" checked>
<input type="checkbox" data-toggle="-<%= i %>" i18n="title:disableStyleLabel">
<label i18n="+<%= text %>, title:toggleStylesHint"><input type="checkbox" data-toggle="*<%= i %>"></label>
</div>
<% }) %>
<label class="icon">
<input type="checkbox" id="popup.toggler.expanded">
<i class="i-pin"></i>
</label>
</details>
<label id="disableAll-label" i18n="data-off:disableAllStylesOff">
<input id="disableAll" type="checkbox" class="slider">
<img srcset="icon/16.png, icon/32.png 2x">
</label>
</aside>
<div id="main-actions" class="flex">
<div id="write-wrapper" class="non-touch-dimmed">
<a class="icon">
<i class=i-plus></i>
</a>
<div id="write-style"></div>
</div>
</div>
<div id="popup-options">
<div class="split-btn">
<a id="popup-manage-button" i18n="title:openManage" href="manage.html" class="icon">
<i class="i-manage"></i>
</a>
<a tabindex="0" class="dropdown if-not-blocked" i18n="menu-site:popupManageSiteStyles">
<i class="i-select-arrow"></i>
</a>
</div>
<div class="split-btn">
<a id="find-styles-btn" i18n="+title:find" title="<Ctrl-F> " tabindex="0">
<i class="i-search"></i>
</a>
<a tabindex="0" class="dropdown"
menu-gf="GreasyFork"
menu-uso="UserStyles"
menu-usoa="UserStyles Archive"
menu-usw="UserStyles World">
<i class="i-select-arrow"></i>
</a>
</div>
<a id="help" data-cmd="note" tabindex="0">
<i class="i-info"></i>
</a>
<a id="options-btn" i18n="title:openOptions" tabindex="0">
<svg class="hollow-gear" viewBox="0 0 20 20">
<text y="100%">⚙</text>
</svg>
</a>
</div>
</template>
<template data-id="menu">
<div id="menu">
<div>
<header>
<label class="ellipsis"><input type=checkbox><span></span></label>
<a id="home" class="icon" target="_blank"><i class="i-external"></i></a>
</header>
<main>
<% _.forEach([
['tab', /*i18n*/'styleForceTab'],
['domain', /*i18n*/'appliesDomainOption'],
['prefix', /*i18n*/'appliesUrlPrefixOption'],
['url', /*i18n*/'appliesUrlOption'],
], ([type, text], i) => { %>
<div data-ovr="<%= type %>" data-index="<%= i %>">
<span i18n="+<%= text %>"></span>
<label><input type="checkbox"><i class="i-plus"></i></label>
<label><input type="checkbox"><i class="i-minus"></i></label>
</div>
<% if (type == 'tab') { %><p i18n="styleSitesPopupHeading"></p><% } %>
<% }); %>
<p id="matchedOvr" i18n="title:styleSitesMatchingRules"></p>
</main>
<main class="delete">
<span i18n="deleteStyleConfirm"></span>
</main>
<footer>
<button data-cmd="delete" i18n="confirmDelete" title="<Delete>"></button>
<button data-cmd="edit" i18n="editStyleLabel"></button>
<button data-cmd="cancel" i18n="confirmClose" title="<Esc>"></button>
</footer>
</div>
</div>
</template>
<template data-id="incOvr">
<label id="incOvr" i18n="title:styleSitesIncludeNote">
<input type="checkbox"><span i18n="styleSitesIncludeOvr"></span>
</label>
</template>
</head>
<body id="stylus-popup">
<%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>