@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;
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;
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: 100%;
- font-family: sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
+ 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;
background-image: none;
border: 1px solid #ccc;
}
-
select,
input,
.cbi-dropdown {
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%;
background-color: #354057;
top: 0;
}
-
-.main > .loading > span {
+.main>.loading>span {
display: block;
text-align: center;
margin-top: 2rem;
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;
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;
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;
padding-bottom: 1rem;
margin: 0;
}
-
.table {
width: 100%;
border-radius: 20px;
- overflow: hidden;
}
-
-.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: #468ea485;
-}
-
-.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;
}
-
+.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;
}
-
-.table .tr.cbi-rowstyle-1:nth-child(n),
-.table .tr:nth-child(n) {
- background-color: #f9f9f9;
+/* fix progress bar */
+.cbi-progressbar {
+ background-color: #9bc1cc;
+ border-radius: 20px;
+ overflow: hidden;
+ position: relative;
}
-
-.table .tr:nth-child(2n) {
- background-color: #fff;
+.cbi-progressbar div {
+ background-color: #468ea4;
+ height: 20px;
+ border-radius: 20px;
}
-
-/* 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::after {
+ content: attr(title);
+ 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;
- text-transform: uppercase;
color: rgba(0, 0, 0, 0.87);
background-color: #F0F0F0;
transition: all 0.2s ease-in-out;
display: inline-block;
text-decoration: none;
}
-
.btn:disabled,
.cbi-button:disabled {
cursor: not-allowed;
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;
}
-
.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: #0099CC;
+ 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;
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;
}
.cbi-value {
- padding: .5rem 0;
+ padding: 6px 0;
display: inline-block;
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;
}
background-color: #eee;
}
-.cbi-rowstyle-2 .cbi-button-up,
-.cbi-rowstyle-2 .cbi-button-down {
- background-color: #FFF !important;
-}
-
.cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
width: auto !important;
}
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;
font-size: small;
}
-
.cbi-dropdown {
display: inline-flex;
cursor: pointer;
outline: 2px solid #4b6e9b;
}
-.cbi-dropdown > ul {
+.cbi-dropdown>ul {
margin: 0 !important;
padding: 0;
list-style: none;
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;
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;
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[display]:not([display="0"]) {
+.cbi-dropdown>ul>li .hide-close {
+ display: none;
+}
+
+.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;
}
position: relative;
}
-.cbi-dropdown[open] > ul.dropdown {
+.cbi-dropdown[open]>ul.dropdown {
display: block;
background: #f6f6f5;
border: 1px solid #918e8c;
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;
}
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;
}
}
/* select */
+
.cbi-value-field .cbi-dropdown {
min-width: 15rem;
}
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;
}
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;
}
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;
}
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;
}
/* other fix */
+
#iwsvg,
#iwsvg2,
#bwsvg {
border-radius: 20px;
}
+#iwsvg,
+#bwsvg {
+ margin-top: 1rem;
+}
+
.ifacebox {
background-color: #f9f9f9;
display: inline-flex;
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;
}
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;
}
align-items: center;
}
-.cbi-section-create > * {
+.cbi-section-create>* {
margin: 0.5rem;
}
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;
}
}
.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;
}
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;
flex-direction: column;
}
-#diag-rc-output > pre {
+#diag-rc-output>pre {
background-color: #f5f5f5;
display: block;
padding: 8.5px;
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;
}
font-size: 0.8rem;
font-weight: bold;
color: #ffffff !important;
- text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
/* 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;
}
.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;
margin: 0;
}
-.cbi-tabmenu + .cbi-section {
+.cbi-tabmenu+.cbi-section {
margin-top: 0;
}
border: none;
}
-.node-system-flashops form.inline + form.inline {
+.node-system-flashops form.inline+form.inline {
margin-left: 0;
}
-.node-system-flashops .cbi-tabmenu {
+.lang_zh-cnBackup .cbi-tabmenu {
margin-bottom: 1rem;
}
}
/* fix Network Network*/
+
.node-network-network .cbi-rowstyle-2 .ifacebox-body {
background-color: #fff;
}
+
+.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 {
+ padding: 1rem;
+ margin: 0 auto;
+ border-radius: 10px;
+ display: inline-block;
+ max-width: 800px;
+ width: 40%;
+}
+
#applyreboot-container {
- margin: 90px 2rem 2rem 2rem;
+ margin-bottom: 1rem;
}
#applyreboot-section {
- margin: 2rem;
- line-height: 300%;
+ text-align: left;
+ background: #fff;
+ padding: 1rem;
+ border-radius: 10px;
}
-#applyreboot-section .bar-container {
- background: transparent;
- height: 20px;
- border: 1px solid #b7b7b7;
- border-radius: 20px;
+#applyreboot-section>div {
+ margin: 1rem 0;
+ line-height: 1.5rem;
}
-#applyreboot-section .bar-container .bar {
- background: #F24C7C;
- height: 100%;
- border-radius: 20px;
+
+#applyreboot-container {
+ margin: 90px 2rem 2rem 2rem;
}
-/* Shared style */
-header, .main {
- width: 100%;
- position: absolute;
+#applyreboot-section {
+ margin: 2rem;
+ line-height: 300%;
}
+
+/* Shared style */
+
header {
- height: 70px;
+ height: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
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;
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;
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);
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;
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;
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;
}
footer {
text-align: right;
- padding: 1rem;
+ padding-right: 1rem;
color: #aaa;
font-size: 0.8rem;
text-shadow: 0px 0px 2px #BBB;
right: 0;
}
-
-
/* The style of the prompt message */
+
.alert-message {
- padding: 20px 15%;
- border: 1px solid #4A5368;
+ padding: 13px 11%;
border-radius: 10px;
background-color: #FFF;
}
color: red;
}
-.alert-message > h4 {
- padding: 17px 0 17px 36px;
+.alert-message>h4 {
+ padding: 7px 0 7px 36px;
margin: 0;
font-weight: normal;
- font-size: 22px;
+ font-size: 18px;
background: url(./no-pwd.png) no-repeat left 43%/ 28px;
display: inline-block;
}
-.alert-message > p {
- font-size: 16px;
- line-height: 2rem;
+.alert-message>p {
+ font-size: 14px;
+ line-height: 1.5rem;
}
.alert-message a {
- padding: 8px 0;
- margin-top: 17px;
+ padding: 4px 0;
+ margin-top: 12px;
width: 100%;
background-color: transparent;
color: #fff;
- font-size: 18px;
+ font-size: 16px;
border: 1px solid #fff;
border-radius: 50px;
}
-
/* All styles of the login interface */
+.node-main-login {
+ height: auto;
+ min-height: 100%;
+ background: #fff url(./loginBG.png) no-repeat center center / cover;
+}
.node-main-login header {
display: none;
}
.node-main-login .main {
- height: 100%;
+ 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: 100%;
- background: #fff url(./loginBG.png) no-repeat center center / cover;
+ height: auto;
+ min-height: 100%;
}
-
-.node-main-login > .main #maincontent {
+.node-main-login>.main #maincontent {
+ position: absolute;
+ min-width: 492px;
width: 100%;
- height: 100%;
+ top: 47%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ height: auto;
text-align: center;
}
-
-.node-main-login > .main .container {
+.node-main-login>.main .container {
+ padding: 0;
width: 30%;
- max-width: 600px;
+ max-width: 492px;
display: inline-block;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
}
-
-.node-main-login > .main .logoImg a {
- margin: 0 0 20px 0;
+.node-main-login>.main .logoImg a {
+ margin: 0 0 18px 0;
display: block;
- font-size: 36px;
+ font-size: 30px;
color: #fff;
text-decoration: none;
}
-
+.node-main-login>.main .logoImg img:first-child {
+ width: 72px;
+}
.node-main-login .warning {
- background-color: #3f4a62;
- color: #E9E4E4;
+ background-color: #3E4A62;
+ color: #fff;
}
-
-.node-main-login > .main form h2 {
- margin: 20px 0 16px;
+.node-main-login>.main form h2 {
+ margin: 17px 0;
padding: 0;
font-size: 24px;
- color: #FFFFFC;
+ color: #fff;
font-weight: normal;
border: 0;
}
-
-.node-main-login > .main form .cbi-map-descr {
- margin: 16px 0 13px;
+.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 {
- margin-bottom: 32px;
+.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;
- height: 48px;
+ height: 42px;
border-radius: 50px;
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 {
.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;
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 .main {
+.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;
text-align: center;
text-decoration: none;
border-bottom: 2px solid #ffffff42;
-
/* Single line text omitted */
white-space: nowrap;
overflow: hidden;
-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;
border: none;
background-color: #468EA4;
+ color: #fff;
}
-
-@media screen and (max-height: 580px) {
- .logoImg img {
- height: 48px;
- }
-}
-
@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;
}
position: fixed;
z-index: 100;
right: 100%;
+ left: 0;
top: 0;
+ bottom: 0;
background: #0000007d;
border-radius: 0;
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 {
.main-right {
width: 100%;
}
-
- .node-main-login > .main .container {
+ .node-main-login>.main .container {
width: 60%;
}
- .node-main-login .main {
- background: #354057;
- }
-
.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;
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 .alert-message {
padding: 8px .8rem;
}
-
.cbi-section {
margin: .8rem 0 0 0;
padding: .8rem;
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),
+ .node-network-firewall .table .tr.cbi-rowstyle-1:nth-child(n),
.node-network-firewall .table .tr:nth-child(n) {
border-radius: 20px;
overflow: hidden;
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.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 > .main > .main-right {
- background: #354057;
+ .node-main-login {
+ background: none;
}
-
- .node-main-login > .main .logoImg a {
- font-size: 18px;
- margin: 0 0 10px 0;
+ .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;
+ min-width: 100%;
+ top: 0;
+ transform: translateY(0) translateX(-50%);
}
-
.alert-message {
padding: 8px 15%;
}
-
- .alert-message > h4,
- .alert-message > p,
- .alert-message a {
+ .alert-message>h4 {
font-size: 14px;
}
- .a
- lert-message > h4 {
+ .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 > .main form h2 {
+ .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 .container {
- min-width: 90%;
- }
-
- .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 {
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;
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;
}
-
- .mobile-hide {
- display: none;
- }
-
.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;
font-family: inherit;
min-width: inherit;
background-color: #FFF;
+ 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;
}
-
- .th, .td {
+ .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 {
+ .node-main-login>.main .cbi-value {
padding: 0;
}
-
.alert-message {
- padding: 8px 5%;
+ 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;
}
}
-
-input.cbi-input-text {
- box-shadow: 0 0 0 1000px white inset;
-}
projects / project / luci.git / blobdiff