options.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. <title i18n-text-append="optionsHeading">Stylus </title>
  7. <link rel="stylesheet" href="global.css">
  8. <link rel="stylesheet" href="options/options.css">
  9. <link rel="stylesheet" href="options/onoffswitch.css">
  10. <style id="firefox-transitions-bug-suppressor">
  11. /* restrict to FF */
  12. @supports (-moz-appearance:none) {
  13. /* increased specificity to override sane selectors in user styles */
  14. html#stylus.firefox #options *, #stylus #notes * {
  15. transition: none !important;
  16. }
  17. }
  18. </style>
  19. <script src="js/dom.js"></script>
  20. <script src="js/messaging.js"></script>
  21. <script src="js/localization.js"></script>
  22. <script src="js/prefs.js"></script>
  23. <script src="content/apply.js"></script>
  24. </head>
  25. <body id="stylus-options">
  26. <div id="options">
  27. <div class="block">
  28. <h1 i18n-text="optionsCustomizeIcon"></h1>
  29. <div class="items">
  30. <label>
  31. <span i18n-text="optionsIconDark"></span>
  32. <div class="iconset">
  33. <input type="radio" name="iconset">
  34. <img src="/images/icon/16.png">
  35. <img src="/images/icon/16w.png">
  36. <img src="/images/icon/16x.png">
  37. </div>
  38. </label>
  39. <label>
  40. <span i18n-text="optionsIconLight"></span>
  41. <div class="iconset">
  42. <input type="radio" name="iconset">
  43. <img src="/images/icon/light/16.png">
  44. <img src="/images/icon/light/16w.png">
  45. <img src="/images/icon/light/16x.png">
  46. </div>
  47. </label>
  48. </div>
  49. </div>
  50. <div class="block">
  51. <h1 i18n-text="optionsCustomizeBadge"></h1>
  52. <div class="items">
  53. <label>
  54. <span i18n-text="prefShowBadge"></span>
  55. <span class="onoffswitch">
  56. <input type="checkbox" id="show-badge" class="slider">
  57. <span></span>
  58. </span>
  59. </label>
  60. <label>
  61. <span i18n-text="optionsBadgeNormal"></span>
  62. <input type="color" id="badgeNormal">
  63. </label>
  64. <label>
  65. <span i18n-text="optionsBadgeDisabled"></span>
  66. <input type="color" id="badgeDisabled">
  67. </label>
  68. </div>
  69. </div>
  70. <div class="block">
  71. <h1 i18n-text="optionsCustomizePopup"></h1>
  72. <div class="items">
  73. <label>
  74. <span i18n-text="optionsPopupWidth"></span>
  75. <input type="number" id="popupWidth" min="200" max="800">
  76. </label>
  77. <label>
  78. <span i18n-text="popupOpenEditInWindow"
  79. i18n-title="popupOpenEditInWindowTooltip"></span>
  80. <span class="onoffswitch">
  81. <input type="checkbox" id="openEditInWindow" class="slider">
  82. <span></span>
  83. </span>
  84. </label>
  85. <label>
  86. <span i18n-text="popupStylesFirst"></span>
  87. <span class="onoffswitch">
  88. <input type="checkbox" id="popup.stylesFirst" class="slider">
  89. <span></span>
  90. </span>
  91. </label>
  92. <label class="chromium-only">
  93. <span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span>
  94. <span class="onoffswitch">
  95. <input type="checkbox" id="popup.borders" class="slider">
  96. <span></span>
  97. </span>
  98. </label>
  99. </div>
  100. </div>
  101. <div class="block">
  102. <h1 i18n-text="optionsCustomizeUpdate"></h1>
  103. <div class="items">
  104. <label>
  105. <span i18n-text="optionsUpdateInterval"><sup>1</sup></span>
  106. <input type="number" min="0" id="updateInterval">
  107. </label>
  108. </div>
  109. </div>
  110. <div class="block" id="advanced">
  111. <div class="collapsible-resizer">
  112. <h1 i18n-text="optionsAdvanced">
  113. <svg class="svg-icon is-collapsed" viewBox="0 0 1792 1792">
  114. <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"/>
  115. </svg>
  116. <svg class="svg-icon is-expanded" viewBox="0 0 1792 1792">
  117. <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
  118. </svg>
  119. </h1>
  120. </div>
  121. <div class="items">
  122. <label>
  123. <span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span>
  124. <span class="onoffswitch">
  125. <input type="checkbox" id="exposeIframes" class="slider">
  126. <span></span>
  127. </span>
  128. </label>
  129. <label class="chromium-only">
  130. <span i18n-text="optionsAdvancedContextDelete"></span>
  131. <span class="onoffswitch">
  132. <input type="checkbox" id="editor.contextDelete" class="slider">
  133. <span></span>
  134. </span>
  135. </label>
  136. </div>
  137. </div>
  138. <div class="block" id="actions">
  139. <button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
  140. <button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
  141. <div data-cmd="check-updates">
  142. <button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
  143. <span id="update-progress"></span>
  144. </button>
  145. <div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
  146. </div>
  147. <button data-cmd="open-keyboard" class="chromium-only" i18n-text="shortcuts" i18n-title="shortcutsNote"></button>
  148. </div>
  149. </div>
  150. <div id="notes">
  151. <ol>
  152. <li>
  153. <p i18n-text="optionsUpdateIntervalNote"></p>
  154. <p i18n-text="optionsUpdateImportNote"></p>
  155. </li>
  156. <li i18n-text="optionsAdvancedExposeIframesNote"></li>
  157. </ol>
  158. </div>
  159. <script src="options/options.js"></script>
  160. </body>
  161. </html>