diff --git a/smiggins/templates/css/base.css b/smiggins/templates/css/base.css index a2b4f572..c841211c 100644 --- a/smiggins/templates/css/base.css +++ b/smiggins/templates/css/base.css @@ -1 +1 @@ -::selection{background-color:var(--accent-50);color:var(--text)}:focus{outline:calc(2em / 14) var(--accent) solid}::-webkit-scrollbar{display:none}body{background-color:var(--background);color:var(--text);font-family:Poppins,Arial;padding:5vh 0;text-align:center;font-size:14px;margin:0;overflow-x:hidden;word-wrap:break-word}@media screen and (min-width:1025px){body{font-size:16px}}@media screen and (max-width:565px){body{font-size:18px;padding:5vh 3vw}}hr{border-color:var(--accent)}small{display:block;font-size:.7em;color:var(--subtext)}noscript{display:block;margin-bottom:10vh}noscript h1,noscript h2{color:var(--red)}noscript ul{display:inline-block;text-align:left}button{background-color:var(--button-background);color:var(--text);padding:5px 7px;border:none;border-radius:999em;cursor:pointer;font-size:.8em;transition:color .15s,scale .15s,margin .15s,background-color .15s}button:disabled{opacity:60%;pointer-events:none}button:active{scale:95%;background-color:var(--button-hover-background)}button:hover{background-color:var(--button-hover-background)}button.inverted{background-color:var(--button-inverted-background)}button.primary,button.primary:hover{background-color:var(--accent);color:var(--background);border-color:var(--button-border);outline-color:var(--button-border)}.fake-input{display:inline-block;text-align:left;max-width:200px;width:90vw;cursor:text}.fake-input,input:not([type=checkbox]),option,select,textarea{background-color:var(--input-background);color:var(--text);border:1.5px solid var(--input-border);margin:-1.5px;border-radius:2px;padding:5px 7px;margin:3px;font-size:.8em;resize:vertical}body:not([data-disable-checkboxes]) input[type=checkbox]+label,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]){cursor:pointer}body:not([data-disable-checkboxes]) input[type=checkbox]:has(+ label),body:not([data-disable-checkboxes]) label+input[type=checkbox]{width:0;height:0;opacity:0;margin:0;padding:0;border:none;outline:0}body:not([data-disable-checkboxes]) input[type=checkbox]+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox])::after{content:"";transition:background-color .25s,outline-color .25s;background-color:var(--checkbox-background);display:inline-block;position:relative;top:.1em;width:1em;height:1em;border-radius:.2em;outline:1px solid var(--checkbox-border)}body:not([data-disable-checkboxes]) input[type=checkbox]:checked+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]:checked)::after{background-color:var(--accent)}body:not([data-disable-checkboxes]) input[type=checkbox]:focus+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]:focus)::after{outline-color:var(--accent)}label::after{margin-left:.4em}label::before{margin-right:.4em}option{font-family:Poppins,sans-serif;font-size:1.1em}input:not([type=checkbox]),select,textarea{font-family:Poppins}input:not([type=checkbox])::placeholder,textarea::placeholder{color:var(--subtext);opacity:100%}input:not([type=checkbox]):disabled,textarea:disabled{color:var(--subtext);opacity:1;pointer-events:none}input:not([type=checkbox]):disabled::placeholder,textarea:disabled::placeholder{color:var(--gray)}a:link,a:visited{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}a::selection{-webkit-text-decoration-color:var(--text);text-decoration-color:var(--text)}i{opacity:80%}p{margin:0;padding:2px}table.center{margin-left:auto;margin-right:auto}table.bordered{border-collapse:collapse}table.bordered td,table.bordered th{border:1.5px solid var(--table-border)}.user-badge{width:1.2em;height:1.2em;display:inline-block;position:relative;top:.2em;fill:var(--text)}.text:not(svg){color:var(--text)}.accent:not(svg){color:var(--accent)}.red:not(svg){color:var(--red)}.text svg,svg.text{fill:var(--text)}.accent svg,svg.accent{fill:var(--accent)}.red svg,svg.red{fill:var(--red)!important}.inline-block{display:inline-block}.nowrap{white-space:nowrap}.left{text-align:left}.center{text-align:center}.right{text-align:right}.hidden{display:none}.mono{font-family:Cousine}.no-underline{text-decoration:none!important}body:not([data-bar-pos]) .icons,body[data-bar-pos^="u"] .icons{top:1em}body[data-bar-pos^="l"] .icons{bottom:1em}body:not([data-bar-pos]) .icons,body[data-bar-pos$="l"] .icons{left:1em}body[data-bar-pos$="r"] .icons{right:1em}body:not([data-bar-dir]) .icons,body[data-bar-dir="v"] .icons{flex-direction:column}body[data-bar-dir="h"] .icons{flex-direction:row}body[data-bar-dir="h"][data-bar-pos$="r"]{flex-direction:row-reverse}body[data-bar-dir="v"][data-bar-pos^="l"]{flex-direction:column-reverse}.icons{filter:drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 3px var(--background));display:flex;flex-wrap:wrap;position:fixed;gap:.5em;z-index:999}.icons a{display:inline-block}.icons svg{height:1.5em;width:1.5em;display:inline-block;fill:var(--text);stroke:none;cursor:pointer}.icons svg:active{scale:90%}.icons .dot::after{position:absolute;display:inline-block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-.3em,0);background-color:var(--accent);content:""}#modal-container{background-color:var(--modal-backdrop);position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center}#modal-container #modal{background-color:var(--modal-background);outline:1px solid var(--modal-border);border-radius:10px;width:calc(100vw - 120px);max-width:500px;padding:20px 40px;text-align:center;height:fit-content}#modal-container #modal h1{margin-top:0}#modal-container #modal #modal-buttons{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center}[disabled][data-modal-disable]:is(button,input,textarea){opacity:100%!important;pointer-events:none!important} \ No newline at end of file +::selection{background-color:var(--accent-50);color:var(--text)}:focus{outline:calc(2em / 14) var(--accent) solid}::-webkit-scrollbar{display:none}body{background-color:var(--background);color:var(--text);font-family:Poppins,Arial;padding:5vh 0;text-align:center;font-size:14px;margin:0;overflow-x:hidden;word-wrap:break-word}@media screen and (min-width:1025px){body{font-size:16px}}@media screen and (max-width:565px){body{font-size:18px;padding:5vh 3vw}}hr{border-color:var(--accent)}small{display:block;font-size:.7em;color:var(--subtext)}noscript{display:block;margin-bottom:10vh}noscript h1,noscript h2{color:var(--red)}noscript ul{display:inline-block;text-align:left}button{background-color:var(--button-background);color:var(--text);padding:5px 7px;border:none;border-radius:999em;cursor:pointer;font-size:.8em;transition:color .15s,scale .15s,margin .15s,background-color .15s}button:disabled{opacity:60%;pointer-events:none}button:active{scale:95%;background-color:var(--button-hover-background)}button:hover{background-color:var(--button-hover-background)}button.inverted{background-color:var(--button-inverted-background)}button.primary,button.primary:hover{background-color:var(--accent);color:var(--background);border-color:var(--button-border);outline-color:var(--button-border)}.fake-input{display:inline-block;text-align:left;max-width:200px;width:90vw;cursor:text}.fake-input,input:not([type=checkbox]),option,select,textarea{background-color:var(--input-background);color:var(--text);border:1.5px solid var(--input-border);margin:-1.5px;border-radius:2px;padding:5px 7px;margin:3px;font-size:.8em;resize:vertical}body:not([data-disable-checkboxes]) input[type=checkbox]+label,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]){cursor:pointer}body:not([data-disable-checkboxes]) input[type=checkbox]:has(+ label),body:not([data-disable-checkboxes]) label+input[type=checkbox]{width:0;height:0;opacity:0;margin:0;padding:0;border:none;outline:0}body:not([data-disable-checkboxes]) input[type=checkbox]+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox])::after{content:"";transition:background-color .25s,outline-color .25s;background-color:var(--checkbox-background);display:inline-block;position:relative;top:.1em;width:1em;height:1em;border-radius:.2em;outline:1px solid var(--checkbox-border)}body:not([data-disable-checkboxes]) input[type=checkbox]:checked+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]:checked)::after{background-color:var(--accent)}body:not([data-disable-checkboxes]) input[type=checkbox]:focus+label::before,body:not([data-disable-checkboxes]) label:has(+ input[type=checkbox]:focus)::after{outline-color:var(--accent)}label::after{margin-left:.4em}label::before{margin-right:.4em}option{font-family:Poppins,sans-serif;font-size:1.1em}input:not([type=checkbox]),select,textarea{font-family:Poppins}input:not([type=checkbox])::placeholder,textarea::placeholder{color:var(--subtext);opacity:100%}input:not([type=checkbox]):disabled,textarea:disabled{color:var(--subtext);opacity:1;pointer-events:none}input:not([type=checkbox]):disabled::placeholder,textarea:disabled::placeholder{color:var(--gray)}a:link,a:visited{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}a::selection{-webkit-text-decoration-color:var(--text);text-decoration-color:var(--text)}i{opacity:80%}p{margin:0;padding:2px}table.center{margin-left:auto;margin-right:auto}table.bordered{border-collapse:collapse}table.bordered td,table.bordered th{border:1.5px solid var(--table-border)}.user-badge{width:1.2em;height:1.2em;display:inline-block;position:relative;top:.2em;fill:var(--text)}.text:not(svg){color:var(--text)}.accent:not(svg){color:var(--accent)}.red:not(svg){color:var(--red)}.text svg,svg.text{fill:var(--text)}.accent svg,svg.accent{fill:var(--accent)}.red svg,svg.red{fill:var(--red)!important}.inline-block{display:inline-block}.nowrap{white-space:nowrap}.left{text-align:left}.center{text-align:center}.right{text-align:right}.hidden{display:none}.mono{font-family:Cousine}.no-underline{text-decoration:none!important}body:not([data-bar-pos]) .icons,body[data-bar-pos^="u"] .icons{top:1em}body[data-bar-pos^="l"] .icons{bottom:1em}body:not([data-bar-pos]) .icons,body[data-bar-pos$="l"] .icons{left:1em}body[data-bar-pos$="r"] .icons{right:1em}body:not([data-bar-dir]) .icons,body[data-bar-dir="v"] .icons{flex-direction:column}body[data-bar-dir="h"] .icons{flex-direction:row}body[data-bar-dir="h"][data-bar-pos$="r"]{flex-direction:row-reverse}body[data-bar-dir="v"][data-bar-pos^="l"]{flex-direction:column-reverse}.icons{filter:drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 5px var(--background)) drop-shadow(0 0 3px var(--background));display:flex;flex-wrap:wrap;position:fixed;gap:.5em;z-index:2}.icons a{display:inline-block}.icons svg{height:1.5em;width:1.5em;display:inline-block;fill:var(--text);stroke:none;cursor:pointer}.icons svg:active{scale:90%}.icons .dot::after{position:absolute;display:inline-block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-.3em,0);background-color:var(--accent);content:""}#modal-container{background-color:var(--modal-backdrop);position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:center;z-index:50}#modal-container #modal{background-color:var(--modal-background);outline:1px solid var(--modal-border);border-radius:10px;width:calc(100vw - 120px);max-width:500px;padding:20px 40px;text-align:center;height:fit-content}#modal-container #modal h1{margin-top:0}#modal-container #modal #modal-buttons{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center}[disabled][data-modal-disable]:is(button,input,textarea){opacity:100%!important;pointer-events:none!important} \ No newline at end of file