110 lines
2 KiB
CSS
110 lines
2 KiB
CSS
body {
|
|
--background-color: #ECEFF1;
|
|
--secondary-background-color: #CFD8DC;
|
|
--trinary-background-color: #B0BEC5;
|
|
--foreground-color: #000000;
|
|
--secondary-foreground-color: #424242;
|
|
|
|
--info-color: #90caf9;
|
|
--error-color: #f06292;
|
|
--error-color-light: #f48fb1;
|
|
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
margin: 0;
|
|
height: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
#mainwrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
flex: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#upload_form {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
#upload_form form {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 8px;
|
|
}
|
|
|
|
#upload_input {
|
|
width: 100%;
|
|
padding: 20px 0px;
|
|
}
|
|
#upload_button {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
|
|
@keyframes slide { from { bottom: 0px; } to { bottom: -100%; } }
|
|
|
|
#flash_wrapper {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
animation: slide cubic-bezier(0.4, 0, 0.2, 1) 1;
|
|
animation-fill-mode: forwards;
|
|
animation-delay: 4s;
|
|
animation-duration: 1s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.flash {
|
|
width: 100%;
|
|
padding: 16px 32px;
|
|
}
|
|
.flash > p {
|
|
margin: 0px;
|
|
}
|
|
.flash {
|
|
background-color: var(--info-color);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { background-color: var(--error-color); }
|
|
20% { background-color: var(--error-color-light); }
|
|
100% { background-color: var(--error-color); }
|
|
}
|
|
.flash.error {
|
|
background-color: var(--error-color);
|
|
animation: pulse ease 2;
|
|
animation-fill-mode: backwards;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
a.nostyle:link {
|
|
text-decoration: inherit;
|
|
color: inherit;
|
|
}
|
|
a.nostyle:visited {
|
|
text-decoration: inherit;
|
|
color: inherit;
|
|
}
|
|
button.nostyle {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
@media only screen and (max-width: 780px) {
|
|
body {
|
|
flex-direction: column;
|
|
}
|
|
}
|