260 lines
10 KiB
CSS
260 lines
10 KiB
CSS
/*
|
|
* @import 'editMenu.css';
|
|
@import 'dialogue.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-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;
|
|
}
|
|
|
|
}
|
|
|
|
/* ==============
|
|
| Load fonts
|
|
|================ */
|
|
|
|
@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;
|
|
}
|
|
|
|
/* ==============
|
|
| General
|
|
|================ */
|
|
|
|
* { 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 .8em 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; }
|
|
|
|
main,
|
|
body > div,
|
|
body > footer,
|
|
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; }
|
|
|
|
body > footer { border-top: .1em solid var(--color-borders); }
|
|
|
|
body > footer > div { display: block; }
|
|
body > footer > div a,
|
|
body > footer > div span { display: block; font-weight: bold; cursor: pointer;
|
|
color: var(--color-fg-less); transition: color .4s; }
|
|
body > footer > div a:hover,
|
|
body > footer > div span:hover { color: var(--color-accent-hover); }
|
|
|
|
.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); }
|
|
|
|
#helpSection { margin-bottom: 0; font-size: .9em;
|
|
padding-bottom: 0; border-bottom: 1px solid var(--color-borders); }
|
|
#helpSection h3:before { content: " ? "; display: inline-block;
|
|
padding: .2em .5em; margin-right: .5em;
|
|
background: var(--color-borders); border-radius: .2em;
|
|
color: var(--color-borders-dark); }
|
|
|
|
@media screen and (min-width: 768px) {
|
|
#helpSection > div { display: grid; grid-template-columns: 1fr 1fr; }
|
|
#helpSection > div > div { display: inline-block; grid-column: auto; }
|
|
}
|
|
@media screen and (min-width: 1366px) {
|
|
#helpSection > div { grid-template-columns: 1fr 1fr 1fr; }
|
|
}
|
|
|
|
body > div.uploader { margin-bottom: 0; }
|
|
body > div.uploader > form { background: var(--color-bg-raised2); border: 2px solid var(--color-bg-raised); padding: 1em 1em; margin-bottom: 0; }
|
|
|
|
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); }
|
|
}
|
|
|
|
|
|
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: 768px) {
|
|
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: 768px) {
|
|
|
|
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: 768px) {
|
|
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; }
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
header#mainHeader,
|
|
header nav,
|
|
header nav > div > div { background: inherit; color: inherit; }
|
|
header#mainHeader { border-bottom: 1px solid var(--color-bg-raised2); }
|
|
}
|