extension.css 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. /*
  2. * Copyright 2014 The Chromium Authors. All rights reserved.
  3. * Use of this source code is governed by a BSD-style license that can be
  4. * found in the LICENSE file.
  5. *
  6. * This stylesheet is used to apply Chrome styles to extension pages that opt in
  7. * to using them.
  8. *
  9. * These styles have been copied from ui/webui/resources/css/chrome_shared.css
  10. * and ui/webui/resources/css/widgets.css *with CSS class logic removed*, so
  11. * that it's as close to a user-agent stylesheet as possible.
  12. *
  13. * For example, extensions shouldn't be able to set a .link-button class and
  14. * have it do anything.
  15. *
  16. * Other than that, keep this file and chrome_shared.css/widgets.cc in sync as
  17. * much as possible.
  18. */
  19. body {
  20. color: #333;
  21. cursor: default;
  22. /* Note that the correct font-family and font-size are set in
  23. * extension_fonts.css. */
  24. /* This top margin of 14px matches the top padding on the h1 element on
  25. * overlays (see the ".overlay .page h1" selector in overlay.css), which
  26. * every dialogue has.
  27. *
  28. * Similarly, the bottom 14px margin matches the bottom padding of the area
  29. * which hosts the buttons (see the ".overlay .page * .action-area" selector
  30. * in overlay.css).
  31. *
  32. * Both have a padding left/right of 17px.
  33. *
  34. * Note that we're putting this here in the Extension content, rather than
  35. * the WebUI element which contains the content, so that scrollbars in the
  36. * Extension content don't get a 6px margin, which looks quite odd.
  37. */
  38. margin: 14px 17px;
  39. }
  40. p {
  41. line-height: 1.8em;
  42. }
  43. h1,
  44. h2,
  45. h3 {
  46. -webkit-user-select: none;
  47. font-weight: normal;
  48. /* Makes the vertical size of the text the same for all fonts. */
  49. line-height: 1;
  50. }
  51. h1 {
  52. font-size: 1.5em;
  53. }
  54. h2 {
  55. font-size: 1.3em;
  56. margin-bottom: 0.4em;
  57. }
  58. h3 {
  59. color: black;
  60. font-size: 1.2em;
  61. margin-bottom: 0.8em;
  62. }
  63. a {
  64. color: rgb(17, 85, 204);
  65. text-decoration: underline;
  66. }
  67. a:active {
  68. color: rgb(5, 37, 119);
  69. }
  70. /* Default state **************************************************************/
  71. :-webkit-any(button,
  72. input[type='button'],
  73. input[type='submit']),
  74. select,
  75. input[type='checkbox'],
  76. input[type='radio'] {
  77. -webkit-appearance: none;
  78. -webkit-user-select: none;
  79. background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
  80. border: 1px solid rgba(0, 0, 0, 0.25);
  81. border-radius: 2px;
  82. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
  83. inset 0 1px 2px rgba(255, 255, 255, 0.75);
  84. color: #444;
  85. font: inherit;
  86. margin: 0 1px 0 0;
  87. outline: none;
  88. text-shadow: 0 1px 0 rgb(240, 240, 240);
  89. }
  90. :-webkit-any(button,
  91. input[type='button'],
  92. input[type='submit']),
  93. select {
  94. min-height: 2em;
  95. min-width: 4em;
  96. <if expr="is_win">
  97. /* The following platform-specific rule is necessary to get adjacent
  98. * buttons, text inputs, and so forth to align on their borders while also
  99. * aligning on the text's baselines. */
  100. padding-bottom: 1px;
  101. </if>
  102. }
  103. :-webkit-any(button,
  104. input[type='button'],
  105. input[type='submit']) {
  106. padding-inline-end: 10px;
  107. padding-inline-start: 10px;
  108. }
  109. select {
  110. -webkit-appearance: none;
  111. padding-inline-end: 20px;
  112. padding-inline-start: 6px;
  113. /* OVERRIDE */
  114. background-image: url(../../../ui/webui/resources/images/select.png),
  115. linear-gradient(#ededed, #ededed 38%, #dedede);
  116. background-position: right center;
  117. background-repeat: no-repeat;
  118. }
  119. html[dir='rtl'] select {
  120. background-position: center left;
  121. }
  122. input[type='checkbox'] {
  123. height: 13px;
  124. position: relative;
  125. vertical-align: middle;
  126. width: 13px;
  127. }
  128. input[type='radio'] {
  129. /* OVERRIDE */
  130. border-radius: 100%;
  131. height: 15px;
  132. position: relative;
  133. vertical-align: middle;
  134. width: 15px;
  135. }
  136. /* TODO(estade): add more types here? */
  137. input[type='number'],
  138. input[type='password'],
  139. input[type='search'],
  140. input[type='text'],
  141. input[type='url'],
  142. input:not([type]),
  143. textarea {
  144. border: 1px solid #bfbfbf;
  145. border-radius: 2px;
  146. box-sizing: border-box;
  147. color: #444;
  148. font: inherit;
  149. margin: 0;
  150. /* Use min-height to accommodate addditional padding for touch as needed. */
  151. min-height: 2em;
  152. padding: 3px;
  153. outline: none;
  154. <if expr="is_win or is_macosx or is_ios">
  155. /* For better alignment between adjacent buttons and inputs. */
  156. padding-bottom: 4px;
  157. </if>
  158. }
  159. input[type='search'] {
  160. -webkit-appearance: textfield;
  161. /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
  162. * of the default text in relatively spacious languages (i.e. German). */
  163. min-width: 160px;
  164. }
  165. /* Checked ********************************************************************/
  166. input[type='checkbox']:checked::before {
  167. -webkit-user-select: none;
  168. background-image: url(../../../ui/webui/resources/images/check.png);
  169. background-size: 100% 100%;
  170. content: '';
  171. display: block;
  172. height: 100%;
  173. width: 100%;
  174. }
  175. input[type='radio']:checked::before {
  176. background-color: #666;
  177. border-radius: 100%;
  178. bottom: 3px;
  179. content: '';
  180. display: block;
  181. left: 3px;
  182. position: absolute;
  183. right: 3px;
  184. top: 3px;
  185. }
  186. /* Hover **********************************************************************/
  187. :enabled:hover:-webkit-any(
  188. select,
  189. input[type='checkbox'],
  190. input[type='radio'],
  191. :-webkit-any(
  192. button,
  193. input[type='button'],
  194. input[type='submit'])) {
  195. background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  196. border-color: rgba(0, 0, 0, 0.3);
  197. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
  198. inset 0 1px 2px rgba(255, 255, 255, 0.95);
  199. color: black;
  200. }
  201. :enabled:hover:-webkit-any(select) {
  202. /* OVERRIDE */
  203. background-image: url(../../../ui/webui/resources/images/select.png),
  204. linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  205. }
  206. /* Active *********************************************************************/
  207. :enabled:active:-webkit-any(
  208. select,
  209. input[type='checkbox'],
  210. input[type='radio'],
  211. :-webkit-any(
  212. button,
  213. input[type='button'],
  214. input[type='submit'])) {
  215. background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  216. box-shadow: none;
  217. text-shadow: none;
  218. }
  219. :enabled:active:-webkit-any(select) {
  220. /* OVERRIDE */
  221. background-image: url(../../../ui/webui/resources/images/select.png),
  222. linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  223. }
  224. /* Disabled *******************************************************************/
  225. :disabled:-webkit-any(
  226. button,
  227. input[type='button'],
  228. input[type='submit']),
  229. select:disabled {
  230. background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  231. border-color: rgba(80, 80, 80, 0.2);
  232. box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
  233. inset 0 1px 2px rgba(255, 255, 255, 0.75);
  234. color: #aaa;
  235. }
  236. select:disabled {
  237. /* OVERRIDE */
  238. background-image: url(../../../ui/webui/resources/images/disabled_select.png),
  239. linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  240. }
  241. input:disabled:-webkit-any([type='checkbox'],
  242. [type='radio']) {
  243. opacity: .75;
  244. }
  245. input:disabled:-webkit-any([type='password'],
  246. [type='search'],
  247. [type='text'],
  248. [type='url'],
  249. :not([type])) {
  250. color: #999;
  251. }
  252. /* Focus **********************************************************************/
  253. :enabled:focus:-webkit-any(
  254. select,
  255. input[type='checkbox'],
  256. input[type='number'],
  257. input[type='password'],
  258. input[type='radio'],
  259. input[type='search'],
  260. input[type='text'],
  261. input[type='url'],
  262. input:not([type]),
  263. :-webkit-any(
  264. button,
  265. input[type='button'],
  266. input[type='submit'])) {
  267. /* OVERRIDE */
  268. -webkit-transition: border-color 200ms;
  269. /* We use border color because it follows the border radius (unlike outline).
  270. * This is particularly noticeable on mac. */
  271. border-color: rgb(77, 144, 254);
  272. outline: none;
  273. }
  274. /* Checkbox/radio helpers ******************************************************
  275. *
  276. * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
  277. * these classes with the markup structure:
  278. *
  279. * <div class="checkbox">
  280. * <label>
  281. * <input type="checkbox">
  282. * <span>
  283. * </label>
  284. * </div>
  285. */
  286. :-webkit-any(.checkbox, .radio) label {
  287. /* Don't expand horizontally: <http://crbug.com/112091>. */
  288. align-items: center;
  289. display: inline-flex;
  290. padding-bottom: 7px;
  291. padding-top: 7px;
  292. }
  293. :-webkit-any(.checkbox, .radio) label input {
  294. flex-shrink: 0;
  295. }
  296. :-webkit-any(.checkbox, .radio) label input ~ span {
  297. margin-block-start: 0.6em;
  298. /* Make sure long spans wrap at the same horizontal position they start. */
  299. display: block;
  300. }
  301. :-webkit-any(.checkbox, .radio) label:hover {
  302. color: black;
  303. }
  304. label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
  305. color: #999;
  306. }