website/public/assets/css/login.css
2021-12-13 16:48:53 +01:00

146 lines
2.4 KiB
CSS

.wrapper {
display: flex;
min-height: 100vh;
}
.account-form-wrapper {
margin: auto;
width: fit-content;
overflow: hidden;
}
.account-form-wrapper .logotype {
display: block;
position: relative;
left: -6px;
margin-bottom: 30px;
}
.account-form-wrapper .logotype svg {
width: 140px;
}
.account-form-wrapper .logotype svg text {
font-size: 20px;
transform: translate(593px, 495px);
}
form.account {
display: block;
padding: 40px 48px;
background-color: #292E53;
color: var(--text-secondary);
border-radius: 12px;
width: 360px;
max-width: calc(90vw - 96px);
}
form.account h2 {
margin: 0;
color: var(--text)
}
form.account p {
margin: 12px 0;
}
form.account div {
margin-top: 24px;
}
form.account input {
appearance: none;
-webkit-appearance: none;
display: block;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
background-color: #353C6A;
border: none;
border-radius: 4px;
padding: 12px;
color: var(--text);
width: calc(100% - 24px);
}
form.account input:focus {
background-color: #4B5595;
outline: none;
transition: 150ms;
}
form.account label {
display: block;
margin-bottom: 6px;
text-transform: uppercase;
font-size: 12px;
}
form.account button {
appearance: none;
-webkit-appearance: none;
display: block;
border: none;
border-radius: 4px;
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 1rem;
color: var(--text);
padding: 12px 30px;
background: #353C6A;
margin-top: 18px;
cursor: pointer;
width: 100%;
text-decoration: none;
}
form.account button[type="submit"] {
background: var(--btn);
margin: auto;
}
form.account a {
text-decoration: none;
display: block;
color: var(--text-secondary);
text-align: right;
margin: 6px 0;
width: fit-content;
}
form.account a:hover {
color: var(--text);
}
form.account a.pwdreset {
margin-left: auto;
font-size: 14px;
}
form.account a.register {
margin:auto;
margin-top: 18px;
}
form.account.register div:last-child {
margin-top: 42px;
}
@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;
}