client/src/assets/scss/login.scss

92 lines
1.6 KiB
SCSS

@import '@/assets/scss/main';
#bg-img {
height: 100vh;
width: 100%;
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.content-wrapper {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
.content-elements {
margin: 80px 0;
width: inherit;
display: flex;
flex-direction: column;
gap: 24px;
.login-form {
width: inherit;
display: grid;
gap: 15px;
.form-field {
display: flex;
flex-direction: column;
background-color: rgba($white, 0.5);
border-radius: 3px;
min-width: 400px;
margin: 0 auto;
label {
color: $black;
background-color: rgba($white, 0.5);
padding: 4px;
font-size: 0.875rem;
border-radius: 3px 3px 0 0;
}
input {
padding: 4px;
font-size: 0.875rem;
&:focus-visible {
outline: none;
}
}
}
}
.row-buttons {
display: flex;
justify-content: center;
gap: 8px;
.button {
padding: 10px 0;
min-width: 100px;
font-size: 0.65rem;
border-radius: 5px;
span {
margin: auto;
}
}
}
}
}
.main-title {
margin-top: 115px;
text-align: center;
font-size: 3rem;
text-shadow:
-1px -1px 0 $gray,
1px -1px 0 $gray,
-1px 1px 0 $gray,
1px 1px 0 $gray;
}
a {
text-decoration: none;
}