@bakung-ui/minimax.css/dist/minimax.css

A modern alternative to CSS reset library, with variables

:root{
  --font-style:normal;
  --font-variant:normal;
  --font-weight:300;
  --font-stretch:normal;
  --font-size:16px;
  --line-height:1.5;
  --font-family:Lato, "Helvetica Neue", sans-serif;
  --letter-spacing:0.06em;
  
  --accent-color:oklch(0.59 0.11 281.84);
  
  --font-color:oklch(0 0 0);
  --font-color:oklch(0.23 0.04 280.81);
  --font-color-alt-1:oklch(0.44 0.02 284.16);
  --font-color-alt-1:oklch(0.34 0.02 283.59);
  --font-color-alt-2:oklch(0.6 0.02 285.26);
  --font-color-alt-2:oklch(0.49 0.02 283.94);
  
  --background-color:oklch(0.98 0 0);
  --background-color-text-alt-1:oklch(0.36 0.02 285.26);
  --background-color-text:oklch(0.95 0.01 285.37);
  --background-color-clickable:oklch(0.96 0.01 285.53);
  --transparent-color:oklch(from var(--accent-color) l c h / .15);
  
  --href--color:oklch(0.56 0.22 276.32);
  --href--visited-color:oklch(0.42 0.13 279.17);
  
  --shadow-float:0 3px 10px 0 var(--transparent-color);
  --shadow-clickable:0 2px 2px 0 var(--transparent-color);
  
  --focus-outline:0.25rem solid var(--transparent-color);
  --focus--box-shadow:0 0 0 0.25rem var(--transparent-color);
  --border-color-control:oklch(0.75 0.02 285.18);
  
  --boundary--border-width:1px;
  --boundary--border-style:solid;
  --boundary--border-color:oklch(0.82 0.02 285.18);

  --h--font-family:Montserrat, sans-serif;
  --h--font-weight:500;
  --h--line-height:1;
  --h--letter-spacing:-0.016em;
  --h--color:var(--font-color-alt-1);
  --small-header--font-weight:500;
  
  --backdrop--background:oklch(0.34 0.03 284.04 / 0.9);
  
  --dialog--border-color:var(--boundary--border-color);
  --blockquote--border-width:0 0 0 4px;
  --blockquote--border-color:var(--boundary--border-color);
  --blockquote__footer--color:var(--font-color-alt-2);
  --blockquote__footer--margin:1rem 0 0;
  
  --pre--color:var(--font-color-alt-1);
  --pre--background:var(--background-color-text);
  --cks--font-family:"Sometype Mono", monospace, monospace;
  --cks--font-size:1.125rem;
  --cks--font-weight:400;

  --code--color:var(--font-color);
  --code--background:oklch(from var(--background-color-text) .9 c h / .4);

  --kbd--color:#fff;
  --kbd--background:var(--background-color-text-alt-1);
  --kbd--border-radius:3px;
  
  --kbd_-kbd--border-style:solid;
  --kbd_-kbd--border-color:var(--boundary--border-color);
  --kbd_-kbd--border-width:1px 2px 3px 1px;
  --kbd_-kbd--padding:0 0.5rem 0.25rem .25rem;
  
  --kbd__kbd--font-weight:400;
  --kbd__kbd--color:var(--font-color);

  --controls--color:var(--font-color);
  --controls--border-width:1px; 
  --controls--border-style:solid; 
  --controls--border-color:var(--border-color-control);
  --controls--border-radius:0.125em;
  --controls--min-height:1.75rem;
  --controls--padding:0.125em 0.25em 0.25em;

  --input--background:#fff;
  
  --btn--font-weight:400;
  --btn--font-size:var(--font-size);
  --btn--line-height:1.5;
  --btn--padding:.2lh .75lh .25lh;

  --moz-input--padding:0.125em 0.25em 0.25em;
  --moz-input--select-padding:0.125em 0.25em 0.25em;
  --moz-btn-padding:.2lh .75lh .25lh;
  
  --elements-block-level-space:1rem;
}
@layer base{
  *,:after,:before{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }

  :focus-visible{
    outline:var(--focus-outline);
    outline-offset:0;
  }

  :where([type=range]):focus-visible{
    outline:none;
  }

  html{
    font:var(--font, var(--font-style) var(--font-variant) var(--font-weight)
    var(--font-stretch) var(--font-size) / var(--line-height)
    var(--font-family));
    -moz-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    
    scroll-behavior:smooth;
    &:has(dialog[open],dialog[popover]:popover-open){
      overflow:hidden;
    }
  }

  body{
    accent-color:var(--accent-color);
    background:var(--background-color);
    color:var(--font-color);
    letter-spacing:var(--letter-spacing);
    
    min-height:100vh;
  }

  main{
    display:block;
  }

  h1,h2,h3,h4,h5,h6{
    color:var(--h--color);
    font:var(--h--font-weight) 4rem / var(--h--line-height) var(--h--font-family);
    
    letter-spacing:var(--h--letter-spacing);
    
    margin:2.5rem 0 1.25rem;
  }
  
  h1{
    font-size:clamp(2.799rem, calc(2.799rem + .125vw), 3.799rem);
  }

  h2{
    font-size:clamp(2.332rem, calc(2.332rem + .125vw), 3.332rem);
  }

  h3{
    font-size:clamp(1.944rem, calc(1.944rem + .125vw), 2.944rem);
  }

  h3,h4{
    line-height:1.125;
  }

  h4{
    font-size:clamp(1.62rem, calc(1.62rem + .125vw), 2.62rem);
  }

  h5{
    font-size:clamp(1.35rem, calc(1.35rem + .125vw), 2.35rem);
  }

  h5,h6{
    letter-spacing:normal;
    line-height:clamp(1em, 1.5em - .75vw, 1.5em);
  }

  h6{
    font-size:clamp(1.125rem, calc(1.125rem + .125vw), 2.125rem);
  }

  blockquote{
    --data-quoter-marker:attr(data-quoter-marker, "\2014 \00A0");
    border-color:var(--blockquote--border-color);
    border-style:var(--blockquote--border-style, solid);
    border-width:var(--blockquote--border-width);
    margin:0 0 0 1rem;
    padding:1rem;

    :where(&) footer{
      color:var(--blockquote__footer--color);
      margin:var(--blockquote__footer--margin);
    }

    :where(&) footer:before{
      content:var(--data-quoter-marker);
    }
  }

  ol,ul{
    padding:0 0 0 1.25em;
  }

  fieldset{
    border:0 var(--boundary--border-style) var(--boundary--border-color);
    border-width:var(--boundary--border-width);
    padding:.5rem;

    :where(&)>label{
      margin:0 1rem 0 0;
    }
  }

  legend{
    color:inherit;
    display:table;
    padding:0;
    white-space:normal;
  }

  details{
    display:block;
  }

  summary{
    cursor:pointer;
    display:list-item;
  }

  dt{
    color:var(--font-color-alt-1);
    font-weight:var(--small-header--font-weight, bold);
  }

  pre{
    background:var(--pre--background);
    border:var(--pre--border, var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color));
    color:var(--pre--color);
    overflow:auto;
    padding:1rem;
  }

  hr{
    border:var(--boundary--border-width) var(--boundary--border-style) var(--boundary--border-color);
    border-width:0 0 1px;
    box-sizing:content-box;

    color:inherit;
    margin:.5rem 0;
    overflow:visible;
  }

  a{
    display:inline-block;
  }

  [href]{
    color:var(--href--color);

    &:focus,&:hover{
      filter:brightness(105%);
    }

    &:visited{
      color:var(--href--visited-color);
    }
  }

  abbr[title]{
    border-bottom:none;
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted;
  }

  audio,video{
    display:inline-block;
  }

  audio:not([controls]){
    display:none;
  }

  b,strong{
    font-weight:700;
  }

  code,kbd,samp{
    font:normal var(--cks--font-weight) var(--cks--font-size) var(--cks--font-family);
    font-optical-sizing:auto;
  }

  code{
    background:var(--code--background);
    color:var(--code--color);
  }

  kbd{
    background:var(--kbd--background);
    border-radius:var(--kbd--border-radius);
    color:var(--kbd--color);

    &:has(kbd){
      background-color:unset;
      border:0 var(--kbd_-kbd--border-style) var(--kbd_-kbd--border-color);
      border-width:var(--kbd_-kbd--border-width);
      padding:var(--kbd_-kbd--padding);
    }
    
    kbd{
      background-color:unset;
      
      color:var(--kbd__kbd--color);
      font-weight:var(--kbd__kbd--font-weight);
    }
  }

  small{
    font-size:80%;
  }

  sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
  }

  sub{
    bottom:-.25em;
  }

  sup{
    top:-.5em;
  }

  img{
    border:none;
    
    display:inline-block;
    
    max-height:90vh;
    max-width:90vw;
  }
  
  figure{
    :where(&) img{
      line-height:1;
      margin:auto auto .5rem;
    }
  }
  
  figcaption{
    font-size:.875em;
  }

  svg:not(:root){
    overflow:hidden;
  }

  table{
    border-color:inherit;
    text-indent:0;
  }
  
  th{
    color:var(--font-color-alt-1);
    font-weight:var(--small-header--font-weight, bold);
  }

  td{
    padding:.5em;
  }
  [popover],dialog,template{
    display:none;
  }
  [popover],dialog{
    background:var(--background-color);
    border:unset;
    
    box-shadow:var(--shadow-float);
    
    color:inherit;
    inset:50% auto auto 50%;
    opacity:0;
    
    overflow:visible;
    padding:1rem;
    pointer-events:none;
    
    position:fixed;

    text-align:initial;
    
    transform:translate(-50%, -50%) scale(.85);
    transition:opacity .35s ease-in-out,transform .35s ease-in-out,overlay allow-discrete .35s,display allow-discrete .35s;

    z-index:1000;
  }

  dialog{
    background:var(--dialog--background, var(--background-color));
    border:0 var(--dialog--border-style, solid) var(--dialog--border-color);
    border-radius:var(--dialog--border-radius, .125em);
      border-width:var(--dialog--border-width, 1px);
    color:var(--dialog--color, var(--font-color));
    height:var(--dialog--height, auto);
    max-height:calc(100vh - 4rem);
    max-width:clamp(280px, 100vw - 4rem, 1160px);
    
    min-height:5rem;
    
    min-width:clamp(280px, 100vw - 4rem, 400px);
    width:var(--dialog--width, auto);
  }

  [popover]{
    height:var(--popover--height, auto);
    max-height:calc(100vh - 2rem);
    max-width:clamp(4rem, 100vw - 2rem, 1200px);
    
    width:var(--popover--width, auto);
  }

  [popover]:popover-open,dialog[open]{
    
    display:block;
    
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
    @starting-style{
      opacity:0;
      transform:translate(-50%, -50%) scale(.85);
    }
  }

  [popover]::backdrop,dialog::backdrop{
    backdrop-filter:blur(1px);
    background:var(--backdrop--background);
  }

  progress{
    display:inline-block;
    vertical-align:baseline;
  }
  
  button,input,optgroup,option,select,textarea{
    color:var(--controls--color);
    font:var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
  }
  
  button,input,optgroup,select,textarea{
    border:0 var(--controls--border-style) var(--controls--border-color);
      border-width:var(--controls--border-width);
    margin:0;
    min-height:var(--controls--min-height);
    padding:var(--controls--padding);
  }
  
  button,input,select{
    text-transform:none;
  }

  .btn,[type=button],[type=reset],[type=submit],button{

    -webkit-appearance:button;
    -moz-appearance:button;
    appearance:button;

    background-color:var(--btn--background, var(--background-color-clickable, revert));

    border:0 var(--btn--border-style, solid) var(--btn--border-color, var(--border-color-control));
    border-radius:var(--btn--border-radius, .25em);
      border-width:var(--btn--border-width, 1px);

    box-shadow:var(--btn--shadow, var(--shadow-clickable));
    color:var(--btn--color, var(--font-color));
    cursor:pointer;

    font:var(--btn--font, normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family));

    min-height:var(--controls--min-height);

    overflow:visible;

    padding:var(--btn--padding);

    position:relative;
    text-align:center;
    text-decoration:none;

    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    vertical-align:middle;
    :where(&:hover,&:focus):not(:disabled){
      filter:brightness(103%);
    }

    :where(&:active):not(:disabled){
      box-shadow:none;
      filter:brightness(105%);
      transform:translateY(1px);
    }

    &:disabled{
      color:revert;
    }

    &:focus-visible{
      box-shadow:none;
    }
  }

  [type=color],input,select,textarea{
    background:var(--input--background);
    border-radius:var(--controls--border-radius);
  }
  
  select{
    min-width:1.7em;
  }
  
  optgroup{
    border:none;
    color:var(--font-color-alt-2);
    padding:.125em;
  }
  
  option{
    margin:0 0 0 .5em;
    padding:.25em .25em .125em;
    
    &:checked{
      background-color:var(--background-color-text);
      color:var(--accent-color);
    }
  }
  
  textarea{
    overflow:auto;
    vertical-align:top;
  }
  
  input{
    overflow:visible;
  }
  
  [type=checkbox],[type=color],[type=file],[type=radio],[type=range]{
    cursor:pointer;
  }
  
  [type=color]{
    background:inherit;
    min-height:2rem;
    padding:.25em;
  }

  [type=date],[type=datetime-local],[type=month],[type=time],[type=week]{
    padding:.125em .25em;
  }

  [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto;
  }

  [type=search]{
    -webkit-appearance:textfield;
    appearance:textfield;
  }

  [type=search]::-webkit-search-decoration{
    -webkit-appearance:none;
  }

  [type=file]{
    padding:0 .125em 0 0;
  }

  ::file-selector-button{
    -webkit-appearance:button;
    
    background-color:var(--btn--background, var(--background-color-clickable, revert));
    border:0 var(--btn--border-style, solid) var(--btn--border-color, var(--border-color-control));
      border-width:var(--btn--border-width, 1px);
    color:var(--btn--color, var(--font-color));
    cursor:pointer;
    
    font:var(--btn--font, normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family));
    margin:-1px .125em -1px -1px;
    
    padding:.125em .25em;
  }
  
  [type=range]:focus-visible::-webkit-slider-thumb{
    border-radius:50%;

    height:.8em;
    outline:var(--focus-outline);
    width:.8em;
  }
  
  [type=checkbox],[type=radio]{
    min-height:auto;
    padding:0;
  }
  
  input[type=checkbox]{
    -webkit-appearance:none;
    -moz-appearance:none;
        appearance:none;
    display:inline-grid;
    font-size:inherit;
    height:.75em;
    place-content:center;
    width:.75em;
  }
    
  input[type=checkbox]:before{
    background-color:var(--accent-color);
    -webkit-clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
            clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
    content:"";
    height:.65em;
    transform:scale(0);
    width:.5em;
  }

  input[type=checkbox]:checked:before{
    transform:scale(1) rotate(15deg);
  }
  
  input[type=radio]{
    -webkit-appearance:none;
    -moz-appearance:none;
        appearance:none;
    border-radius:50%;
    display:inline-grid;
    font-size:inherit;
    height:.875em;
    place-content:center;
    
    translate:0 -.05lh;
    width:.875em;
  }

  input[type=radio]:before{
    background-color:var(--accent-color);
    border-radius:50%;
    content:"";
    height:.5em;
    transform:scale(0);
    width:.5em;
  }

  input[type=radio]:checked:before{
    transform:scale(1);
  }

  [disabled]{
    cursor:not-allowed;
    filter:contrast(.5);
  }

  [hidden]{
    display:none;
  }
  :target{
    scroll-margin-block:5ex;
  }

  :where(dl,ol,ul,fieldset,p,details,pre,form,address,blockquote,figure,table):has(+:is(dl,ol,ul,fieldset,p,details,pre,form,address,blockquote,figure,table,nav)){
    margin-bottom:var(--elements-block-level-space);
  }
  .btn,[type=button],[type=reset],[type=submit],audio,button,details,input,select,textarea,video{
    margin:.25rem;
  }

  @-moz-document url-prefix(){
    .btn,[type=button],[type=reset],[type=submit],button{
      padding:var(--moz-btn-padding);
    }

    [type=date],[type=datetime-local],[type=datetime],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],textarea{
      padding:var(--moz-input--padding);
    }

    select{
      min-width:1.5em;
      padding:var(--moz-input--select-padding);

      &:focus{
        outline:var(--focus-outline);
      }
    }

    input[type=range]{
      background:transparent;
      border:none;

      &:active{
        filter:brightness(120%);
      }

      &::-moz-range-thumb{
        background:var(--accent-color);
        border:none;

        height:1rem;
        width:1rem;
      }

      &:focus-visible::-moz-range-thumb{
        outline:var(--focus-outline);
      }

      &::-moz-range-track{
        background:var(--accent-color);
        border-radius:.25rem;
        cursor:pointer;
        height:.5rem;
      }
    }
  }
}