modules/cms/client/scss/_partials/_login.scss
[data-lky-hook="lackey"].login {
background: $color-background-accent;
text-align: center;
position: relative;
display: flex;
justify-content: center;
padding: 8rem 0;
aside.dialog {
position: absolute;
top: 0;
z-index: 1;
background: #cb523f;
width: 100%;
text-align: center;
color: #ffffff;
padding: 1.5rem;
font-size: 1rem;
a.button {
margin-left: 1rem;
background: #ffffff;
border-radius: 0.1rem;
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-block;
}
a.close {
font-family: Arial;
font-size: 1.3rem;
float: right;
color: #ffffff;
text-decoration: none;
margin-top: 0.3rem;
}
}
header {
background: none;
margin: 0 0 2rem 0;
padding: 0;
h1 {
color: #ffffff;
font-size: 1.2rem;
font-weight: bold;
font-family: 'Roboto';
&+p {
margin-top: 1rem;
}
}
p {
color: #ffffff;
}
img.logo {
margin-bottom: 3rem;
}
}
.form-wrap {
width: 21.5625rem;
margin: 0 auto;
form {
.username, .password {
margin-bottom: 2rem;
border-bottom: 1px solid $color-washed;
padding-bottom: 0.5rem;
display: flex;
justify-content: flex-start
}
label {
display: inline-block;
color: #ffffff;
text-align: left;
flex: 0 0 10%;
margin-right: 0.5rem;
}
input {
appearance: none;
display: inline;
background: $color-background-accent;
border: 0;
font-size: 1rem;
color: #ffffff;
outline: none;
padding: 0.5rem;
flex: 1 1 90%;
&::-webkit-input-placeholder {
color: $color-washed!important;
}
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px $color-background-accent inset;
}
}
button[type=submit] {
display: block;
margin: 0 auto;
appearance: none;
background: $color-background-highlight;
border: 0;
outline: 0;
text-transform: uppercase;
color: #ffffff;
width: 100%;
padding: 1rem 0;
font-size: 1rem;
img {
vertical-align: middle;
margin-right: 0.3rem;
}
}
}
}
.forgot {
color: $color-washed;
text-decoration: none;
margin-top: 2rem;
span {
font-family: Arial;
}
&:hover {
text-decoration: underline;
}
}
.powered {
color: $color-washed;
position: absolute;
bottom: 1rem;
right: 1rem;
a {
color: $color-washed;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}