base.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. html {
  2. box-sizing: border-box;
  3. }
  4. *, *::after, *::before {
  5. box-sizing: inherit;
  6. }
  7. button, input[type="button"], input[type="reset"], input[type="submit"] {
  8. -webkit-appearance: none;
  9. -moz-appearance: none;
  10. appearance: none;
  11. background-color: #555;
  12. border: 0;
  13. border-radius: 2px;
  14. color: #fff;
  15. cursor: pointer;
  16. display: inline-block;
  17. font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  18. font-size: 16px;
  19. -webkit-font-smoothing: antialiased;
  20. font-weight: 600;
  21. line-height: 1;
  22. padding: 0.75em 1.5em;
  23. text-decoration: none;
  24. transition: background-color 150ms ease;
  25. -webkit-user-select: none;
  26. -moz-user-select: none;
  27. -ms-user-select: none;
  28. user-select: none;
  29. vertical-align: middle;
  30. white-space: nowrap;
  31. }
  32. button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
  33. background-color: #444444;
  34. color: #fff;
  35. }
  36. button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled {
  37. cursor: not-allowed;
  38. opacity: 0.5;
  39. }
  40. button:disabled:hover, input[type="button"]:disabled:hover, input[type="reset"]:disabled:hover, input[type="submit"]:disabled:hover {
  41. background-color: #555;
  42. }
  43. fieldset {
  44. background-color: transparent;
  45. border: 0;
  46. margin: 0;
  47. padding: 0;
  48. }
  49. legend {
  50. font-weight: 600;
  51. margin-bottom: 0.375em;
  52. padding: 0;
  53. }
  54. label {
  55. display: block;
  56. font-weight: normal;
  57. margin-bottom: 0.375em;
  58. }
  59. input,
  60. select {
  61. display: block;
  62. font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  63. font-size: 16px;
  64. }
  65. input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea,
  66. select[multiple] {
  67. background-color: #fff;
  68. border: 1px solid #ddd;
  69. border-radius: 2px;
  70. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  71. box-sizing: border-box;
  72. font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  73. font-size: 16px;
  74. margin-bottom: 0.75em;
  75. padding: 0.5em;
  76. transition: border-color 150ms ease;
  77. width: 100%;
  78. }
  79. input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover,
  80. select[multiple]:hover {
  81. border-color: #b1b1b1;
  82. }
  83. input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus,
  84. select[multiple]:focus {
  85. border-color: #555;
  86. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(72, 72, 72, 0.7);
  87. outline: none;
  88. }
  89. input[type="color"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="email"]:disabled, input[type="month"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="text"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="week"]:disabled, input:not([type]):disabled, textarea:disabled,
  90. select[multiple]:disabled {
  91. background-color: #f2f2f2;
  92. cursor: not-allowed;
  93. }
  94. input[type="color"]:disabled:hover, input[type="date"]:disabled:hover, input[type="datetime"]:disabled:hover, input[type="datetime-local"]:disabled:hover, input[type="email"]:disabled:hover, input[type="month"]:disabled:hover, input[type="number"]:disabled:hover, input[type="password"]:disabled:hover, input[type="search"]:disabled:hover, input[type="tel"]:disabled:hover, input[type="text"]:disabled:hover, input[type="time"]:disabled:hover, input[type="url"]:disabled:hover, input[type="week"]:disabled:hover, input:not([type]):disabled:hover, textarea:disabled:hover,
  95. select[multiple]:disabled:hover {
  96. border: 1px solid #ddd;
  97. }
  98. textarea {
  99. resize: vertical;
  100. }
  101. [type="search"] {
  102. -webkit-appearance: none;
  103. -moz-appearance: none;
  104. appearance: none;
  105. }
  106. [type="checkbox"],
  107. [type="radio"] {
  108. display: inline;
  109. margin-right: 0.375em;
  110. }
  111. [type="file"] {
  112. margin-bottom: 0.75em;
  113. width: 100%;
  114. }
  115. select {
  116. margin-bottom: 1.5em;
  117. max-width: 100%;
  118. width: auto;
  119. }
  120. ul,
  121. ol {
  122. list-style-type: none;
  123. margin: 0;
  124. padding: 0;
  125. }
  126. dl {
  127. margin-bottom: 0.75em;
  128. }
  129. dl dt {
  130. font-weight: 600;
  131. margin-top: 0.75em;
  132. }
  133. dl dd {
  134. margin: 0;
  135. }
  136. picture,
  137. img {
  138. max-width: 100%;
  139. height: auto;
  140. vertical-align: top;
  141. }
  142. table {
  143. border-collapse: collapse;
  144. margin: 0.75em 0;
  145. table-layout: fixed;
  146. width: 100%;
  147. }
  148. th {
  149. border-bottom: 1px solid #a6a6a6;
  150. font-weight: 600;
  151. padding: 0.75em 0;
  152. text-align: left;
  153. }
  154. td {
  155. border-bottom: 1px solid #ddd;
  156. padding: 0.75em 0;
  157. }
  158. tr,
  159. td,
  160. th {
  161. vertical-align: middle;
  162. }
  163. body {
  164. color: #333;
  165. font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  166. font-size: 16px;
  167. line-height: 1.5;
  168. letter-spacing: 0.03em;
  169. }
  170. h1,
  171. h2,
  172. h3,
  173. h4,
  174. h5,
  175. h6 {
  176. font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  177. font-size: 16px;
  178. line-height: 1.3;
  179. margin: 0 0 0.75em;
  180. }
  181. h1 {
  182. font-size: 2.2em;
  183. }
  184. h2 {
  185. font-size: 1.8em;
  186. }
  187. h3 {
  188. font-size: 1.4em;
  189. }
  190. h4 {
  191. font-size: 1.2em;
  192. }
  193. h5 {
  194. font-size: 1.1em;
  195. }
  196. p {
  197. margin: 0 0 0.75em;
  198. }
  199. a {
  200. color: #555;
  201. text-decoration: none;
  202. transition: color 150ms ease;
  203. }
  204. a:active, a:focus, a:hover {
  205. color: #404040;
  206. }
  207. hr {
  208. border-bottom: 1px solid #ddd;
  209. border-left: 0;
  210. border-right: 0;
  211. border-top: 0;
  212. margin: 1.5em 0;
  213. }
  214. pre, code, tt {
  215. font: 1em "andale mono", "lucida console", monospace;
  216. line-height: 1.5;
  217. }
  218. pre {
  219. background-color: #efefef;
  220. display: block;
  221. padding: 5px;
  222. margin: 5px 0;
  223. border: 1px solid #aaaaaa;
  224. }
  225. abbr {
  226. border-bottom: 1px dotted #666666;
  227. cursor: help;
  228. white-space: nowrap;
  229. }