opinionated.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. /* Document
  2. * ========================================================================== */
  3. /**
  4. * 1. Correct the line height in all browsers.
  5. * 2. Prevent adjustments of font size after orientation changes in
  6. * IE on Windows Phone and in iOS.
  7. */
  8. html {
  9. line-height: 1.15; /* 1 */
  10. -ms-text-size-adjust: 100%; /* 2 */
  11. -webkit-text-size-adjust: 100%; /* 2 */
  12. }
  13. /* Sections
  14. * ========================================================================== */
  15. /**
  16. * Remove the margin in all browsers. (opinionated)
  17. */
  18. body {
  19. margin: 0;
  20. }
  21. /**
  22. * Correct the font size and margin on `h1` elements within `section` and
  23. * `article` contexts in Chrome, Edge, Firefox, and Safari.
  24. */
  25. h1 {
  26. font-size: 2em;
  27. margin: 0.67em 0;
  28. }
  29. /* Grouping content
  30. * ========================================================================== */
  31. /**
  32. * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
  33. */
  34. dl dl,
  35. dl ol,
  36. dl ul,
  37. ol dl,
  38. ul dl {
  39. margin: 0;
  40. }
  41. /**
  42. * Remove the margin on nested lists in Edge 18- and IE.
  43. */
  44. ol ol,
  45. ol ul,
  46. ul ol,
  47. ul ul {
  48. margin: 0;
  49. }
  50. /**
  51. * 1. Add the correct box sizing in Firefox.
  52. * 2. Show the overflow in Edge 18- and IE.
  53. */
  54. hr {
  55. box-sizing: content-box; /* 1 */
  56. height: 0; /* 1 */
  57. overflow: visible; /* 2 */
  58. }
  59. /**
  60. * Add the correct display in IE.
  61. */
  62. main {
  63. display: block;
  64. }
  65. /**
  66. * 1. Correct the inheritance and scaling of font size in all browsers.
  67. * 2. Correct the odd `em` font sizing in all browsers.
  68. */
  69. pre {
  70. font-family: monospace, monospace; /* 1 */
  71. font-size: 1em; /* 2 */
  72. }
  73. /* Text-level semantics
  74. * ========================================================================== */
  75. /**
  76. * Remove the gray background on active links in IE 10.
  77. */
  78. a {
  79. background-color: transparent;
  80. }
  81. /**
  82. * Add the correct text decoration in Edge 18-, IE, and Safari.
  83. */
  84. abbr[title] {
  85. text-decoration: underline;
  86. text-decoration: underline dotted;
  87. }
  88. /**
  89. * Add the correct font weight in Chrome, Edge, and Safari.
  90. */
  91. b,
  92. strong {
  93. font-weight: bolder;
  94. }
  95. /**
  96. * 1. Correct the inheritance and scaling of font size in all browsers.
  97. * 2. Correct the odd `em` font sizing in all browsers.
  98. */
  99. code,
  100. kbd,
  101. samp {
  102. font-family: monospace, monospace; /* 1 */
  103. font-size: 1em; /* 2 */
  104. }
  105. /**
  106. * Add the correct font size in all browsers.
  107. */
  108. small {
  109. font-size: 80%;
  110. }
  111. /* Embedded content
  112. * ========================================================================== */
  113. /**
  114. * Add the correct display in IE 9-.
  115. */
  116. audio,
  117. video {
  118. display: inline-block;
  119. }
  120. /**
  121. * Add the correct display in iOS 4-7.
  122. */
  123. audio:not([controls]) {
  124. display: none;
  125. height: 0;
  126. }
  127. /**
  128. * Remove the border on images within links in IE 10-.
  129. */
  130. img {
  131. border-style: none;
  132. }
  133. /**
  134. * Hide the overflow in IE.
  135. */
  136. svg:not(:root) {
  137. overflow: hidden;
  138. }
  139. /* Forms
  140. * ========================================================================== */
  141. /**
  142. * Remove the margin on controls in Safari.
  143. */
  144. button,
  145. input,
  146. select {
  147. margin: 0;
  148. }
  149. /**
  150. * 1. Show the overflow in IE.
  151. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
  152. */
  153. button {
  154. overflow: visible; /* 1 */
  155. text-transform: none; /* 2 */
  156. }
  157. /**
  158. * Correct the inability to style buttons in iOS and Safari.
  159. */
  160. button,
  161. [type="button"],
  162. [type="reset"],
  163. [type="submit"] {
  164. -webkit-appearance: button;
  165. }
  166. /**
  167. * Correct the padding in Firefox.
  168. */
  169. fieldset {
  170. padding: 0.35em 0.75em 0.625em;
  171. }
  172. /**
  173. * Show the overflow in Edge 18- and IE.
  174. */
  175. input {
  176. overflow: visible;
  177. }
  178. /**
  179. * 1. Correct the text wrapping in Edge 18- and IE.
  180. * 2. Correct the color inheritance from `fieldset` elements in IE.
  181. */
  182. legend {
  183. box-sizing: border-box; /* 1 */
  184. color: inherit; /* 2 */
  185. display: table; /* 1 */
  186. max-width: 100%; /* 1 */
  187. white-space: normal; /* 1 */
  188. }
  189. /**
  190. * 1. Add the correct display in Edge 18- and IE.
  191. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
  192. */
  193. progress {
  194. display: inline-block; /* 1 */
  195. vertical-align: baseline; /* 2 */
  196. }
  197. /**
  198. * Remove the inheritance of text transform in Firefox.
  199. */
  200. select {
  201. text-transform: none;
  202. }
  203. /**
  204. * 1. Change the font styles in all browsers (opinionated).
  205. * 2. Remove the margin in Firefox and Safari.
  206. * 3. Remove the default vertical scrollbar in IE.
  207. */
  208. textarea {
  209. font-family: inherit; /* 1 */
  210. font-size: 100%; /* 1 */
  211. line-height: 1.15; /* 1 */
  212. margin: 0; /* 2 */
  213. overflow: auto; /* 3 */
  214. }
  215. /**
  216. * 1. Add the correct box sizing in IE 10-.
  217. * 2. Remove the padding in IE 10-.
  218. */
  219. [type="checkbox"],
  220. [type="radio"] {
  221. box-sizing: border-box; /* 1 */
  222. padding: 0; /* 2 */
  223. }
  224. /**
  225. * 1. Correct the odd appearance in Chrome, Edge, and Safari.
  226. * 2. Correct the outline style in Safari.
  227. */
  228. [type="search"] {
  229. -webkit-appearance: textfield; /* 1 */
  230. outline-offset: -2px; /* 2 */
  231. }
  232. /**
  233. * Correct the cursor style of increment and decrement buttons in Safari.
  234. */
  235. ::-webkit-inner-spin-button,
  236. ::-webkit-outer-spin-button {
  237. height: auto;
  238. }
  239. /**
  240. * Correct the text style of placeholders in Chrome, Edge, and Safari.
  241. */
  242. ::-webkit-input-placeholder {
  243. color: inherit;
  244. opacity: 0.54;
  245. }
  246. /**
  247. * Remove the inner padding in Chrome, Edge, and Safari on macOS.
  248. */
  249. ::-webkit-search-decoration {
  250. -webkit-appearance: none;
  251. }
  252. /**
  253. * 1. Correct the inability to style upload buttons in iOS and Safari.
  254. * 2. Change font properties to `inherit` in Safari.
  255. */
  256. ::-webkit-file-upload-button {
  257. -webkit-appearance: button; /* 1 */
  258. font: inherit; /* 2 */
  259. }
  260. /**
  261. * Remove the inner border and padding of focus outlines in Firefox.
  262. */
  263. ::-moz-focus-inner {
  264. border-style: none;
  265. padding: 0;
  266. }
  267. /**
  268. * Restore the focus outline styles unset by the previous rule in Firefox.
  269. */
  270. :-moz-focusring {
  271. outline: 1px dotted ButtonText;
  272. }
  273. /**
  274. * Remove the additional :invalid styles in Firefox.
  275. */
  276. :-moz-ui-invalid {
  277. box-shadow: none;
  278. }
  279. /* Interactive
  280. * ========================================================================== */
  281. /*
  282. * Add the correct display in Edge 18- and IE.
  283. */
  284. details {
  285. display: block;
  286. }
  287. /*
  288. * Add the correct styles in Edge 18-, IE, and Safari.
  289. */
  290. dialog {
  291. background-color: white;
  292. border: solid;
  293. color: black;
  294. display: block;
  295. height: -moz-fit-content;
  296. height: -webkit-fit-content;
  297. height: fit-content;
  298. left: 0;
  299. margin: auto;
  300. padding: 1em;
  301. position: absolute;
  302. right: 0;
  303. width: -moz-fit-content;
  304. width: -webkit-fit-content;
  305. width: fit-content;
  306. }
  307. dialog:not([open]) {
  308. display: none;
  309. }
  310. /*
  311. * Add the correct display in all browsers.
  312. */
  313. summary {
  314. display: list-item;
  315. }
  316. /* Scripting
  317. * ========================================================================== */
  318. /**
  319. * Add the correct display in IE 9-.
  320. */
  321. canvas {
  322. display: inline-block;
  323. }
  324. /**
  325. * Add the correct display in IE.
  326. */
  327. template {
  328. display: none;
  329. }
  330. /* User interaction
  331. * ========================================================================== */
  332. /**
  333. * Add the correct display in IE 10-.
  334. */
  335. [hidden] {
  336. display: none;
  337. }