Move on to a fully pre-compiled setup

See #14
This commit is contained in:
2022-11-07 02:55:54 +01:00
parent 014523c17d
commit 3e4554f759
17 changed files with 324 additions and 182 deletions

View File

@ -38,7 +38,7 @@ a { text-decoration: none; color: inherit; }
h1 { display: block; max-width: 600px; margin: 0 auto 1.5em auto; }
h1 > * { display: inline-block; vertical-align: middle; color: var(--color-fg-less); }
h1 img { height: 2em; margin-right: .2em; border-radius: .1em; opacity: .7; transition: opacity .4s; }
h1 img { height: 2em; margin-right: .5em; border-radius: .1em; opacity: .7; transition: opacity .4s; }
h1 img:hover { opacity: 1; }
main,
@ -118,6 +118,23 @@ ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); back
.actionList > li a { display: inline-block; padding: .3em; border-radius: .3em; transition: background .4s; }
.actionList > li a:hover { background: var(--color-accent-hover); }
.loading:before,
.loading:after { content: " "; display: block;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
height: 64px; width: 64px; margin: 0; padding: 0;
border-radius: 50%;
border: 8px solid var(--color-accent-hover);
border-color: var(--color-accent-hover) transparent transparent transparent;
z-index: 100;
animation: rotating 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation-delay: -0.15s; }
.loading:after { animation-delay: -0.45s; }
@keyframes rotating {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* =============
| Dark mode
|============ */

View File

@ -1,32 +1,35 @@
@import 'editMenu.css';@font-face{font-family:sourceSansPro;src:local('Source-Sans-Pro'),local('Source Sans Pro'),url(../fonts/SourceSansPro-Regular.woff2)format('woff2'),url(../fonts/SourceSansPro-Regular.ttf)format('truetype');font-display:swap}*{box-sizing:border-box;z-index:1}
body{margin:2em;background:#FFF;font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}
@import 'editMenu.css';@import 'dialogue.css';:root{--color-bg-normal:#FFF;--color-bg-raised:#EEE;--color-bg-raised2:#FAFAFA;--color-fg-normal:#000;--color-fg-less:#212121;--color-borders:#D6D6D6;--color-borders-dark:#646464;--color-accent-normal:#FFCCBC;--color-accent-hover:#CB9B8C}
@font-face{font-family:sourceSansPro;src:local('Source-Sans-Pro'),local('Source Sans Pro'),url(../fonts/SourceSansPro-Regular.woff2)format('woff2'),url(../fonts/SourceSansPro-Regular.ttf)format('truetype');font-display:swap}*{box-sizing:border-box;z-index:1}
body{margin:2em;background:var(--color-bg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}
a{text-decoration:none;color:inherit}
h1{display:block;max-width:600px;margin:0 auto 1.5em auto}
h1>*{display:inline-block;vertical-align:middle;color:#212121}
h1 img{height:2em;margin-right:.2em;border-radius:.1em;opacity:.7;transition:opacity.4s}
h1>*{display:inline-block;vertical-align:middle;color:var(--color-fg-less)}
h1 img{height:2em;margin-right:.5em;border-radius:.1em;opacity:.7;transition:opacity.4s}
h1 img:hover{opacity:1}
body>div,body>form{display:block;max-width:90vw;margin:0 auto 3em auto;padding-bottom:3em}
main,body>div,body>form{display:block;max-width:90vw;margin:0 auto 3em auto;padding-bottom:3em}
form>div{margin-bottom:1em}
label{display:block;font-weight:bold;margin-bottom:.5em}.invisible{display:none!important;opacity:0}.buttonLike,select,button,textarea,input{display:block;width:100%;padding:.5em.5em;border:2.5px solid #EEE;background:inherit;color:#424242;font-family:roboto;font-size:1em;border-radius:.2em;transition:border.2s}.buttonLike{display:inline-block;text-align:center}
input[type="submit"],button{padding:.5em.8em}.buttonLike,input[type="submit"],button{background:#FFCCBC;color:#424242;border:none;font-weight:bold;text-transform:uppercase;transition:background.2s,color.2s}
label{display:block;font-weight:bold;margin-bottom:.5em}.invisible{display:none!important;opacity:0}.buttonLike,select,button,textarea,input{display:block;width:100%;padding:.5em.5em;border:2.5px solid var(--color-bg-raised);background:inherit;color:var(--color-fg-less);font-family:roboto;font-size:1em;border-radius:.2em;transition:border.2s}.buttonLike{display:inline-block;text-align:center}
input[type="submit"],button{padding:.5em.8em}.buttonLike,input[type="submit"],button{background:var(--color-accent-normal);color:var(--color-fg-less);border:none;font-weight:bold;text-transform:uppercase;transition:background.2s,color.2s}
textarea{line-height:1.2em}
select:hover,textarea:hover,input:hover{border-color:#888}.buttonLike:focus,input[type="submit"]:focus,button:focus,.buttonLike:hover,input[type="submit"]:hover,button:hover{background:#CB9B8C;color:#000}
select:hover,textarea:hover,input:hover{border-color:#888}.buttonLike:focus,input[type="submit"]:focus,button:focus,.buttonLike:hover,input[type="submit"]:hover,button:hover{background:var(--color-accent-hover);color:#000}
aside.buttonLike+.buttonLike,aside button+button{margin-top:.5em}
aside>h4:first-child{margin-top:0}
select:focus,textarea:focus,input:focus{border-color:#CB9B8C;box-shadow:none}
select:focus,textarea:focus,input:focus{border-color:var(--color-accent-hover);box-shadow:none}
textarea:invalid,input:invalid{box-shadow:none}
textarea:invalid:focus,input:invalid:focus{border-right-width:1em}
textarea{min-height:30vh}
table{width:100%;max-height:60vh;margin:2em 0;border-collapse:collapse;overflow:auto}
th{padding:.3em.5em;text-align:left;border-bottom:2px solid #424242}
tbody>tr:nth-child(2n+1){background:#F2F2F2}
td{padding:.3em.5em;border-bottom:1px solid #D6D6D6}
body>div.uploader{background:#F2F2F2;border:2px solid #EEE;padding:1em 1em}
th{padding:.3em.5em;text-align:left;border-bottom:2px solid var(--color-fg-less)}
tbody>tr:nth-child(2n+1){background:var(--color-bg-raised2)}
td{padding:.3em.5em;border-bottom:1px solid var(--color-borders)}
body>div.uploader{background:var(--color-bg-raised2);border:2px solid var(--color-bg-raised);padding:1em 1em}
ul.fieldList{display:block;margin:.5em 0;padding:0 0;list-style:none}
ul.fieldList>li{display:inline-block;padding:.3em;margin:.1em;border:1px solid #D6D6D6;background:#FAFAFA;cursor:pointer;transition:background.4s,border.4s,box-shadow.4s}
ul.fieldList>li:hover{background:#FFF;border-color:#212121}
ul.fieldList>li{display:inline-block;padding:.3em;margin:.1em;border:1px solid var(--color-borders);background:var(--color-bg-raised2);cursor:pointer;transition:background.4s,border.4s,box-shadow.4s}
ul.fieldList>li:hover{background:var(--color-bg-normal);border-color:var(--color-fg-less)}
ul.fieldList>li.requiredField:before{display:inline-block;content:" \002612 ";margin-right:.5em}
ul.fieldList>li.humanTLToggled{border-color:#CB9B8C;background:#CB9B8C;box-shadow:0 8px 6px-6px black}.options>a.buttonLike{display:inline-block;width:auto;margin:.15em 0;padding:.4em.5em;text-transform:inherit;cursor:pointer;background:initial;border:2px solid #D6D6D6;opacity:1;transition:background.4s,opacity.4s}.options>a.buttonLike:hover{background:#D6D6D6}.actionList{margin:1em 0 1em 1em;padding:.5em 0}.actionList>li a{display:inline-block;padding:.3em;border-radius:.3em;transition:background.4s}.actionList>li a:hover{background:#CB9B8C}
ul.fieldList>li.humanTLToggled{border-color:var(--color-accent-hover);background:var(--color-accent-hover);box-shadow:0 8px 6px-6px black}.options>a.buttonLike{display:inline-block;width:auto;margin:.15em 0;padding:.4em.5em;text-transform:inherit;cursor:pointer;background:initial;border:2px solid var(--color-borders);opacity:1;transition:background.4s,opacity.4s}.options>a.buttonLike:hover{background:var(--color-borders)}.actionList{margin:1em 0 1em 1em;padding:.5em 0}.actionList>li a{display:inline-block;padding:.3em;border-radius:.3em;transition:background.4s}.actionList>li a:hover{background:var(--color-accent-hover)}.loading:before,.loading:after{content:" ";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;width:64px;margin:0;padding:0;border-radius:50%;border:8px solid var(--color-accent-hover);border-color:var(--color-accent-hover)transparent transparent transparent;z-index:100;animation:rotating 1.2s cubic-bezier(0.5,0,0.5,1)infinite;animation-delay:-0.15s}.loading:after{animation-delay:-0.45s}
@keyframes rotating{from{transform:rotate(0deg)}
to{transform:rotate(360deg)}}
@media(prefers-color-scheme:dark){body{background:#263238;color:#ECEFF1}
input,select,textarea{background:inherit;color:inherit;border:3px solid #37474F;transition:border.4s,box-shadow.4s}
a.buttonLike:focus,.options>a.buttonLike:focus,button:focus,select:focus,textarea:focus,input:focus,textarea:active,input:active,a.buttonLike:hover,.options>a.buttonLike:hover,ul.fieldList>li:hover,button:hover,select:hover,textarea:hover,input:hover{background:inherit;border-color:#FFF;box-shadow:initial;border-radius:.2em}