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

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

1 files changed, 276 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;
     }