popup.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <html id="stylus">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <link rel="stylesheet" href="popup/popup.css">
  6. <style id="firefox-transitions-bug-suppressor">
  7. /* restrict to FF */
  8. @-moz-document url-prefix("") {
  9. /* increased specificity to override sane selectors in user styles */
  10. html#stylus.firefox #stylus-popup #actions * {
  11. transition: none !important;
  12. }
  13. }
  14. </style>
  15. <!-- Notes:
  16. * Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
  17. * inter-tag whitespace in templates is automatically removed in localization.js
  18. * i18n-anything attribute automatically creates "anything" attribute
  19. -->
  20. <template data-id="style">
  21. <div class="entry">
  22. <div class="left-gutter">
  23. <input class="checker" type="checkbox">
  24. </div>
  25. <div class="main-controls">
  26. <label class="style-name"></label>
  27. <div class="actions">
  28. <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
  29. <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
  30. <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
  31. <svg class="svg-icon edit" viewBox="0 0 14 16">
  32. <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"/>
  33. </svg>
  34. </a>
  35. <a href="#" class="delete" i18n-title="deleteStyleLabel">
  36. <svg class="svg-icon remove" viewBox="0 0 14 16">
  37. <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
  38. </svg>
  39. </a>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <template data-id="writeStyle">
  45. <a class="write-style-link"></a>
  46. </template>
  47. <template data-id="noStyles">
  48. <div id="no-styles" class="entry" i18n-text="noStylesForSite"></div>
  49. </template>
  50. <template data-id="regexpProblemIndicator">
  51. <div class="regexp-problem-indicator" i18n-title="styleRegexpProblemTooltip"></div>
  52. </template>
  53. <template data-id="regexpProblemExplanation">
  54. <div id="regexp-explanation">
  55. <div id="regexp-partial" i18n-html="styleRegexpPartialExplanation"></div>
  56. <div id="regexp-invalid" i18n-text="styleRegexpInvalidExplanation"></div>
  57. <button i18n-text="confirmOK"></button>
  58. </div>
  59. </template>
  60. <template data-id="unavailableInfo">
  61. <div class="blocked-info">
  62. <label i18n-text="stylusUnavailableForURL"></label>
  63. <p i18n-text="stylusUnavailableForURLdetails"></p>
  64. </div>
  65. </template>
  66. <template data-id="unreachableInfo">
  67. <div class="blocked-info">
  68. <label i18n-text="unreachableContentScript"></label>
  69. <p i18n-text="unreachableFileHint"></p>
  70. </div>
  71. </template>
  72. <script src="js/dom.js"></script>
  73. <script src="js/messaging.js"></script>
  74. <script src="js/localization.js"></script>
  75. <script src="js/prefs.js"></script>
  76. <script src="content/apply.js"></script>
  77. <script src="popup/popup.js"></script>
  78. </head>
  79. <body id="stylus-popup">
  80. <div id="confirm">
  81. <div>
  82. <b>Style's Name</b>
  83. <span i18n-text="deleteStyleConfirm"></span>
  84. <div>
  85. <button i18n-text="confirmDelete" data-cmd="ok"></button>
  86. <button i18n-text="confirmCancel" data-cmd="cancel"></button>
  87. </div>
  88. </div>
  89. </div>
  90. <div id="installed"></div>
  91. <div class="actions">
  92. <div id="disable-all-wrapper">
  93. <div class="left-gutter">
  94. <input id="disableAll" type="checkbox">
  95. </div>
  96. <div class="main-controls">
  97. <label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
  98. </div>
  99. </div>
  100. <div class="left-gutter"></div>
  101. <div class="main-controls">
  102. <div id="find-styles">
  103. <a id="find-styles-link" href="https://userstyles.org/styles/browse/"
  104. i18n-text="findStylesForSite"></a>
  105. </div>
  106. <div id="write-style">
  107. <span id="write-style-for" i18n-text="writeStyleFor"></span>
  108. </div>
  109. </div>
  110. <!-- Actions -->
  111. <div id="popup-options">
  112. <button id="popup-manage-button" i18n-text="openManage"
  113. data-href="manage.html" i18n-title="popupManageTooltip"></button>
  114. <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
  115. <button id="popup-shortcuts-button" class="chromium-only"
  116. i18n-text="shortcuts"
  117. i18n-title="shortcutsNote"></button>
  118. </div>
  119. </div>
  120. </body>
  121. </html>