From 6cb25970b8089afc9dffd0b82ff1a64837633344 Mon Sep 17 00:00:00 2001
From: Yanlan Shen <yanlan.shen.@rosinson.com>
Date: Tue, 27 Nov 2018 10:15:31 +0800
Subject: luci-theme-rosy: Modify the color of the button's primary and
 secondary colors and the bug of the status-overview page.

Signed-off-by: Yanlan Shen <yanlan.shen.@rosinson.com>
---
 .../htdocs/luci-static/rosy/cascade.css            | 958 ++++++++++-----------
 .../htdocs/luci-static/rosy/js/script.js           |  10 +-
 2 files changed, 453 insertions(+), 515 deletions(-)

(limited to 'themes/luci-theme-rosy/htdocs/luci-static/rosy')

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 3df1101959..d380caf92b 100644
--- a/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
+++ b/themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css
@@ -19,40 +19,44 @@
 @font-face {
     font-family: 'icomoon';
     src: url('fonts/font.eot');
-    src: url('fonts/font.eot') format('embedded-opentype'),
-    url('fonts/font.ttf') format('truetype'),
-    url('fonts/font.woff') format('woff'),
-    url('fonts/font.svg') format('svg');
+    src: url('fonts/font.eot') format('embedded-opentype'), url('fonts/font.ttf') format('truetype'), url('fonts/font.woff') format('woff'), url('fonts/font.svg') format('svg');
     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 {
+.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;
     text-align: center;
     display: table-cell;
     padding: .8em;
 }
-
 .th {
-    font-weight: bold;
+    font-weight: normal;
 }
-
 .tr.placeholder {
     height: 4em;
     background-color: #f9f9f9;
 }
-
-.tr.placeholder > .td {
+.tr.placeholder>.td {
     position: absolute;
     left: 0;
     right: 0;
@@ -61,25 +65,60 @@ 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; }
-
+.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,
-.main > .loading > span {
+.main>.loading>span {
     font-family: 'icomoon' !important;
     speak: none;
     font-style: normal !important;
@@ -87,43 +126,37 @@ strong {
     font-variant: normal !important;
     text-transform: none !important;
     line-height: 1;
-
     -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 {
     font-family: inherit;
-    font-weight: 400;
+    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 {
+html,
+body {
     margin: 0px;
     padding: 0px;
     height: auto;
     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;
@@ -131,7 +164,6 @@ select {
     background-image: none;
     border: 1px solid #ccc;
 }
-
 select,
 input,
 .cbi-dropdown {
@@ -147,38 +179,31 @@ 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 {
+footer>a {
     color: #aaa;
     text-decoration: none;
 }
-
-.main > .loading {
+.main>.loading {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -187,8 +212,7 @@ footer > a {
     background-color: #354057;
     top: 0;
 }
-
-.main > .loading > span {
+.main>.loading>span {
     display: block;
     text-align: center;
     margin-top: 2rem;
@@ -196,33 +220,27 @@ footer > a {
     font-size: 1.2rem;
     line-height: 45px;
 }
-
-.main > .loading > span > .loading-img {
+.main>.loading>span>.loading-img {
     margin-right: 0.2rem;
     display: inline-block;
 }
-
-.main > .loading > span > .loading-img img {
+.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;
@@ -230,28 +248,23 @@ 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;
@@ -263,15 +276,12 @@ h4 {
     min-width: inherit;
     border-radius: 20px;
     background-color: #FFF;
-
     -webkit-overflow-scrolling: touch;
 }
-
-.cbi-section > legend {
+.cbi-section>legend {
     display: none !important;
 }
-
-.cbi-section > h3:first-child,
+.cbi-section>h3:first-child,
 .panel-title {
     width: 100%;
     display: block;
@@ -281,82 +291,54 @@ h4 {
     padding-bottom: 1rem;
     margin: 0;
 }
-
 .table {
     width: 100%;
     border-radius: 20px;
 }
-
-.table > .tbody > .tr > .td,
-.table > .tbody > .tr > .th,
-.table > .tfoot > .tr > .td,
-.table > .tfoot > .tr > .th,
-.table > .thead > .tr > .td,
-.table > .thead > .tr > .th {
+.table>.tbody>.tr>.td,
+.table>.tbody>.tr>.th,
+.table>.tfoot>.tr>.td,
+.table>.tfoot>.tr>.th,
+.table>.thead>.tr>.td,
+.table>.thead>.tr>.th {
     padding: .5rem;
     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 {
+.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 {
+.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) {
+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) {
+div>table>tbody>tr:nth-of-type(2n),
+div>.table>.tbody>.tr:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
-
-.cbi-section .table #memtotal > div,
-.cbi-section .table #memfree > div,
-.cbi-section .table #membuff > div,
-.cbi-section .table #conns > div {
-    border-radius: 20px;
-    overflow: hidden;
-    border: none !important;
-    background-color: #9bc1cc;
-}
-
-.cbi-section .table #memtotal > div > div > div,
-.cbi-section .table #memfree > div > div > div,
-.cbi-section .table #membuff > div > div > div,
-.cbi-section .table #conns > div > div > div {
-    color: #fff !important;
-}
-
 .cbi-section .table .tr.table-titles {
     background-color: #eee;
 }
@@ -369,7 +351,7 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
 .table .tr:first-child .th:last-child {
     border-top-right-radius: 10px;
 }
-.table .tr:last-child .td:first-child, 
+.table .tr:last-child .td:first-child,
 .table .tr:last-child::before {
     border-bottom-left-radius: 10px;
 }
@@ -379,57 +361,52 @@ div > .table > .tbody > .tr:nth-of-type(2n) {
 .table .tr.placeholder:last-child {
     background-color: transparent;
 }
-
 .cbi-section .table .cbi-section-table-titles {
     background-color: #e0e0e0;
 }
-
 /* fix progress bar */
-#swaptotal > div,
-#swapfree > div,
-#memfree > div,
-#membuff > div,
-#conns > div,
-#memtotal > div {
-    width: 100% !important;
-    height: 1.2rem !important;
-}
-
-#swaptotal > div > div,
-#swapfree > div > div,
-#memfree > div > div,
-#membuff > div > div,
-#conns > div > div,
-#memtotal > div > div {
-    height: 100% !important;
-    background-color: #468ea4 !important;
+.cbi-progressbar {
+    background-color: #9bc1cc;
+    border-radius: 20px;
+    overflow: hidden;
+    border: none !important;
+    position: relative;
+}
+.cbi-progressbar div {
+    background-color: #468ea4;
+    height: 20px;
+    border-radius: 20px;
+}
+.cbi-progressbar samll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    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 {
+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 {
+.cbi-value-field>table>tbody>tr>td,
+.cbi-value-field>.table>.tbody>.tr>.td {
     border: none;
 }
-
 /* button style */
-
-.btn, .cbi-button {
+.btn,
+.cbi-button {
     margin: 0 .8rem .5rem 0;
     -webkit-appearance: none;
     color: rgba(0, 0, 0, 0.87);
@@ -455,7 +432,6 @@ td > table > tbody > tr > td,
     display: inline-block;
     text-decoration: none;
 }
-
 .btn:disabled,
 .cbi-button:disabled {
     cursor: not-allowed;
@@ -463,156 +439,139 @@ 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,
 .cbi-button-apply.important,
 .cbi-button-reload.important,
-.cbi-button-action.important {
+.cbi-button-apply,
+.cbi-page-actions .cbi-button-save {
     color: #fff;
     background-color: #337ab7;
+    border: none;
 }
-
-.cbi-page-actions .cbi-button-save,
 .cbi-button-add.important,
 .cbi-button-save.important,
-.cbi-button-positive.important {
-    color: #fff;
-    background-color: #5bc0de;
+.cbi-button-positive.important,
+.cbi-button-action.important,
+.cbi-section-actions .cbi-button-edit {
+    color: #337ab7;
+    background-color: transparent;
+    border: 1px solid #337ab7;
 }
-
 .cbi-button-remove.important,
 .cbi-button-reset.important,
 .cbi-button-negative.important {
     color: #fff;
     background-color: #d9534f;
+    border: none;
 }
-
 .cbi-button-find,
 .cbi-button-link,
 .cbi-button-up,
 .cbi-button-down,
 .cbi-button-neutral {
-    background-color: #468ea4;
-    color: #fff;
+    color: #468ea4;
+    background-color: transparent;
+    border: 1px solid #468ea4;
 }
-
 .cbi-button-edit,
-.cbi-button-apply,
 .cbi-button-reload,
 .cbi-button-action {
-    color: #fff;
-    background-color: #468ea4;
+    color: #468ea4;
+    background-color: transparent;
+    border: 1px solid #468ea4;
 }
-
-.cbi-page-actions .cbi-button-apply + .cbi-button-save,
+.cbi-page-actions .cbi-button-apply+.cbi-button-save,
 .cbi-button-add,
 .cbi-button-save,
 .cbi-button-positive {
-    color: #fff;
-    background-color: #354057;
+    color: #354057;
+    background-color: transparent;
+    border: 1px solid #354057;
 }
-
-.cbi-section-remove > .cbi-button,
+.cbi-section-remove>.cbi-button,
 .cbi-button-remove,
 .cbi-button-reset,
 .cbi-button-negative {
-    color: #fff;
-    background-color: #F24C7C;
+    color: #F24C7C;
+    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"],
-.container > .tabs > li:hover,
-.container > .cbi-tabmenu,
-.container > .cbi-tabmenu > li[class~="cbi-tab"],
-.container > .cbi-tabmenu > li:hover {
+.container>.tabs,
+.container>.tabs>li[class~="active"],
+.container>.tabs>li:hover,
+.container>.cbi-tabmenu,
+.container>.cbi-tabmenu>li[class~="cbi-tab"],
+.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 {
+.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 {
+.container>.tabs,
+.container>.cbi-tabmenu {
     overflow: hidden;
 }
-
-.container .cbi-map .cbi-tabmenu + div {
+.container .cbi-map .cbi-tabmenu+div {
     border-radius: 0;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     overflow: hidden;
 }
-
 .tabs {
     background-color: #FFFFFF;
     margin-top: 1rem;
 }
-
-.cbi-tabmenu > li,
-.tabs > li {
+.cbi-tabmenu>li,
+.tabs>li {
     margin-right: .4rem;
     display: inline-block;
     padding: 0.6rem 0rem;
 }
-
-.cbi-tabmenu > li > a,
-.tabs > li > a {
+.cbi-tabmenu>li>a,
+.tabs>li>a {
     text-decoration: none;
     color: #404040;
     padding: 0.5rem 0.8rem;
 }
-
-.tabs > li[class~="active"],
-.tabs > li:hover {
+.tabs>li[class~="active"],
+.tabs>li:hover {
     cursor: pointer;
     background-color: #337ab7;
 }
-
-.tabs > li[class~="active"] > a,
-.tabs > li:hover > a {
+.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 {
+.cbi-tabmenu>li:hover {
     background-color: #F1F1F1;
 }
-
-.cbi-tabmenu > li[class~="cbi-tab"] {
+.cbi-tabmenu>li[class~="cbi-tab"] {
     background-color: #fff;
 }
-
 .cbi-tabmenu {
     background-color: #D4D4D4;
 }
-
-.cbi-section-remove:nth-of-type(2n){
+.cbi-section-remove:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
-
 .cbi-section-node-tabbed {
     padding: 0;
     margin-top: 0;
@@ -620,25 +579,20 @@ td > table > tbody > tr > td,
     border-left: 1px solid #D4D4D4;
     border-right: 1px solid #D4D4D4;
 }
-
-.cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
+.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 {
+.cbi-value-helpicon>img {
     display: none;
 }
-
 .cbi-value-helpicon:before {
     content: "\f059";
 }
-
 .cbi-value-description {
     font-size: small;
     opacity: 0.5;
@@ -660,8 +614,8 @@ td > table > tbody > tr > td,
     width: 100%;
 }
 
-.cbi-section-table-descr > .cbi-section-table-cell,
-.cbi-section-table-titles > .cbi-section-table-cell {
+.cbi-section-table-descr>.cbi-section-table-cell,
+.cbi-section-table-titles>.cbi-section-table-cell {
     border: none;
 }
 
@@ -702,7 +656,7 @@ td > table > tbody > tr > td,
 
 .cbi-rowstyle-2 .cbi-button-up,
 .cbi-rowstyle-2 .cbi-button-down {
-    background-color: #FFF !important;
+    background-color: #468ea4 !important;
 }
 
 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
@@ -714,22 +668,23 @@ td > table > tbody > tr > td,
     vertical-align: middle;
 }
 
-.td.cbi-section-actions > * {
+.td.cbi-section-actions>* {
     display: flex;
 }
 
-.td.cbi-section-actions > * > *,
-.td.cbi-section-actions > * > form > * {
+.td.cbi-section-actions>*>*,
+.td.cbi-section-actions>*>form>* {
     flex: 1 1 4em;
     margin: 0 1px;
 }
 
-.td.cbi-section-actions > * > form {
+.td.cbi-section-actions>*>form {
     display: inline-flex;
     margin: 0;
 }
 
 /* desc */
+
 .cbi-section-descr,
 .cbi-map-descr {
     padding: 0.5rem;
@@ -737,7 +692,6 @@ td > table > tbody > tr > td,
     font-size: small;
 }
 
-
 .cbi-dropdown {
     display: inline-flex;
     cursor: pointer;
@@ -750,7 +704,7 @@ td > table > tbody > tr > td,
     outline: 2px solid #4b6e9b;
 }
 
-.cbi-dropdown > ul {
+.cbi-dropdown>ul {
     margin: 0 !important;
     padding: 0;
     list-style: none;
@@ -760,18 +714,18 @@ td > table > tbody > tr > td,
     width: 100%;
 }
 
-.cbi-dropdown > ul.preview {
+.cbi-dropdown>ul.preview {
     display: none;
 }
 
-.cbi-dropdown > .open {
+.cbi-dropdown>.open {
     border: 2px outset #eee;
     flex-basis: 15px;
     background: #eee;
 }
 
-.cbi-dropdown > .open,
-.cbi-dropdown > .more {
+.cbi-dropdown>.open,
+.cbi-dropdown>.more {
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
@@ -782,15 +736,15 @@ td > table > tbody > tr > td,
     padding: 0 .25em;
 }
 
-.cbi-dropdown > .more,
-.cbi-dropdown > ul > li[placeholder] {
+.cbi-dropdown>.more,
+.cbi-dropdown>ul>li[placeholder] {
     color: #777;
     font-weight: bold;
     text-shadow: 1px 1px 0px #fff;
     display: none;
 }
 
-.cbi-dropdown > ul > li {
+.cbi-dropdown>ul>li {
     display: none;
     padding: .25em;
     white-space: nowrap;
@@ -803,35 +757,40 @@ td > table > tbody > tr > td,
     min-height: 20px;
 }
 
-.cbi-dropdown > ul > li .hide-open { display: initial; }
-.cbi-dropdown > ul > li .hide-close { display: none; }
+.cbi-dropdown>ul>li .hide-open {
+    display: initial;
+}
+
+.cbi-dropdown>ul>li .hide-close {
+    display: none;
+}
 
-.cbi-dropdown > ul > li[display]:not([display="0"]) {
+.cbi-dropdown>ul>li[display]:not([display="0"]) {
     border-left: 1px solid #ccc;
 }
 
-.cbi-dropdown[empty] > ul {
+.cbi-dropdown[empty]>ul {
     max-width: 1px;
 }
 
-.cbi-dropdown > ul > li > form {
+.cbi-dropdown>ul>li>form {
     display: none;
     margin: 0;
     padding: 0;
     pointer-events: none;
 }
 
-.cbi-dropdown > ul > li img {
+.cbi-dropdown>ul>li img {
     vertical-align: middle;
     margin-right: .25em;
 }
 
-.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+.cbi-dropdown>ul>li>form>input[type="checkbox"] {
     margin: 0;
     height: auto;
 }
 
-.cbi-dropdown > ul > li input[type="text"] {
+.cbi-dropdown>ul>li input[type="text"] {
     height: 20px;
 }
 
@@ -839,7 +798,7 @@ td > table > tbody > tr > td,
     position: relative;
 }
 
-.cbi-dropdown[open] > ul.dropdown {
+.cbi-dropdown[open]>ul.dropdown {
     display: block;
     background: #f6f6f5;
     border: 1px solid #918e8c;
@@ -850,40 +809,45 @@ td > table > tbody > tr > td,
     width: auto;
 }
 
-.cbi-dropdown > ul > li[display],
-.cbi-dropdown[open] > ul.preview,
-.cbi-dropdown[open] > ul.dropdown > li,
-.cbi-dropdown[multiple] > ul > li > label,
-.cbi-dropdown[multiple][open] > ul.dropdown > li,
-.cbi-dropdown[multiple][more] > .more,
-.cbi-dropdown[multiple][empty] > .more {
+.cbi-dropdown>ul>li[display],
+.cbi-dropdown[open]>ul.preview,
+.cbi-dropdown[open]>ul.dropdown>li,
+.cbi-dropdown[multiple]>ul>li>label,
+.cbi-dropdown[multiple][open]>ul.dropdown>li,
+.cbi-dropdown[multiple][more]>.more,
+.cbi-dropdown[multiple][empty]>.more {
     flex-grow: 1;
     display: flex;
     align-items: center;
 }
 
-.cbi-dropdown[empty] > ul > li,
-.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
-.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+.cbi-dropdown[empty]>ul>li,
+.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
+.cbi-dropdown[multiple][open]>ul.dropdown>li>form {
     display: block;
 }
 
-.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
-.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+.cbi-dropdown[open]>ul.dropdown>li .hide-open {
+    display: none;
+}
 
-.cbi-dropdown[open] > ul.dropdown > li {
+.cbi-dropdown[open]>ul.dropdown>li .hide-close {
+    display: initial;
+}
+
+.cbi-dropdown[open]>ul.dropdown>li {
     border-bottom: 1px solid #ccc;
 }
 
-.cbi-dropdown[open] > ul.dropdown > li[selected] {
+.cbi-dropdown[open]>ul.dropdown>li[selected] {
     background: #b0d0f0;
 }
 
-.cbi-dropdown[open] > ul.dropdown > li.focus {
+.cbi-dropdown[open]>ul.dropdown>li.focus {
     background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
 }
 
-.cbi-dropdown[open] > ul.dropdown > li:last-child {
+.cbi-dropdown[open]>ul.dropdown>li:last-child {
     margin-bottom: 0;
     border-bottom: none;
 }
@@ -903,22 +867,24 @@ td > table > tbody > tr > td,
     width: auto;
 }
 
-
 /* luci */
 
 .hidden {
     display: none
 }
 
-.left, .left::before {
+.left,
+.left::before {
     text-align: left !important;
 }
 
-.right, .right::before {
+.right,
+.right::before {
     text-align: right !important;
 }
 
-.center, .center::before {
+.center,
+.center::before {
     text-align: center !important;
 }
 
@@ -943,6 +909,7 @@ td > table > tbody > tr > td,
 }
 
 /* select */
+
 .cbi-value-field .cbi-dropdown {
     min-width: 15rem;
 }
@@ -951,8 +918,10 @@ td > table > tbody > tr > td,
     width: 15rem;
 }
 
-.th[data-type="button"], .td[data-type="button"],
-.th[data-type="fvalue"], .td[data-type="fvalue"] {
+.th[data-type="button"],
+.td[data-type="button"],
+.th[data-type="fvalue"],
+.td[data-type="fvalue"] {
     flex: 1 1 2em;
     text-align: center;
 }
@@ -965,20 +934,20 @@ td > table > tbody > tr > td,
     border-radius: 20px;
 }
 
-td > .ifacebadge,
-.td > .ifacebadge {
+td>.ifacebadge,
+.td>.ifacebadge {
     background-color: #F0F0F0;
     font-size: 0.9rem;
 }
 
-.ifacebadge > em,
-.ifacebadge > img {
+.ifacebadge>em,
+.ifacebadge>img {
     display: inline-block;
     margin: 0 .2rem;
     align-self: flex-start;
 }
 
-.ifacebadge > img + img {
+.ifacebadge>img+img {
     margin: 0 .2rem 0 0;
 }
 
@@ -998,11 +967,11 @@ td > .ifacebadge,
     height: 100%;
 }
 
-.network-status-table .ifacebox-body > span {
+.network-status-table .ifacebox-body>span {
     flex: 10 10 auto;
 }
 
-.network-status-table .ifacebox-body > div {
+.network-status-table .ifacebox-body>div {
     display: flex;
     flex-wrap: wrap;
 }
@@ -1094,9 +1063,9 @@ td > .ifacebadge,
     float: left;
 }
 
-.uci-change-legend-label > ins,
-.uci-change-legend-label > del,
-.uci-change-legend-label > var {
+.uci-change-legend-label>ins,
+.uci-change-legend-label>del,
+.uci-change-legend-label>var {
     float: left;
     margin-right: 4px;
     width: 10px;
@@ -1117,6 +1086,7 @@ td > .ifacebadge,
 }
 
 /* other fix */
+
 #iwsvg,
 #iwsvg2,
 #bwsvg {
@@ -1124,7 +1094,9 @@ td > .ifacebadge,
     overflow: hidden;
     border-radius: 20px;
 }
-#iwsvg, #bwsvg {
+
+#iwsvg,
+#bwsvg {
     margin-top: 1rem;
 }
 
@@ -1167,14 +1139,14 @@ td > .ifacebadge,
     border: none;
 }
 
-.zonebadge > input[type="text"] {
+.zonebadge>input[type="text"] {
     padding: 0.16rem 1rem;
     min-width: 10rem;
     margin-top: 0.3rem;
 }
 
-.zonebadge > em,
-.zonebadge > strong {
+.zonebadge>em,
+.zonebadge>strong {
     margin: 0 0.2rem;
     display: inline-block;
 }
@@ -1190,25 +1162,25 @@ td > .ifacebadge,
     margin-top: 0;
 }
 
-.cbi-value-field > input + .cbi-value-description {
+.cbi-value-field>input+.cbi-value-description {
     padding: 0;
 }
 
-.cbi-value-field > ul > li {
+.cbi-value-field>ul>li {
     display: flex;
 }
 
-.cbi-value-field > ul > li > label {
+.cbi-value-field>ul>li>label {
     margin-top: 0.5rem;
 }
 
-.cbi-value-field > ul > li .ifacebadge {
+.cbi-value-field>ul>li .ifacebadge {
     background-color: #eee;
     margin-left: 0.4rem;
     margin-top: -0.5rem;
 }
 
-.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
+.cbi-section-table-row>.cbi-value-field .cbi-dropdown {
     min-width: 7rem;
 }
 
@@ -1218,7 +1190,7 @@ td > .ifacebadge,
     align-items: center;
 }
 
-.cbi-section-create > * {
+.cbi-section-create>* {
     margin: 0.5rem;
 }
 
@@ -1226,7 +1198,9 @@ td > .ifacebadge,
     padding: 0.5rem;
 }
 
-div.cbi-value var, td.cbi-value-field var, .td.cbi-value-field var {
+div.cbi-value var,
+td.cbi-value-field var,
+.td.cbi-value-field var {
     font-style: italic;
     color: #0069D6;
 }
@@ -1281,7 +1255,7 @@ small {
 }
 
 .zonebadge-empty {
-    background: repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px);
+    background: repeating-linear-gradient(45deg, rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0.5) 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
     color: #404040;
 }
 
@@ -1290,11 +1264,11 @@ small {
     min-width: 10rem;
 }
 
-.zone-forwards > * {
+.zone-forwards>* {
     flex: 1 1 45%;
 }
 
-.zone-forwards > span {
+.zone-forwards>span {
     flex-basis: 10%;
     text-align: center;
     padding: 0 .25rem;
@@ -1306,7 +1280,7 @@ small {
     flex-direction: column;
 }
 
-#diag-rc-output > pre {
+#diag-rc-output>pre {
     background-color: #f5f5f5;
     display: block;
     padding: 8.5px;
@@ -1325,13 +1299,13 @@ input[name="nslookup"] {
     width: 80%;
 }
 
-header > .container > .pull-right > * {
+header>.container>.pull-right>* {
     position: relative;
     top: 0.45rem;
     cursor: pointer;
 }
 
-#xhr_poll_status > .label.success {
+#xhr_poll_status>.label.success {
     background-color: #F24C7C;
 }
 
@@ -1340,7 +1314,6 @@ header > .container > .pull-right > * {
     font-size: 0.8rem;
     font-weight: bold;
     color: #ffffff !important;
-    text-transform: uppercase;
     white-space: nowrap;
     background-color: #bfbfbf;
     -webkit-border-radius: 3px;
@@ -1372,15 +1345,16 @@ header > .container > .pull-right > * {
 }
 
 /* fix status processes */
-.node-status-processes > .main .table .tr .td:nth-child(3) {
+
+.node-status-processes>.main .table .tr .td:nth-child(3) {
     white-space: normal;
 }
 
-.node-status-iptables > .main div > .cbi-map > form {
+.node-status-iptables>.main div>.cbi-map>form {
     margin: 2rem 2rem 0 0;
 }
 
-.node-status-iptables > .main div > .cbi-map > form input {
+.node-status-iptables>.main div>.cbi-map>form input {
     padding: .8em;
     border-radius: 20px;
 }
@@ -1388,81 +1362,95 @@ 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;
+}
 
 /* fix status realtime traffic and wireless */
+
 .node-status-realtime.lang_enTraffic .cbi-tabmenu,
 .node-status-realtime.lang_enWireless .cbi-tabmenu {
     background-color: #d4d4d4;
 }
-.node-status-realtime.lang_enTraffic .cbi-tabmenu > li[class~="cbi-tab"],
-.node-status-realtime.lang_enTraffic .cbi-tabmenu > li:hover,
-.node-status-realtime.lang_enWireless .cbi-tabmenu > li[class~="cbi-tab"],
-.node-status-realtime.lang_enWireless .cbi-tabmenu > li:hover {
+
+.node-status-realtime.lang_enTraffic .cbi-tabmenu>li[class~="cbi-tab"],
+.node-status-realtime.lang_enTraffic .cbi-tabmenu>li:hover,
+.node-status-realtime.lang_enWireless .cbi-tabmenu>li[class~="cbi-tab"],
+.node-status-realtime.lang_enWireless .cbi-tabmenu>li:hover {
     background-color: #F1F1F1;
 }
-.node-status-realtime.lang_enTraffic  #bwsvg,
-.node-status-realtime.lang_enWireless  #iwsvg,
-.node-system-packages .cbi-map > .cbi-section,
-.node-system-packages form .cbi-section{
+
+.node-status-realtime.lang_enTraffic #bwsvg,
+.node-status-realtime.lang_enWireless #iwsvg,
+.node-system-packages .cbi-map>.cbi-section,
+.node-system-packages form .cbi-section {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
 }
 
 /* fix system system */
+
 .node-system-system .cbi-tabmenu {
     background-color: #d4d4d4;
 }
-.node-system-system .cbi-tabmenu > li[class~="cbi-tab"]{
+
+.node-system-system .cbi-tabmenu>li[class~="cbi-tab"] {
     background-color: #fff;
 }
 
 /* fix system reboot */
 
-.node-system-reboot > .main > .main-right p,
-.node-system-reboot > .main > .main-right h3 {
+.node-system-reboot>.main>.main-right p,
+.node-system-reboot>.main>.main-right h3 {
     padding-left: 2rem;
 }
 
 /* fix Services  Network Shares*/
-.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
+
+.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
     margin-bottom: 1rem;
     width: auto;
 }
 
-.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
+.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
     display: list-item;
 }
 
-.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
+.node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
     padding-top: 1rem;
 }
 
 /* fix System Software*/
+
 .node-system-packages #swfreespace {
     background-color: #468ea4 !important;
     border: none !important;
     border-radius: 20px
 }
-.node-system-packages #swfreespace > div {
+
+.node-system-packages #swfreespace>div {
     background-color: #f24c7c !important;
     border: none !important;
     border-radius: 20px
 }
-.node-system-packages > .main table tr td:nth-child(1) {
+
+.node-system-packages>.main table tr td:nth-child(1) {
     width: auto !important;
 }
 
-.node-system-packages > .main table tr td:nth-last-child(1) {
+.node-system-packages>.main table tr td:nth-last-child(1) {
     white-space: normal;
     font-size: small;
     color: #404040;
 }
 
-.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a {
+.node-system-packages>.main .cbi-tabmenu>li>a,
+.tabs>li>a {
     padding: 0.5rem 0.8rem;
 }
 
-.node-system-packages > .main .cbi-value > pre {
+.node-system-packages>.main .cbi-value>pre {
     background-color: #eee;
     padding: 0.5rem;
     overflow: auto;
@@ -1476,7 +1464,7 @@ header > .container > .pull-right > * {
     margin: 0;
 }
 
-.cbi-tabmenu + .cbi-section {
+.cbi-tabmenu+.cbi-section {
     margin-top: 0;
 }
 
@@ -1485,7 +1473,7 @@ header > .container > .pull-right > * {
     border: none;
 }
 
-.node-system-flashops form.inline + form.inline {
+.node-system-flashops form.inline+form.inline {
     margin-left: 0;
 }
 
@@ -1517,22 +1505,28 @@ header > .container > .pull-right > * {
 }
 
 /* fix Network Network*/
+
 .node-network-network .cbi-rowstyle-2 .ifacebox-body {
     background-color: #fff;
 }
-.lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu + div {
+
+.lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu+div {
     overflow: inherit;
 }
+
 /* fix Network Wireless*/
+
 .node-network-wireless .cbi-section-node {
     margin-bottom: 1rem;
 }
 
 /* applyreboot fix */
+
 #maincontainer {
     text-align: center;
 }
-#maincontainer > #maincontent {
+
+#maincontainer>#maincontent {
     padding: 1rem;
     margin: 0 auto;
     border-radius: 10px;
@@ -1540,29 +1534,34 @@ header > .container > .pull-right > * {
     max-width: 800px;
     width: 40%;
 }
+
 #applyreboot-container {
     margin-bottom: 1rem;
 }
+
 #applyreboot-section {
     text-align: left;
     background: #fff;
     padding: 1rem;
     border-radius: 10px;
 }
-#applyreboot-section > div {
+
+#applyreboot-section>div {
     margin: 1rem 0;
     line-height: 1.5rem;
 }
+
 #applyreboot-container {
-	margin: 90px 2rem 2rem 2rem;
+    margin: 90px 2rem 2rem 2rem;
 }
 
 #applyreboot-section {
-	margin: 2rem;
-	line-height: 300%;
+    margin: 2rem;
+    line-height: 300%;
 }
 
 /* Shared style */
+
 header {
     height: 0;
     position: fixed;
@@ -1572,16 +1571,19 @@ header {
     z-index: 100;
     overflow: hidden;
 }
+
 header {
     padding-right: 1rem;
     background: #fff;
     color: white;
     border-bottom: 1px solid #dadada;
 }
+
 header .fill,
 header .container {
     height: 100%;
 }
+
 header .brand {
     padding-left: .8rem;
     color: #354057;
@@ -1593,23 +1595,29 @@ header .brand {
     width: 10%;
     text-align: center;
 }
+
 header .btn-con {
     line-height: 70px;
 }
+
 header .logout {
     background-color: #354057;
 }
+
 header .logout a {
     text-decoration: none;
     color: #fff;
 }
+
 .main {
     height: auto;
     min-height: 100%;
 }
+
 .main-right {
     height: auto;
 }
+
 .main-left {
     top: 10px;
     bottom: 10px;
@@ -1621,7 +1629,8 @@ header .logout a {
     border-radius: 20px;
     min-width: 170px;
 }
-.main > .main-left .navbar-container {
+
+.main>.main-left .navbar-container {
     margin-top: 0.5rem;
     float: right;
     width: calc(100% + 10px);
@@ -1629,28 +1638,34 @@ header .logout a {
     overflow-y: scroll;
     overflow-x: hidden;
 }
-.main > .main-left .nav {
+
+.main>.main-left .nav {
     height: auto;
 }
-.main > .main-left .nav > li a {
+
+.main>.main-left .nav>li a {
     color: #fff;
     display: block;
 }
-.main > .main-left .nav > li {
+
+.main>.main-left .nav>li {
     padding: 0.5rem 1.7rem;
     cursor: pointer;
 }
-.main > .main-left .nav > .slide {
+
+.main>.main-left .nav>.slide {
     padding: 0 15px 0 0;
     margin-bottom: 8px;
     overflow: hidden;
 }
-.main > .main-left .nav > .slide > ul {
+
+.main>.main-left .nav>.slide>ul {
     display: none;
     float: right;
     width: calc(100% - 10px);
 }
-.main > .main-left .nav > .slide > .menu {
+
+.main>.main-left .nav>.slide>.menu {
     display: block;
     padding: 0.5rem 1.7rem;
     text-decoration: none;
@@ -1659,66 +1674,81 @@ header .logout a {
     width: 100%;
     float: right;
 }
-.main > .main-left .nav > li > a.active,
-.main > .main-left .nav > .slide > .menu:hover,
-.main > .main-left .nav > .slide > .menu.active {
+
+.main>.main-left .nav>li>a.active,
+.main>.main-left .nav>.slide>.menu:hover,
+.main>.main-left .nav>.slide>.menu.active {
     background: #485267;
     float: right;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
-.main > .main-left .nav > .slide:hover {
+
+.main>.main-left .nav>.slide:hover {
     background: none;
 }
-.main > .main-left .nav > .slide > .slide-menu > li {
+
+.main>.main-left .nav>.slide>.slide-menu>li {
     padding: 0.6rem 2rem;
     margin: 8px 0;
 }
-.main > .main-left .nav > .slide > .slide-menu > .active {
+
+.main>.main-left .nav>.slide>.slide-menu>.active {
     background-color: #F24C7C;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
-.main > .main-left .nav > .slide > .slide-menu > li > a {
+
+.main>.main-left .nav>.slide>.slide-menu>li>a {
     text-decoration: none;
     white-space: nowrap;
 }
-.main > .main-left .nav > .slide > .slide-menu > .active > a {
+
+.main>.main-left .nav>.slide>.slide-menu>.active>a {
     color: white;
 }
-.main > .main-left .nav > .slide > .slide-menu > li:hover {
+
+.main>.main-left .nav>.slide>.slide-menu>li:hover {
     background: #F24C7C;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }
-.main > .main-left .nav > .slide > .slide-menu > .active:hover {
+
+.main>.main-left .nav>.slide>.slide-menu>.active:hover {
     background-color: #F24C7C;
     cursor: hand;
 }
 
 /* The scroll bar of the navigation bar is compatible with each browser. */
+
 /* Google */
-.main > .main-left .navbar-container::-webkit-scrollbar {
+
+.main>.main-left .navbar-container::-webkit-scrollbar {
     width: 6px;
     background: transparent;
 }
-.main > .main-left .navbar-container::-webkit-scrollbar-button {
+
+.main>.main-left .navbar-container::-webkit-scrollbar-button {
     display: none;
 }
-.main > .main-left .navbar-container::-webkit-scrollbar-thumb {
+
+.main>.main-left .navbar-container::-webkit-scrollbar-thumb {
     background-color: #ffffff61;
     border-radius: 10px;
 }
-.main > .main-left .navbar-container::-webkit-scrollbar-thumb {
+
+.main>.main-left .navbar-container::-webkit-scrollbar-thumb {
     background-color: #839dd67a;
     border-radius: 10px;
 }
-.main > .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
+
+.main>.main-left .navbar-container:hover::-webkit-scrollbar-thumb {
     background-color: #839dd67a;
 }
 
 /* IE */
-.main > .main-left .navbar-container {
+
+.main>.main-left .navbar-container {
     scrollbar-track-color: transparent;
     scrollbar-face-color: #839dd67a;
     scrollbar-arrow-color: transparent;
@@ -1726,9 +1756,10 @@ header .logout a {
     scrollbar-highlight-color: transparent;
     scrollbar-shadow-color: transparent;
     scrollbar-darkshadow-color: transparent;
-    scrollbar-base-color:transparent;
+    scrollbar-base-color: transparent;
 }
-.main > .main-left .navbar-container:hover {
+
+.main>.main-left .navbar-container:hover {
     scrollbar-face-color: #839dd67a;
 }
 
@@ -1743,9 +1774,8 @@ footer {
     right: 0;
 }
 
-
-
 /* The style of the prompt message */
+
 .alert-message {
     padding: 13px 11%;
     border-radius: 10px;
@@ -1766,7 +1796,7 @@ footer {
     color: red;
 }
 
-.alert-message > h4 {
+.alert-message>h4 {
     padding: 7px 0 7px 36px;
     margin: 0;
     font-weight: normal;
@@ -1775,7 +1805,7 @@ footer {
     display: inline-block;
 }
 
-.alert-message > p {
+.alert-message>p {
     font-size: 14px;
     line-height: 1.5rem;
 }
@@ -1791,7 +1821,6 @@ footer {
     border-radius: 50px;
 }
 
-
 /* All styles of the login interface */
 .node-main-login {
     height: auto;
@@ -1804,17 +1833,15 @@ footer {
 .node-main-login .main {
     height: auto;
 }
-.node-main-login > .main > .main-left {
+.node-main-login>.main>.main-left {
     display: none;
 }
-
-.node-main-login > .main > .main-right {
+.node-main-login>.main>.main-right {
     width: 100%;
     height: auto;
     min-height: 100%;
 }
-
-.node-main-login > .main #maincontent {
+.node-main-login>.main #maincontent {
     position: absolute;
     min-width: 492px;
     width: 100%;
@@ -1824,31 +1851,27 @@ footer {
     height: auto;
     text-align: center;
 }
-
-.node-main-login > .main .container {
+.node-main-login>.main .container {
     padding: 0;
     width: 30%;
     max-width: 492px;
     display: inline-block;
 }
-
-.node-main-login > .main .logoImg a {
+.node-main-login>.main .logoImg a {
     margin: 0 0 18px 0;
     display: block;
     font-size: 30px;
     color: #fff;
     text-decoration: none;
 }
-.node-main-login > .main .logoImg img:first-child {
+.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 {
+.node-main-login>.main form h2 {
     margin: 17px 0;
     padding: 0;
     font-size: 24px;
@@ -1856,39 +1879,33 @@ footer {
     font-weight: normal;
     border: 0;
 }
-
-.node-main-login > .main form .cbi-map-descr {
+.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 {
+.node-main-login>.main form .cbi-section {
     margin: 0;
     padding: 0;
     background-color: transparent;
     box-shadow: none;
 }
-
-.node-main-login > .main form .cbi-value {
+.node-main-login>.main form .cbi-value {
     display: block;
 }
-
-.node-main-login > .main form .cbi-value-title {
+.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-field {
     margin-bottom: 16px;
     display: block;
     width: 100%;
     position: relative;
 }
-
-.node-main-login > .main form .cbi-value-field input {
+.node-main-login>.main form .cbi-value-field input {
     padding-left: 48px;
     width: 100%;
     border: 1px solid #556270;
@@ -1897,7 +1914,6 @@ 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 {
@@ -1925,13 +1941,11 @@ footer {
 .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;
@@ -1941,25 +1955,20 @@ 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;
@@ -1997,7 +2006,6 @@ footer {
     text-align: center;
     text-decoration: none;
     border-bottom: 2px solid #ffffff42;
-
     /* Single line text omitted */
     white-space: nowrap;
     overflow: hidden;
@@ -2005,13 +2013,11 @@ 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;
@@ -2019,69 +2025,56 @@ 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 > * {
+    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 {
+    .node-main-login>.main .container {
         width: 50%;
     }
-
-    .cbi-tabmenu > li > a, .tabs > li > a {
+    .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 {
+    .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 {
+    .main>.main-left .nav>.slide>.slide-menu>li>a {
         font-size: 0.7rem;
     }
 }
-
 @media screen and (max-width: 992px) {
-    header {
+    .logged-in header {
         padding: 0 .8rem;
         height: 45px;
     }
@@ -2105,7 +2098,7 @@ footer {
         min-width: 0;
         overflow: hidden;
     }
-    .main > .main-left .nav > .slide > .slide-menu > li {
+    .main>.main-left .nav>.slide>.slide-menu>li {
         width: 90%;
     }
     header .container {
@@ -2114,90 +2107,76 @@ footer {
     .main-right {
         width: 100%;
     }
-
-    .node-main-login > .main .container {
+    .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 {
+    #diag-rc-output>pre {
         font-size: 1rem;
     }
-
     .tr {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
     }
-
-    .th, .td {
+    .th,
+    .td {
         flex: 2 2 25%;
         align-self: flex-start;
         text-overflow: ellipsis;
         word-wrap: break-word;
         display: inline-block;
     }
-
     .td select,
     .td input[type="text"] {
         word-wrap: normal;
         width: 100%;
     }
-
-    .td [data-dynlist] > input,
+    .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;
@@ -2206,21 +2185,17 @@ 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;
@@ -2247,7 +2222,6 @@ footer {
     .logged-in .alert-message {
         padding: 8px .8rem;
     }
-
     .cbi-section {
         margin: .8rem 0 0 0;
         padding: .8rem;
@@ -2256,16 +2230,18 @@ footer {
         font-size: 10px;
         line-height: 0;
     }
-    .cbi-section > h3:first-child, .panel-title {
+    .cbi-section>h3:first-child,
+    .panel-title {
         font-size: 1rem;
     }
-    .network-status-table .ifacebox-body > span {
+    .network-status-table .ifacebox-body>span {
         font-size: 12px;
     }
-    .cbi-section .ifacebox-body .ifacebadge > span {
+    .cbi-section .ifacebox-body .ifacebadge>span {
         font-size: 12px;
     }
-    .table .tr.cbi-rowstyle-1:nth-child(n), .table .tr:nth-child(n) {
+    .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),
@@ -2292,86 +2268,70 @@ footer {
     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 {
+    .node-main-login>.main .logoImg a {
         font-size: 30px;
         margin: 12px 0 22px 0;
         color: #354057;
     }
-
-    .node-main-login > .main #maincontent {
+    .node-main-login>.main #maincontent {
         padding-top: 0;
         padding-bottom: 1rem;
         min-width: 100%;
         top: 0;
         transform: translateY(0) translateX(-50%);
     }
-
     .alert-message {
         padding: 8px 15%;
     }
-
-    .alert-message > h4{
+    .alert-message>h4 {
         font-size: 14px;
     }
-    .alert-message > p,
+    .alert-message>p,
     .alert-message a {
         font-size: 12px;
     }
-    .a
-    lert-message > h4 {
+    .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 {
+    .node-main-login>.main form h2 {
         font-size: 16px;
         margin: 20px 0 16px;
         color: #354057;
     }
-
-    .node-main-login > .main form .cbi-value-field input {
+    .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 {
+    .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 {
@@ -2383,21 +2343,17 @@ footer {
         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;
@@ -2406,51 +2362,43 @@ footer {
         margin-bottom: 0.5rem;
         text-align: left;
     }
-
-    .cbi-value-field, .cbi-value-description {
+    .cbi-value-field,
+    .cbi-value-description {
         width: 100%;
     }
-
-    .cbi-value > .cbi-value-field {
+    .cbi-value>.cbi-value-field {
         display: inline-block;
     }
-
-    .cbi-tabmenu > li, .tabs > li {
+    .cbi-tabmenu>li,
+    .tabs>li {
         padding: 0.6rem 0rem;
     }
-
-    .cbi-tabmenu > li > a, .tabs > li > a {
+    .cbi-tabmenu>li>a,
+    .tabs>li>a {
         padding: 0.2rem 0.3rem;
         font-size: 0.9rem;
     }
-
-    .cbi-page-actions > div > input {
+    .cbi-page-actions>div>input {
         display: none;
     }
-
-    .tabs > li > a {
+    .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 {
+    .node-system-packages>.main .cbi-value.cbi-value-last>div {
         width: 100% !important;
     }
-
-    .node-system-packages > .main .cbi-value .cbi-value-field input {
+    .node-system-packages>.main .cbi-value .cbi-value-field input {
         width: 100%;
     }
-
-    .node-status-iptables > .main div > .cbi-map > form {
+    .node-status-iptables>.main div>.cbi-map>form {
         position: static !important;
         margin: 0 0 2rem 0;
         padding: 2rem;
@@ -2464,83 +2412,67 @@ footer {
         border-radius: 20px;
         -webkit-overflow-scrolling: touch;
     }
-
-    .node-status-iptables > .main div > .cbi-map > form input[type="submit"] {
+    .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"] {
+    .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
         margin-top: 1rem;
     }
-
-    .node-main-login > .main .container {
+    .node-main-login>.main .container {
         min-width: 90%;
     }
-
-    .th, .td {
+    .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 {
+    .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;
     }
-}
+}
\ 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 8985834eff..9da67062a7 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
@@ -272,15 +272,21 @@
         }
         var a = window.getComputedStyle($(".cbi-section .table .tr:first-child")[0], ':before').getPropertyValue('content');
         var b = window.getComputedStyle($('.cbi-section .table .tr:last-child')[0], ':before').getPropertyValue('content');
-        console.log(typeof a);
         
         if( a != 'none' || b != 'none' ){
             $('.cbi-section .table .tr:first-child .td:first-child').css('border-top-left-radius', '0');
             $('.cbi-section .table .tr:last-child .td:first-child').css('border-bottom-left-radius', '0');
             $('.cbi-section .table .tr:first-child .th:first-child').css('border-top-left-radius', '0');
-            console.log($('.cbi-section .table .tr:last-child .td:first-child'));
             
         }
     });
 
+    $('<samll>').text($('.cbi-progressbar').attr('title')).appendTo('.cbi-progressbar');
+    setInterval(function(){
+        $('.cbi-progressbar').each(function(i, e){
+            $(this).children("samll").text($(this).attr('title'));
+        });
+        
+    }, 5000);
+
 })(jQuery);
-- 
cgit v1.2.3