nexmoe.css/nexmoe.css.map

Use only HTML to write modern websites with smooth animations and beautiful interfaces.

{"version":3,"sources":["src/nexmoe.pcss","src/variables.pcss","src/global.pcss","src/layout.pcss","src/typography.pcss","src/other.pcss","src/form.pcss","src/nav.pcss","src/table.pcss"],"names":[],"mappings":"AAAA,sDAAsD;;ACAtD,cAAc;;AAEd;CACC,wBAAwB;CACxB,uBAAuB;CACvB,oBAAoB;CACpB,gCAAgC;CAChC,qBAAqB;CACrB,6BAA6B;CAC7B,gBAAgB;CAChB,qCAAqC;CACrC,kBAAkB;CAClB,6RAA6R;CAC7R,qSAAqS;AACtS;;AAEA;CACC;EACC,qBAAqB;EACrB,qBAAqB;EACrB,gBAAgB;EAChB,wCAAwC;EACxC,6RAA6R;EAC7R,+RAA+R;CAChS;AACD;;ACzBA;CACC,sBAAsB;AACvB;;ACFA,WAAW;;AAEX;CACC,SAAS;CACT,iCAAiC;CACjC,wBAAwB;CACxB,gBAAgB;CAChB,eAAe;AAChB;;AAEA;CACC;EACC,eAAe;CAChB;AACD;;AAEA;CACC,kBAAkB;CAClB,gBAAgB;AACjB;;AAEA;CACC,mBAAmB;AACpB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC;EACC,kBAAkB;CACnB;AACD;;AAEA;CACC,gBAAgB;CAChB,iBAAiB;CACjB,eAAe;AAChB;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,mCAAmC;CACnC,gBAAgB;CAChB,mCAAmC;CACnC,6CAA6C;AAC9C;;AAEA;CACC,aAAa;AACd;;AAEA;CACC,gBAAgB;AACjB;;AC1DA,eAAe;;AAEf;CACC,wBAAwB;CACxB,qBAAqB;AACtB;;AAEA;CACC,0BAA0B;CAC1B,2CAA2C;AAC5C;;AAEA;CACC,4CAA4C;AAC7C;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,eAAe;AAChB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,kBAAkB;AACnB;;AAEA;CACC,mCAAmC;CACnC,0BAA0B;AAC3B;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,wBAAwB;CACxB,mCAAmC;CACnC,0CAA0C;CAC1C,kBAAkB;CAClB,uBAAuB;AACxB;;AAEA;CACC,YAAY;CACZ,0BAA0B;CAC1B,cAAc;AACf;;AAEA;CACC,sBAAsB;CACtB,iBAAiB;AAClB;;AAEA;CACC,oBAAoB;CACpB,SAAS;CACT,cAAc;CACd,0CAA0C;CAC1C,kBAAkB;AACnB;;AC9EA,UAAU;;AAEV;CACC,aAAa;AACd;;AACA;CACC,cAAc;CACd,WAAW;CACX,YAAY;CACZ,mBAAmB;CACnB,YAAY;CACZ,yBAAyB;CACzB,qCAAqC;CACrC,iCAAiC;CACjC,0BAA0B;CAC1B,4BAA4B;CAC5B,WAAW;CACX,sCAAsC;AACvC;;AAEA;CACC,uBAAuB;AACxB;;AAEA;CACC,aAAa;AACd;;AAEA;CACC,aAAa;CACb,gBAAgB;CAChB,eAAe;CACf,UAAU;CACV,uCAAuC;AACxC;;AAEA;CACC,kBAAkB;CAClB,UAAU;CACV,uCAAuC;AACxC;;AAEA;;;;CAIC,eAAe;AAChB;;AAEA;;CAEC,cAAc;CACd,iBAAiB;AAClB;;AAEA;CACC,mDAAmD;CACnD,YAAY;CACZ,mCAAmC;CACnC,sCAAsC;CACtC,iCAAiC;CACjC,wBAAwB;CACxB,6BAA6B;CAC7B,wBAAwB;AACzB;;AAEA;CACC;EACC,0BAA0B;CAC3B;;CAEA;EACC,sBAAsB;CACvB;AACD;;AAEA;CACC,aAAa;CACb,sBAAsB;CACtB,yBAAyB;CACzB,gBAAgB;AACjB;;AAEA;CACC,SAAS;CACT,aAAa;CACb,cAAc;AACf;;AAEA;CACC,iBAAiB;CACjB,gCAAgC;AACjC;;AC5FA,SAAS;;AAET;;CAEC,0BAA0B;CAC1B,0BAA0B;AAC3B;;AAEA;;CAEC,wBAAgB;IAAhB,qBAAgB;SAAhB,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,aAAa;CACb,oBAAoB;CACpB,cAAc;CACd,sBAAsB;CACtB,UAAU;AACX;;AAEA;;CAEC,sCAAsC;CACtC,2BAA2B;CAC3B,4BAA4B;CAC5B,4BAA4B;CAC5B,sCAAsC;AACvC;;AAEA;CACC,kBAAkB;AACnB;;AAEA;;;;CAIC,eAAe;CACf,sCAAsC;CACtC,sBAAsB;AACvB;;AAEA;;;CAGC,gCAAgC;AACjC;;AAEA;;;;CAIC,wCAAwC;AACzC;;AAEA;;;;CAIC,iBAAiB;CACjB,sCAAsC;CACtC,mCAAmC;CACnC,oBAAoB;AACrB;;AAEA;CACC,6BAA6B;CAC7B,2BAA2B;CAC3B,yBAAyB;AAC1B;;AAEA;CACC,gBAAgB;AACjB;;ACzEA,QAAQ;;AAER;CACC,mBAAmB;CACnB,aAAa;CACb,8BAA8B;CAC9B,cAAc;CACd,iBAAiB;AAClB;;AAEA;CACC;EACC,YAAY;EACZ,eAAe;EACf,sBAAsB;CACvB;CACA;EACC,kBAAkB;CACnB;AACD;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,wBAAwB;CACxB,cAAc;AACf;;AAEA;CACC,gBAAgB;CAChB,UAAU;CACV,eAAe;AAChB;;AAEA;CACC,qBAAqB;CACrB,kBAAkB;CAClB,cAAc;AACf;;AAEA;CACC,eAAe;CACf,oBAAoB;CACpB,mBAAmB;CACnB,6CAA6C;AAC9C;;AAEA;CACC,2BAA2B;CAC3B,oCAAoC;CACpC,qBAAqB;CACrB,aAAa;AACd;;AAEA;;CAEC,gBAAgB;CAChB,sCAAsC;CACtC,sBAAsB;AACvB;;AAEA,iBAAiB;;AAEjB;CACC,2BAA2B;CAC3B,mCAAmC;CACnC,+CAA+C;CAC/C,YAAY;CACZ,oBAAoB;CACpB,kBAAkB;CAClB,WAAW;CACX,mBAAmB;CACnB,WAAW;CACX,eAAe;CACf,2BAA2B;CAC3B,WAAW;CACX,UAAU;CACV,gCAAgC;AACjC;;AAEA;CACC,UAAU;CACV,UAAU;CACV,wBAAwB;AACzB;;AAEA;CACC,WAAW;CACX,kBAAkB;CAClB,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,cAAc;AACf;;AAEA;CACC,cAAc;AACf;;AAEA;CACC,mCAAmC;AACpC;;ACvGA,UAAU;;AAEV;CACC,iBAAiB;CACjB,yBAAyB;AAC1B;;AAEA;;CAEC,oBAAoB;CACpB,gBAAgB;AACjB;;AAEA;CACC,sCAAsC;CACtC,sBAAsB;AACvB;;AAEA;CACC,yBAAyB;AAC1B;;AAEA;CACC,yBAAyB;AAC1B","file":"nexmoe.css","sourcesContent":["/* Nexmoe.css - https://github.com/nexmoe/nexmoe.css */\r\n\r\n@import \"./variables.pcss\";\r\n@import \"./global.pcss\";\r\n@import \"./layout.pcss\";\r\n@import \"./typography.pcss\";\r\n@import \"./other.pcss\";\r\n@import \"./form.pcss\";\r\n@import \"./nav.pcss\";\r\n@import \"./table.pcss\";","/* Variables */\n\n:root {\n\t--active-brightness: 0.8;\n\t--hover-brightness: 1.2;\n\t--border-radius: 6px;\n\t--color-primary: rgb(23, 23, 23);\n\t--color-link: #df5d64;\n\t--color-text: rgb(23, 23, 23);\n\t--color-bg: #fff;\n\t--color-hover: rgba(23, 23, 23, 0.15);\n\t--nexmoe-gap: 1rem;\n\t--icon-checkbox: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n\t--icon-summary: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(23, 23, 23)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");\n}\n\n@media (prefers-color-scheme: dark) {\n\t:root {\n\t\t--color-primary: #fff;\n\t\t--color-text: #f7f7f7;\n\t\t--color-bg: #111;\n\t\t--color-hover: rgba(230, 230, 230, 0.15);\n\t\t--icon-checkbox: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n\t\t--icon-summary: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f7f7f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");\n\t}\n}","* {\n\tbox-sizing: border-box;\n}\n","/* Layout */\n\nbody {\n\tmargin: 0;\n\tbackground-color: var(--color-bg);\n\tcolor: var(--color-text);\n\tline-height: 1.5;\n\tpadding: 0 3rem;\n}\n\n@media (max-width: 768px) {\n\tbody {\n\t\tpadding: 0 1rem;\n\t}\n}\n\nheader {\n\ttext-align: center;\n\tline-height: 1.7;\n}\n\nheader h2 {\n\tborder-bottom: none;\n}\n\nfooter {\n\tpadding: 2rem 0;\n}\n\n@media (max-width: 768px) {\n\tfooter {\n\t\tpadding: 2rem 1rem;\n\t}\n}\n\nmain {\n\tmax-width: 960px;\n\tmargin: 50px auto;\n\tpadding: 0 1rem;\n}\n\nsection {\n\tmargin: 4rem 0;\n}\n\narticle {\n\tborder-radius: var(--border-radius);\n\toverflow: hidden;\n\tborder: 2px solid var(--color-text);\n\tbox-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.25);\n}\n\narticle > *:first-child {\n\tmargin-top: 0;\n}\n\narticle > *:last-child {\n\tmargin-bottom: 0;\n}","/* Typography */\n\na {\n\tcolor: var(--color-link);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n\tfilter: brightness(var(--hover-brightness));\n}\n\na:active {\n\tfilter: brightness(var(--active-brightness));\n}\n\nh1 {\n\tfont-size: 2.7rem;\n}\n\nh2 {\n\tfont-size: 2rem;\n}\n\nh3 {\n\tfont-size: 1.5rem;\n}\n\nh4 {\n\tfont-size: 1.17rem;\n}\n\nh5 {\n\tfont-size: 1rem;\n}\n\nh6 {\n\tfont-size: 0.83rem;\n}\n\nmark {\n\tpadding: 0 0.25rem;\n}\n\nimg {\n\tborder-radius: var(--border-radius);\n\tbox-shadow: 0 0 0 1px #eee;\n}\n\np {\n\tmargin: 1rem 0;\n}\n\nkbd {\n\tcolor: var(--color-text);\n\tborder: 1px solid var(--color-text);\n\tborder-bottom: 3px solid var(--color-text);\n\tborder-radius: 5px;\n\tpadding: 0.3rem 0.55rem;\n}\n\nhr {\n\tborder: none;\n\tborder-top: 2px solid #ccc;\n\tmargin: 1rem 0;\n}\n\nblockquote {\n\tborder-left: 6px solid;\n\tpadding: 1px 2rem;\n}\n\ncode {\n\tpadding: 0.2em 0.4em;\n\tmargin: 0;\n\tfont-size: 85%;\n\tbackground-color: rgba(175, 184, 193, 0.2);\n\tborder-radius: 6px;\n}","/* Other */\n\ndetails summary::marker {\n\tcontent: none;\n}\ndetails summary::after {\n\tdisplay: block;\n\twidth: 1rem;\n\theight: 1rem;\n\tmargin-top: 0.25rem;\n\tfloat: right;\n\ttransform: rotate(-90deg);\n\tbackground-image: var(--icon-summary);\n\tbackground-position: right center;\n\tbackground-size: 1rem auto;\n\tbackground-repeat: no-repeat;\n\tcontent: \"\";\n\ttransition: transform 0.2s ease-in-out;\n}\n\ndetails[open] summary::after {\n\ttransform: rotate(0deg);\n}\n\ndetails summary {\n\tpadding: 1rem;\n}\n\ndetails + div {\n\tmax-height: 0;\n\toverflow: hidden;\n\tpadding: 0 1rem;\n\topacity: 0;\n\ttransition: max-height 0.2s ease-in-out;\n}\n\ndetails[open] + div {\n\tmax-height: 1000px;\n\topacity: 1;\n\tborder-top: 2px solid var(--color-text);\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"],\nlabel,\ndetails {\n\tcursor: pointer;\n}\n\nlabel > input:not([type=\"checkbox\"]):not([type=\"radio\"]),\nlabel > select {\n\tdisplay: block;\n\tmargin-top: 0.3em;\n}\n\ndialog {\n\tbox-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);\n\tborder: none;\n\tborder-radius: var(--border-radius);\n\tpadding: calc(var(--nexmoe-gap) * 1.5);\n\tbackground-color: var(--color-bg);\n\tcolor: var(--color-text);\n\tanimation-name: dialogScaleIn;\n\tanimation-duration: 0.2s;\n}\n\n@keyframes dialogScaleIn {\n\tfrom {\n\t\ttransform: scale(0.5, 0.5);\n\t}\n\n\tto {\n\t\ttransform: scale(1, 1);\n\t}\n}\n\ndialog menu {\n\tdisplay: flex;\n\tgap: var(--nexmoe-gap);\n\tjustify-content: flex-end;\n\tmargin-bottom: 0;\n}\n\ndialog fieldset {\n\tborder: 0;\n\tmargin: unset;\n\tpadding: unset;\n}\n\ndialog fieldset legend {\n\tfont-size: 1.5rem;\n\tmargin-bottom: var(--nexmoe-gap);\n}","/* Form */\n\nbutton:active,\ninput:active {\n\ttransform: translateY(2px);\n\ttransition: transform 0.1s;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n\tappearance: none;\n\twidth: 1.25rem;\n\theight: 1.25rem;\n\tmargin-top: 0;\n\tmargin-right: 0.3rem;\n\tmargin-left: 0;\n\tvertical-align: middle;\n\tpadding: 0;\n}\n\ninput[type=\"checkbox\"]:checked,\ninput[type=\"radio\"]:checked {\n\tbackground-image: var(--icon-checkbox);\n\tbackground-position: center;\n\tbackground-size: 0.75em auto;\n\tbackground-repeat: no-repeat;\n\tbackground-color: var(--color-primary);\n}\n\ninput[type=\"radio\"] {\n\tborder-radius: 50%;\n}\n\nbutton,\ninput[type=\"button\"],\ninput[type=\"submit\"],\ninput[type=\"reset\"] {\n\tcursor: pointer;\n\tbackground-color: var(--color-primary);\n\tcolor: var(--color-bg);\n}\n\nbutton,\ninput,\nselect {\n\ttransition: all 0.1s ease-in-out;\n}\n\nbutton:hover,\ninput:hover,\nselect:hover,\ntextarea:hover {\n\tbox-shadow: 0 0 0 2px var(--color-hover);\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n\tfont-size: 1.2rem;\n\tborder: 2px solid var(--color-primary);\n\tborder-radius: var(--border-radius);\n\tpadding: 0.6rem 1rem;\n}\n\nbutton[text] {\n\tbackground-color: transparent;\n\tcolor: var(--color-primary);\n\tborder-color: transparent;\n}\n\ninput[type=\"color\"] {\n\tpadding: 1px 4px;\n}","/* Nav */\n\nnav {\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin: 1rem 0;\n\tfont-size: 1.2rem;\n}\n\n@media (max-width: 768px) {\n\tnav {\n\t\tmargin: 1rem;\n\t\tflex-wrap: wrap;\n\t\tflex-direction: column;\n\t}\n\tnav ul {\n\t\ttext-align: center;\n\t}\n}\n\nnav > a {\n\tfont-size: 1.5rem;\n}\n\nnav a {\n\tcolor: var(--color-text);\n\tdisplay: block;\n}\n\nnav ul {\n\tlist-style: none;\n\tpadding: 0;\n\tmargin: -0.2rem;\n}\n\nnav ul li {\n\tdisplay: inline-block;\n\tposition: relative;\n\tmargin: 0.2rem;\n}\n\nnav ul li a {\n\tmin-width: 2rem;\n\tpadding: 0.5rem 1rem;\n\tborder-radius: 30px;\n\ttransition: background-color 0.1s ease-in-out;\n}\n\nnav ul li a:hover {\n\tcolor: var(--color-primary);\n\tbackground-color: var(--color-hover);\n\ttext-decoration: none;\n\tfilter: unset;\n}\n\nnav ul li a[checked],\nnav ul li a:active {\n\ttransition: none;\n\tbackground-color: var(--color-primary);\n\tcolor: var(--color-bg);\n}\n\n/* Nav Dropdown */\n\nnav ul li ul {\n\tbackground: var(--color-bg);\n\tborder-radius: var(--border-radius);\n\tbox-shadow: 0 1px 5px rgba(100, 100, 100, 0.15);\n\theight: auto;\n\tpadding: 1rem 0.8rem;\n\tposition: absolute;\n\ttop: 3.5rem;\n\twhite-space: nowrap;\n\twidth: auto;\n\tmin-width: 100%;\n\ttransform: translateY(-8px);\n\tz-index: -1;\n\topacity: 0;\n\ttransition: all 0.2s ease-in-out;\n}\n\nnav ul li:hover ul {\n\tz-index: 1;\n\topacity: 1;\n\ttransform: translateY(0);\n}\n\nnav ul li ul::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\ttop: -0.5rem;\n\theight: 0.5rem;\n}\n\nnav ul li ul li {\n\tdisplay: block;\n}\n\nnav ul li ul li a {\n\tborder-radius: var(--border-radius);\n}\n","/* Table */\n\ntable {\n\tfont-size: 1.2rem;\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tpadding: 0.6em 1.2em;\n\ttext-align: left;\n}\n\nth {\n\tbackground-color: var(--color-primary);\n\tcolor: var(--color-bg);\n}\n\ntr:nth-child(even) {\n\tbackground-color: #f2f2f2;\n}\n\ntr:hover {\n\tbackground-color: #f5f5f5;\n}\n"]}