OpenAuth_server/views/src/login/login.scss

133 lines
1.9 KiB
SCSS

@import "@material/button/mdc-button";
@import "inputs";
@import "style";
.spanned-btn {
width: 100%;
background: $primary !important; // text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
* {
box-sizing: border-box;
}
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
header {
text-align: center;
margin-top: 4em;
}
h1,
h3 {
font-weight: 300;
}
h1 {
color: #636363;
}
h3 {
color: $primary;
}
form {
max-width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px,
rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
position: relative;
}
.loader_box {
width: 64px;
height: 64px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.loader {
display: inline-block;
position: relative;
z-index: 100;
}
.loader:after {
content: " ";
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
border: 5px solid #000000;
border-color: #000000 transparent #000000 transparent;
animation: loader 1.2s linear infinite;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
footer {
text-align: center;
}
footer p {
color: #888;
font-size: 13px;
letter-spacing: 0.4px;
}
footer a {
color: $primary;
text-decoration: none;
transition: all 0.2s ease;
}
footer a:hover {
color: #666;
text-decoration: underline;
}
footer img {
width: 80px;
transition: all 0.2s ease;
}
footer img:hover {
opacity: 0.83;
}
footer img:focus,
footer a:focus {
outline: none;
}
.invisible {
display: none;
}
.errorColor {
background: $error !important;
}
.error {
color: $error;
margin-top: 5px;
font-size: 13px;
}