You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

360 lines
6.6 KiB

2 years ago
  1. /*
  2. 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  3. 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
  4. */
  5. *,
  6. ::before,
  7. ::after {
  8. box-sizing: border-box; /* 1 */
  9. border-width: 0; /* 2 */
  10. border-style: solid; /* 2 */
  11. border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
  12. }
  13. ::before,
  14. ::after {
  15. --tw-content: '';
  16. }
  17. /*
  18. 1. Use a consistent sensible line-height in all browsers.
  19. 2. Prevent adjustments of font size after orientation changes in iOS.
  20. 3. Use a more readable tab size.
  21. 4. Use the user's configured `sans` font-family by default.
  22. */
  23. html {
  24. line-height: 1.5; /* 1 */
  25. -webkit-text-size-adjust: 100%; /* 2 */
  26. -moz-tab-size: 4; /* 3 */
  27. tab-size: 4; /* 3 */
  28. font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
  29. }
  30. /*
  31. 1. Remove the margin in all browsers.
  32. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
  33. */
  34. body {
  35. margin: 0; /* 1 */
  36. line-height: inherit; /* 2 */
  37. }
  38. /*
  39. 1. Add the correct height in Firefox.
  40. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  41. 3. Ensure horizontal rules are visible by default.
  42. */
  43. hr {
  44. height: 0; /* 1 */
  45. color: inherit; /* 2 */
  46. border-top-width: 1px; /* 3 */
  47. }
  48. /*
  49. Add the correct text decoration in Chrome, Edge, and Safari.
  50. */
  51. abbr:where([title]) {
  52. text-decoration: underline dotted;
  53. }
  54. /*
  55. Remove the default font size and weight for headings.
  56. */
  57. h1,
  58. h2,
  59. h3,
  60. h4,
  61. h5,
  62. h6 {
  63. font-size: inherit;
  64. font-weight: inherit;
  65. }
  66. /*
  67. Reset links to optimize for opt-in styling instead of opt-out.
  68. */
  69. a {
  70. color: inherit;
  71. text-decoration: inherit;
  72. }
  73. /*
  74. Add the correct font weight in Edge and Safari.
  75. */
  76. b,
  77. strong {
  78. font-weight: bolder;
  79. }
  80. /*
  81. 1. Use the user's configured `mono` font family by default.
  82. 2. Correct the odd `em` font sizing in all browsers.
  83. */
  84. code,
  85. kbd,
  86. samp,
  87. pre {
  88. font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
  89. font-size: 1em; /* 2 */
  90. }
  91. /*
  92. Add the correct font size in all browsers.
  93. */
  94. small {
  95. font-size: 80%;
  96. }
  97. /*
  98. Prevent `sub` and `sup` elements from affecting the line height in all browsers.
  99. */
  100. sub,
  101. sup {
  102. font-size: 75%;
  103. line-height: 0;
  104. position: relative;
  105. vertical-align: baseline;
  106. }
  107. sub {
  108. bottom: -0.25em;
  109. }
  110. sup {
  111. top: -0.5em;
  112. }
  113. /*
  114. 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  115. 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  116. 3. Remove gaps between table borders by default.
  117. */
  118. table {
  119. text-indent: 0; /* 1 */
  120. border-color: inherit; /* 2 */
  121. border-collapse: collapse; /* 3 */
  122. }
  123. /*
  124. 1. Change the font styles in all browsers.
  125. 2. Remove the margin in Firefox and Safari.
  126. 3. Remove default padding in all browsers.
  127. */
  128. button,
  129. input,
  130. optgroup,
  131. select,
  132. textarea {
  133. font-family: inherit; /* 1 */
  134. font-size: 100%; /* 1 */
  135. font-weight: inherit; /* 1 */
  136. line-height: inherit; /* 1 */
  137. color: inherit; /* 1 */
  138. margin: 0; /* 2 */
  139. padding: 0; /* 3 */
  140. }
  141. /*
  142. Remove the inheritance of text transform in Edge and Firefox.
  143. */
  144. button,
  145. select {
  146. text-transform: none;
  147. }
  148. /*
  149. 1. Correct the inability to style clickable types in iOS and Safari.
  150. 2. Remove default button styles.
  151. */
  152. button,
  153. [type='button'],
  154. [type='reset'],
  155. [type='submit'] {
  156. -webkit-appearance: button; /* 1 */
  157. background-color: transparent; /* 2 */
  158. background-image: none; /* 2 */
  159. }
  160. /*
  161. Use the modern Firefox focus style for all focusable elements.
  162. */
  163. :-moz-focusring {
  164. outline: auto;
  165. }
  166. /*
  167. Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
  168. */
  169. :-moz-ui-invalid {
  170. box-shadow: none;
  171. }
  172. /*
  173. Add the correct vertical alignment in Chrome and Firefox.
  174. */
  175. progress {
  176. vertical-align: baseline;
  177. }
  178. /*
  179. Correct the cursor style of increment and decrement buttons in Safari.
  180. */
  181. ::-webkit-inner-spin-button,
  182. ::-webkit-outer-spin-button {
  183. height: auto;
  184. }
  185. /*
  186. 1. Correct the odd appearance in Chrome and Safari.
  187. 2. Correct the outline style in Safari.
  188. */
  189. [type='search'] {
  190. -webkit-appearance: textfield; /* 1 */
  191. outline-offset: -2px; /* 2 */
  192. }
  193. /*
  194. Remove the inner padding in Chrome and Safari on macOS.
  195. */
  196. ::-webkit-search-decoration {
  197. -webkit-appearance: none;
  198. }
  199. /*
  200. 1. Correct the inability to style clickable types in iOS and Safari.
  201. 2. Change font properties to `inherit` in Safari.
  202. */
  203. ::-webkit-file-upload-button {
  204. -webkit-appearance: button; /* 1 */
  205. font: inherit; /* 2 */
  206. }
  207. /*
  208. Add the correct display in Chrome and Safari.
  209. */
  210. summary {
  211. display: list-item;
  212. }
  213. /*
  214. Removes the default spacing and border for appropriate elements.
  215. */
  216. blockquote,
  217. dl,
  218. dd,
  219. h1,
  220. h2,
  221. h3,
  222. h4,
  223. h5,
  224. h6,
  225. hr,
  226. figure,
  227. p,
  228. pre {
  229. margin: 0;
  230. }
  231. fieldset {
  232. margin: 0;
  233. padding: 0;
  234. }
  235. legend {
  236. padding: 0;
  237. }
  238. ol,
  239. ul,
  240. menu {
  241. list-style: none;
  242. margin: 0;
  243. padding: 0;
  244. }
  245. /*
  246. Prevent resizing textareas horizontally by default.
  247. */
  248. textarea {
  249. resize: vertical;
  250. }
  251. /*
  252. 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
  253. 2. Set the default placeholder color to the user's configured gray 400 color.
  254. */
  255. input::placeholder,
  256. textarea::placeholder {
  257. opacity: 1; /* 1 */
  258. color: theme('colors.gray.400', #9ca3af); /* 2 */
  259. }
  260. /*
  261. Set the default cursor for buttons.
  262. */
  263. button,
  264. [role="button"] {
  265. cursor: pointer;
  266. }
  267. /*
  268. Make sure disabled buttons don't get the pointer cursor.
  269. */
  270. :disabled {
  271. cursor: default;
  272. }
  273. /*
  274. 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  275. 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
  276. This can trigger a poorly considered lint error in some tools but is included by design.
  277. */
  278. img,
  279. svg,
  280. video,
  281. canvas,
  282. audio,
  283. iframe,
  284. embed,
  285. object {
  286. display: block; /* 1 */
  287. vertical-align: middle; /* 2 */
  288. }
  289. /*
  290. Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
  291. */
  292. img,
  293. video {
  294. max-width: 100%;
  295. height: auto;
  296. }