css-ui.min.css

/* {"name":"css-ui","version":"3.0.7","author":"Lcf.vs <michael.rouges@gmail.com>","license":"MIT"} */
::after,::before,a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,button,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,progress,q,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video{font:inherit;vertical-align:baseline;box-sizing:border-box;border:none;outline:0;list-style:none;text-decoration:none;background:0 0;margin:0;padding:0;color:inherit}:active,:focus{outline:0}html{background:var(--css-ui--bg);font-family:var(--css-ui--font);height:100vh;font-size:1em;overflow-x:hidden}body{display:table;width:100%;padding-top:var(--css-ui--header-height);height:100%}body>header,body>nav{position:fixed;top:0;left:0;user-select:none}body>header{background:var(--css-ui--header-bg);width:100%;height:var(--css-ui--header-height);z-index:1}body>header>h1{position:fixed;left:var(--css-ui--menu--icon-size);line-height:var(--css-ui--header-height)}body>nav{bottom:0;margin-top:var(--css-ui--header-height);z-index:1}body>nav>[tabindex="-1"],body>nav>[tabindex="1"]{background:var(--css-ui--header-bg);color:var(--css-ui--menu--color);position:fixed;top:0;display:block;width:var(--css-ui--menu--icon-size);text-align:center;line-height:var(--css-ui--menu--icon-size);z-index:1}body>nav>[tabindex="1"]{z-index:2}body>nav>[tabindex="1"]:focus{opacity:0;pointer-events:none}body>nav>[tabindex="1"]+a+ol{background:var(--css-ui--menu--bg);color:var(--css-ui--menu--color);height:var(--css-ui--menu--height);width:0;transition:width .2s .2s}body>nav>[tabindex="1"]:focus+a+ol,body>nav>[tabindex="1"]:focus+a+ol>li>a{width:var(--css-ui--menu--width)}body>nav>[tabindex="-1"]+ol>li{height:var(--css-ui--menu--icon-size);border-bottom:var(--css-ui--menu--border)}body>nav>[tabindex="-1"]+ol>li>a{transition:width .2s .2s;overflow-x:hidden;line-height:var(--css-ui--menu--icon-size);display:inline-block;min-width:100%;white-space:nowrap;width:0}body>nav>[tabindex="-1"]+ol>li>a::before{width:var(--css-ui--menu--icon-size);display:inline-block;text-align:center}body>nav>[tabindex="-1"]+ol>li>a:focus,body>nav>[tabindex="-1"]+ol>li>a:hover{background:rgba(255,255,255,.3)}body>nav>[tabindex="1"]:focus+a+ol::before{content:'';display:block;width:100%;height:100%;position:fixed;top:var(--css-ui--header-height);left:0;z-index:-1;background-color:var(--css-ui--menu--overlay-bg)}main{position:relative;display:table-cell;vertical-align:middle;text-align:center;padding:1em;height:calc(100vh - var(--css-ui--header-height))}main>h1{font-weight:700;margin:auto;display:block}main>*{display:inline-block;margin:var(--css-ui--padding);padding:var(--css-ui--padding);width:95%;text-align:left}@media screen and (min-width:50em){main>*{width:var(--css-ui--contents-width)}}@media (prefers-reduced-motion:reduce){body>nav>[tabindex="-1"]+ol>li>a,body>nav>[tabindex="1"]+a+ol{transition:none}}