popup.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <!DOCTYPE html>
  2. <html id="stylus">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="global.css">
  7. <template data-id="style">
  8. <div class="entry">
  9. <div class="entry-content">
  10. <div class="main-controls">
  11. <label class="style-name">
  12. <div class="checkmate">
  13. <input class="checker" type="checkbox">
  14. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  15. </div>
  16. </label>
  17. </div>
  18. <div class="actions">
  19. <a class="configure" i18n-title="configureStyle" tabindex="0">
  20. <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
  21. </a>
  22. <a class="style-edit-link" href="edit.html" i18n-title="editStyleLabel">
  23. <svg class="svg-icon edit" viewBox="0 0 14 16">
  24. <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
  25. </svg>
  26. </a>
  27. <a class="menu-button" i18n-title="popupMenuButtonTooltip" tabindex="0">
  28. <svg class="svg-icon menu-button-icon" viewBox="0 0 3 16">
  29. <path fill-rule="evenodd" d="M0 2.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zM1.5 14a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
  30. </svg>
  31. </a>
  32. </div>
  33. </div>
  34. <div class="menu">
  35. <div class="menu-items-wrapper">
  36. <b class="menu-title"></b>
  37. <label class="menu-item exclude-by-domain button">
  38. <div class="menu-icon">
  39. <div class="checkbox-container">
  40. <input type="checkbox" class="exclude-by-domain-checkbox">
  41. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  42. </div>
  43. </div>
  44. <span i18n-text="excludeStyleByDomainLabel"></span>
  45. </label>
  46. <label class="menu-item exclude-by-url button">
  47. <div class="menu-icon">
  48. <div class="checkbox-container">
  49. <input type="checkbox" class="exclude-by-url-checkbox">
  50. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  51. </div>
  52. </div>
  53. <span i18n-text="excludeStyleByUrlLabel"></span>
  54. </label>
  55. <div class="menu-buttons-wrapper">
  56. <button class="delete" i18n-text="deleteStyleLabel"></button>
  57. <button class="menu-close" i18n-text="confirmClose"></button>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </template>
  63. <template data-id="writeStyle">
  64. <a class="write-style-link"></a>
  65. </template>
  66. <template data-id="noStyles">
  67. <div id="no-styles" i18n-text="noStylesForSite"></div>
  68. </template>
  69. <template data-id="regexpProblemIndicator">
  70. <div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
  71. </template>
  72. <template data-id="regexpProblemExplanation">
  73. <div id="regexp-explanation">
  74. <div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
  75. <div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
  76. <button i18n-text="confirmOK"></button>
  77. </div>
  78. </template>
  79. <template data-id="unavailableInfo">
  80. <div class="blocked-info">
  81. <label i18n-text="stylusUnavailableForURL"></label>
  82. <p i18n-text="stylusUnavailableForURLdetails"></p>
  83. </div>
  84. </template>
  85. <template data-id="unreachableInfo">
  86. <div class="blocked-info">
  87. <div class="copy-message" i18n-text="copied"></div>
  88. <label i18n-text="unreachableContentScript"></label>
  89. </div>
  90. </template>
  91. <template data-id="searchResult">
  92. <div class="search-result">
  93. <a class="search-result-title"><span></span></a>
  94. <div class="search-result-info">
  95. <img class="search-result-screenshot" i18n-title="installButton">
  96. <div class="search-result-status"></div>
  97. <div class="search-result-actions">
  98. <button class="search-result-install" i18n-text="installButton"></button>
  99. <button class="search-result-uninstall" i18n-text="deleteStyleLabel"></button>
  100. <button class="search-result-customize" i18n-text="configureStyle"></button>
  101. </div>
  102. <dl class="search-result-meta">
  103. <div data-type="author">
  104. <dt i18n-text="author"></dt>
  105. <dd><a target="_blank" i18n-title="author"></a></dd>
  106. </div>
  107. <div data-type="rating">
  108. <dt i18n-text="searchResultRating"></dt>
  109. <dd i18n-title="searchResultRating"></dd>
  110. </div>
  111. <div data-type="updated">
  112. <dt i18n-text="searchResultUpdated"></dt>
  113. <dd i18n-title="searchResultUpdated"><time></time></dd>
  114. </div>
  115. <div data-type="weekly">
  116. <dt i18n-text="searchResultWeeklyCount"></dt>
  117. <dd i18n-title="searchResultWeeklyCount"></dd>
  118. </div>
  119. <div data-type="total">
  120. <dt i18n-text="searchResultInstallCount"></dt>
  121. <dd i18n-title="searchResultInstallCount"></dd>
  122. </div>
  123. </dl>
  124. <div class="search-result-description"></div>
  125. </div>
  126. </div>
  127. </template>
  128. <template data-id="searchNav">
  129. <div>
  130. <button data-type="prev" i18n-title="paginationPrevious" disabled>◄</button>
  131. <label>
  132. <span data-type="page" i18n-title="paginationCurrent">-</span>
  133. /
  134. <span data-type="total" i18n-title="paginationEstimated">-</span>
  135. </label>
  136. <button data-type="next" i18n-title="paginationNext" disabled>►</button>
  137. </div>
  138. </template>
  139. <template data-id="emptySearchResult">
  140. <div class="search-result-empty"></div>
  141. </template>
  142. <template data-id="searchResultNotMatching">
  143. <p class="not-matching-explainer"
  144. i18n-text="searchResultNotMatching"
  145. i18n-title="searchResultNotMatchingNote"></p>
  146. </template>
  147. <script src="js/polyfill.js"></script>
  148. <script src="js/msg.js"></script>
  149. <script src="js/toolbox.js"></script>
  150. <script src="popup/preinit.js"></script>
  151. <script src="js/prefs.js"></script>
  152. <script src="js/dom.js"></script>
  153. <script src="js/localization.js"></script>
  154. <script src="content/style-injector.js"></script>
  155. <script src="content/apply.js"></script>
  156. <link rel="stylesheet" href="popup/popup.css">
  157. </head>
  158. <body id="stylus-popup">
  159. <div id="confirm">
  160. <div>
  161. <b>Style's Name</b>
  162. <span i18n-text="deleteStyleConfirm"></span>
  163. <div>
  164. <button i18n-text="confirmDelete" data-cmd="ok"></button>
  165. <button i18n-text="confirmCancel" data-cmd="cancel"></button>
  166. </div>
  167. </div>
  168. </div>
  169. <div id="installed">
  170. <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
  171. </div>
  172. <div class="actions">
  173. <div id="disable-all-wrapper">
  174. <div class="main-controls">
  175. <label id="disableAll-label" i18n-text="disableAllStyles">
  176. <input id="disableAll" type="checkbox">
  177. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  178. </label>
  179. </div>
  180. </div>
  181. <div class="main-controls">
  182. <div id="find-styles">
  183. <a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"
  184. href="https://to.be.replaced.on.click/" target="_blank"></a>
  185. <span id="find-styles-inline-group">
  186. <label i18n-title="findStylesInlineTooltip">
  187. <input id="popup.findStylesInline" class="checker" type="checkbox">
  188. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  189. <span i18n-text="findStylesInline"></span>
  190. </label>
  191. </span>
  192. </div>
  193. <div id="write-style">
  194. <a id="write-for-frames" title="&lsaquo;iframe&rsaquo;..." tabindex="0" hidden></a>
  195. <span id="write-style-for" i18n-text="writeStyleFor"></span>
  196. </div>
  197. </div>
  198. <!-- Actions -->
  199. <div id="popup-options">
  200. <button id="popup-manage-button" i18n-text="openManage"
  201. data-href="manage.html" i18n-title="popupManageTooltip"></button>
  202. <button id="popup-options-button" i18n-text="openOptions"></button>
  203. <button id="popup-wiki-button"
  204. i18n-text="linkStylusWiki"
  205. i18n-title="linkGetHelp"
  206. data-href="https://github.com/openstyles/stylus/wiki"></button>
  207. </div>
  208. </div>
  209. <div id="search-results-error" class="hidden"></div>
  210. <div id="search-results" class="hidden">
  211. <div class="search-results-nav" data-type="top"></div>
  212. <div id="search-params">
  213. <input id="search-query" type="search" i18n-placeholder="search"
  214. i18n-title="searchStyleQueryHint">
  215. <div class="select-resizer">
  216. <select id="search-order" i18n-title="sortStylesHelpTitle">
  217. <option value="n" i18n-text="genericTitle">
  218. <option value="u" i18n-text="searchResultUpdated">
  219. <option value="t" i18n-text="searchResultInstallCount">
  220. <option value="w" i18n-text="searchResultWeeklyCount">
  221. <option value="r" i18n-text="searchResultRating">
  222. </select>
  223. <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
  224. </div>
  225. <label>
  226. <span class="checkbox-container">
  227. <input id="search-globals" type="checkbox" checked>
  228. <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
  229. </span>
  230. <span i18n-text="searchGlobalStyles"></span>
  231. </label>
  232. </div>
  233. <div id="search-results-list"></div>
  234. <div class="search-results-nav" data-type="bottom"></div>
  235. </div>
  236. <!-- Here we can use the above elements before DOMContentLoaded -->
  237. <script src="popup/events.js"></script>
  238. <script src="popup/popup.js"></script>
  239. <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
  240. <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
  241. <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
  242. </symbol>
  243. <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
  244. <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"/>
  245. </symbol>
  246. <symbol id="svg-icon-config" viewBox="0 0 16 16">
  247. <path d="M13.3,12.8l1.5-2.6l-2.2-1.5c0-0.2,0.1-0.5,0.1-0.7c0-0.2,0-0.5-0.1-0.7l2.2-1.5l-1.5-2.6l-2.4,1.2 c-0.4-0.3-0.8-0.5-1.2-0.7L9.5,1h-3L6.3,3.7C5.9,3.8,5.5,4.1,5.1,4.4L2.7,3.2L1.2,5.8l2.2,1.5c0,0.2-0.1,0.5-0.1,0.7 c0,0.2,0,0.5,0.1,0.7l-2.2,1.5l1.5,2.6l2.4-1.2c0.4,0.3,0.8,0.5,1.2,0.7L6.5,15h3l0.2-2.7c0.4-0.2,0.8-0.4,1.2-0.7L13.3,12.8z M8,10.3c-1.3,0-2.3-1-2.3-2.3c0-1.3,1-2.3,2.3-2.3c1.3,0,2.3,1,2.3,2.3C10.3,9.3,9.3,10.3,8,10.3z"/>
  248. </symbol>
  249. <symbol id="svg-icon-config-uso" viewBox="0 0 20 20">
  250. <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
  251. </symbol>
  252. <symbol id="svg-icon-help" viewBox="0 0 14 16">
  253. <title i18n-text="helpAlt"></title>
  254. <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
  255. </symbol>
  256. </svg>
  257. </body>
  258. </html>