website/public/assets/css/register.css
2021-12-12 09:24:17 -05:00

95 lines
1.6 KiB
CSS

.wrapper {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.register-wrapper {
margin: auto;
}
form.register {
padding: 48px;
background-color: #151934;
border-radius: 12px;
max-width: calc(90vw - 92px);
width: 400px;
}
form.register input {
appearance: none;
-webkit-appearance: none;
display: block;
border: 0;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
background-color: var(--btn-secondary);
border: none;
border-radius: 4px;
padding: 12px;
color: var(--text);
width: calc(100% - 24px);
margin-bottom: 12px;
}
form.register input::placeholder {
color: var(--text-secondary);
}
form.register input:focus {
background-color: #fff;
color: var(--btn-secondary);
transition: 200ms;
outline: none;
}
form.register button {
appearance: none;
-webkit-appearance: none;
display: block;
border: 0;
border-radius: 4px;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
color: var(--text);
padding: 12px;
background: var(--btn);
cursor: pointer;
width: 100%;
}
form.register .login {
text-decoration: none;
}
form.register .login button {
background: var(--btn-secondary);
margin-top: 18px;
}
footer {
margin-top: 23px;
}
@keyframes banner-notice {
0% {top: -150px}
20% {top: 35px}
80% {top: 35px}
100% {top: -150px}
}
.banner-notice {
display: flex;
justify-content: center;
position: fixed;
top: -150px;
width: 100%;
animation: banner-notice 5s;
}
.banner-notice div {
padding: 4px 36px;
border-radius: 5px;
z-index: 3;
}
.banner-notice.error div {
background: #A9375B;
}