color: inherit;
}
-html {
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- height: 100%;
-}
-
-body {
- font-size: .8rem;
- background-color: #eee;
- height: auto;
-}
-
-html,
-body {
- font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica",
- "Hiragino Sans GB";
- margin: 0;
- padding: 0;
- background-color: #EBF1F6;
-}
header {
display: none;
}
/* Main interface right 右主界面 */
-.main-right {
- width: 84%;
- height: 100%;
-}
-
.main-right .container .alert,
.main-right .container .alert-message {
margin-top: 1rem;
}
/* fix Main Login 登录界面*/
-body.login {
- background: #fff url(./loginBG.png) no-repeat center center;
- height: 100%;
+.login .main-right {
+ background: url(./loginBG.png) no-repeat center center / cover;
+ text-align: center;
}
.login header {
display: none;
}
-.login > .main > .main-right {
- width: 100%;
- text-align: center;
- background-color: transparent;
-}
-
.login .brand {
display: block;
color: #fff;
.login > .main #maincontent {
margin-top: 5rem;
+ padding-bottom: 20px;
display: inline-block;
background-color: transparent;
width: 39%;
position: relative;
}
-.login > .main .cbi-value-last > .cbi-value-field > div {
- content: '';
+.login > .main .cbi-value-last .cbi-value-field > div {
height: 24px;
width: 24px;
+ display: inline-block;
+ background: url(./op-eye.png) no-repeat center center / cover;
position: absolute;
- top: 9px;
+ top: 8px;
right: 12px;
- background: no-repeat center center / cover;
}
-.login > .main .cbi-value-last > .cbi-value-field .eye {
- background-image: url(./op-eye.png);
-}
-
-.login > .main .cbi-value-last > .cbi-value-field .op-eye {
+.login > .main .cbi-value-last .cbi-value-field.op-eye > div {
background-image: url(./cl-eye.png);
}
-.login > .main .cbi-input-text {
+.login > .main .cbi-value .cbi-input-text {
+ margin: 0 0 16px;
+ padding-left: 36px;
width: 100%;
- height: 42px;
- background: #fff no-repeat 12px center;
+ height: 42px;
+ border: 1px solid #556270;
border-radius: 20px;
- padding-left: 42px;
- font-size: 18px;
- border: none;
+ background: #fff no-repeat 11px center / 19px;
}
.login > .main .cbi-value .cbi-input-text {
background-color: #9a4569;
}
+.login footer {
+ padding: 0;
+}
+
@media screen and (min-height: 585px) {
.login footer {
position: absolute;
.logged-in .main-right {
float: right;
+ width: 84%;
+ height: 100%;
}
.logged-in .main-right .container {
}
@media screen and (max-width: 992px) {
+ .login .main-right {
+ background: #354057;
+ }
+
.login > .main #maincontent {
- margin-top: 2rem;
width: 90%;
}
- .login-info .main {
- width: 100%;
- }
-
- .login > .main .container {
- width: 100%;
- }
-
.logged-in header {
z-index: 2000;
top: 0;
height: calc(100% - 3rem);
}
- .main-left .nav-container {
+ .logged-in .main-left .nav-container {
top: 0;
left: 0;
width: 50%;
height: 100%;
}
- .main-left .nav-container .navbar-container {
+ .logged-in .main-left .nav-container .navbar-container {
overflow-y: scroll;
}
width: 100%;
}
- body.login {
- background: #354057;
- }
-
[data-page^="command-cfg"] header .container > .brand {
display: block;
margin-top: -1.75rem;
/* The scroll bar of the navigation bar is compatible with each browser. */
/* Google */
- .main-left .navbar-container::-webkit-scrollbar {
+ .logged-in .main-left .navbar-container::-webkit-scrollbar {
width: 6px;
background: transparent;
}
- .main-left .navbar-container::-webkit-scrollbar-button {
+ .logged-in .main-left .navbar-container::-webkit-scrollbar-button {
display: none;
}
- .main-left .navbar-container::-webkit-scrollbar-thumb {
+ .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
background-color: #ffffff61;
border-radius: 10px;
}
- .main-left .navbar-container::-webkit-scrollbar-thumb {
+ .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
background-color: #839dd67a;
border-radius: 10px;
}
- .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
+ .logged-in .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
background-color: #839dd67a;
}
/* IE */
- .main-left .navbar-container {
+ .logged-in .main-left .navbar-container {
scrollbar-track-color: transparent;
scrollbar-face-color: #839dd67a;
scrollbar-arrow-color: transparent;
scrollbar-base-color: transparent;
}
- .main-left .navbar-container:hover {
+ .logged-in .main-left .navbar-container:hover {
scrollbar-face-color: #839dd67a;
}
}
}
});
+ $('.login .main-right').css('min-height', $(win).height());
$(win).resize(function () {
if ($(win).width() > 921) {
$(".main-left").css("width", "");
showSide = false;
}
- $('body.login').height($(win).height());
+ $('.login .main-right').css('min-height', $(win).height());
});
/**
$(this).next().css('border-color', $(this).css('background-color'));
});
- $('<div class="eye"></div>').appendTo('.login > .main .cbi-value-last > .cbi-value-field');
- $('.login > .main .cbi-value-last > .cbi-value-field .eye').click(function () {
- var className = $(this).attr('class');
- if (className.indexOf('op-eye') > (-1)) {
- $('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'text');
- $(this).addClass('eye').removeClass('op-eye');
- } else {
- $('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'password');
- $(this).addClass('op-eye').removeClass('eye');
+ $('<div>').appendTo('.login > .main .cbi-value-last .cbi-value-field');
+ $('.login > .main .cbi-value-last .cbi-value-field > div').click(function(){
+ var thisParent = $(this).parent();
+ if( thisParent.attr('class').indexOf('op-eye') == (-1) ){
+ thisParent.addClass('op-eye');
+ $(this).prev().attr('type', 'text');
+ }else {
+ thisParent.removeClass('op-eye');
+ $(this).prev().attr('type', 'password');
}
+
});
})(window, jQuery);