Move minifying and bundling JS and CSS to compile.php, add header
Close #17
This commit is contained in:
11 files changed
+236
-114
No files matched your search
@@ -1,11 +1,13 @@
|
||||
@import 'editMenu.css';
|
||||
/*
|
||||
* @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-fg-less: #212121;
|
||||
--color-borders: #D6D6D6;
|
||||
--color-borders-dark: #646464;
|
||||
|
||||
@@ -48,12 +50,14 @@
|
||||
|
||||
* { box-sizing: border-box; z-index: 1; }
|
||||
|
||||
body { margin: 2em; background: var(--color-bg-normal); color: var(--color-fg-normal);
|
||||
body { margin: 0; background: var(--color-bg-normal); color: var(--color-fg-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; line-height: 1.2em; }
|
||||
h1 { display: block; width: 100%; text-align: center; margin: 0 auto 1.5em auto;
|
||||
padding: 1em 0;
|
||||
font-size: 2.5em; line-height: 1.2em; }
|
||||
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; }
|
||||
@@ -121,7 +125,7 @@ ul.fieldList { display: block; margin: .5em 0; padding: 0 0; list-style: none; }
|
||||
ul.fieldList > li { display: inline-block; margin: .1em; padding: .3em;
|
||||
border: 1px solid var(--color-borders); background: var(--color-bg-raised2);
|
||||
color: var(--color-fg-normal);
|
||||
cursor: pointer; transition: background .4s, border .4s, box-shadow .4s;; }
|
||||
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: var(--color-accent-hover); background: var(--color-accent-hover); box-shadow: 0 8px 6px -6px black; }
|
||||
@@ -155,7 +159,67 @@ ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); back
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
header { display: block; width: 100%; padding: 0 2em; font-size: 1rem; z-index: 2; }
|
||||
header#mainHeader { margin-bottom: 2em;
|
||||
background: var(--color-fg-less); color: var(--color-bg-raised2); display: table; }
|
||||
header#mainHeader > * { display: table-cell; }
|
||||
@media screen and (max-width: 70em) {
|
||||
header#mainHeader > * { min-width: 20%; }
|
||||
}
|
||||
header#mainHeader > *:last-child { text-align: right; }
|
||||
|
||||
header#mainHeader, header#mainHeader * { z-index: 5; }
|
||||
header#mainHeader:hover,
|
||||
header#mainHeader *:hover { z-index: 6; }
|
||||
header * { z-index: 2; }
|
||||
header > * { display: inline-block; vertical-align: middle; }
|
||||
|
||||
header h2 { font-size: 1.1em; color: inherit; }
|
||||
|
||||
header select { background: inherit; font-size: .85rem; border: 0; }
|
||||
header select option { color: var(--color-fg-normal); }
|
||||
|
||||
header nav { color: var(--color-bg-raised2); }
|
||||
header nav > * { position: relative; display: inline-block; flex: 1; font-size: 1rem; padding: .7em 0; }
|
||||
|
||||
header#mainHeader img { display: inline-block; height: 1.9em; margin-right: .5em; vertical-align: middle; filter: invert(1); transition: opacity .4s; }
|
||||
header#mainHeader h2 { display: inline-block; vertical-align: middle; font-weight: normal; }
|
||||
header#mainHeader > a:focus > img,
|
||||
header#mainHeader > a:hover > img { opacity: .7; }
|
||||
|
||||
@media screen and (min-width: 75em) {
|
||||
|
||||
header nav > div > div { display: none; position: absolute; right: 0; top: 100%; width: 300px;
|
||||
background: var(--color-fg-less); text-align: left; }
|
||||
header nav > div > a { padding: .95em 1em; transition: background .4s, color .4s; }
|
||||
header nav > div:focus > a,
|
||||
header nav > div:hover > a { color: var(--color-gray); }
|
||||
header nav > div > a:focus + div,
|
||||
header nav > div:hover > div { display: block; animation: fade-in .4s; }
|
||||
header nav > div > a:focus + div > a,
|
||||
header nav > div:hover > div > a { display: block; padding: .5em 1em; cursor: pointer;
|
||||
transition: background .4s, color .4s; }
|
||||
header nav > div > a:focus + div > a:focus,
|
||||
header nav > div:hover > div > a:hover { background: var(--color-fg-normal); color: var(--color-bg-normal); }
|
||||
header { padding: 0 10em; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 75em) {
|
||||
body { font-size: 1.08em; }
|
||||
h1 img { display: none; }
|
||||
header .branding { padding: .7rem; }
|
||||
header nav:before { content: " \2630 "; display: inline-block; position: absolute; right: 3rem; top: 0;
|
||||
padding: .8rem 0; font-size: 1.5em; text-align: right; }
|
||||
header nav > * { display: none; }
|
||||
|
||||
header nav:hover:before { display: none; }
|
||||
header nav:hover { position: absolute; left: 0; top: 0; display: flex;
|
||||
width: 100%; min-height: 90vh; padding: 2em 1em .5em 1em; background: var(--color-bg-normal); color: var(--color-fg-normal);
|
||||
border-bottom: 1px solid var(--color-borders); box-shadow: 2px 2px 4px var(--color-borders);
|
||||
z-index: 3; animation: fade-in .4s; }
|
||||
|
||||
header nav:hover > * { display: block; flex: 1; min-width: 40vw; padding: 1em; font-size: 1em; }
|
||||
header nav:hover > div a { display: block; padding: .2em 0; }
|
||||
header { padding: 0 1em; }
|
||||
}
|
||||
Vendored
+1
-35
@@ -1,35 +1 @@
|
||||
@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}
|
||||
@media(prefers-color-scheme:dark){:root{--color-bg-normal:#000;--color-bg-raised:#273000;--color-bg-raised2:#121212;--color-fg-normal:#FFF;--color-fg-less:#EEE;--color-borders:#37474F;--color-borders-dark:#BDBDBD;--color-accent-normal:#FFC107;--color-accent-hover:#FFA000}}
|
||||
@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);color:var(--color-fg-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;line-height:1.2em}
|
||||
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}
|
||||
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 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: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: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 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;margin:.1em;padding:.3em;border:1px solid var(--color-borders);background:var(--color-bg-raised2);color:var(--color-fg-normal);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:var(--color-accent-hover);background:var(--color-accent-hover);box-shadow:0 8px 6px-6px black}.options>.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>.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 screen and(max-width:75em){body{font-size:1.08em}
|
||||
h1 img{display:none}}
|
||||
.newToolTip{position:fixed;display:none!important;min-width:300px!important;max-width:600px;background:var(--color-fg-less)!important;color:var(--color-bg-normal);text-align:left;font-size:.95rem;border-radius:.2em;box-shadow:1px 1px 4px var(--color-borders-dark);z-index:3000;white-space:initial!important}#newToolTipMain:before{content:attr(data-title);display:block;padding:.5em 1em;max-width:598px;background:var(--color-fg-less);color:var(--color-bg-raised2);font-weight:700;box-shadow:0 4px 2px -2px var(--color-borders-dark)}#newToolTipMain>*{padding:.5rem 1rem!important}#newToolTipMain>table td{padding:.5rem 1em;vertical-align:top}@media screen and (min-width:75em){#newToolTipMain.visible{display:block!important}}#newToolTipMain img{max-width:200px;max-height:300px}dl#newToolTipMain dt{padding-bottom:0;font-weight:700}dl#newToolTipMain dd{margin:-1em 0 0;padding:0}.newToolTipMain p+.toolTipHierarchy{padding-bottom:0!important}#newToolTipMain>h5{padding:0 1rem!important;margin:-.5rem 0!important}.copyToDialogue{cursor:pointer}@keyframes pulseBorderSize{0%{border-width:1em}50%{border-width:1.2em}100%{border-width:1em}}@keyframes fade-in-and-vanish{0%{opacity:0;z-index:1000}5%{opacity:.4}15%{opacity:1;padding:.8em}75%{opacity:1;padding:.8em}85%{opacity:.4;transform:translateY(0px)}99%{opacity:0;transform:translateY(-30px)}100%{opacity:0;z-index:0}}#dialogueArea{display:block;position:fixed;left:0;top:0;width:100%;height:100%;max-width:initial;max-height:initial;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);z-index:10000}#dialogue{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:60vw;min-height:2em;max-width:90vw;max-height:90vh;overflow-y:auto;padding:1.5em 1em;background:var(--color-bg-normal);border-radius:.3em;box-shadow:2px 2px 4px var(--color-fg-less),-2px -2px 4px var(--color-fg-less)}#dialogue h3{margin-top:0;padding-top:0;text-transform:initial;color:var(--color-fg-less)}#confirmButtons{text-align:right}#dialogue .buttonLike{margin:.5em 0 .2em .5em;background:0 0;transition:background .4s,color .4s}#dialogue .buttonLike:hover{background:var(--color-borders-dark);color:var(--color-bg-normal)}#dialogue input[type=text],#dialogue textarea{padding:.5em;border-radius:.1em;border:2px solid var(--color-borders);transition:border .4s}#dialogue input[type=text]:hover,#dialogue textarea:hover{border-color:var(--color-fg-normal)}#dialogue button{padding:.6em .8em;font-size:.8em;background:var(--color-bg-normal);border:1px solid var(--color-borders);transition:.4s}#dialogue button:focus,#dialogue button:hover{background:var(--color-fg-less);color:var(--color-bg-normal);border-color:var(--color-fg-less)}#dialogue form>*{display:block;width:100%}#dialogue form label{font-weight:700;color:var(--color-fg-less)}#dialogueClose{float:right;display:inline-block;padding:0 .6em .2em;background:var(--color-bg-raised);border-radius:100%;cursor:pointer;transition:.4s}#dialogueClose:hover{background:var(--color-fg-less);color:var(--color-bg-normal)}#dialogue ul{margin-left:1em;padding-left:0;transition:.4s}#dialogue ul.minimized{height:20px;background-color:var(--color-accent-normal);background-size:20px 20px;background-image:repeating-linear-gradient(to right,var(--color-fg-normal),var(--color-fg-normal) 1px,var(--color-accent-normal) 1px,var(--color-accent-normal))}#dialogue ul.minimized>*{display:none}: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}@media(prefers-color-scheme:dark){:root{--color-bg-normal: #000;--color-bg-raised: #273000;--color-bg-raised2: #121212;--color-fg-normal: #FFF;--color-fg-less: #EEE;--color-borders: #37474F;--color-borders-dark: #BDBDBD;--color-accent-normal: #FFC107;--color-accent-hover: #FFA000}}@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:0;background:var(--color-bg-normal);color:var(--color-fg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}a{text-decoration:none;color:inherit}h1{display:block;width:100%;text-align:center;margin:0 auto 1.5em;padding:1em 0;font-size:2.5em;line-height:1.2em}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}main,body>div,body>form{display:block;max-width:90vw;margin:0 auto 3em;padding-bottom:3em}form>div{margin-bottom:1em}label{display:block;font-weight:700;margin-bottom:.5em}.invisible{display:none!important;opacity:0}.buttonLike,select,button,textarea,input{display:block;width:100%;padding:.5em;border:2.5px solid var(--cLine truncated
|
||||
Reference in new issue
Block a user