Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-rosy: Fix the display bug in the mobile login interface

Browse source 
Signed-off-by: YanlanShen <yanlan.Shen@rosinson.com>
This commit is contained in:
YanlanShen 2019-02-28 19:32:08 +08:00
parent 61ea3ed1ee
commit cb0532d141
2 changed files with 46 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
View file

@ -157,26 +157,6 @@ h6 {
color: inherit; 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 { header {
display: none; display: none;
@ -593,11 +573,6 @@ footer > a {
} }
/* Main interface right 右主界面 */ /* Main interface right 右主界面 */
.main-right {
width: 84%;
height: 100%;
}
.main-right .container .alert, .main-right .container .alert,
.main-right .container .alert-message { .main-right .container .alert-message {
margin-top: 1rem; margin-top: 1rem;
@ -2036,9 +2011,9 @@ input[name="nslookup"] {
} }
/* fix Main Login 登录界面*/ /* fix Main Login 登录界面*/
body.login { .login .main-right {
background: #fff url(./loginBG.png) no-repeat center center; background: url(./loginBG.png) no-repeat center center / cover;
height: 100%; text-align: center;
} }
.login header { .login header {
@ -2054,12 +2029,6 @@ body.login {
display: none; display: none;
} }
.login > .main > .main-right {
width: 100%;
text-align: center;
background-color: transparent;
}
.login .brand { .login .brand {
display: block; display: block;
color: #fff; color: #fff;
@ -2073,6 +2042,7 @@ body.login {
.login > .main #maincontent { .login > .main #maincontent {
margin-top: 5rem; margin-top: 5rem;
padding-bottom: 20px;
display: inline-block; display: inline-block;
background-color: transparent; background-color: transparent;
width: 39%; width: 39%;
@ -2162,32 +2132,28 @@ body.login {
position: relative; position: relative;
} }
.login > .main .cbi-value-last > .cbi-value-field > div { .login > .main .cbi-value-last .cbi-value-field > div {
content: '';
height: 24px; height: 24px;
width: 24px; width: 24px;
display: inline-block;
background: url(./op-eye.png) no-repeat center center / cover;
position: absolute; position: absolute;
top: 9px; top: 8px;
right: 12px; right: 12px;
background: no-repeat center center / cover;
} }
.login > .main .cbi-value-last > .cbi-value-field .eye { .login > .main .cbi-value-last .cbi-value-field.op-eye > div {
background-image: url(./op-eye.png);
}
.login > .main .cbi-value-last > .cbi-value-field .op-eye {
background-image: url(./cl-eye.png); 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%; width: 100%;
height: 42px; height: 42px;
background: #fff no-repeat 12px center; border: 1px solid #556270;
border-radius: 20px; border-radius: 20px;
padding-left: 42px; background: #fff no-repeat 11px center / 19px;
font-size: 18px;
border: none;
} }
.login > .main .cbi-value .cbi-input-text { .login > .main .cbi-value .cbi-input-text {
@ -2216,6 +2182,10 @@ body.login {
background-color: #9a4569; background-color: #9a4569;
} }
.login footer {
padding: 0;
}
@media screen and (min-height: 585px) { @media screen and (min-height: 585px) {
.login footer { .login footer {
position: absolute; position: absolute;
@ -2275,6 +2245,8 @@ body.login {
.logged-in .main-right { .logged-in .main-right {
float: right; float: right;
width: 84%;
height: 100%;
} }
.logged-in .main-right .container { .logged-in .main-right .container {
@ -2637,19 +2609,14 @@ body.login {
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {
.login .main-right {
background: #354057;
}
.login > .main #maincontent { .login > .main #maincontent {
margin-top: 2rem;
width: 90%; width: 90%;
} }
.login-info .main {
width: 100%;
}
.login > .main .container {
width: 100%;
}
.logged-in header { .logged-in header {
z-index: 2000; z-index: 2000;
top: 0; top: 0;
@ -2679,7 +2646,7 @@ body.login {
height: calc(100% - 3rem); height: calc(100% - 3rem);
} }
.main-left .nav-container { .logged-in .main-left .nav-container {
top: 0; top: 0;
left: 0; left: 0;
width: 50%; width: 50%;
@ -2688,7 +2655,7 @@ body.login {
height: 100%; height: 100%;
} }
.main-left .nav-container .navbar-container { .logged-in .main-left .nav-container .navbar-container {
overflow-y: scroll; overflow-y: scroll;
} }
@ -2696,10 +2663,6 @@ body.login {
width: 100%; width: 100%;
} }
body.login {
background: #354057;
}
[data-page^="command-cfg"] header .container > .brand { [data-page^="command-cfg"] header .container > .brand {
display: block; display: block;
margin-top: -1.75rem; margin-top: -1.75rem;
@ -2885,31 +2848,31 @@ body.login {
/* The scroll bar of the navigation bar is compatible with each browser. */ /* The scroll bar of the navigation bar is compatible with each browser. */
/* Google */ /* Google */
.main-left .navbar-container::-webkit-scrollbar { .logged-in .main-left .navbar-container::-webkit-scrollbar {
width: 6px; width: 6px;
background: transparent; background: transparent;
} }
.main-left .navbar-container::-webkit-scrollbar-button { .logged-in .main-left .navbar-container::-webkit-scrollbar-button {
display: none; display: none;
} }
.main-left .navbar-container::-webkit-scrollbar-thumb { .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
background-color: #ffffff61; background-color: #ffffff61;
border-radius: 10px; border-radius: 10px;
} }
.main-left .navbar-container::-webkit-scrollbar-thumb { .logged-in .main-left .navbar-container::-webkit-scrollbar-thumb {
background-color: #839dd67a; background-color: #839dd67a;
border-radius: 10px; border-radius: 10px;
} }
.main-left .navbar-container:hover::-webkit-scrollbar-thumb { .logged-in .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
background-color: #839dd67a; background-color: #839dd67a;
} }
/* IE */ /* IE */
.main-left .navbar-container { .logged-in .main-left .navbar-container {
scrollbar-track-color: transparent; scrollbar-track-color: transparent;
scrollbar-face-color: #839dd67a; scrollbar-face-color: #839dd67a;
scrollbar-arrow-color: transparent; scrollbar-arrow-color: transparent;
@ -2920,7 +2883,7 @@ body.login {
scrollbar-base-color: transparent; scrollbar-base-color: transparent;
} }
.main-left .navbar-container:hover { .logged-in .main-left .navbar-container:hover {
scrollbar-face-color: #839dd67a; scrollbar-face-color: #839dd67a;
} }
} }

20
themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
View file

@ -205,6 +205,7 @@
} }
}); });
$('.login .main-right').css('min-height', $(win).height());
$(win).resize(function () { $(win).resize(function () {
if ($(win).width() > 921) { if ($(win).width() > 921) {
$(".main-left").css("width", ""); $(".main-left").css("width", "");
@ -213,7 +214,7 @@
showSide = false; showSide = false;
} }
$('body.login').height($(win).height()); $('.login .main-right').css('min-height', $(win).height());
}); });
/** /**
@ -262,16 +263,17 @@
$(this).next().css('border-color', $(this).css('background-color')); $(this).next().css('border-color', $(this).css('background-color'));
}); });
$('<div class="eye"></div>').appendTo('.login > .main .cbi-value-last > .cbi-value-field'); $('<div>').appendTo('.login > .main .cbi-value-last .cbi-value-field');
$('.login > .main .cbi-value-last > .cbi-value-field .eye').click(function () { $('.login > .main .cbi-value-last .cbi-value-field > div').click(function(){
var className = $(this).attr('class'); var thisParent = $(this).parent();
if (className.indexOf('op-eye') > (-1)) { if( thisParent.attr('class').indexOf('op-eye') == (-1) ){
$('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'text'); thisParent.addClass('op-eye');
$(this).addClass('eye').removeClass('op-eye'); $(this).prev().attr('type', 'text');
}else { }else {
$('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'password'); thisParent.removeClass('op-eye');
$(this).addClass('op-eye').removeClass('eye'); $(this).prev().attr('type', 'password');
} }
}); });
})(window, jQuery); })(window, jQuery);