:root {
--bg: #2d2d2d;
--mid: #666666;
--fg: #d3d0c8;
--link: #5d89b5;
--hilight: #5d89b5;
}
body {
background-color: var(--bg);
color: var(--fg);
font-family: "IBM Plex Sans", "Roboto", "Fira Sans", sans-serif;
}
a {
color: var(--link);
}
pre {
font-family: "IBM Plex Mono", "JetBrains Mono", "Fira Code", monospace;
}
.gui {
width: 100%;
height: 85vh;
display: flex;
flex-direction: column;
align-items: center;
}
.gui > textarea {
width: 80%;
height: 100%;
padding: 0.5em;
background-color: var(--bg);
color: var(--fg);
border-color: var(--mid);
}
.gui > .buttons {
margin-top: 1em;
display: flex;
flex-direction: column;
align-items: center;
}
.gui > .buttons > #submit-paste {
margin-right: 0.5em;
}
.gui > .buttons > p {
margin: 0;
margin-right: 0.25em;
}
.gui > .buttons > .file-area-outer {
display: flex;
flex-direction: column;
align-items: center;
width: 25vw;
margin-top: 0.25em;
}
.gui > .buttons > .file-area-outer > #submit-file {
margin-top: 0.75em;
}
.gui > .buttons > .file-area-outer > .file-area {
width: 100%;
position: relative;
margin-top: 0.5em;
}
.gui > .buttons > .file-area-outer > .file-area input[type=file] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
cursor: pointer;
}
.gui > .buttons > .file-area-outer > .file-area input[type=file]:valid + .file-dummy {
border-color: var(--hilight);
}
.gui > .buttons > .file-area-outer > .file-area input[type=file]:valid + .file-dummy .success {
display: inline-block;
}
.gui > .buttons > .file-area-outer > .file-area input[type=file]:valid + .file-dummy .default {
display: none;
}
.gui > .buttons > .file-area-outer > .file-area .file-dummy {
width: 100%;
padding: 3.125em 0;
margin-right: 1.25em;
border: 0.125em dashed var(--mid);
background-color: var(--bg);
text-align: center;
transition: border-color 0.25s ease-in-out;
}
.gui > .buttons > .file-area-outer > .file-area .file-dummy .success {
display: none;
}
.gui > .buttons > .file-area-outer > .file-area:hover .file-dummy {
border: 0.125em dashed var(--hilight);
}