196 lines
4.1 KiB
CSS
196 lines
4.1 KiB
CSS
#title {
|
|
font-size: 5em;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
font-family: "Exo", sans-serif;
|
|
background: rgb(111, 48, 153);
|
|
background: -moz-linear-gradient(145deg, rgba(111, 48, 153, 1) 0%, rgba(235, 18, 18, 1) 50%, rgba(255, 168, 62, 1) 100%);
|
|
background: -webkit-linear-gradient(145deg, rgba(111, 48, 153, 1) 0%, rgba(235, 18, 18, 1) 50%, rgba(255, 168, 62, 1) 100%);
|
|
background: linear-gradient(145deg, rgba(111, 48, 153, 1) 0%, rgba(235, 18, 18, 1) 50%, rgba(255, 168, 62, 1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6f3099", endColorstr="#ffa83e", GradientType=1);
|
|
background-size: 400% 400%;
|
|
animation: gradientBG 15s ease infinite;
|
|
}
|
|
|
|
input.form-control {
|
|
border: none;
|
|
background-color: #fff;
|
|
border-radius: 40px;
|
|
height: 40px;
|
|
padding: 10px 15px;
|
|
font-family: 'Work Sans', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 1.25em;
|
|
margin: 5px 5px;
|
|
width: 40%;
|
|
}
|
|
|
|
.login-button {
|
|
display: inline-block;
|
|
border: none;
|
|
border-radius: 40px;
|
|
padding: 10px 25px;
|
|
font-family: 'Work Sans' sans-serif;
|
|
background-color: white;
|
|
color: black;
|
|
transition: all 250ms;
|
|
margin-bottom: 10px;
|
|
font-size: medium;
|
|
}
|
|
|
|
.login-button:hover {
|
|
transition: all 250ms;
|
|
background-color: darkgrey;
|
|
}
|
|
|
|
.other-buttons {
|
|
background-color: darkgrey;
|
|
}
|
|
|
|
.flex-container {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
@keyframes gradientBG {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.has-error {
|
|
-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
|
animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
|
|
}
|
|
|
|
@keyframes shake-horizontal {
|
|
0%, 100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
10%, 30%, 50%, 70% {
|
|
-webkit-transform: translateX(-10px);
|
|
transform: translateX(-10px);
|
|
}
|
|
20%, 40%, 60% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
80% {
|
|
-webkit-transform: translateX(8px);
|
|
transform: translateX(8px);
|
|
}
|
|
90% {
|
|
-webkit-transform: translateX(-8px);
|
|
transform: translateX(-8px);
|
|
}
|
|
}
|
|
|
|
.error {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Very small devices (portrait phone, 575 and down) */
|
|
|
|
@media (max-width: 575px) {
|
|
#title {
|
|
font-size: 3.5em;
|
|
}
|
|
input.form-control {
|
|
width: 100%;
|
|
}
|
|
.center30left {
|
|
top: 50%;
|
|
left: 35px;
|
|
right: 35px;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
/* Small devices (landscape phones, 576px and up)*/
|
|
|
|
@media (min-width: 576px) {
|
|
.center30left {
|
|
top: 50%;
|
|
left: 35px;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
/* Large devices (desktops, 992px and up)*/
|
|
|
|
@media (min-width: 992px) {
|
|
.center30left {
|
|
top: 50%;
|
|
left: 35%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
}
|
|
|
|
/* Custom checkbox container */
|
|
|
|
.checkbox-container input {
|
|
display: none;
|
|
}
|
|
|
|
.checkbox-container input:checked+.checkmark {
|
|
background-color: #2196fc;
|
|
}
|
|
|
|
.checkbox-container:hover .checkmark {
|
|
background-color: darkgrey;
|
|
}
|
|
|
|
.checkbox-container input:checked+.checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 5px;
|
|
width: 9px;
|
|
border-left: 2px solid white;
|
|
border-bottom: 2px solid white;
|
|
top: 45%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: inline-block;
|
|
padding-left: 30px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-family: sans-serif;
|
|
font-size: 24px;
|
|
user-select: none;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.checkbox-container .checkmark {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
background-color: white;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#register-email, #lost-email {
|
|
width: 100%;
|
|
}
|