@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: 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; }
}