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

[project/luci.git] / themes / luci-theme-rosy / htdocs / luci-static / rosy / cascade.css

diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
index 3adc4c36f8abb53e404cf0cfa7559577e5996bef..787002cbccbd6027df7cbddb6a711748978a664e 100644 (file)
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
@@ -157,26 +157,6 @@ h6 {
        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;
@@ -593,11 +573,6 @@ footer > a {
 }
 
 /* Main interface right 右主界面 */
-.main-right {
-       width: 84%;
-       height: 100%;
-}
-
 .main-right .container .alert,
 .main-right .container .alert-message {
        margin-top: 1rem;
@@ -2036,9 +2011,9 @@ input[name="nslookup"] {
 }
 
 /* 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 {
@@ -2054,12 +2029,6 @@ body.login {
        display: none;
 }
 
-.login > .main > .main-right {
-       width: 100%;
-       text-align: center;
-       background-color: transparent;
-}
-
 .login .brand {
        display: block;
        color: #fff;
@@ -2073,6 +2042,7 @@ body.login {
 
 .login > .main #maincontent {
        margin-top: 5rem;
+       padding-bottom: 20px;
        display: inline-block;
        background-color: transparent;
        width: 39%;
@@ -2162,32 +2132,28 @@ body.login {
     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 {
@@ -2216,6 +2182,10 @@ body.login {
     background-color: #9a4569;
 }
 
+.login footer {
+       padding: 0;
+}
+
 @media screen and (min-height: 585px) {
        .login footer {
                position: absolute;
@@ -2275,6 +2245,8 @@ body.login {
 
 .logged-in .main-right {
        float: right;
+       width: 84%;
+       height: 100%;
 }
 
 .logged-in .main-right .container {
@@ -2637,19 +2609,14 @@ body.login {
 }
 
 @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;
@@ -2679,7 +2646,7 @@ body.login {
                height: calc(100% - 3rem);
        }
 
-       .main-left .nav-container {
+       .logged-in .main-left .nav-container {
                top: 0;
                left: 0;
                width: 50%;
@@ -2688,7 +2655,7 @@ body.login {
                height: 100%;
        }
 
-       .main-left .nav-container .navbar-container {
+       .logged-in .main-left .nav-container .navbar-container {
                overflow-y: scroll;
        }
 
@@ -2696,10 +2663,6 @@ body.login {
                width: 100%;
        }
 
-       body.login {
-               background: #354057;
-       }
-
        [data-page^="command-cfg"] header .container > .brand {
                display: block;
                margin-top: -1.75rem;
@@ -2885,31 +2848,31 @@ body.login {
 
        /* 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;
@@ -2920,7 +2883,7 @@ body.login {
                scrollbar-base-color: transparent;
        }
 
-       .main-left .navbar-container:hover {
+       .logged-in .main-left .navbar-container:hover {
                scrollbar-face-color: #839dd67a;
        }
 }