1 line
8.3 KiB
Plaintext
1 line
8.3 KiB
Plaintext
{"version":3,"sources":["src/grayscale.css"],"names":[],"mappings":";AACA,K,CACI,S,CACA,S,CACA,S,CACA,+C,CACA,qB,CACA,kC,CACA,U,CACA,Y,CACA,W,CACA,a,CACA,Y,CAGJ,UAAU,kB,CAAmB,kB,CACzB,6F,CACA,4F,CACA,gC,CACA,gC,CACA,6B,CACA,4B,CAGJ,iB,CACI,6F,CACA,4F,CACA,gC,CACA,gC,CACA,6B,CACA,8B,CAGJ,C,CAAW,M,CAAT,O,CAIG,I,CAAL,I,CAHI,qB,CAGC,I,CAAL,I,CACI,oB,CACA,e,CACA,Q,CAEA,uB,CACA,qB,CACA,sB,CACA,yB,CACA,uB,CAEA,S,CAGJ,a,CAAc,K,CACV,iB,CAGJ,sB,CAAuB,K,CACnB,U,CAGoB,K,CAApB,K,CAAM,M,CAAV,G,CAAiB,M,CAAa,K,CAC1B,W,CACA,c,CACA,Q,CAGJ,I,CACI,a,CACA,oB,CACA,Y,CACA,gB,CAGE,E,CAAH,E,CAAH,E,CACI,+B,CACA,S,CAGJ,K,CACI,oB,CACA,wB,CACA,gB,CACA,U,CAGJ,K,CACI,uB,CAGJ,E,CACI,e,CACA,iB,CAGD,E,CALH,E,CAMI,4B,CACA,oC,CAGJ,qB,CACI,sB,CAGJ,c,CACI,wB,CAGJ,C,CACI,mB,CAGJ,O,CAmEA,K,CARA,K,CA1DI,e,CAGJ,U,CACI,qB,CACA,oD,CACA,iB,CAKJ,I,CAAM,G,CACF,4B,CACA,gC,CACA,6B,CACA,8B,CAsCJ,O,CAlDA,U,CAeA,Q,CAoCI,oB,CAnDJ,U,CAeA,Q,CAEI,sB,CAFJ,Q,CACI,kB,CAEA,oB,CAEA,U,CAGJ,E,CAEI,gB,CAGJ,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CACX,qB,CACA,yB,CAGJ,E,CACI,6B,CACA,iB,CAGJ,E,CAfA,E,CAgBI,mB,CAGJ,E,CACI,qC,CAGJ,O,CACI,0B,CAGJ,O,CAEI,uB,CAWJ,K,CARA,K,CAYI,qB,CAZJ,K,CAEI,e,CACA,yB,CAEA,4B,CAGJ,K,CACI,a,CACA,S,CACA,qB,CAEA,oB,CAEA,U,CACA,0B,CACA,6B,CACA,2B,CACA,sC,CACA,0B,CACA,yB,CAGJ,c,CACI,sB,CACA,e,CACA,kB,CAGwB,W,CAA5B,Y,CAAa,c,CACT,8B,CAGJ,oB,CAAuB,iB,CACnB,oB,CACA,S,CACA,Q,CACA,0B,CACA,2B,CAGJ,M,CAAO,kB,CAAyC,M,CAS5C,oB,CATJ,M,CAA4B,iB,CAArB,kB,CAAyC,M,CAAO,Q,CACnD,oB,CACA,S,CACA,uB,CACA,qB,CACA,0B,CACA,U,CACA,6B,CAGA,2B,CACA,sB,CACA,0B,CACA,c,CAbmD,Q,CAuDnD,a,CACA,e,CAEA,6B,CACA,sC,CACA,W,CA3CJ,iB,CADA,kB,CAEI,uB,CACA,e,CACA,Q,CAHJ,iB,CAjBuD,Q,CAyBnD,oB,CAGJ,M,CAgBA,M,CA5CuD,Q,CA8CnD,e,CAlBJ,M,CACI,sB,CACA,Q,CAIJ,Y,CAEA,uB,CADA,wB,CAEI,oB,CACA,iC,CACA,kB,CACA,e,CACA,oB,CAGJ,M,CACI,mC,CAEA,wC,CACA,e,CACA,mB,CACA,6B,CACA,qK,CAaJ,K,CACI,Y,CACA,gB,CACA,oD","file":"src/grayscale.css","sourcesContent":["/*! Grayscale CSS v:0.9.0 | MIT LICENSE | https://github.com/n2geoff/grayscale-css */\r\n:root {\r\n --Hsl: 207;\r\n --hSl: 50%;\r\n --hsL: 50%;\r\n --theme: hsl(var(--Hsl), var(--hSl), var(--hsL));\r\n --accent: var(--theme);\r\n --font: Arial, Helvetica, san-serif;\r\n --line: 1.5;\r\n --weight: 400;\r\n --size: 20px;\r\n --radius: 0rem;\r\n --space: 1rem;\r\n}\r\n\r\n:root:not([data-theme=dark]),[data-theme=light] {\r\n --light: hsl(var(--Hsl), clamp(15%, var(--hSl), 85%), clamp(15%, calc(var(--hsL) + 35%), 85%));\r\n --dark: hsl(var(--Hsl), clamp(15%, var(--hSl), 85%), clamp(15%, calc(var(--hsL) - 35%), 85%));\r\n --gray: hsl(var(--Hsl), 25%, 75%);\r\n --hint: hsl(var(--Hsl), 35%, 70%);\r\n --bg: hsl(var(--Hsl), 0%, 95%);\r\n --fg: hsl(var(--Hsl), 0%, 5%);\r\n}\r\n\r\n[data-theme=dark] {\r\n --light: hsl(var(--Hsl), clamp(15%, var(--hSl), 85%), clamp(15%, calc(var(--hsL) - 35%), 85%));\r\n --dark: hsl(var(--Hsl), clamp(15%, var(--hSl), 85%), clamp(15%, calc(var(--hsL) + 35%), 85%));\r\n --gray: hsl(var(--Hsl), 25%, 25%);\r\n --hint: hsl(var(--Hsl), 35%, 20%);\r\n --bg: hsl(var(--Hsl), 50%, 5%);\r\n --fg: hsl(var(--Hsl), 20%, 90%);\r\n}\r\n\r\n*,*:before,*:after {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml,body {\r\n background: var(--bg);\r\n color: var(--fg);\r\n margin: 0;\r\n padding: 0;\r\n font-family: var(--font);\r\n font-size: var(--size);\r\n letter-spacing: 0.0625em;\r\n font-weight: var(--weight);\r\n line-height: var(--line);\r\n box-sizing: border-box;\r\n padding: 0;\r\n}\r\n\r\n::placeholder,small {\r\n color: var(--hint);\r\n}\r\n\r\n:disabled::placeholder,small {\r\n color: hsl(0, 0%, 50%);\r\n}\r\n\r\nimg,embed,iframe,object,audio,video {\r\n height: auto;\r\n max-width: 100%;\r\n border: none;\r\n}\r\n\r\nmain {\r\n margin: 0 auto;\r\n padding: var(--space);\r\n height: 100vh;\r\n max-width: 1140px;\r\n}\r\n\r\nul,ol,li {\r\n margin: 0 calc(var(--space) *.72);\r\n padding: 0\r\n}\r\n\r\ntable {\r\n background: var(--bg);\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n}\r\n\r\nthead {\r\n background: var(--theme);\r\n}\r\n\r\nth {\r\n text-align: left;\r\n color: var(--dark);\r\n}\r\n\r\nth,td {\r\n padding: calc(var(--space) / 2);\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\ntbody>tr:nth-child(2) {\r\n background: var(--hint);\r\n}\r\n\r\ntbody>tr:hover {\r\n background: var(--accent);\r\n}\r\n\r\na {\r\n color: var(--accent);\r\n}\r\n\r\na:hover {\r\n color: var(--fg);\r\n}\r\n\r\nblockquote {\r\n margin: var(--space) 0;\r\n border-left: calc(var(--space) / 2) solid var(--accent);\r\n color: var(--hint);\r\n background: var(--dark);\r\n padding: var(--space);\r\n}\r\n\r\ncode, kbd {\r\n color: var(--light) !important;\r\n background: var(--dark) !important;\r\n margin: 0 calc(var(--space) / 4);\r\n padding: 0 calc(var(--space) / 4);\r\n}\r\n\r\npre>code {\r\n color: var(--light);\r\n background: var(--dark);\r\n display: inline-block;\r\n padding: var(--space);\r\n width: 100%;\r\n}\r\n\r\nhr {\r\n color: var(--accent);\r\n border: 1px solid;\r\n}\r\n\r\nh1,h2,h3,h4,h5,h6 {\r\n margin: var(--space) 0;\r\n text-transform: capitalize;\r\n}\r\n\r\nh1 {\r\n font-size: calc(var(--size) * 2);\r\n color: var(--dark);\r\n}\r\n\r\nh2 {\r\n color: var(--accent);\r\n}\r\n\r\nh3 {\r\n border-bottom: 1px solid var(--accent);\r\n}\r\n\r\nsection {\r\n margin-bottom: var(--space);\r\n}\r\n\r\narticle {\r\n padding: var(--space);\r\n background: var(--light);\r\n}\r\n\r\nlabel {\r\n font-size: var(--size);\r\n font-weight: 600;\r\n text-transform: capitalize;\r\n color: var(--fg);\r\n margin: 0 calc(var(--size) / 2);\r\n}\r\n\r\ninput {\r\n display: block;\r\n outline: none;\r\n box-sizing: border-box;\r\n font-size: var(--size);\r\n background: var(--bg);\r\n color: var(--fg);\r\n width: 100%;\r\n height: calc(var(--size) * 3);\r\n border: 1px solid var(--theme);\r\n border-radius: var(--radius);\r\n padding: clamp(.5rem, var(--space), 2rem);\r\n margin-bottom: var(--space);\r\n margin-right: var(--space);\r\n}\r\n\r\ninput:disabled {\r\n background: var(--gray);\r\n color: var(--bg);\r\n cursor: not-allowed;\r\n}\r\n\r\nselect:focus,textarea:focus,input:focus {\r\n border: 2px solid var(--accent);\r\n}\r\n\r\ninput[type=\"checkbox\"],input[type=\"radio\"] {\r\n display: inline-block;\r\n padding: 0;\r\n margin: 0;\r\n width: calc(var(--size) * .8);\r\n height: calc(var(--size) * .8);\r\n}\r\n\r\nbutton,input[type=\"submit\"],input[type=\"reset\"],select,textarea {\r\n display: inline-block;\r\n outline: none;\r\n font-family: var(--font);\r\n font-size: var(--size);\r\n height: calc(var(--size) * 3);\r\n width: 100%;\r\n border: 1px solid var(--theme);\r\n color: var(--theme);\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 0 var(--space);\r\n margin-bottom: var(--space);\r\n cursor: pointer;\r\n}\r\n\r\ninput[type=\"submit\"],\r\ninput[type=\"reset\"] {\r\n background: var(--theme);\r\n color: var(--fg);\r\n border: none;\r\n}\r\n\r\ninput[type=\"reset\"] {\r\n color: var(--fg);\r\n background: var(--bg);\r\n}\r\n\r\nbutton {\r\n background: var(--gray);\r\n border: none;\r\n color: var(--fg);\r\n}\r\n\r\nbutton:hover,\r\ninput[type=\"submit\"]:hover,\r\ninput[type=\"reset\"]:hover {\r\n background: var(--fg);\r\n border-bottom: 1px solid var(--bg);\r\n color: var(--theme);\r\n font-weight: bold;\r\n letter-spacing: .1rem;\r\n}\r\n\r\nselect {\r\n background: var(--bg) no-repeat 100%;\r\n color: var(--fg);\r\n padding: 0 clamp(.5rem, var(--space), 2rem);\r\n appearance: none;\r\n background-size: 1ex;\r\n background-origin: content-box;\r\n background-image: url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>\");\r\n}\r\n\r\ntextarea {\r\n overflow: auto;\r\n resize: vertical;\r\n border: 1px solid var(--theme);\r\n height: calc(var(--line) * 6rem);\r\n padding: clamp(.5rem, var(--space), 2rem);\r\n cursor: text;\r\n color: var(--fg);\r\n}\r\n\r\n.grid {\r\n display: grid;\r\n gap: var(--space);\r\n grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));\r\n}"]} |