mellow_app/static/login.css
/*
Common
*/
body {
height: 100%;
background-color: #282C34;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
input {
background-color: transparent;
border: none;
color: #E4E4E4;
}
input:focus {
outline: none;
}
button:focus {
outline: none;
}
@keyframes colorChanging {
0% {
opacity:1;
}
15% {
opacity:1;
}
20% {
opacity:0;
}
95% {
opacity:0;
}
100% {
opacity:1;
}
}
#logo-swap img {
display: block;
animation-name: colorChanging;
animation-timing-function: initial;
animation-iteration-count: infinite;
animation-duration: 15s;
}
#logo-swap img:nth-of-type(1) {
animation-delay: 12s;
position: absolute;
z-index: 1;
}
#logo-swap img:nth-of-type(2) {
animation-delay: 9s;
position: absolute;
z-index: 2;
}
#logo-swap img:nth-of-type(3) {
animation-delay: 6s;
position: absolute;
z-index: 3;
}
#logo-swap img:nth-of-type(4) {
animation-delay: 3s;
position: absolute;
z-index: 4;
}
#logo-swap img:nth-of-type(5) {
animation-delay: 0;
position: absolute;
z-index: 5;
}
.login-form {
margin: 5px;
}
.terminal-code {
color: #85FF00;
}
.terminal-comment {
color: #BBBBBB;
}
#submit {
display: block;
margin: auto;
margin-top: 40px;
margin-bottom: 10px;
background-color: transparent;
border: none;
color: #85FF00;
}
#forgot {
display: block;
margin: auto;
margin-top: 10px;
margin-bottom: 20px;
background-color: transparent;
border: none;
color: #BBBBBB;
font-size: 0.8em;
}
#copyright {
position: absolute;
bottom: 2px;
font-size: 0.85em;
color: #979797;
}
.btn-header {
position: absolute;
right: 30px;
top: 20px;
}
.btn-pill {
background-color: #45D298;
font-family: 'Quicksand', sans-serif;
font-weight: 500;
color: #FFFFFF;
border: none;
padding: 8px 20px;
border-radius: 50px;
cursor: pointer;
}
.btn-header:hover {
color: #282C34;
}
.cadastro-icon {
visibility: hidden;
display: none;
}
.main-logo {
width: 588px;
}
#logo-swap {
width: 588px;
position: fixed;
top: 80px;
left: calc(50% - 294px);
display: block;
}
#terminal-place {
margin-top: 250px;
}
#terminal {
width: 550px;
display: block;
margin: auto;
padding: 5px 0 0 5px;
background-color: #21252B;
border-style: solid;
border-color: #E4E4E4 #1A1C21 #1A1C21 #1A1C21;
border-radius: 5px;
border-width: 20px 1px 1px 1px;
-webkit-box-shadow: 12px 13px 18px 2px rgba(0,0,0,0.7);
-moz-box-shadow: 12px 13px 18px 2px rgba(0,0,0,0.7);
box-shadow: 12px 13px 18px 2px rgba(0,0,0,0.7);
color: #85FF00;
font-family: 'Share Tech Mono', monospace;
font-size: 1.5em;
}