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

A reset CSS library with variables

@charset "UTF-8";

: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;
    --font:var(--font-style) var(--font-variant) var(--font-weight) var(--font-stretch) var(--font-size) / var(--line-height) var(--font-family);
    --letter-spacing:0.06em;
    
    --accent-color:oklch(0.59 0.11 281.84);
    
    --font-color:oklch(0.36 0.02 285.26);
    --font-color:oklch(0 0 0);
    --font-color-alt-1:oklch(0.44 0.02 284.16);
    --font-color-alt-2:oklch(0.6 0.02 285.26);
    
    --bg-color:oklch(0.98 0 0);
    --bg-color-text-alt-1:oklch(0.36 0.02 285.26);
    --bg-color-text:oklch(0.95 0.01 285.37);
    --bg-color-clickable:oklch(0.96 0.01 285.53);
    --border-color-control:oklch(0.75 0.02 285.18);
    --border-color-boundary:oklch(0.82 0.02 285.18);
    --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);
    
    --elements-block-level-space:1rem;
    
    --boundary--border:1px solid var(--border-color-boundary);
    
    --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);
    
    --backdrop--bg-color:var(--transparent-color);
    
    --dialog--height:auto;
    --dialog--width:auto;

    --blockquote--border-width:0 0 0 4px;
    --blockquote--border-style:solid;
    --blockquote--border-color:var(--border-color-boundary);
    --blockquote_--footer--color:var(--font-color-alt-2);
    --blockquote_--footer--margin:1rem 0 0;
    
    --pre--color:var(--font-color-alt-1);
    --pre--background:var(--bg-color-text);
    --pre--border:var(--boundary--border);
    --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(--pre--background) .9 c h / .8);

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

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

    --input--bg-color:white;
    
    --btn--font-weight:400;
    --btn--font-size:var(--font-size);
    --btn--line-height:1.5;
    --btn--font:normal var(--btn--font-weight) var(--btn--font-size) / var(--btn--line-height) var(--font-family);
    --btn--font-color:var(--font-color);
    --btn--bg-color:var(--bg-color-clickable);
    --btn--paddings:0.2lh 1.5em;
    --btn--paddings:.2lh .75lh .25lh;
    --btn--borders-width:1px;
    --btn--border-style:solid;
    --btn--border-color:var(--border-color-control);
    --btn--borders-radius:0.375em;
    --btn--borders-radius:0.25em;
    --btn--shadow:var(--shadow-clickable);

    --moz-input--paddings:0.125em 0.25em 0.25em;
    --moz-input--select-paddings:0.125em 0.25em 0.25em;
    --moz-btn-paddings:0.2lh 1.5em;
    --moz-btn-paddings:.2lh .75lh .25lh;
}

@layer base{
    *,
    *::before,
    *::after{
        box-sizing:border-box;
        margin:0;
        padding:0;
    }

    *:focus-visible{
        outline:var(--focus-outline);
    }

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

    html{
        font:var(--font);
        -webkit-text-size-adjust:100%;
        &:has(dialog[open], dialog[popover]:popover-open){
            overflow:hidden;
        }
    }

    body{
        accent-color:var(--accent-color);
        color:var(--font-color);
        background:var(--bg-color);
        letter-spacing:var(--letter-spacing);
        line-height:var(--line-height);
    }

    main{
        display:block;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        font:var(--h--font-weight) 4rem / var(--h--line-height) var(--h--font-family);
        
        letter-spacing:var(--h--letter-spacing);
        color:var(--h--color);
        
        margin:2.5rem 0 1.25rem;
    }

    h1{
        font-size:clamp(2.799rem, calc(2.799rem + 0.125vw), 3.799rem);
    }

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

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

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

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

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

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

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

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

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

    fieldset{
        border:var(--boundary--border);
        padding:0.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{
        font-weight:bold;
    }

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

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

        color:inherit;
        overflow:visible;
        margin:0.5rem 0;
    }

    a{
        display:inline-block;

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

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

    [href]{
        color:var(--href--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:bold;
    }

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

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

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

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

    small{
        font-size:80%;
    }

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

    sub{
        bottom:-0.25em;
    }

    sup{
        top:-0.5em;
    }

    img{
        border:none;
        
        max-height:90vh;
        max-width:90vw;
        
        display:inline-block;
    }
    
    figure{
        :where(&) img{
            margin:auto auto 0.5rem;
            line-height:1;
        }
    }
    
    figcaption{
        font-size:0.875em;
    }
    
    button,
    input,
    optgroup,
    option,
    select,
    textarea{
        color:var(--controls--font-color);
        font:var(--font-weight) var(--font-size)/var(--line-height) var(--font-family);
    }
    
    button,
    input,
    optgroup,
    select,
    textarea{
        border:var(--controls--border);
        margin:0;
        min-height:var(--controls--min-height);
        padding:var(--controls--padding);
    }
    
    button,
    input,
    select{
        text-transform:none;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn{
        cursor:pointer;

        font:var(--btn--font);
        line-height:var(--btn--line-height);
        color:var(--btn--font-color,);

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

        border:0 var(--btn--border-style) var(--btn--border-color, initial);
        border-width:var(--btn--borders-width, 1px);
        border-radius:var(--btn--borders-radius);

        box-shadow:var(--btn--shadow,);

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

        position:relative;

        padding:var(--btn--paddings);
        text-align:center;
        text-decoration:none;
        vertical-align:middle;

        overflow:visible;

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

        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;

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

        &:disabled{
            color:revert;
        }

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

    input{
        overflow:visible;
    }

    [type="color"]{
        cursor:pointer;
        background:inherit;
        padding:0.25em;
        min-height:2rem;
    }

    [type="checkbox"],
    [type="radio"]{
        min-height:initial;
        padding:0;
    }

    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="week"],
    [type="time"]{
        padding:0.125em 0.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 0.125em 0 0;
    }

    ::file-selector-button{
        -webkit-appearance:button;
        font:inherit;
        padding:0.125em 0.25em;
        margin:-1px 0.125em -1px -1px;
    }

    progress{
        display:inline-block;
        vertical-align:baseline;
    }

    select{
        min-width:1.7em;
    }

    select optgroup{
        border:none;
    }

    optgroup{
        color:var(--font-color-alt-1);
        padding:0.125em;
    }

    option{
        margin:0 0 0 .5em;
        padding:0.25em 0.25em 0.125em;
    }

    textarea{
        overflow:auto;
        vertical-align:top;
    }

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

    table{
        text-indent:0;
        border-color:inherit;
    }
    
    th{
        color:var(--font-color-alt-1);
    }

    td{
        padding:0.5em;
    }
    dialog,
    [popover]{
        pointer-events:none;
        
        color:inherit;
        background:var(--bg-color);
        border:none;
        opacity:0;
        
        box-shadow:var(--shadow-float);
        
        position:fixed;
        inset:50% auto auto 50%;

        display:none;
        padding:1rem;

        text-align:initial;
        
        overflow:visible;

        z-index:1000;
        
        transform:translate(-50%, -50%) scale(0.85);
        transition:opacity 350ms ease-in-out, transform 350ms ease-in-out, overlay 350ms allow-discrete, display 350ms allow-discrete;
    }

    dialog{
        min-height:5rem;
        height:var(--dialog--height, auto);
        max-height:calc(100vh - 4rem);
        
        min-width:clamp(280px, 100vw - 4rem, 400px);
        width:var(--dialog--width, auto);
        max-width:clamp(280px, 100vw - 4rem, 1160px);
    }

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

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

    dialog::backdrop,
    [popover]::backdrop{
        background:var(--backdrop--bg-color);
        backdrop-filter:blur(0.5rem);
    }

    template{
        display:none;
    }

    input,
    textarea,
    select,
    [type="color"]{
        background:var(--input--bg-color);
    }

    [type="checkbox"],
    [type="file"],
    [type="radio"],
    [type="range"]{
        cursor:pointer;
    }

    [type="range"]:focus-visible::-webkit-slider-thumb{
        border-radius:50%;
        outline:var(--focus-outline);

        height:0.8em;
        width:0.8em;
    }

    [type="radio"]:focus-visible{
        box-shadow:var(--focus--box-shadow);
    }

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

    [hidden]{
        display:none;
    }

    :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);
    }
    input,
    select,
    textarea,
    audio,
    video,
    details,
    button,
    [type="button"],
    [type="reset"],
    [type="submit"],
    .btn{
        margin:0.25rem;
    }

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

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

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

            &: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{
                cursor:pointer;
                background:var(--accent-color);
                border-radius:.25rem;
                height:.5rem;
            }
        }
    }
}