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;
display: table-cell;
padding: .8em;
}
+
.th {
font-weight: normal;
}
+
.tr.placeholder {
height: 4em;
background-color: #f9f9f9;
}
+
.tr.placeholder>.td {
position: absolute;
left: 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;
}
+
.cbi-button-up,
.cbi-button-down,
.cbi-value-helpicon,
-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;
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 {
color: #aaa;
text-decoration: none;
}
+
.main>.loading {
position: fixed;
width: 100%;
background-color: #354057;
top: 0;
}
+
.main>.loading>span {
display: block;
text-align: center;
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;
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;
background-color: #FFF;
-webkit-overflow-scrolling: touch;
}
+
.cbi-section>legend {
display: none !important;
}
+
.cbi-section>h3:first-child,
.panel-title {
width: 100%;
padding-bottom: 1rem;
margin: 0;
}
+
.table {
width: 100%;
border-radius: 20px;
}
+
.table>.tbody>.tr>.td,
.table>.tbody>.tr>.th,
.table>.tfoot>.tr>.td,
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;
overflow: hidden;
position: relative;
}
+
.cbi-progressbar div {
background-color: #468ea4;
height: 20px;
border-radius: 20px;
}
+
.cbi-progressbar::after {
content: attr(title);
position: absolute;
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;
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,
background-color: #337ab7;
border: none;
}
+
.cbi-button-add.important,
.cbi-button-save.important,
.cbi-button-positive.important,
background-color: transparent;
border: 1px solid #337ab7;
}
+
.cbi-button-remove.important,
.cbi-button-reset.important,
.cbi-button-negative.important {
background-color: #d9534f;
border: none;
}
+
.cbi-button-find,
.cbi-button-link,
.cbi-button-up,
background-color: transparent;
border: 1px solid #468ea4;
}
+
.cbi-button-edit,
.cbi-button-reload,
.cbi-button-action {
background-color: transparent;
border: 1px solid #468ea4;
}
+
.cbi-page-actions .cbi-button-apply+.cbi-button-save,
.cbi-button-add,
.cbi-button-save,
background-color: transparent;
border: 1px solid #354057;
}
+
.cbi-section-remove>.cbi-button,
.cbi-button-remove,
.cbi-button-reset,
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>.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;
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;
.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;
.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;
float: right;
width: calc(100% + 10px);
height: calc(100% - 110px);
- overflow-y: scroll;
- overflow-x: hidden;
+ overflow: hidden;
}
.main>.main-left .nav {
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;
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;
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;
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%;
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 {
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;
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;
right: -10px;
bottom: 10px;
}
+
.logged-in .main .main-left .brand {
margin: 0 auto;
padding: 44px 0 23px;
-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;
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;
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%;
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;
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;
right: 20%;
bottom: 0;
}
+
.logged-in .main-right {
padding: 0 .8rem;
margin-top: calc(45px + .8rem);
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;
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 {
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;
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;
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;
}
--- /dev/null
+!function(win,dom){function MyScrollBar(o){this.init(o)}function getStyle(obj,name){return win.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]}function setStyle(obj,oStyle){for(var i in oStyle)obj.style[i]=oStyle[i]}function getOffsetSize(obj){var sDisplay=getStyle(obj,"display"),res={};if("none"!=sDisplay)res.width=obj.offsetWidth,res.height=obj.offsetHeight;else{var oldStyle={position:getStyle(obj,"position"),visibility:getStyle(obj,"visibility"),display:sDisplay},newStyle;setStyle(obj,{position:"absolute",visibility:"hidden",display:"inline-block"}),res.width=obj.offsetWidth,res.height=obj.offsetHeight,setStyle(obj,oldStyle)}return res}function getClientSize(obj){var iTopW=parseInt(getStyle(obj,"borderTopWidth")),iRightW=parseInt(getStyle(obj,"borderRightWidth")),iBottomW=parseInt(getStyle(obj,"borderBottomWidth")),iLeftW=parseInt(getStyle(obj,"borderLeftWidth")),oOffset=getOffsetSize(obj);return{width:oOffset.width<=0?oOffset.width:oOffset.width-iLeftW-iRightW,height:oOffset.height<=0?oOffset.height:oOffset.height-iTopW-iBottomW}}function canSelectText(bCan){bCan?(dom.body.style.mozUserSelect="text",dom.body.style.webkitUserSelect="text",dom.body.style.msUserSelect="text",dom.body.style.khtmlUserSelect="text",dom.body.style.userSelect="text"):(dom.body.style.mozUserSelect="none",dom.body.style.webkitUserSelect="none",dom.body.style.msUserSelect="none",dom.body.style.khtmlUserSelect="none",dom.body.style.userSelect="none")}function getPosition(obj,goal){var oPos={top:obj.offsetTop,left:obj.offsetLeft};if(obj.parentNode==goal)return oPos;var obj=getPosition(obj.parentNode,goal);oPos.top+=obj.top,oPos.left+=obj.left}MyScrollBar.prototype.init=function(o){this.bYBar=!1,this.iScrollTop=0,this.iScrollLeft=0,this.bYShow=!1,this.oWrapper=dom.getElementById(o.selId),this.oScroll=this.oWrapper.firstElementChild,this.setParam(o),this.addScrollBar(),this.initState(),this.initEvent()},MyScrollBar.prototype.initState=function(){var sWPosition;"static"==getStyle(this.oWrapper,"position")&&setStyle(this.oWrapper,{position:"relative"}),setStyle(this.oScroll,{position:"relative"}),this.bYBar&&(setStyle(this.oYBox,{display:this.enterShow?"none":"block",position:"absolute",top:0,right:0,zIndex:10,width:this.width+"px",height:"100%",backgroundColor:this.bgColor}),setStyle(this.oYBar,{position:"absolute",top:0,left:0,width:"100%",backgroundColor:this.barColor,borderRadius:this.borderRadius+"px",transition:"all "+this.time+"ms"})),this.setSize()},MyScrollBar.prototype.initEvent=function(){var _this=this,sUserAgent;-1!=win.navigator.userAgent.toLowerCase().indexOf("firefox")?this.oWrapper.addEventListener("DOMMouseScroll",function(e){_this.bYBar&&_this.bYShow&&(e.preventDefault(),_this.iScrollTop+=e.detail>0?60:-60,_this.iScrollTop=_this.iScrollTop<=0?0:_this.iScrollTop>=_this.iScrollH-_this.iWrapperH?_this.iScrollH-_this.iWrapperH:_this.iScrollTop,_this.setTransLate(),_this.setYTop(_this.iScrollTop/_this.iScrollH*_this.iYBoxH))}):this.oWrapper.onmousewheel=function(evt){if(_this.bYBar&&_this.bYShow){var e=evt||win.event;evt?e.preventDefault():e.returnValue=!1,_this.iScrollTop+=e.wheelDelta<0?60:-60,_this.iScrollTop=_this.iScrollTop<=0?0:_this.iScrollTop>=_this.iScrollH-_this.iWrapperH?_this.iScrollH-_this.iWrapperH:_this.iScrollTop,_this.setTransLate(),_this.setYTop(_this.iScrollTop/_this.iScrollH*_this.iYBoxH)}};var isInWrapper=!1;this.oWrapper.onmouseenter=function(){isInWrapper=!0,_this.enterShow&&_this.bYBar&&_this.bYShow&&setStyle(_this.oYBox,{display:"block"})},this.oWrapper.onmouseleave=function(){isInWrapper=!1,_this.enterShow&&_this.bYBar&&!bYDown&&_this.bYShow&&setStyle(_this.oYBox,{display:"none"})};var bYDown=!1,bYLeave=!0,iDownPageY=0,iYBarTop=0;this.bYBar&&(this.enterColor&&(this.oYBar.onmouseenter=function(){bYLeave=!1,setStyle(this,{backgroundColor:_this.enterColor})},this.oYBar.onmouseleave=function(){bYLeave=!0,bYDown||setStyle(this,{backgroundColor:_this.barColor})}),this.oYBar.onmousedown=function(e){_this.bYShow&&(bYDown=!0,iDownPageY=e.clientY+dom.documentElement.scrollTop||dom.body.scrollTop,iYBarTop=parseInt(getStyle(this,"top")),_this.setYTime(0),canSelectText(!1))},dom.addEventListener("mouseup",function(){bYDown&&_this.bYShow&&(bYDown=!1,_this.setYTime(_this.time),canSelectText(!0),!isInWrapper&&_this.enterShow&&setStyle(_this.oYBox,{display:"none"})),!bYDown&&bYLeave&&setStyle(_this.oYBar,{backgroundColor:_this.barColor})}),dom.addEventListener("mousemove",function(e){if(bYDown&&_this.bYShow){var iNowPageY=e.clientY+dom.documentElement.scrollTop||dom.body.scrollTop,iNowTop=iYBarTop+iNowPageY-iDownPageY;iNowTop=iNowTop<=0?0:iNowTop>=_this.iYBoxH-_this.iYBarH?_this.iYBoxH-_this.iYBarH:iNowTop,_this.iScrollTop=iNowTop/_this.iYBoxH*_this.iScrollH,_this.setTransLate(),_this.setYTop(iNowTop)}}),this.oYBar.ondrag=function(e){var e=evt||win.event;evt?e.preventDefault():e.returnValue=!1})},MyScrollBar.prototype.setParam=function(o){this.width=o.width?o.width:10,this.bgColor=o.bgColor?o.bgColor:"#eaeaea",this.barColor=o.barColor?o.barColor:"#ccc",this.enterColor=o.enterColor||!1,this.enterShow=!1!==o.enterShow,this.hasY=!1!==o.hasY,this.borderRadius=o.borderRadius>=0?o.borderRadius:this.width/2,this.time=o.time||0},MyScrollBar.prototype.addScrollBar=function(){this.getSize(),this.hasY&&(this.bYBar=!0,this.oYBox=dom.createElement("div"),this.oYBar=dom.createElement("div"),this.oYBox.appendChild(this.oYBar),this.oWrapper.insertBefore(this.oYBox,this.oScroll))},MyScrollBar.prototype.getSize=function(){var oWrapperSize=getClientSize(this.oWrapper),oScrollSize=getClientSize(this.oScroll);this.iWrapperClientH=oWrapperSize.height,this.iPaddingT=parseInt(getStyle(this.oWrapper,"paddingTop")),this.iPaddingR=parseInt(getStyle(this.oWrapper,"paddingRight")),this.iPaddingB=parseInt(getStyle(this.oWrapper,"paddingBottom")),this.iPaddingL=parseInt(getStyle(this.oWrapper,"paddingLeft")),this.iWrapperH=oWrapperSize.height-this.iPaddingT-this.iPaddingB,this.iScrollH=oScrollSize.height,this.bYBar&&(this.iYBoxH=oWrapperSize.height,this.iYBarH=this.iWrapperH/this.iScrollH*this.iYBoxH)},MyScrollBar.prototype.setSize=function(time){var _this=this;time=time||100,setTimeout(function(){_this.getSize(),_this.iScrollTop>=_this.iScrollH-_this.iWrapperH&&(_this.iScrollTop=_this.iScrollH-_this.iWrapperH),_this.bYBar&&(_this.iWrapperH>=_this.iScrollH?(setStyle(_this.oYBox,{display:"none"}),_this.bYShow=!1):(_this.enterShow||setStyle(_this.oYBox,{display:"block"}),setStyle(_this.oYBar,{height:_this.iYBarH+"px",top:_this.iScrollTop/_this.iScrollH*_this.iYBoxH+"px"},0),_this.bYShow=!0))},time)},MyScrollBar.prototype.setTransLate=function(iTime){var sTranslate="translate(-"+this.iScrollLeft+"px, -"+this.iScrollTop+"px)";setStyle(this.oScroll,{transition:"all "+(iTime>=0?iTime:this.time)+"ms",transform:sTranslate,msTransform:sTranslate,mozTransform:sTranslate,webkitTransform:sTranslate,oTransform:sTranslate})},MyScrollBar.prototype.setYTime=function(iTime){setStyle(this.oYBar,{transition:"all "+(iTime>=0?iTime:this.time)+"ms"})},MyScrollBar.prototype.setYTop=function(iTop){setStyle(this.oYBar,{top:iTop+"px"})},MyScrollBar.prototype.jump=function(o){o=o||{};var oPos={top:0,left:0},iTop=0,iBottome=this.iScrollH-this.iWrapperClientH+this.iPaddingT+this.iPaddingB>0?this.iScrollH-this.iWrapperClientH+this.iPaddingT+this.iPaddingB:0,iLeft=0,iRight=this.iScrollW-this.iWrapperClientW+this.iPaddingL+this.iPaddingR>0?this.iScrollW-this.iWrapperClientW+this.iPaddingL+this.iPaddingR:0,obj;if(o.id)oPos=getPosition(document.getElementById(o.id),this.oScroll),this.bYBar&&(oPos.top+=this.iPaddingT);else if(o.pos)if("string"==typeof o.pos)switch(o.pos){case"top":oPos.top=0;break;case"bottom":oPos.top=iBottome;break;case"left":oPos.left=0;break;case"right":oPos.left=iRight}else"object"==typeof o.pos&&(oPos=o.pos);oPos.top=oPos.top>iBottome?iBottome:oPos.top>=0?oPos.top:0,this.iScrollTop=oPos.top,this.setTransLate(o.time),this.bYBar&&(this.setYTime(o.time),this.setYTop(this.iScrollTop/this.iScrollH*this.iYBoxH))},"function"==typeof define&&define.amd&&define([],function(){return MyScrollBar}),win.MyScrollBar=MyScrollBar}(window,document);
\ No newline at end of file
projects / project / luci.git / commitdiff