ghostsui 1.5.0 → 1.6.0

package/css/ghostsui.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font-size:100%;font:inherit;margin:0;padding:0}*,:after,:before{box-sizing:border-box}:root,body,html{-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;font-weight:400;height:auto;line-height:1.15;min-height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}h1{font-size:calc(1.375rem + 1.5vw);font-weight:700}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw);font-weight:600}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw);font-weight:500}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw);font-weight:500}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem;font-weight:400}h6{font-size:1rem;font-weight:300}hr{color:inherit;height:0}b,mark,strong{font-style:inherit;font-weight:700}address,cite,dfn,em,i,q,var{font-style:italic;font-weight:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a,ins{text-decoration:none}u{text-decoration:underline}table{text-indent:0}table,table td,table th,table tr{border:1px solid;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;cursor:pointer}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}figure,pre{overflow-x:auto}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}:root{--font-family:"Quicksand",sans-serif;--text:#eee;--text-rgb:238,238,238;--background-primary:#121214;--background-primary-rgb:18,18,20;--background-secondary:#212123;--background-secondary-rgb:33,33,35;--background-tertiary:#29292a;--background-tertiary-rgb:41,41,42;--primary:#2160ec;--primary-rgb:33,96,236;--primary-hover:#174bbb;--primary-hover-rgb:23,75,187;--secondary:#437af1;--secondary-rgb:67,122,241;--secondary-hover:#5689f7;--secondary-hover-rgb:86,137,247;--green:#67c157;--green-rgb:103,193,87;--red:#f26c4b;--red-rgb:242,108,75;font-size:16px}body,head{background-color:var(--background-primary);color:var(--text);font-family:var(--font-family)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-primary)}::-webkit-scrollbar-thumb{background:var(--background-tertiary);border-radius:16px}::-webkit-scrollbar-thumb:hover{background:rgba(var(--background-tertiary-rgb),.8)}.anchor,a{color:var(--secondary);font-weight:500;transition:color .2s ease-in-out}.anchor:hover,a:hover{color:var(--secondary-hover)}.anchor:active,.anchor:focus,a:active,a:focus{background-color:rgba(var(--secondary-rgb),.2);outline:none;text-decoration:underline;transition:background-color .2s ease-in-out,color .2s ease-in-out}.anchor[role=button],a[role=button],mark{color:var(--text)}mark{background-color:rgba(var(--secondary-rgb),.5);font-weight:inherit}hr{border-color:var(--background-tertiary);border-style:solid;border-width:2px;width:100%}.card,card{align-items:flex-start;align-self:stretch;background-color:var(--background-tertiary);border:4px solid var(--background-tertiary);border-radius:16px;box-shadow:1px 1px 5px 0 rgba(0,0,0,.1);color:var(--text);display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;gap:12px;min-width:250px;padding:32px;transition:border-color .2s ease-in-out}.card.center,card.center{align-items:center;text-align:center}.card.full,card.full{width:100%}.card.vcenter,card.vcenter{justify-content:center}.card:active:not(card.no-hover,.card.no-hover),.card:focus,.card:hover:not(card.no-hover,.card.no-hover),card:active:not(card.no-hover,.card.no-hover),card:focus,card:hover:not(card.no-hover,.card.no-hover){background-color:var(--background-tertiary);border:4px solid var(--primary-hover)}.card.click,card.click{cursor:pointer}.card.blue,card.blue{background-color:var(--primary);border:4px solid var(--primary);transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.card.blue:active,.card.blue:focus,.card.blue:hover:not(card.blue.no-hover,.card.blue.no-hover),card.blue:active,card.blue:focus,card.blue:hover:not(card.blue.no-hover,.card.blue.no-hover){background-color:var(--primary-hover);border-color:var(--primary)}a.card{color:var(--text);cursor:pointer}ol,ul{list-style:inside}select{--btn-background:var(--primary);--btn-highlight:var(--primary-hover);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-tertiary);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-position:right .7em top 50%,0 0;background-repeat:no-repeat,repeat;background-size:.65em auto,100%;border:4px solid var(--background-tertiary);border-radius:8px;color:var(--text);cursor:pointer;display:inline-block;font-weight:400;padding:14px 64px 14px 18px;transition:border-color .2s ease-in-out}:root:lang(ar) select,:root:lang(iw) select,[dir=rtl] select{background-position:left .7em top 50%,0 0;padding:.6em .8em .5em 1.4em}select:active:not(select:disabled),select:focus:not(select:disabled),select:hover:not(select:disabled){border-color:var(--primary-hover);outline:none}select:disabled{cursor:not-allowed;opacity:.8}form{align-items:flex-start;display:flex;flex-direction:column;gap:12px;gap:8px}form.center{align-items:center;text-align:center}form.full{width:100%}form.vcenter{justify-content:center}label{font-size:1rem}textarea{background-color:var(--background-tertiary);border:4px solid var(--background-tertiary);border-radius:12px;color:var(--text);font-size:1.2rem;height:150px;margin:none;max-height:250px;max-width:100%;min-width:100%;padding:14px 16px;transition:border-color .2s ease-in-out;width:100%}textarea.error{border-color:var(--red)}textarea:active,textarea:focus{border-color:var(--secondary);outline:none}input:not([type=checkbox]){background-color:var(--background-tertiary);border:4px solid var(--background-tertiary);border-radius:12px;color:var(--text);font-size:1.2rem;margin:none;padding:14px 16px;transition:border-color .2s ease-in-out;width:100%}input:not([type=checkbox]).error{border-color:var(--red)}input:not([type=checkbox]):active,input:not([type=checkbox]):focus{border-color:var(--secondary);outline:none}input[type=checkbox]{margin:0 4px 0 0}input[type=color]{height:48px;padding:8px}input:disabled,textarea:disabled{cursor:not-allowed;opacity:.8}table{border-collapse:collapse;width:100%}table td,table th{border:2px solid var(--background-tertiary);padding:12px}table th{background-color:rgba(var(--background-tertiary-rgb),.5);font-weight:700}.button,[role=button],button{--btn-background:var(--primary);--btn-highlight:var(--primary-hover);background-color:var(--btn-background);border:2px solid var(--btn-background);border-radius:8px;color:var(--text);display:inline-block;font-weight:400;padding:12px 24px;text-decoration:none;transition:color .2s ease-in-out,border-color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out}.button:active:not(button:disabled,.button:disabled,[role=button]:disabled),.button:focus:not(button:disabled,.button:disabled,[role=button]:disabled),.button:hover:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:active:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:focus:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:hover:not(button:disabled,.button:disabled,[role=button]:disabled),button:active:not(button:disabled,.button:disabled,[role=button]:disabled),button:focus:not(button:disabled,.button:disabled,[role=button]:disabled),button:hover:not(button:disabled,.button:disabled,[role=button]:disabled){background-color:var(--btn-highlight);border-color:var(--btn-highlight);color:var(--text);text-decoration:none}.button:active:not(button:disabled,.button:disabled,[role=button]:disabled),.button:focus:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:active:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:focus:not(button:disabled,.button:disabled,[role=button]:disabled),button:active:not(button:disabled,.button:disabled,[role=button]:disabled),button:focus:not(button:disabled,.button:disabled,[role=button]:disabled){outline:none}.button:disabled,[role=button]:disabled,button:disabled{color:var(--text);cursor:not-allowed;opacity:.6}.button.secondary,[role=button].secondary,button.secondary{background-color:unset}.button.small,[role=button].small,button.small{font-size:.8rem;font-weight:500;padding:8px 20px}.button.red,[role=button].red,button.red{--btn-highlight:var(--red)}.button.green,[role=button].green,button.green{--btn-highlight:var(--green)}.banner,banner{align-items:center;background:var(--background-secondary);display:flex;flex-flow:row nowrap;font-size:1.1rem;font-weight:500;padding:20px 16px;width:100%}.banner.green,banner.green{background-color:var(--green)}.banner.red,banner.red{background-color:var(--red)}blockquote{background-color:rgba(var(--background-tertiary-rgb),.2);border-left:8px solid var(--background-tertiary);padding:12px 16px;quotes:none;width:100%}.wrap{flex-wrap:wrap}.col,.column{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.col.center,.column.center{align-items:center;text-align:center}.col.full,.column.full{width:100%}.col.vcenter,.column.vcenter{justify-content:center}.row{display:flex;gap:12px;width:100%}.row.center{justify-content:center}.row.vcenter{align-items:center}.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}figcaption{color:rgba(var(--text),.8);padding:4px 0}section{margin:32px 0}section:first-child{margin-top:0}
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{font-size:100%;font:inherit;margin:0;padding:0}*,:after,:before{box-sizing:border-box}:root,body,html{-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;font-weight:400;height:auto;line-height:1.15;min-height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4}h1{font-size:calc(1.375rem + 1.5vw);font-weight:700}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw);font-weight:600}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw);font-weight:500}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw);font-weight:500}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem;font-weight:400}h6{font-size:1rem;font-weight:300}hr{color:inherit;height:0}b,mark,strong{font-style:inherit;font-weight:700}address,cite,dfn,em,i,q,var{font-style:italic;font-weight:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a,ins{text-decoration:none}u{text-decoration:underline}table{text-indent:0}table,table td,table th,table tr{border:1px solid;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;cursor:pointer}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}figure,pre{overflow-x:auto}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}:root{--font-family:"Quicksand",sans-serif;--text:#eee;--text-rgb:238,238,238;--background-primary:#121214;--background-primary-rgb:18,18,20;--background-secondary:#212123;--background-secondary-rgb:33,33,35;--background-tertiary:#29292a;--background-tertiary-rgb:41,41,42;--primary:#2160ec;--primary-rgb:33,96,236;--primary-hover:#174bbb;--primary-hover-rgb:23,75,187;--secondary:#437af1;--secondary-rgb:67,122,241;--secondary-hover:#5689f7;--secondary-hover-rgb:86,137,247;--green:#67c157;--green-rgb:103,193,87;--red:#f26c4b;--red-rgb:242,108,75;font-size:16px}body,head{background-color:var(--background-primary);color:var(--text);font-family:var(--font-family)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-primary)}::-webkit-scrollbar-thumb{background:var(--background-tertiary);border-radius:16px}::-webkit-scrollbar-thumb:hover{background:rgba(var(--background-tertiary-rgb),.8)}.anchor,a{color:var(--secondary);font-weight:500;transition:color .2s ease-in-out}.anchor:hover,a:hover{color:var(--secondary-hover)}.anchor:active,.anchor:focus,a:active,a:focus{background-color:rgba(var(--secondary-rgb),.2);outline:none;text-decoration:underline;transition:background-color .2s ease-in-out,color .2s ease-in-out}.anchor[role=button],a[role=button],mark{color:var(--text)}mark{background-color:rgba(var(--secondary-rgb),.5);font-weight:inherit}hr{border-color:var(--background-tertiary);border-style:solid;border-width:2px;width:100%}.card,card{align-items:flex-start;align-self:stretch;background-color:var(--background-tertiary);border:4px solid var(--background-tertiary);border-radius:16px;box-shadow:1px 1px 5px 0 rgba(0,0,0,.1);color:var(--text);display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;gap:12px;min-width:250px;padding:32px;transition:border-color .2s ease-in-out}.card.center,card.center{align-items:center;text-align:center}.card.full,card.full{width:100%}.card.vcenter,card.vcenter{justify-content:center}.card:active:not(card.no-hover,.card.no-hover),.card:focus,.card:hover:not(card.no-hover,.card.no-hover),card:active:not(card.no-hover,.card.no-hover),card:focus,card:hover:not(card.no-hover,.card.no-hover){background-color:var(--background-tertiary);border:4px solid var(--primary-hover)}.card.click,card.click{cursor:pointer}.card.blue,card.blue{background-color:var(--primary);border:4px solid var(--primary);transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.card.blue:active,.card.blue:focus,.card.blue:hover:not(card.blue.no-hover,.card.blue.no-hover),card.blue:active,card.blue:focus,card.blue:hover:not(card.blue.no-hover,.card.blue.no-hover){background-color:var(--primary-hover);border-color:var(--primary)}a.card{color:var(--text);cursor:pointer}ol,ul{list-style:inside}select{--btn-background:var(--primary);--btn-highlight:var(--primary-hover);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-tertiary);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-position:right .7em top 50%,0 0;background-repeat:no-repeat,repeat;background-size:.65em auto,100%;border:4px solid var(--background-tertiary);border-radius:8px;color:var(--text);cursor:pointer;display:inline-block;font-weight:400;padding:14px 64px 14px 18px;transition:border-color .2s ease-in-out}:root:lang(ar) select,:root:lang(iw) select,[dir=rtl] select{background-position:left .7em top 50%,0 0;padding:.6em .8em .5em 1.4em}select:active:not(select:disabled),select:focus:not(select:disabled),select:hover:not(select:disabled){border-color:var(--primary-hover);outline:none}select:disabled{cursor:not-allowed;opacity:.8}form{align-items:flex-start;display:flex;flex-direction:column;gap:12px;gap:8px}form.center{align-items:center;text-align:center}form.full{width:100%}form.vcenter{justify-content:center}label{font-size:1rem}textarea{background-color:var(--background-tertiary);border:4px solid var(--background-tertiary);border-radius:12px;color:var(--text);font-size:1.2rem;height:150px;margin:none;max-height:250px;max-width:100%;min-width:100%;padding:14px 16px;transition:border-color .2s ease-in-out;width:100%}textarea.error{border-color:var(--red)}textarea:active,textarea:focus{border-color:var(--secondary);outline:none}input:not([type=checkbox],[type=radio]){background-color:var(--background-tertiary);border:4px solid var(--background-tertiary);border-radius:12px;color:var(--text);font-size:1.2rem;margin:none;padding:14px 16px;transition:border-color .2s ease-in-out;width:100%}input:not([type=checkbox],[type=radio]).error{border-color:var(--red)}input:not([type=checkbox],[type=radio]):active,input:not([type=checkbox],[type=radio]):focus{border-color:var(--secondary);outline:none}input[type=checkbox]{margin:0 4px 0 0}input[type=color]{height:48px;padding:8px}input:disabled,textarea:disabled{cursor:not-allowed;opacity:.8}input[type=checkbox],input[type=radio]{-webkit-appearance:none;-moz-appearance:none;border:2px solid var(--background-tertiary);cursor:pointer;display:inline-block;height:22px;margin:0;outline:none;position:relative;transition:background .3s,border-color .3s,box-shadow .2s;vertical-align:top}input[type=checkbox]:after,input[type=radio]:after{content:"";display:block;left:0;position:absolute;top:0;transition:transform .3s cubic-bezier(.2,.85,.32,1.2),opacity .2s}input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--primary)}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed;opacity:.8}input[type=checkbox]:focus:not(input[type=checkbox]:disabled,input[type=radio]:disabled),input[type=checkbox]:hover:not(input[type=checkbox]:disabled,input[type=radio]:disabled),input[type=radio]:focus:not(input[type=checkbox]:disabled,input[type=radio]:disabled),input[type=radio]:hover:not(input[type=checkbox]:disabled,input[type=radio]:disabled){border-color:var(--primary)}input[type=checkbox]:not(.switch),input[type=radio]:not(.switch){width:22px}input[type=checkbox]:not(.switch):after,input[type=radio]:not(.switch):after{opacity:0}input[type=checkbox]:not(.switch):checked:after,input[type=radio]:not(.switch):checked:after{opacity:1}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{border:2px solid var(--text);border-left:0;border-top:0;height:9px;left:6.5px;top:3.5px;transform:rotate(var(--rotation,20deg));width:5px}input[type=checkbox]:not(.switch):checked{--rotation:43deg}input[type=checkbox].switch{border-radius:11px;width:38px}input[type=checkbox].switch:after{background:var(--switch-colour,rgba(var(--text-rgb),.7));border-radius:50%;height:15px;left:2px;top:1.5px;transform:translateX(var(--x,0));width:15px}input[type=checkbox].switch:checked{--switch-colour:var(--text);--x:15px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=radio]{border-radius:100%;height:22px;padding:12px;width:22px}input[type=radio]:after{background:var(--text);border-radius:100%;height:20px;left:2.2px;opacity:0;top:2.2px;transform:scale(var(--s,.8));width:20px}input[type=radio]:checked{--s:0.6}table{border-collapse:collapse;width:100%}table td,table th{border:2px solid var(--background-tertiary);padding:12px}table th{background-color:rgba(var(--background-tertiary-rgb),.5);font-weight:700}.button,[role=button],button{--btn-background:var(--primary);--btn-highlight:var(--primary-hover);background-color:var(--btn-background);border:2px solid var(--btn-background);border-radius:8px;color:var(--text);display:inline-block;font-weight:400;padding:12px 24px;text-decoration:none;transition:color .2s ease-in-out,border-color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out}.button:active:not(button:disabled,.button:disabled,[role=button]:disabled),.button:focus:not(button:disabled,.button:disabled,[role=button]:disabled),.button:hover:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:active:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:focus:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:hover:not(button:disabled,.button:disabled,[role=button]:disabled),button:active:not(button:disabled,.button:disabled,[role=button]:disabled),button:focus:not(button:disabled,.button:disabled,[role=button]:disabled),button:hover:not(button:disabled,.button:disabled,[role=button]:disabled){background-color:var(--btn-highlight);border-color:var(--btn-highlight);color:var(--text);text-decoration:none}.button:active:not(button:disabled,.button:disabled,[role=button]:disabled),.button:focus:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:active:not(button:disabled,.button:disabled,[role=button]:disabled),[role=button]:focus:not(button:disabled,.button:disabled,[role=button]:disabled),button:active:not(button:disabled,.button:disabled,[role=button]:disabled),button:focus:not(button:disabled,.button:disabled,[role=button]:disabled){outline:none}.button:disabled,[role=button]:disabled,button:disabled{color:var(--text);cursor:not-allowed;opacity:.6}.button.secondary,[role=button].secondary,button.secondary{background-color:unset}.button.small,[role=button].small,button.small{font-size:.8rem;font-weight:500;padding:8px 20px}.button.red,[role=button].red,button.red{--btn-highlight:var(--red)}.button.green,[role=button].green,button.green{--btn-highlight:var(--green)}.banner,banner{align-items:center;background:var(--background-secondary);display:flex;flex-flow:row nowrap;font-size:1.1rem;font-weight:500;padding:20px 16px;width:100%}.banner.green,banner.green{background-color:var(--green)}.banner.red,banner.red{background-color:var(--red)}blockquote{background-color:rgba(var(--background-tertiary-rgb),.2);border-left:8px solid var(--background-tertiary);padding:12px 16px;quotes:none;width:100%}.wrap{flex-wrap:wrap}.col,.column{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.col.center,.column.center{align-items:center;text-align:center}.col.full,.column.full{width:100%}.col.vcenter,.column.vcenter{justify-content:center}.row{display:flex;gap:12px;width:100%}.row.center{justify-content:center}.row.vcenter{align-items:center}.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}figcaption{color:rgba(var(--text),.8);padding:4px 0}section{margin:32px 0}section:first-child{margin-top:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostsui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "My personalised UI library",
   "main": "css/ghostsui.css",
   "sass": "./scss/ghostsui.scss",

package/scss/ui/_inputs.scss

@@ -46,7 +46,7 @@ textarea {
     max-height: 250px;
 }
 
-input:not([type='checkbox']) {
+input:not([type='checkbox'], [type='radio']) {
     @include base;
 }
 
@@ -66,3 +66,135 @@ textarea {
         opacity: 0.8;
     }
 }
+
+// Based on https://codepen.io/aaroniker/pen/ZEYoxEY
+
+input[type='checkbox'],
+input[type='radio'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    height: 22px;
+    outline: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+
+    border: 2px solid var(--background-tertiary);
+
+    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+
+    &:after {
+        content: '';
+        display: block;
+        left: 0;
+        top: 0;
+        position: absolute;
+
+        transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2),
+            opacity 0.2s;
+    }
+
+    &:checked {
+        background-color: var(--primary);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.8;
+    }
+
+    &:focus:not(&:disabled),
+    &:hover:not(&:disabled) {
+        border-color: var(--primary);
+    }
+
+    &:not(.switch) {
+        width: 22px;
+
+        &:after {
+            opacity: 0;
+        }
+
+        &:checked:after {
+            opacity: 1;
+        }
+    }
+}
+
+input[type='checkbox'] {
+    &:not(.switch) {
+        border-radius: 7px;
+
+        &:after {
+            width: 5px;
+            height: 9px;
+            border: 2px solid var(--text);
+            border-top: 0;
+            border-left: 0;
+            left: 6.5px;
+            top: 3.5px;
+            transform: rotate(var(--rotation, 20deg));
+        }
+
+        &:checked {
+            --rotation: 43deg;
+        }
+    }
+
+    &.switch {
+        width: 38px;
+        border-radius: 11px;
+
+        &:after {
+            left: 2px;
+            top: 1.5px;
+            border-radius: 50%;
+            width: 15px;
+            height: 15px;
+            background: var(--switch-colour, rgba(var(--text-rgb), 0.7));
+            transform: translateX(var(--x, 0));
+        }
+
+        &:checked {
+            --switch-colour: var(--text);
+            --x: 15px;
+        }
+
+        &:disabled {
+            &:not(:checked) {
+                &:after {
+                    opacity: 0.6;
+                }
+            }
+        }
+    }
+}
+
+input[type='radio'] {
+    border-radius: 100%;
+
+    width: 22px;
+    height: 22px;
+    padding: 12px;
+
+    &:after {
+        width: 20px;
+        height: 20px;
+
+        border-radius: 100%;
+        background: var(--text);
+        opacity: 0;
+
+        top: 2.2px;
+        left: 2.2px;
+
+        transform: scale(var(--s, 0.8));
+    }
+
+    &:checked {
+        --s: 0.6;
+    }
+}