luci-theme-rosy: Change the scroll bar style, compatible with each browser

Signed-off-by: Yanlan Shen <yanlan.shen.@rosinson.com>

3 files changed, 296 insertions, 14 deletions

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 77f0ecf3e2..ca65dad85c 100644
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
@@ -23,25 +23,32 @@
     font-weight: normal;
     font-style: normal;
 }
+
 strong {
     font-weight: normal;
 }
+
 .table {
     display: table;
     position: relative;
 }
+
 .tr {
     display: table-row;
 }
+
 .thead {
     display: table-header-group;
 }
+
 .tbody {
     display: table-row-group;
 }
+
 .tfoot {
     display: table-footer-group;
 }
+
 .td,
 .th {
     vertical-align: middle;
@@ -49,13 +56,16 @@ strong {
     display: table-cell;
     padding: .8em;
 }
+
 .th {
     font-weight: normal;
 }
+
 .tr.placeholder {
     height: 4em;
     background-color: #f9f9f9;
 }
+
 .tr.placeholder>.td {
     position: absolute;
     left: 0;
@@ -65,56 +75,69 @@ strong {
     line-height: 3em;
     background: #f9f9f9;
 }
+
 .table[width="33%"],
 .th[width="33%"],
 .td[width="33%"] {
     width: 33%;
 }
+
 .table[width="100%"],
 .th[width="100%"],
 .td[width="100%"] {
     width: 100%;
 }
+
 .col-1 {
     flex: 1 1 30px !important;
     -webkit-flex: 1 1 30px !important;
 }
+
 .col-2 {
     flex: 2 2 60px !important;
     -webkit-flex: 2 2 60px !important;
 }
+
 .col-3 {
     flex: 3 3 90px !important;
     -webkit-flex: 3 3 90px !important;
 }
+
 .col-4 {
     flex: 4 4 120px !important;
     -webkit-flex: 4 4 120px !important;
 }
+
 .col-5 {
     flex: 5 5 150px !important;
     -webkit-flex: 5 5 150px !important;
 }
+
 .col-6 {
     flex: 6 6 180px !important;
     -webkit-flex: 6 6 180px !important;
 }
+
 .col-7 {
     flex: 7 7 210px !important;
     -webkit-flex: 7 7 210px !important;
 }
+
 .col-8 {
     flex: 8 8 240px !important;
     -webkit-flex: 8 8 240px !important;
 }
+
 .col-9 {
     flex: 9 9 270px !important;
     -webkit-flex: 9 9 270px !important;
 }
+
 .col-10 {
     flex: 10 10 300px !important;
     -webkit-flex: 10 10 300px !important;
 }
+
 .cbi-button-up,
 .cbi-button-down,
 .cbi-value-helpicon,
@@ -129,26 +152,42 @@ strong {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-family: inherit;
     font-weight: normal;
     line-height: 1.1;
     color: inherit;
 }
+
 html {
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     position: relative;
 }
+
 body {
     font-size: 0.8rem;
     background-color: #EEE;
 }
+
 html,
 body {
     margin: 0px;
@@ -157,6 +196,7 @@ body {
     min-height: 100%;
     font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
 }
+
 select {
     padding: 0.36rem 0.8rem;
     color: #555;
@@ -164,6 +204,7 @@ select {
     background-image: none;
     border: 1px solid #ccc;
 }
+
 select,
 input,
 .cbi-dropdown {
@@ -179,30 +220,37 @@ input,
     height: auto;
     font-size: 0.8rem;
 }
+
 select:not([multiple="multiple"]):focus,
 input:focus {
     border-color: #0099CC;
 }
+
 select[multiple="multiple"] {
     height: auto;
 }
+
 code {
     color: #0099CC;
 }
+
 abbr {
     color: #005470;
     text-decoration: underline;
     cursor: help;
 }
+
 hr {
     margin: 1rem 0;
     border-color: #EEE;
     opacity: 0.1;
 }
+
 footer>a {
     color: #aaa;
     text-decoration: none;
 }
+
 .main>.loading {
     position: fixed;
     width: 100%;
@@ -212,6 +260,7 @@ footer>a {
     background-color: #354057;
     top: 0;
 }
+
 .main>.loading>span {
     display: block;
     text-align: center;
@@ -220,27 +269,34 @@ footer>a {
     font-size: 1.2rem;
     line-height: 45px;
 }
+
 .main>.loading>span>.loading-img {
     margin-right: 0.2rem;
     display: inline-block;
 }
+
 .main>.loading>span>.loading-img img {
     vertical-align: middle;
 }
+
 .pull-right {
     float: right;
 }
+
 .pull-left {
     float: left;
 }
+
 li {
     list-style-type: none;
 }
+
 h1 {
     font-size: 2rem;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
 }
+
 h2 {
     margin: 2rem 0 0 0;
     color: #354057;
@@ -248,23 +304,28 @@ h2 {
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
 }
+
 h3 {
     margin: 2rem 0 0 0;
     font-size: 1.4rem;
     padding-bottom: 10px;
 }
+
 h4 {
     margin: 2rem 0 0 0;
     font-size: 1.2rem;
     padding-bottom: 10px;
 }
+
 .mobile-hide {
     display: inline-block;
 }
+
 .PC-hide {
     width: 100%;
     display: none;
 }
+
 .cbi-section {
     margin: 1rem 0 0 0;
     padding: 2rem;
@@ -278,9 +339,11 @@ h4 {
     background-color: #FFF;
     -webkit-overflow-scrolling: touch;
 }
+
 .cbi-section>legend {
     display: none !important;
 }
+
 .cbi-section>h3:first-child,
 .panel-title {
     width: 100%;
@@ -291,10 +354,12 @@ h4 {
     padding-bottom: 1rem;
     margin: 0;
 }
+
 .table {
     width: 100%;
     border-radius: 20px;
 }
+
 .table>.tbody>.tr>.td,
 .table>.tbody>.tr>.th,
 .table>.tfoot>.tr>.td,
@@ -305,65 +370,81 @@ h4 {
     border-top: 1px solid #ddd;
     white-space: nowrap;
 }
+
 .cbi-section-table-cell {
     white-space: nowrap;
     align-self: flex-end;
     flex: 1 1 auto;
 }
+
 .cbi-section-table {
     border: none;
 }
+
 .cbi-section-table-row {
     text-align: center;
     margin-bottom: 1rem;
     background: #f4f4f4;
 }
+
 .cbi-section-table-row:last-child {
     margin-bottom: 0;
 }
+
 .cbi-section-table-row>.cbi-value-field .cbi-input-select,
 .cbi-section-table-row>.cbi-value-field .cbi-input-text,
 .cbi-section-table-row>.cbi-value-field .cbi-input-password,
 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
     width: 100%;
 }
+
 .cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
 .cbi-section-table-row>.cbi-value-field input.cbi-input-password {
     width: calc(100% - 1.5rem);
 }
+
 div>table>tbody>tr:nth-of-type(2n),
 div>.table>.tbody>.tr:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
+
 div>table>tbody>tr:nth-of-type(2n),
 div>.table>.tbody>.tr:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
+
 .cbi-section .table .tr.table-titles {
     background-color: #eee;
 }
+
 .table .tr:first-child .td:first-child,
 .table .tr:first-child::before,
 .table .tr:first-child .th:first-child {
     border-top-left-radius: 10px;
 }
+
 .table .tr:first-child .td:last-child,
 .table .tr:first-child .th:last-child {
     border-top-right-radius: 10px;
 }
+
 .table .tr:last-child .td:first-child,
 .table .tr:last-child::before {
     border-bottom-left-radius: 10px;
 }
+
 .table .tr:last-child .td:last-child {
     border-bottom-right-radius: 10px;
 }
+
 .table .tr.placeholder:last-child {
     background-color: transparent;
 }
+
 .cbi-section .table .cbi-section-table-titles {
     background-color: #e0e0e0;
 }
+
 /* fix progress bar */
 .cbi-progressbar {
     background-color: #9bc1cc;
@@ -371,11 +452,13 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
     overflow: hidden;
     position: relative;
 }
+
 .cbi-progressbar div {
     background-color: #468ea4;
     height: 20px;
     border-radius: 20px;
 }
+
 .cbi-progressbar::after {
     content: attr(title);
     position: absolute;
@@ -387,34 +470,39 @@ div>.table>.tbody>.tr:nth-of-type(2n) {
     line-height: 1.2rem;
     color: #fff;
 }
+
 /* fix multiple table */
 table table,
 .table .table {
     border: none;
 }
+
 .cbi-value-field table,
 .cbi-value-field .table {
     border: none;
 }
+
 td>table>tbody>tr>td,
 .td>.table>.tbody>.tr>.td {
     border: none;
 }
+
 .cbi-value-field>table>tbody>tr>td,
 .cbi-value-field>.table>.tbody>.tr>.td {
     border: none;
 }
+
 /* button style */
 .btn,
 .cbi-button {
     margin: 0 .8rem .5rem 0;
     -webkit-appearance: none;
-    color: #354057;
-    background-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    background-color: #F0F0F0;
     transition: all 0.2s ease-in-out;
     display: inline-block;
     padding: .5rem .8rem;
-    border: 1px solid;
+    border: none;
     border-radius: 25px;
     cursor: pointer;
     -ms-touch-action: manipulation;
@@ -432,6 +520,7 @@ td>table>tbody>tr>td,
     display: inline-block;
     text-decoration: none;
 }
+
 .btn:disabled,
 .cbi-button:disabled {
     cursor: not-allowed;
@@ -439,6 +528,7 @@ td>table>tbody>tr>td,
     opacity: 0.60;
     box-shadow: none;
 }
+
 .cbi-page-actions .cbi-button-apply,
 .cbi-section-actions .cbi-button-edit,
 .cbi-button-edit.important,
@@ -450,6 +540,7 @@ td>table>tbody>tr>td,
     background-color: #337ab7;
     border: none;
 }
+
 .cbi-button-add.important,
 .cbi-button-save.important,
 .cbi-button-positive.important,
@@ -459,6 +550,7 @@ td>table>tbody>tr>td,
     background-color: transparent;
     border: 1px solid #337ab7;
 }
+
 .cbi-button-remove.important,
 .cbi-button-reset.important,
 .cbi-button-negative.important {
@@ -466,6 +558,7 @@ td>table>tbody>tr>td,
     background-color: #d9534f;
     border: none;
 }
+
 .cbi-button-find,
 .cbi-button-link,
 .cbi-button-up,
@@ -475,6 +568,7 @@ td>table>tbody>tr>td,
     background-color: transparent;
     border: 1px solid #468ea4;
 }
+
 .cbi-button-edit,
 .cbi-button-reload,
 .cbi-button-action {
@@ -482,6 +576,7 @@ td>table>tbody>tr>td,
     background-color: transparent;
     border: 1px solid #468ea4;
 }
+
 .cbi-page-actions .cbi-button-apply+.cbi-button-save,
 .cbi-button-add,
 .cbi-button-save,
@@ -490,6 +585,7 @@ td>table>tbody>tr>td,
     background-color: transparent;
     border: 1px solid #354057;
 }
+
 .cbi-section-remove>.cbi-button,
 .cbi-button-remove,
 .cbi-button-reset,
@@ -498,12 +594,15 @@ td>table>tbody>tr>td,
     background-color: transparent;
     border: 1px solid #F24C7C;
 }
+
 .cbi-page-actions .cbi-button-link:first-child {
     float: left;
 }
+
 .a-to-btn {
     text-decoration: none;
 }
+
 /* table */
 .container>.tabs,
 .container>.tabs>li[class~="active"],
@@ -513,78 +612,91 @@ td>table>tbody>tr>td,
 .container>.cbi-tabmenu>li:hover {
     border-radius: 20px;
 }
+
 .container .cbi-map .cbi-tabmenu,
 .container .cbi-map .cbi-tabmenu>li[class~="cbi-tab"],
 .container .cbi-map .cbi-tabmenu>li:hover {
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }
+
 .container .cbi-map .cbi-tabmenu,
 .container>.tabs,
 .container>.cbi-tabmenu {
     overflow: hidden;
 }
+
 .container .cbi-map .cbi-tabmenu+div {
     border-radius: 0;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
 }
+
 .tabs {
     background-color: #FFFFFF;
     margin-top: 1rem;
 }
+
 .cbi-tabmenu>li,
 .tabs>li {
     margin-right: .4rem;
     display: inline-block;
     padding: 0.6rem 0rem;
 }
+
 .cbi-tabmenu>li>a,
 .tabs>li>a {
     text-decoration: none;
     color: #404040;
     padding: 0.5rem 0.8rem;
 }
+
 .tabs>li[class~="active"],
 .tabs>li:hover {
     cursor: pointer;
     background-color: #337ab7;
 }
+
 .tabs>li[class~="active"]>a,
 .tabs>li:hover>a {
     color: #fff;
 }
+
 .cbi-tabmenu {
     border-top: 1px solid #D4D4D4;
     border-left: 1px solid #D4D4D4;
     border-right: 1px solid #D4D4D4;
 }
+
 .cbi-tabmenu>li:hover {
     background-color: #F1F1F1;
 }
+
 .cbi-tabmenu>li[class~="cbi-tab"] {
     background-color: #fff;
 }
+
 .cbi-tabmenu {
     background-color: #D4D4D4;
 }
 
 [data-tab-title] {
-	height: 0;
-	opacity: 0;
-	overflow: hidden;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
 }
 
 [data-tab-active="true"] {
-	opacity: 1;
-	height: auto;
-	overflow: visible;
-	transition: opacity .25s ease-in;
+    opacity: 1;
+    height: auto;
+    overflow: visible;
+    transition: opacity .25s ease-in;
 }
 
 .cbi-section-remove:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
+
 .cbi-section-node-tabbed {
     padding: 0;
     margin-top: 0;
@@ -592,20 +704,25 @@ td>table>tbody>tr>td,
     border-left: 1px solid #D4D4D4;
     border-right: 1px solid #D4D4D4;
 }
+
 .cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
+
 .cbi-value-field,
 .cbi-value-description {
     display: table-cell;
     line-height: 1.25;
 }
+
 .cbi-value-helpicon>img {
     display: none;
 }
+
 .cbi-value-helpicon:before {
     content: "\f059";
 }
+
 .cbi-value-description {
     font-size: small;
     opacity: 0.5;
@@ -1370,6 +1487,7 @@ header>.container>.pull-right>* {
 .node-status-processes .cbi-section {
     overflow-x: scroll;
 }
+
 .node-status-iptables #iptables .table-titles,
 .node-system-opkg #packages .cbi-section-table-titles {
     background-color: #eee;
@@ -1418,6 +1536,7 @@ header>.container>.pull-right>* {
 .node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container {
     overflow-x: scroll;
 }
+
 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
     margin-bottom: 1rem;
     width: auto;
@@ -1645,8 +1764,7 @@ header .logout a {
     float: right;
     width: calc(100% + 10px);
     height: calc(100% - 110px);
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: hidden;
 }
 
 .main>.main-left .nav {
@@ -1837,20 +1955,25 @@ footer {
     min-height: 100%;
     background: #fff url(./loginBG.png) no-repeat center center / cover;
 }
+
 .node-main-login header {
     display: none;
 }
+
 .node-main-login .main {
     height: auto;
 }
+
 .node-main-login>.main>.main-left {
     display: none;
 }
+
 .node-main-login>.main>.main-right {
     width: 100%;
     height: auto;
     min-height: 100%;
 }
+
 .node-main-login>.main #maincontent {
     position: absolute;
     min-width: 492px;
@@ -1861,12 +1984,14 @@ footer {
     height: auto;
     text-align: center;
 }
+
 .node-main-login>.main .container {
     padding: 0;
     width: 30%;
     max-width: 492px;
     display: inline-block;
 }
+
 .node-main-login>.main .logoImg a {
     margin: 0 0 18px 0;
     display: block;
@@ -1874,13 +1999,16 @@ footer {
     color: #fff;
     text-decoration: none;
 }
+
 .node-main-login>.main .logoImg img:first-child {
     width: 72px;
 }
+
 .node-main-login .warning {
     background-color: #3E4A62;
     color: #fff;
 }
+
 .node-main-login>.main form h2 {
     margin: 17px 0;
     padding: 0;
@@ -1889,32 +2017,38 @@ footer {
     font-weight: normal;
     border: 0;
 }
+
 .node-main-login>.main form .cbi-map-descr {
     margin: 0 0 12px;
     padding: 0;
     font-size: 12px;
     color: #B1B6BB;
 }
+
 .node-main-login>.main form .cbi-section {
     margin: 0;
     padding: 0;
     background-color: transparent;
     box-shadow: none;
 }
+
 .node-main-login>.main form .cbi-value {
     display: block;
 }
+
 .node-main-login>.main form .cbi-value-title {
     margin: 0;
     padding: 0;
     display: none;
 }
-.node-main-login>.main form .cbi-value-field {
+
+.node-main-login>.main form .cbi-value .cbi-value-field {
     margin-bottom: 16px;
     display: block;
     width: 100%;
     position: relative;
 }
+
 .node-main-login>.main form .cbi-value-field input {
     padding-left: 48px;
     width: 100%;
@@ -1924,6 +2058,7 @@ footer {
     font-size: 20px;
     color: #9c9fa1;
 }
+
 .node-main-login form .cbi-value-field .iconpwd,
 .node-main-login form .cbi-value-field .iconuser,
 .node-main-login form .cbi-value-field .iconeye {
@@ -1934,28 +2069,35 @@ footer {
     left: 16px;
     transform: translateY(-50%);
 }
+
 .node-main-login form .cbi-value-field .iconpwd {
     background: transparent url(./pwd.png) no-repeat center center / 100%;
 }
+
 .node-main-login form .cbi-value-field .iconuser {
     background: transparent url(./user.png) no-repeat center center / 100%;
 }
+
 .node-main-login form .cbi-value-field .iconeye {
     left: auto;
     right: 16px;
     background: transparent url(./op-eye.png) no-repeat center center / 100%;
 }
+
 .node-main-login form .cbi-value-field .cleye {
     background-image: url(./cl-eye.png);
 }
+
 .node-main-login form .cbi-value-field .opeye {
     background-image: url(./op-eye.png);
 }
+
 .node-main-login form .cbi-page-actions {
     padding: 0;
     border: 0;
     text-align: center;
 }
+
 .node-main-login form .cbi-page-actions input {
     margin: 0 0 0 -4px;
     padding: 9px 0;
@@ -1965,38 +2107,47 @@ footer {
     width: 50%;
     font-size: 18px;
 }
+
 .node-main-login form .cbi-page-actions .cbi-button-apply {
     background-color: #F24C7C;
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
 }
+
 .node-main-login form .cbi-page-actions .cbi-button-reset {
     background-color: #8a4568;
     color: #fff;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
+
 .node-main-login input.cbi-input-text {
     box-shadow: 0 0 0 1000px white inset;
 }
+
 /* Interface after login */
 .logged-in {
     background-color: #EBF1F6;
 }
+
 .logged-in header {
     height: 70px;
 }
+
 .logged-in .main {
     overflow: hidden;
 }
+
 .logged-in .main-right {
     padding: 0 1rem 3rem 0;
     margin-top: 90px;
     float: right;
 }
+
 .logged-in .main .logoImg {
     display: none;
 }
+
 .logged-in .main .main-left .nav-container {
     background-color: #354057;
     border-radius: 20px;
@@ -2006,6 +2157,7 @@ footer {
     right: -10px;
     bottom: 10px;
 }
+
 .logged-in .main .main-left .brand {
     margin: 0 auto;
     padding: 44px 0 23px;
@@ -2023,11 +2175,13 @@ footer {
     -webkit-text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
 }
+
 .logged-in .alert-message {
     padding: 20px 2rem;
     border: none;
     background-color: #fff;
 }
+
 .logged-in .alert-message a {
     padding: 8px 2rem;
     width: auto;
@@ -2035,65 +2189,81 @@ footer {
     background-color: #468EA4;
     color: #fff;
 }
+
 @media screen and (max-width: 1600px) {
     .main-left {
         width: calc(0% + 13rem);
     }
+
     .btn,
     .cbi-button {
         padding: 0.3rem 0.6rem;
         font-size: 0.8rem;
     }
+
     header>.container>.pull-right>* {
         top: 0.35rem;
     }
+
     .label {
         padding: 0.2rem 0.6rem;
     }
+
     .cbi-value-title {
         width: 15rem;
         padding-right: 0.6rem;
     }
+
     .cbi-input-textarea {
         font-size: small;
     }
 }
+
 @media screen and (max-width: 1280px) {
     .node-main-login>.main .container {
         width: 50%;
     }
+
     .cbi-tabmenu>li>a,
     .tabs>li>a {
         padding: 0.2rem 0.5rem;
     }
+
     .panel-title {
         font-size: 1.1rem;
         padding-bottom: 1rem;
     }
+
     table {
         font-size: 0.7rem !important;
         width: 100% !important;
     }
+
     .main>.main-left .nav>li,
     .main>.main-left .nav>li a,
     .main>.main-left .nav>.slide>.menu {
         font-size: 0.9rem;
     }
+
     .main>.main-left .nav>.slide>.slide-menu>li>a {
         font-size: 0.7rem;
     }
 }
+
 @media screen and (max-width: 992px) {
     .logged-in header {
         padding: 0 .8rem;
         height: 45px;
     }
+
     header .brand {
         display: none;
     }
+
     header .btn-con {
         line-height: 45px;
     }
+
     .main-left {
         width: auto;
         height: auto;
@@ -2108,35 +2278,49 @@ footer {
         min-width: 0;
         overflow: hidden;
     }
+
+    .main>.main-left .navbar-container {
+	overflow-y: scroll;
+	overflow-x: hidden;
+    }
+
     .main>.main-left .nav>.slide>.slide-menu>li {
         width: 90%;
     }
+
     header .container {
         line-height: 43px;
     }
+
     .main-right {
         width: 100%;
     }
+
     .node-main-login>.main .container {
         width: 60%;
     }
+
     .showSide {
         padding: 0.1rem;
         display: inline-block;
         vertical-align: middle;
     }
+
     .cbi-value-title {
         width: 9rem;
         padding-right: 1rem;
     }
+
     #diag-rc-output>pre {
         font-size: 1rem;
     }
+
     .tr {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }
+
     .th,
     .td {
         flex: 2 2 25%;
@@ -2145,48 +2329,57 @@ footer {
         word-wrap: break-word;
         display: inline-block;
     }
+
     .td select,
     .td input[type="text"] {
         word-wrap: normal;
         width: 100%;
     }
+
     .td [data-dynlist]>input,
     .td input.cbi-input-password {
         width: calc(100% - 1.5rem);
     }
+
     .td[data-type="button"],
     .td[data-type="fvalue"] {
         flex: 1 1 12.5%;
         text-align: left;
     }
+
     .th.cbi-value-field,
     .td.cbi-value-field,
     .th.cbi-section-table-cell,
     .td.cbi-section-table-cell {
         flex-basis: auto;
     }
+
     .cbi-section-table-row {
         display: flex;
         flex-wrap: wrap;
         flex-direction: row;
         justify-content: space-between;
     }
+
     .td.cbi-value-field,
     .cbi-section-table-cell {
         text-align: center;
         display: inline-block;
         flex: 10 10 auto;
     }
+
     .td.cbi-section-actions {
         text-align: right;
         align-self: flex-end;
         vertical-align: bottom;
     }
+
     .tr.table-titles,
     .tr.cbi-section-table-titles,
     .tr.cbi-section-table-descr {
         display: none;
     }
+
     .tr[data-title]::before,
     .tr.cbi-section-table-titles.named::before {
         display: block;
@@ -2195,24 +2388,30 @@ footer {
         font-size: .9rem;
         border-bottom: 1px solid rgba(0, 0, 0, .26);
     }
+
     .td[data-title] {
         text-align: left;
         font-size: 12px;
     }
+
     .td[data-title]::before {
         display: block;
     }
+
     .hide-sm,
     .hide-xs {
         display: none;
     }
+
     /* All styles of the login interface */
     .node-main-login .showSide {
         display: none !important;
     }
+
     .logged-in .main {
         padding-bottom: .8rem;
     }
+
     .logged-in .main .main-left .nav-container {
         background-color: #354057;
         border-radius: 0;
@@ -2222,6 +2421,7 @@ footer {
         right: 20%;
         bottom: 0;
     }
+
     .logged-in .main-right {
         padding: 0 .8rem;
         margin-top: calc(45px + .8rem);
@@ -2229,69 +2429,86 @@ footer {
         max-width: unset;
         float: unset;
     }
+
     .logged-in .alert-message {
         padding: 8px .8rem;
     }
+
     .cbi-section {
         margin: .8rem 0 0 0;
         padding: .8rem;
     }
+
     small {
         font-size: 10px;
         line-height: 0;
     }
+
     .cbi-section>h3:first-child,
     .panel-title {
         font-size: 1rem;
     }
+
     .network-status-table .ifacebox-body>span {
         font-size: 12px;
     }
+
     .cbi-section .ifacebox-body .ifacebadge>span {
         font-size: 12px;
     }
+
     .table .tr.cbi-rowstyle-1:nth-child(n),
     .table .tr:nth-child(n) {
         font-size: 12px;
     }
+
     .node-network-firewall .table .tr.cbi-rowstyle-1:nth-child(n),
     .node-network-firewall .table .tr:nth-child(n) {
         border-radius: 20px;
         overflow: hidden;
     }
+
     h2 {
         margin: 1rem 0 0 0;
         font-size: 1.4rem;
         padding-bottom: 0;
         border-bottom: none;
     }
+
     h4 {
         font-size: 1rem;
     }
+
     .cbi-section-node-tabbed {
         padding: 0 .5rem;
     }
+
     .cbi-button,
     .cbi-button-action.important {
         margin-right: .3rem;
     }
+
     select {
         border-bottom: 1px solid rgba(0, 0, 0, .26);
     }
+
     .node-status-processes .table .tr.cbi-rowstyle-1:nth-child(n),
     .node-status-processes .table .tr:nth-child(n) {
         border-radius: 20px;
     }
 }
+
 @media screen and (max-width: 768px) {
     .node-main-login {
         background: none;
     }
+
     .node-main-login>.main .logoImg a {
         font-size: 30px;
         margin: 12px 0 22px 0;
         color: #354057;
     }
+
     .node-main-login>.main #maincontent {
         padding-top: 0;
         padding-bottom: 1rem;
@@ -2299,49 +2516,61 @@ footer {
         top: 0;
         transform: translateY(0) translateX(-50%);
     }
+
     .alert-message {
         padding: 8px 15%;
     }
+
     .alert-message>h4 {
         font-size: 14px;
     }
+
     .alert-message>p,
     .alert-message a {
         font-size: 12px;
     }
+
     .a lert-message>h4 {
         padding: 8px 0 8px 36px;
     }
+
     .alert-message a {
         padding: 8px 0;
         margin-top: 8px;
     }
+
     .node-main-login .warning {
         background-color: #F5F5F6;
         color: #354057;
     }
+
     .alert-message a {
         color: #f24c7c;
         background: #fff;
     }
+
     .node-main-login>.main form h2 {
         font-size: 16px;
         margin: 20px 0 16px;
         color: #354057;
     }
+
     .node-main-login>.main form .cbi-value-field input {
         padding-left: 34px;
         height: 36px;
         background-size: 16px;
         font-size: 16px;
     }
+
     .node-main-login>.main form .cbi-value-field {
         margin-bottom: 20px;
     }
+
     .node-main-login form .cbi-page-actions input {
         padding: 6px 0;
         font-size: 16px;
     }
+
     .node-main-login form .cbi-value-field .iconpwd,
     .node-main-login form .cbi-value-field .iconuser,
     .node-main-login form .cbi-value-field .iconeye {
@@ -2349,21 +2578,26 @@ footer {
         width: 16px;
         left: 12px;
     }
+
     .node-main-login form .cbi-value-field .iconeye {
         left: auto;
         right: 12px;
     }
+
     .mobile-hide {
         display: none;
     }
+
     .PC-hide {
         display: inline-block;
     }
 }
+
 @media screen and (max-width: 480px) {
     body {
         font-size: 1rem;
     }
+
     .cbi-value-title {
         width: 100%;
         min-width: 0rem !important;
@@ -2372,42 +2606,53 @@ footer {
         margin-bottom: 0.5rem;
         text-align: left;
     }
+
     .cbi-value-field,
     .cbi-value-description {
         width: 100%;
     }
+
     .cbi-value>.cbi-value-field {
         display: inline-block;
     }
+
     .cbi-tabmenu>li,
     .tabs>li {
         padding: 0.6rem 0rem;
     }
+
     .cbi-tabmenu>li>a,
     .tabs>li>a {
         padding: 0.2rem 0.3rem;
         font-size: 0.9rem;
     }
+
     .cbi-page-actions>div>input {
         display: none;
     }
+
     .tabs>li>a {
         font-size: 0.9rem;
     }
+
     select,
     input {
         font-size: 10px;
     }
+
     .panel-title {
         font-size: 1.4rem;
         padding-bottom: 1rem;
     }
+
     .node-system-packages>.main .cbi-value.cbi-value-last>div {
         width: 100% !important;
     }
+
     .node-system-packages>.main .cbi-value .cbi-value-field input {
         width: 100%;
     }
+
     .node-status-iptables>.main div>.cbi-map>form {
         position: static !important;
         margin: 0 0 2rem 0;
@@ -2422,66 +2667,83 @@ footer {
         border-radius: 20px;
         -webkit-overflow-scrolling: touch;
     }
+
     .node-status-iptables>.main div>.cbi-map>form input[type="submit"] {
         width: 100% !important;
         margin: 0;
     }
+
     .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
         margin-top: 1rem;
     }
+
     .node-main-login>.main .container {
         min-width: 90%;
     }
+
     .th,
     .td {
         flex-basis: 50%;
     }
+
     .td.cbi-value-field {
         flex-basis: 100%;
     }
+
     .td.cbi-value-field[data-type="dvalue"] {
         flex-basis: 50%;
     }
+
     .td.cbi-value-field[data-type="button"],
     .td.cbi-value-field[data-type="fvalue"] {
         flex-basis: 25%;
         text-align: left;
     }
+
     .tr[data-title]::before,
     .tr.cbi-section-table-titles.named::before {
         font-size: 1rem;
     }
+
     .hide-xs {
         display: none;
     }
+
     /* All styles of the login interface */
     .node-main-login>.main .cbi-value {
         padding: 0;
     }
+
     .alert-message {
         padding: 8px 10%;
     }
 }
+
 @media screen and (min-width: 992px) {
     .cbi-value-field .cbi-input-select {
         width: 20rem;
     }
+
     .cbi-value-field .cbi-dropdown {
         min-width: 20rem;
     }
 }
+
 @media screen and (min-width: 1280px) {
     .cbi-value-field .cbi-input-select {
         width: 22rem;
     }
+
     .cbi-value-field .cbi-dropdown {
         min-width: 22rem;
     }
 }
+
 @media screen and (min-width: 1600px) {
     .cbi-value-field .cbi-input-select {
         width: 25rem;
     }
+
     .cbi-value-field .cbi-dropdown {
         min-width: 25rem;
     }
diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/ScrollY.js b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/ScrollY.js
new file mode 100644
index 0000000000..38d82d103e
--- /dev/null
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/ScrollY.js
@@ -0,0 +1 @@
+!function(win,dom){function MyScrollBar(o){this.init(o)}function getStyle(obj,name){return win.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]}function setStyle(obj,oStyle){for(var i in oStyle)obj.style[i]=oStyle[i]}function getOffsetSize(obj){var sDisplay=getStyle(obj,"display"),res={};if("none"!=sDisplay)res.width=obj.offsetWidth,res.height=obj.offsetHeight;else{var oldStyle={position:getStyle(obj,"position"),visibility:getStyle(obj,"visibility"),display:sDisplay},newStyle;setStyle(obj,{position:"absolute",visibility:"hidden",display:"inline-block"}),res.width=obj.offsetWidth,res.height=obj.offsetHeight,setStyle(obj,oldStyle)}return res}function getClientSize(obj){var iTopW=parseInt(getStyle(obj,"borderTopWidth")),iRightW=parseInt(getStyle(obj,"borderRightWidth")),iBottomW=parseInt(getStyle(obj,"borderBottomWidth")),iLeftW=parseInt(getStyle(obj,"borderLeftWidth")),oOffset=getOffsetSize(obj);return{width:oOffset.width<=0?oOffset.width:oOffset.width-iLeftW-iRightW,height:oOffset.height<=0?oOffset.height:oOffset.height-iTopW-iBottomW}}function canSelectText(bCan){bCan?(dom.body.style.mozUserSelect="text",dom.body.style.webkitUserSelect="text",dom.body.style.msUserSelect="text",dom.body.style.khtmlUserSelect="text",dom.body.style.userSelect="text"):(dom.body.style.mozUserSelect="none",dom.body.style.webkitUserSelect="none",dom.body.style.msUserSelect="none",dom.body.style.khtmlUserSelect="none",dom.body.style.userSelect="none")}function getPosition(obj,goal){var oPos={top:obj.offsetTop,left:obj.offsetLeft};if(obj.parentNode==goal)return oPos;var obj=getPosition(obj.parentNode,goal);oPos.top+=obj.top,oPos.left+=obj.left}MyScrollBar.prototype.init=function(o){this.bYBar=!1,this.iScrollTop=0,this.iScrollLeft=0,this.bYShow=!1,this.oWrapper=dom.getElementById(o.selId),this.oScroll=this.oWrapper.firstElementChild,this.setParam(o),this.addScrollBar(),this.initState(),this.initEvent()},MyScrollBar.prototype.initState=function(){var sWPosition;"static"==getStyle(this.oWrapper,"position")&&setStyle(this.oWrapper,{position:"relative"}),setStyle(this.oScroll,{position:"relative"}),this.bYBar&&(setStyle(this.oYBox,{display:this.enterShow?"none":"block",position:"absolute",top:0,right:0,zIndex:10,width:this.width+"px",height:"100%",backgroundColor:this.bgColor}),setStyle(this.oYBar,{position:"absolute",top:0,left:0,width:"100%",backgroundColor:this.barColor,borderRadius:this.borderRadius+"px",transition:"all "+this.time+"ms"})),this.setSize()},MyScrollBar.prototype.initEvent=function(){var _this=this,sUserAgent;-1!=win.navigator.userAgent.toLowerCase().indexOf("firefox")?this.oWrapper.addEventListener("DOMMouseScroll",function(e){_this.bYBar&&_this.bYShow&&(e.preventDefault(),_this.iScrollTop+=e.detail>0?60:-60,_this.iScrollTop=_this.iScrollTop<=0?0:_this.iScrollTop>=_this.iScrollH-_this.iWrapperH?_this.iScrollH-_this.iWrapperH:_this.iScrollTop,_this.setTransLate(),_this.setYTop(_this.iScrollTop/_this.iScrollH*_this.iYBoxH))}):this.oWrapper.onmousewheel=function(evt){if(_this.bYBar&&_this.bYShow){var e=evt||win.event;evt?e.preventDefault():e.returnValue=!1,_this.iScrollTop+=e.wheelDelta<0?60:-60,_this.iScrollTop=_this.iScrollTop<=0?0:_this.iScrollTop>=_this.iScrollH-_this.iWrapperH?_this.iScrollH-_this.iWrapperH:_this.iScrollTop,_this.setTransLate(),_this.setYTop(_this.iScrollTop/_this.iScrollH*_this.iYBoxH)}};var isInWrapper=!1;this.oWrapper.onmouseenter=function(){isInWrapper=!0,_this.enterShow&&_this.bYBar&&_this.bYShow&&setStyle(_this.oYBox,{display:"block"})},this.oWrapper.onmouseleave=function(){isInWrapper=!1,_this.enterShow&&_this.bYBar&&!bYDown&&_this.bYShow&&setStyle(_this.oYBox,{display:"none"})};var bYDown=!1,bYLeave=!0,iDownPageY=0,iYBarTop=0;this.bYBar&&(this.enterColor&&(this.oYBar.onmouseenter=function(){bYLeave=!1,setStyle(this,{backgroundColor:_this.enterColor})},this.oYBar.onmouseleave=function(){bYLeave=!0,bYDown||setStyle(this,{backgroundColor:_this.barColor})}),this.oYBar.onmousedown=function(e){_this.bYShow&&(bYDown=!0,iDownPageY=e.clientY+dom.documentElement.scrollTop||dom.body.scrollTop,iYBarTop=parseInt(getStyle(this,"top")),_this.setYTime(0),canSelectText(!1))},dom.addEventListener("mouseup",function(){bYDown&&_this.bYShow&&(bYDown=!1,_this.setYTime(_this.time),canSelectText(!0),!isInWrapper&&_this.enterShow&&setStyle(_this.oYBox,{display:"none"})),!bYDown&&bYLeave&&setStyle(_this.oYBar,{backgroundColor:_this.barColor})}),dom.addEventListener("mousemove",function(e){if(bYDown&&_this.bYShow){var iNowPageY=e.clientY+dom.documentElement.scrollTop||dom.body.scrollTop,iNowTop=iYBarTop+iNowPageY-iDownPageY;iNowTop=iNowTop<=0?0:iNowTop>=_this.iYBoxH-_this.iYBarH?_this.iYBoxH-_this.iYBarH:iNowTop,_this.iScrollTop=iNowTop/_this.iYBoxH*_this.iScrollH,_this.setTransLate(),_this.setYTop(iNowTop)}}),this.oYBar.ondrag=function(e){var e=evt||win.event;evt?e.preventDefault():e.returnValue=!1})},MyScrollBar.prototype.setParam=function(o){this.width=o.width?o.width:10,this.bgColor=o.bgColor?o.bgColor:"#eaeaea",this.barColor=o.barColor?o.barColor:"#ccc",this.enterColor=o.enterColor||!1,this.enterShow=!1!==o.enterShow,this.hasY=!1!==o.hasY,this.borderRadius=o.borderRadius>=0?o.borderRadius:this.width/2,this.time=o.time||0},MyScrollBar.prototype.addScrollBar=function(){this.getSize(),this.hasY&&(this.bYBar=!0,this.oYBox=dom.createElement("div"),this.oYBar=dom.createElement("div"),this.oYBox.appendChild(this.oYBar),this.oWrapper.insertBefore(this.oYBox,this.oScroll))},MyScrollBar.prototype.getSize=function(){var oWrapperSize=getClientSize(this.oWrapper),oScrollSize=getClientSize(this.oScroll);this.iWrapperClientH=oWrapperSize.height,this.iPaddingT=parseInt(getStyle(this.oWrapper,"paddingTop")),this.iPaddingR=parseInt(getStyle(this.oWrapper,"paddingRight")),this.iPaddingB=parseInt(getStyle(this.oWrapper,"paddingBottom")),this.iPaddingL=parseInt(getStyle(this.oWrapper,"paddingLeft")),this.iWrapperH=oWrapperSize.height-this.iPaddingT-this.iPaddingB,this.iScrollH=oScrollSize.height,this.bYBar&&(this.iYBoxH=oWrapperSize.height,this.iYBarH=this.iWrapperH/this.iScrollH*this.iYBoxH)},MyScrollBar.prototype.setSize=function(time){var _this=this;time=time||100,setTimeout(function(){_this.getSize(),_this.iScrollTop>=_this.iScrollH-_this.iWrapperH&&(_this.iScrollTop=_this.iScrollH-_this.iWrapperH),_this.bYBar&&(_this.iWrapperH>=_this.iScrollH?(setStyle(_this.oYBox,{display:"none"}),_this.bYShow=!1):(_this.enterShow||setStyle(_this.oYBox,{display:"block"}),setStyle(_this.oYBar,{height:_this.iYBarH+"px",top:_this.iScrollTop/_this.iScrollH*_this.iYBoxH+"px"},0),_this.bYShow=!0))},time)},MyScrollBar.prototype.setTransLate=function(iTime){var sTranslate="translate(-"+this.iScrollLeft+"px, -"+this.iScrollTop+"px)";setStyle(this.oScroll,{transition:"all "+(iTime>=0?iTime:this.time)+"ms",transform:sTranslate,msTransform:sTranslate,mozTransform:sTranslate,webkitTransform:sTranslate,oTransform:sTranslate})},MyScrollBar.prototype.setYTime=function(iTime){setStyle(this.oYBar,{transition:"all "+(iTime>=0?iTime:this.time)+"ms"})},MyScrollBar.prototype.setYTop=function(iTop){setStyle(this.oYBar,{top:iTop+"px"})},MyScrollBar.prototype.jump=function(o){o=o||{};var oPos={top:0,left:0},iTop=0,iBottome=this.iScrollH-this.iWrapperClientH+this.iPaddingT+this.iPaddingB>0?this.iScrollH-this.iWrapperClientH+this.iPaddingT+this.iPaddingB:0,iLeft=0,iRight=this.iScrollW-this.iWrapperClientW+this.iPaddingL+this.iPaddingR>0?this.iScrollW-this.iWrapperClientW+this.iPaddingL+this.iPaddingR:0,obj;if(o.id)oPos=getPosition(document.getElementById(o.id),this.oScroll),this.bYBar&&(oPos.top+=this.iPaddingT);else if(o.pos)if("string"==typeof o.pos)switch(o.pos){case"top":oPos.top=0;break;case"bottom":oPos.top=iBottome;break;case"left":oPos.left=0;break;case"right":oPos.left=iRight}else"object"==typeof o.pos&&(oPos=o.pos);oPos.top=oPos.top>iBottome?iBottome:oPos.top>=0?oPos.top:0,this.iScrollTop=oPos.top,this.setTransLate(o.time),this.bYBar&&(this.setYTime(o.time),this.setYTop(this.iScrollTop/this.iScrollH*this.iYBoxH))},"function"==typeof define&&define.amd&&define([],function(){return MyScrollBar}),win.MyScrollBar=MyScrollBar}(window,document);
\ No newline at end of file
diff --git a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
index 76ee383ccb..cda7b471b4 100755
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/js/script.js
@@ -81,6 +81,17 @@
     /**
      * menu click
      */
+    if ($('.nav').length > 0 && $(window).width() > 992) {
+        var oScroll = new MyScrollBar({
+            selId: 'navBox',
+            time: 100,
+            bgColor: 'transprent',
+            barColor: '#839dd67a',
+            enterColor: '#839dd6cc',
+            enterShow: false
+        });
+    }
+
     $(".main > .main-left .nav > .slide > .menu").click(function () {
         var ul = $(this).next(".slide-menu");
         var menu = $(this);
@@ -94,6 +105,14 @@
                 ul.removeClass("active");
             });
         }
+        if ($('.nav').length > 0 && $(window).width() > 992) {
+            oScroll.setSize(200);
+        }
+        setInterval(function(){
+            if($('.nav').height() < $('.navbar-container').height()){
+                    $('.nav').css('transform', 'translate(0px, 0px)');
+            }
+        }, 300);
         return false;
     });