nitropage/src/features/admin/css/reset.css

A free and open source, extensible visual page builder based on SolidStart.

/* 
  https://piccalil.li/blog/a-more-modern-css-reset/
  https://www.joshwcomeau.com/css/custom-css-reset/ 
  https://unpkg.com/tailwindcss@3.4.3/src/css/preflight.css
  https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
*/

@layer base {
  /*
    2. Remove default margin
  */
  * {
    padding: 0;
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    6. Remove built-in form typography styles
  */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root,
  #__next {
    isolation: isolate;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  ol,
  ul {
    list-style: none;
    padding: 0;
  }

  *,
  ::before,
  ::after {
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
  }

  button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    color: inherit;
  }

  :-moz-focusring {
    outline: auto;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  [hidden] {
    display: none;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  small {
    font-size: 80%;
  }

  /* 
    https://www.youtube.com/watch?v=cH8VbLM1958
    https://defensivecss.dev/tip/flexbox-min-content-size/
  */
  /*
  span,
  p,
  div {
    min-width: 0;
  }
  */

  html {
    overscroll-behavior: none;
  }

  body {
    background-color: #fff;
    color: var(--np-slate-900);
  }
}