widgets.css 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  2. * Use of this source code is governed by a BSD-style license that can be
  3. * found in the LICENSE file. */
  4. /* This file defines styles for form controls. The order of rule blocks is
  5. * important as there are some rules with equal specificity that rely on order
  6. * as a tiebreaker. These are marked with OVERRIDE. */
  7. @import url(action_link.css);
  8. /* Default state **************************************************************/
  9. :-webkit-any(button,
  10. input[type='button'],
  11. input[type='submit']):not(.custom-appearance),
  12. select,
  13. input[type='checkbox'],
  14. input[type='radio'] {
  15. -webkit-appearance: none;
  16. -webkit-user-select: none;
  17. background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  18. border: 1px solid rgba(0, 0, 0, 0.25);
  19. border-radius: 2px;
  20. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
  21. inset 0 1px 2px rgba(255, 255, 255, 0.75);
  22. color: #444;
  23. font: inherit;
  24. margin: 0 1px 0 0;
  25. outline: none;
  26. text-shadow: 0 1px 0 rgb(240, 240, 240);
  27. }
  28. :-webkit-any(button,
  29. input[type='button'],
  30. input[type='submit']):not(.custom-appearance),
  31. select {
  32. min-height: 2em;
  33. min-width: 4em;
  34. /* The following platform-specific rule is necessary to get adjacent
  35. * buttons, text inputs, and so forth to align on their borders while also
  36. * aligning on the text's baselines. */
  37. padding-bottom: 1px;
  38. }
  39. :-webkit-any(button,
  40. input[type='button'],
  41. input[type='submit']):not(.custom-appearance) {
  42. -webkit-padding-end: 10px;
  43. -webkit-padding-start: 10px;
  44. }
  45. select {
  46. -webkit-appearance: none;
  47. -webkit-padding-end: 20px;
  48. -webkit-padding-start: 6px;
  49. /* OVERRIDE */
  50. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==),
  51. -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  52. background-position: right center;
  53. background-repeat: no-repeat;
  54. }
  55. html[dir='rtl'] select {
  56. background-position: center left;
  57. }
  58. input[type='checkbox'] {
  59. height: 13px;
  60. position: relative;
  61. vertical-align: middle;
  62. width: 13px;
  63. }
  64. input[type='radio'] {
  65. /* OVERRIDE */
  66. border-radius: 100%;
  67. height: 15px;
  68. position: relative;
  69. vertical-align: middle;
  70. width: 15px;
  71. }
  72. /* TODO(estade): add more types here? */
  73. input[type='number'],
  74. input[type='password'],
  75. input[type='search'],
  76. input[type='text'],
  77. input[type='url'],
  78. input:not([type]),
  79. textarea {
  80. border: 1px solid #bfbfbf;
  81. border-radius: 2px;
  82. box-sizing: border-box;
  83. color: #444;
  84. font: inherit;
  85. margin: 0;
  86. /* Use min-height to accommodate addditional padding for touch as needed. */
  87. min-height: 2em;
  88. padding: 3px;
  89. outline: none;
  90. /* For better alignment between adjacent buttons and inputs. */
  91. padding-bottom: 4px;
  92. }
  93. input[type='search'] {
  94. -webkit-appearance: textfield;
  95. /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
  96. * of the default text in relatively spacious languages (i.e. German). */
  97. min-width: 160px;
  98. }
  99. /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
  100. * TODO(dbeam): are there more types that would benefit from this? */
  101. input[type='search']::-webkit-textfield-decoration-container {
  102. direction: inherit;
  103. }
  104. /* Checked ********************************************************************/
  105. input[type='checkbox']:checked::before {
  106. -webkit-user-select: none;
  107. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAaElEQVR4Xl3PIQoCQQCF4Y8JW42D1bDZ4iVEjDbxFpstYhC7eIVBZHkXFGw734sv/TqDQQ8Xb1udja/I8igeIm7Aygj2IpoKTGZnVRNxAHYi4iPiDlA9xX+aNQDFySziqDN6uSp6y7ofEMwZ05uUZRkAAAAASUVORK5CYII=);
  108. background-size: 100% 100%;
  109. content: '';
  110. display: block;
  111. height: 100%;
  112. width: 100%;
  113. }
  114. input[type='radio']:checked::before {
  115. background-color: #666;
  116. border-radius: 100%;
  117. bottom: 3px;
  118. content: '';
  119. display: block;
  120. left: 3px;
  121. position: absolute;
  122. right: 3px;
  123. top: 3px;
  124. }
  125. /* Hover **********************************************************************/
  126. :enabled:hover:-webkit-any(
  127. select,
  128. input[type='checkbox'],
  129. input[type='radio'],
  130. :-webkit-any(
  131. button,
  132. input[type='button'],
  133. input[type='submit']):not(.custom-appearance)) {
  134. background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  135. border-color: rgba(0, 0, 0, 0.3);
  136. box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
  137. inset 0 1px 2px rgba(255, 255, 255, 0.95);
  138. color: black;
  139. }
  140. :enabled:hover:-webkit-any(select) {
  141. /* OVERRIDE */
  142. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==),
  143. -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  144. }
  145. /* Active *********************************************************************/
  146. :enabled:active:-webkit-any(
  147. select,
  148. input[type='checkbox'],
  149. input[type='radio'],
  150. :-webkit-any(
  151. button,
  152. input[type='button'],
  153. input[type='submit']):not(.custom-appearance)) {
  154. background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  155. box-shadow: none;
  156. text-shadow: none;
  157. }
  158. :enabled:active:-webkit-any(select) {
  159. /* OVERRIDE */
  160. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==),
  161. -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  162. }
  163. /* Disabled *******************************************************************/
  164. :disabled:-webkit-any(
  165. button,
  166. input[type='button'],
  167. input[type='submit']):not(.custom-appearance),
  168. select:disabled {
  169. background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  170. border-color: rgba(80, 80, 80, 0.2);
  171. box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
  172. inset 0 1px 2px rgba(255, 255, 255, 0.75);
  173. color: #aaa;
  174. }
  175. select:disabled {
  176. /* OVERRIDE */
  177. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASklEQVQY02P4z0AMRGZGMaShwCisyhITG/4jw8RErMr+KyxYiFC0YOF/BeyWIikEKWLA4Ta4QogiPMpACt82QRThVQYUYYWz4BAAGr6Ii6kEPacAAAAASUVORK5CYII=),
  178. -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  179. }
  180. input:disabled:-webkit-any([type='checkbox'],
  181. [type='radio']) {
  182. opacity: .75;
  183. }
  184. input:disabled:-webkit-any([type='password'],
  185. [type='search'],
  186. [type='text'],
  187. [type='url'],
  188. :not([type])) {
  189. color: #999;
  190. }
  191. /* Focus **********************************************************************/
  192. :enabled:focus:-webkit-any(
  193. select,
  194. input[type='checkbox'],
  195. input[type='number'],
  196. input[type='password'],
  197. input[type='radio'],
  198. input[type='search'],
  199. input[type='text'],
  200. input[type='url'],
  201. input:not([type]),
  202. :-webkit-any(
  203. button,
  204. input[type='button'],
  205. input[type='submit']):not(.custom-appearance)) {
  206. /* OVERRIDE */
  207. -webkit-transition: border-color 200ms;
  208. /* We use border color because it follows the border radius (unlike outline).
  209. * This is particularly noticeable on mac. */
  210. border-color: rgb(77, 144, 254);
  211. outline: none;
  212. }
  213. /* Checkbox/radio helpers ******************************************************
  214. *
  215. * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
  216. * these classes with the markup structure:
  217. *
  218. * <div class="checkbox">
  219. * <label>
  220. * <input type="checkbox"></input>
  221. * <span>
  222. * </label>
  223. * </div>
  224. */
  225. :-webkit-any(.checkbox, .radio) label {
  226. -webkit-user-select: none;
  227. /* Don't expand horizontally: <http://crbug.com/112091>. */
  228. align-items: center;
  229. display: inline-flex;
  230. padding-bottom: 7px;
  231. padding-top: 7px;
  232. }
  233. :-webkit-any(.checkbox, .radio) label input {
  234. flex-shrink: 0;
  235. }
  236. :-webkit-any(.checkbox, .radio) label input ~ span {
  237. -webkit-margin-start: 0.6em;
  238. /* Make sure long spans wrap at the same horizontal position they start. */
  239. display: block;
  240. }
  241. :-webkit-any(.checkbox, .radio) label:hover {
  242. color: black;
  243. }
  244. label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
  245. color: #999;
  246. }
  247. extensionview {
  248. display: inline-block;
  249. height: 300px;
  250. width: 300px;
  251. }