html {
font-size: 16px;
-ms-overflow-style: auto;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
box-shadow:none;
}
body {
color: #797979;
background: #f1f2f7;
-webkit-overflow-scrolling: touch;
font-family:'Microsoft YaHei';
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
color: #17a2b8;
text-decoration: none;
}
.container-fluid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 1000px;
}
.login-container {
min-height: 500px;
box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);
display: flex;
width: 1000px;
}
.login-container section {
width: 50%;
}
.login-container .login-sidebox {
position: relative;
background: -webkit-gradient(linear, left bottom, left top, from(#3a485a), to(#607089));
background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
color: #fff;
}
.login-container .login-sidebox::before, .login-container .login-sidebox::after {
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.login-container .login-sidebox::before {
background: url(image/left-1.png) no-repeat 0 0;
}
.login-container .login-sidebox::after {
background: url(image/left-2.png) no-repeat right bottom;
}
.login-container .login-sidebox .login-sidebox-content {
padding: 80px 80px 48px;
position: relative;
z-index: 1;
}
.login-sidebox-header {
margin-bottom: 40px;
}
.login-sidebox-logo {
display: flex;
align-items: center;
margin-bottom: 14px;
}
.login-sidebox-logo img {
width: 48px;
height: auto;
border-radius: 50%;
margin-right: 14px;
}
.login-sidebox-logo span {
display: inline;
font-size: 1.5rem;
font-weight: 700;
}
.login-sidebox-subtitle {
font-size: 20pt;
font-weight: normal;
}
.login-sidebox-footer {
margin-top: 40px;
border-top: solid 1px #ddd;
padding-top: 28px;
font-size: 0.875rem;
font-weight: 500;
}
.login-sidebox-footer a {
cursor: pointer;
color: #fff;
}
.login-form {
padding: 64px;
font-size: 0.875rem;
}
.login-form-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
}
.login-form-header h2 {
margin-bottom: 0;
font-size: 1.714rem;
}
.login-other {
display: table;
text-align: center;
white-space: nowrap;
margin: 0.25rem 0 0.625rem 0;
}
.login-other {
display: table;
text-align: center;
white-space: nowrap;
margin: 0.25rem 0 0.625rem 0;
}
.login-other:before, .login-other:after {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC");
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
background-repeat: no-repeat;
}
.login-other:before {
background-position: right 1em top 50%;
}
.login-other:after {
background-position: left 1em top 50%;
}
.login-list {
display: flex;
justify-content: space-between;
}
.login-list .item {
width: 32px;
height: 32px;
}
.login-wrap .form-control {font-weight:bold; padding:8px 10px; height:auto; line-height:24px;
}
.btn-login {
color: #fff;
background: #fe7300;
border: 0px;
}
.btn-login:hover {
background: #f38d30;
color: #fff;
outline: none
}
.btn-login:focus {
background: #f38d30;
color: #fff;
border: 0px;
outline: none;
}
.forget-password {
padding: 16px 0;
}
@media (min-width: 768px) {
.login-footer {
display: block;
position: absolute;
bottom: 40px;
}
.login-footer .login-footer-body {
display: flex;
width: 600px;
justify-content: space-around;
}
.login-footer .login-footer-body li {
list-style: none;
}
.login-footer .login-footer-body li a {
color: #7e8392;
}
}