* MUI:
* https://github.com/muicss/mui
*
+ * Menu and loading spinner icons from IcoMoon:
+ * https://icomoon.io
+ *
* Pure CSS ripple effect:
* https://github.com/mladenplavsic/css-ripple-effect
*
*/
@import url("custom.css");
-/*
- * Font generate by Icomoon<icomoon.io>
- */
-@font-face {
- font-family: "icomoon";
- font-weight: normal;
- font-style: normal;
- 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");
-}
-
.table {
position: relative;
display: table;
flex: 10 10 300px !important;
}
-.cbi-button-up,
-.cbi-button-down,
-.cbi-value-helpicon,
-.showSide {
- font-family: "icomoon" !important;
- font-weight: normal;
- font-style: normal;
- font-variant: normal;
- line-height: 1;
- text-transform: none;
- -webkit-font-smoothing: antialiased;
- speak: none;
-}
-
* {
box-sizing: border-box;
margin: 0;
select,
.cbi-dropdown {
width: inherit;
+ cursor: default;
}
select:not([multiple="multiple"]):focus,
input:not(.cbi-button):focus,
-.cbi-dropdown:focus,
-.cbi-dynlist > .item:focus {
+.cbi-dropdown:focus {
border-color: #09c;
border-color: var(--main-color);
}
color: #aaa;
}
+small {
+ font-size: 90%;
+ line-height: 1.42857143;
+ white-space: normal;
+}
+
.main {
position: relative;
top: 4rem;
.main > .loading > span {
font-family: monospace;
- font-size: 2.0rem;
+ font-size: 2rem;
font-size-adjust: .35;
position: relative;
top: 12.5%;
color: #888;
}
-.main > .loading > span > .loading-img:before {
- content: "\e603";
-}
-
.main > .loading > span > .loading-img {
- font-family: "icomoon" !important;
- font-size: 1.0rem;
- font-size-adjust: .6;
+ position: relative;
+ top: .1rem;
+ left: .05rem;
display: inline-block;
+ width: 1.25rem;
+ height: 1.25rem;
margin-right: 1rem;
animation: anim-rotate 2s infinite linear;
+ background: url(./icons/spinner.svg) no-repeat center;
}
@keyframes anim-rotate {
header > .fill > .container {
margin-top: .5rem;
padding: .5rem 1rem 0 1rem;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
user-select: none;
}
.main > .main-left > .nav > li {
padding: .5rem 1rem;
cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
-.main > .main-left > .nav > li:nth-last-child(1) {
- font-size: 1.2rem;
- margin-top: 1rem;
- margin-bottom: 1rem;
+.main > .main-left > .nav > li:last-child {
+ display: flex;
+ align-items: center;
+ margin: 2rem 0 1rem 0;
+ padding: 0 0 0 2rem;
}
.main > .main-left > .nav > li a {
display: none;
}
+.main > .main-left > .nav > .slide > .menu,
+.main > .main-left > .nav > li > [data-title="Logout"] {
+ font-size: 1.15rem;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: .5rem 1rem;
+ text-decoration: none;
+ color: #202124;
+ color: var(--main-menu-color);
+}
+
.main > .main-left > .nav > .slide > .menu::before {
position: absolute;
- top: 30%;
right: 17px;
- width: 1rem;
- height: 1rem;
+ width: 16px;
+ height: 16px;
content: "";
- background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik01MDAsNjI1LjJMNzUuMywyNTVMMTAsMzE0LjlMNTAwLDc0NWw0OTAtNDMwLjFMOTI0LjcsMjU1TDUwMCw2MjUuMnoiLz48L2c+PC9zdmc+);
- background-repeat: no-repeat;
+ background: url(./icons/arrow.svg) no-repeat;
}
.main > .main-left > .nav > .slide > .menu.active::before {
display: none;
}
-.main > .main-left > .nav > .slide > .menu {
- font-size: 1.15rem;
- font-weight: 500;
- display: block;
- padding: .5rem 1rem;
- text-decoration: none;
- color: var(--menu-color);
+.main > .main-left > .nav > li:last-child::before {
+ position: absolute;
+ left: 14px;
+ width: 24px;
+ height: 24px;
+ content: url(./icons/logout.svg);
}
.main > .main-left > .nav > li:hover,
}
.main > .main-left > .nav > .slide > .slide-menu > .active:hover {
- cursor: hand;
background-color: #09c;
background-color: var(--main-color);
}
/* ripple effect */
.main > .main-left > .nav > .slide > .menu,
-.main > .main-left > .nav > .slide > .slide-menu > li {
+.main > .main-left > .nav > .slide > .slide-menu > li,
+.main > .main-left > .nav > li:last-child {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
-.main > .main-left > .nav > .slide > .menu:after,
-.main > .main-left > .nav > .slide > .slide-menu > li:after {
+.main > .main-left > .nav > .slide > .menu::after,
+.main > .main-left > .nav > .slide > .slide-menu > li::after,
+.main > .main-left > .nav > li:last-child::after {
position: absolute;
top: 0;
left: 0;
background-position: 50%;
}
-.main > .main-left > .nav > .slide > .menu:active:after,
-.main > .main-left > .nav > .slide > .slide-menu > li:active:after {
+.main > .main-left > .nav > .slide > .menu:active::after,
+.main > .main-left > .nav > .slide > .slide-menu > li:active::after,
+.main > .main-left > .nav > li:last-child:active::after {
transition: 0s;
transform: scale(0, 0);
opacity: .2;
margin: 0 2rem 1rem 2rem;
}
-.Processes #maincontent > .container {
- margin-right: 0;
-}
-
ul {
line-height: normal;
}
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}
+.cbi-map-descr,
+.cbi-section-descr {
+ font-size: small;
+ line-height: 1.42857143;
+ padding: .5rem;
+ color: #999;
+}
+
.cbi-map-descr + fieldset {
margin-top: 1rem;
}
border-top: thin solid #ddd;
}
-tr:first-child > td
-.tr:first-child > .td,
#cbi-wireless .td,
#cbi-network .tr:first-child > .td,
.table[width="100%"] > .tr:first-child > .td,
border-top: 0 !important;
}
+.table[width="100%"] > .tr:first-child > .td {
+ margin: auto 0;
+}
+
.cbi-section-table-row {
margin-bottom: 1rem;
text-align: center !important;
margin-bottom: 0;
}
+.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 {
+.cbi-section-table-row > .cbi-value-field .cbi-input-password {
width: 100%;
}
/* fix multiple table */
table table,
-.table .table {
- border: 0;
-}
-
+.table .table,
.cbi-value-field table,
-.cbi-value-field .table {
- border: 0;
-}
-
+.cbi-value-field .table,
td > table > tbody > tr > td,
-.td > .table > .tbody > .tr > .td {
- border: 0;
-}
-
+.td > .table > .tbody > .tr > .td,
.cbi-value-field > table > tbody > tr > td,
.cbi-value-field > .table > .tbody > .tr > .td {
border: 0;
touch-action: manipulation;
}
+.cbi-button-up,
+.cbi-button-down {
+ font-size: 1.2rem;
+ display: inline-block;
+ min-width: 0;
+ padding: .2rem .3rem;
+ color: transparent !important;
+ background: url(./icons/arrow.svg) no-repeat center;
+ background-size: 12px 20px;
+}
+
+.cbi-button-up {
+ transform: scaleY(-1);
+}
+
.cbi-button:not(select) {
-webkit-appearance: none !important;
}
-form[method="post"] + form[method="post"],
.cbi-button + .cbi-button {
margin-left: .6rem;
}
.btn:hover,
.btn:focus,
.cbi-button:hover,
-.cbi-button:focus {
+.cbi-button:focus,
+.item:hover::after,
+.item:focus::after {
box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
}
.btn:active,
-.cbi-button:active {
+.cbi-button:active,
+.item:active::after {
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
+.cbi-button-up:hover,
+.cbi-button-up:focus {
+ box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 -2px 2px rgba(0, 0, 0, .2);
+}
+
+.cbi-button-up:active {
+ box-shadow: 0 -10px 20px rgba(0, 0, 0, .19), 0 -6px 6px rgba(0, 0, 0, .23);
+}
+
.btn:disabled,
.cbi-button:disabled {
cursor: not-allowed;
.cbi-button-reload,
.cbi-button-action,
.cbi-button[value="Submit"],
+.cbi-button[value="Upload"],
.cbi-button[value$="Apply"],
.cbi-button[onclick="addKey(event)"] {
font-weight: normal;
.cbi-button-success,
.cbi-button-download,
.cbi-button[name="backup"],
-.cbi-button[value="Upload"],
+.cbi-button[value="Download"],
.cbi-button[value="Save mtdblock"] {
font-weight: normal;
color: #fff;
.cbi-value-field .cbi-button-add {
font-weight: bold;
+ margin: 9px 0 4px 3px;
padding: 1px 6px;
}
-.cbi-value-field .cbi-button-neutral {
- padding: 1px 8px;
-}
-
-/* table */
.tabs {
margin: 0 -2rem;
padding-left: .5rem;
background-color: #fff;
}
-.cbi-tabmenu > li,
-.tabs > li {
+.tabs > li,
+.cbi-tabmenu > li {
display: inline-block;
- padding: .6rem 0;
+ padding: .55rem 0;
+ cursor: pointer;
}
-.cbi-tabmenu > li > a,
-.tabs > li > a {
- padding: .5rem .8rem;
- text-decoration: none;
- color: #404040;
+.tabs > li {
+ padding-bottom: .4rem;
+ border-bottom: .2rem solid transparent;
}
.tabs > li[class~="active"],
.tabs > li:hover {
- margin-bottom: -.18751rem;
+ border-bottom-color: #09c;
+ border-bottom-color: var(--main-color);
+}
+
+.tabs > li:hover {
cursor: pointer;
- color: #09c;
- color: var(--main-color);
- border-bottom: #09c;
- border-bottom: .2rem solid var(--main-color);
+ border-bottom-color: #c9c9c9;
+}
+
+.tabs > li > a,
+.cbi-tabmenu > li > a {
+ padding: .6rem .9rem;
+ text-decoration: none;
+ color: #404040;
}
.tabs > li[class~="active"] > a {
color: var(--main-color);
}
-.tabs > li:hover {
- border-bottom: .18751rem solid #c9c9c9;
-}
-
.cbi-tabmenu {
border: thin solid #d4d4d4;
border-bottom: 0;
}
[data-tab-title] {
+ overflow: hidden;
height: 0;
opacity: 0;
- overflow: hidden;
}
[data-tab-active="true"] {
- opacity: 1;
- height: auto;
overflow: visible;
+ height: auto;
+ opacity: 1;
transition: opacity .25s ease-in;
}
display: table-cell;
}
-.cbi-input-invalid {
- color: #f00;
- border-color: #f00;
-}
-
-.cbi-section-error {
- font-weight: bold;
- line-height: 1.42857143;
- margin: 18px;
- padding: 6px;
- border: thin solid #f00;
- border-radius: 3px;
- background-color: #fce6e6;
-}
-
-.cbi-section-error ul {
- margin: 0 0 0 20px;
-}
-
-.cbi-section-error ul li {
- font-weight: bold;
- color: #f00;
-}
-
-.cbi-value-helpicon > img {
- display: none;
-}
-
-.cbi-value-helpicon:before {
- content: "\f059";
-}
-
.cbi-value-description {
font-size: small;
- padding: .5rem 0 0 0;
+ padding-top: .4rem;
opacity: .5;
}
display: table-cell;
float: left;
width: 23rem;
- padding-top: .4rem;
+ padding-top: .35rem;
padding-right: 2rem;
text-align: right;
word-wrap: break-word;
.cbi-value {
display: inline-block;
width: 100%;
- padding: .3rem 1rem;
+ padding: .35rem 1rem .2rem 1rem;
}
.cbi-value ul {
line-height: 1.25;
}
+.cbi-value-field .cbi-dropdown,
+.cbi-value-field .cbi-input-select,
+.cbi-value input[type="text"],
+.cbi-value input[type="password"] {
+ min-width: 25rem;
+}
+
+#cbi-firewall-zone .cbi-input-select,
+#cbi-network-switch_vlan .cbi-input-select {
+ min-width: 11rem;
+}
+
+#cbi-network-switch_vlan .cbi-input-text {
+ max-width: 3rem;
+}
+
+.cbi-input-invalid {
+ color: #f00;
+ border-bottom-color: #f00;
+}
+
+.cbi-section-error {
+ font-weight: bold;
+ line-height: 1.42857143;
+ margin: 18px;
+ padding: 6px;
+ border: thin solid #f00;
+ border-radius: 3px;
+ background-color: #fce6e6;
+}
+
+.cbi-section-error ul {
+ margin: 0 0 0 20px;
+}
+
+.cbi-section-error ul li {
+ font-weight: bold;
+ color: #f00;
+}
+
.td[data-title]::before {
font-weight: bold;
display: none;
.cbi-rowstyle-2 .cbi-button-up,
.cbi-rowstyle-2 .cbi-button-down,
-.cbi-rowstyle-2:first-child {
+body:not(.Interfaces) .cbi-rowstyle-2:first-child {
background-color: #fff !important;
}
margin: 0;
}
-/* desc */
-.cbi-section-descr,
-.cbi-map-descr {
- font-size: small;
- line-height: 1.42857143;
- padding: .5rem;
- color: #999;
-}
-
+/* lists */
.cbi-dynlist {
line-height: 1.3;
flex-direction: column;
min-height: 30px;
+ cursor: text;
}
.cbi-dynlist > .item {
position: relative;
- max-width: 24.9rem;
- margin: 0 2em 4px 0;
- padding: 2px 4px;
- cursor: default;
+ max-width: 25rem;
+ margin-right: 2em;
+ padding: .5em .25em .25em 0;
pointer-events: none;
color: #666;
border-bottom: 2px solid rgba(0, 0, 0, .26);
+ outline: 0;
}
.cbi-dynlist[name="sshkeys"] > .item {
word-break: break-word;
}
+.cbi-dynlist > .add-item {
+ display: inline-flex;
+ align-items: center;
+ width: 100%;
+ min-width: 16rem;
+}
+
+.cbi-dynlist > .add-item:not([ondrop]) > input {
+ overflow: hidden;
+ width: 100%;
+ min-width: 15rem;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.cbi-dynlist > .add-item[ondrop] > input {
+ min-width: 13rem;
+}
+
.cbi-dynlist,
.cbi-dropdown {
position: relative;
display: inline-flex;
- height: auto;
padding: 0;
- cursor: default;
+}
+
+.cbi-dropdown[placeholder*="select"] {
+ max-width: 25rem;
+ height: auto;
+ margin-top: -3px;
}
.cbi-dropdown > ul {
margin: 0 !important;
padding: 0;
list-style: none;
+ outline: 0;
}
.cbi-dropdown > ul.preview {
flex-shrink: 0;
justify-content: center;
padding: 0 .25em;
+ cursor: default;
text-align: center;
+ outline: 0;
}
.cbi-dropdown > .more,
height: 20px;
}
-.cbi-dropdown[open] {
- position: relative;
-}
-
.cbi-dropdown[open] > ul.dropdown {
position: absolute;
z-index: 1100;
width: auto;
}
+/* progressbar */
+.cbi-progressbar {
+ position: relative;
+ min-width: 170px;
+ height: 20px;
+ margin: 6px 0;
+ border: thin solid #999;
+ background: #eee;
+}
+
+.cbi-progressbar > div {
+ width: 0;
+ height: 100%;
+ transition: width .25s ease-in;
+ background: #5bc0de;
+ background: var(--bar-bg);
+}
+
+.cbi-progressbar::after {
+ font-family: monospace;
+ font-size: 1.3em;
+ font-weight: bold;
+ font-size-adjust: .38;
+ line-height: normal;
+ position: absolute;
+ top: 2px;
+ right: 0;
+ bottom: 2px;
+ left: 0;
+ overflow: hidden;
+ content: attr(title);
+ text-align: center;
+ white-space: pre;
+ text-overflow: ellipsis;
+ text-shadow: 0 0 2px #eee;
+}
+
#modal_overlay {
position: fixed;
z-index: 900;
overflow: auto;
margin-bottom: .5em;
padding: 8.5px;
+ cursor: auto;
white-space: pre-wrap;
color: #eee;
outline: 0;
bottom: 0;
left: .2em;
width: 32px;
- content: " ";
+ content: "";
background: url(../resources/icons/loading.gif) no-repeat center;
background-size: 16px;
}
display: inline-block;
}
-/* input */
-.cbi-value input[type="password"],
-.cbi-value input[type="text"] {
- min-width: 15rem;
-}
-
-/* select */
-.cbi-value-field .cbi-dropdown,
-.cbi-value-field .cbi-input-select {
- min-width: 15rem;
-}
-
-.cbi-value-field .cbi-input-invalid {
- color: #f00;
- border-bottom-color: #f00;
-}
-
-/* progressbar */
-.cbi-progressbar {
- position: relative;
- min-width: 170px;
- height: 20px;
- margin: 4px 0;
- border: thin solid #999;
- background: #eee;
-}
-
-.cbi-progressbar > div {
- width: 0;
- height: 100%;
- transition: width .25s ease-in;
- background: #5bc0de;
- background: var(--bar-bg);
-}
-
-.cbi-progressbar::after {
- font-family: monospace;
- font-size: 1.3em;
- font-weight: bold;
- font-size-adjust: .38;
- line-height: normal;
- position: absolute;
- top: 2px;
- right: 0;
- bottom: 2px;
- left: 0;
- overflow: hidden;
- content: attr(title);
- text-align: center;
- white-space: pre;
- text-overflow: ellipsis;
- text-shadow: 0 0 2px #eee;
-}
-
.th[data-type="button"],
.td[data-type="button"],
.th[data-type="fvalue"],
#syslog {
font-size: small;
+ line-height: 1.25;
overflow-y: hidden;
width: 100%;
min-height: 15rem;
- margin-bottom: 20px;
padding: 1rem;
- padding-bottom: 2.5rem;
resize: none;
color: #eee;
border: 0;
.cbi-value-field .cbi-input-checkbox,
.cbi-value-field .cbi-input-radio {
- margin-top: .15rem;
+ margin-top: .1rem;
}
.cbi-value-field > ul > li {
color: #0069d6;
}
-small {
- font-size: 90%;
- line-height: 1.42857143;
- white-space: normal;
-}
-
-.cbi-button-up,
-.cbi-button-down {
- font-size: 1.2rem;
- display: inline-block;
- min-width: 0;
- padding: .2rem .3rem;
-}
-
.cbi-optionals {
padding: 1rem 1rem 0 1rem;
border-top: thin solid #ccc;
text-decoration: none;
text-transform: uppercase;
color: #fff !important;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
border-radius: 3px;
background-color: #bfbfbf;
text-shadow: none;
/* diagnostics */
#diag-rc-output > pre,
-#command-rc-output > pre {
+#command-rc-output > pre,
+[data-page="admin-services-wol"] .notice code {
font-size: 1.2rem;
font-size-adjust: .35;
line-height: normal;
display: block;
+ overflow-y: hidden;
width: 100%;
padding: 8.5px;
white-space: pre;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}
-.node-main-login > .main form > div:nth-last-child(1) {
+.node-main-login > .main form > div:last-child {
float: right;
}
}
.node-main-login > .main .cbi-input-text {
+ width: 100% !important;
min-width: 15rem;
}
}
}
-/* fix status overview */
-.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) {
- white-space: normal;
-}
-
-/* fix status processes */
+/* fix status */
+.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2),
.node-status-processes > .main .table .tr .td:nth-child(3) {
white-space: normal;
}
-.node-admin-status form {
- margin: 2rem 2rem 0 0;
-}
-
/* fix system reboot */
[data-page="admin-system-reboot"] p {
padding-left: 2rem;
}
/* samba */
-#cbi-samba .cbi-value-last .cbi-value-field {
+#cbi-samba [data-tab="template"] .cbi-value-field {
display: block;
}
-#cbi-samba .cbi-value-last .cbi-value-title {
+#cbi-samba [data-tab="template"] .cbi-value-title {
width: auto;
padding-bottom: .6rem;
}
}
.Firewall form {
+ margin: 2rem 2rem 0 0;
padding: 0;
box-shadow: none;
}
display: block;
}
-#cbi-firewall-zone .td.cbi-section-actions {
+#cbi-firewall-zone .td,
+#cbi-network-switch_vlan .td {
width: 100%;
}
/* custom commands */
.commandbox {
width: 24% !important;
+ margin: 10px 0 0 10px !important;
padding: .5rem 1rem;
border-bottom: thin solid #ccc;
background: #eee;
.commandbox code {
position: absolute;
- overflow-x: hidden;
- overflow-y: auto;
+ overflow: hidden;
max-width: 60%;
- max-height: 55px;
- margin-top: -3px;
margin-left: 4px;
padding: 2px 3px;
+ white-space: nowrap;
text-overflow: ellipsis;
}
+.commandbox code:hover {
+ overflow-y: auto;
+ max-height: 50px;
+ white-space: normal;
+}
+
.commandbox p:first-of-type {
margin-top: -6px;
}
[data-page^="admin-system-commands"] .panel-title,
[data-page^="command-cfg"] .mobile-hide,
-[data-page^="command-cfg"] header > .fill > .container > #logo {
+[data-page^="command-cfg"] .showSide {
display: none;
}
max-width: 40%;
margin: 0;
animation: anim-fade-in 1.5s forwards;
+ word-break: break-word;
opacity: 0;
}
}
}
+/* IE hacks */
+@media all and (-ms-high-contrast: none) {
+ .main > .main-left > .nav > .slide > .menu::before {
+ top: 30.25%;
+ }
+
+ .main > .main-left > .nav > li:last-child::before {
+ top: 20%;
+ }
+
+ .showSide::before {
+ top: -12px;
+ }
+}
+
@media screen and (max-width: 1600px) {
header > .fill > .container > #logo {
margin: 0 2.5rem 0 .5rem;
width: calc(100% - 13rem);
}
- .cbi-dynlist > .item {
- max-width: 21.9rem;
- }
-
.btn:not(button),
.cbi-button {
font-size: .8rem;
padding: .2rem .6rem;
}
+ fieldset,
+ .cbi-section {
+ padding: 1rem;
+ }
+
.cbi-value-title {
width: 15rem;
padding-right: .6rem;
}
- fieldset,
- .cbi-section {
- padding: 1rem;
+ .cbi-value-field .cbi-dropdown,
+ .cbi-value-field .cbi-input-select,
+ .cbi-value input[type="text"],
+ .cbi-value input[type="password"] {
+ min-width: 22rem;
+ }
+
+ #cbi-firewall-zone .cbi-input-select {
+ min-width: 9rem;
}
.cbi-input-textarea {
.node-admin-status > .main fieldset li > a {
padding: .3rem .6rem;
}
-
- #cbi-firewall-zone > .table {
- display: block;
- }
}
@media screen and (max-width: 1366px) {
width: calc(100% - 13rem);
}
- .cbi-dynlist > .item {
- max-width: 19.9rem;
- }
-
- .cbi-tabmenu > li > a,
- .tabs > li > a {
+ .tabs > li > a,
+ .cbi-tabmenu > li > a {
padding: .2rem .5rem;
}
width: 100%;
}
+ .cbi-value-field .cbi-dropdown,
+ .cbi-value-field .cbi-input-select,
+ .cbi-value input[type="text"],
+ .cbi-value input[type="password"] {
+ min-width: 19rem;
+ }
+
+ #cbi-firewall-zone .cbi-input-select {
+ min-width: 4rem;
+ }
+
.main > .main-left > .nav > li,
.main > .main-left > .nav > li a,
- .main > .main-left > .nav > .slide > .menu {
+ .main > .main-left > .nav > .slide > .menu,
+ .main > .main-left > .nav > li > [data-title="Logout"] {
font-size: .9rem;
}
[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
[data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
- [data-page="admin-network-hosts"] .table {
+ [data-page="admin-network-hosts"] .table,
+ [data-page="admin-network-routes"] .table {
overflow-y: visible;
}
position: relative;
}
- [data-page^="command-cfg"] header > .fill > .container > .brand {
- display: block;
- margin-top: -1.75rem;
- }
-
html,
.main {
overflow-y: visible;
}
+ .main > .loading > span {
+ top: 25%;
+ }
+
.main-left {
position: fixed;
z-index: 100;
width: 100%;
}
- .cbi-dynlist > .item {
- max-width: 14.9rem;
- }
-
.showSide {
- display: inline-block;
- overflow: visible;
- margin-right: .5rem;
- padding: .1rem;
+ position: relative;
+ top: .18rem;
+ display: inline-flex;
+ align-items: center;
+ width: 1.6rem;
+ height: 1.6rem;
+ margin-right: .7rem;
cursor: pointer;
- border-radius: 50%;
}
- .showSide:before {
- font-size: 1.7rem;
- content: "\e20e";
+ .showSide::before {
+ position: absolute;
+ left: 1px;
+ width: 24px;
+ height: 24px;
+ content: "";
+ background: url(./icons/menu.svg) no-repeat center;
}
body:not(.logged-in) .showSide {
visibility: hidden;
width: 0;
margin: 0;
- padding: 0;
}
.node-main-login > .main .cbi-value-title {
}
.cbi-value-title {
- width: 9rem;
+ width: 12rem;
padding-right: 1rem;
}
+ .cbi-value-field .cbi-dropdown,
+ .cbi-value-field .cbi-input-select,
+ .cbi-value input[type="text"] {
+ width: 16rem;
+ min-width: 16rem;
+ }
+
+ .cbi-value input[type="password"],
+ .cbi-value input[name^="pw"],
+ .cbi-value input[data-update="change"]:nth-child(2) {
+ width: 13rem !important;
+ min-width: 13rem;
+ }
+
#diag-rc-output > pre,
- #command-rc-output > pre {
+ #command-rc-output > pre,
+ [data-page="admin-services-wol"] .notice code {
font-size: 1rem;
}
display: block;
}
+ .Interfaces .table {
+ overflow-x: hidden;
+ }
+
#packages.table {
display: grid;
}
.commandbox {
width: 100% !important;
+ margin-left: 0 !important;
}
}
fieldset,
.cbi-section {
margin: 1rem 0 0 0;
- padding: 1rem;
}
.tabs {
margin: 0 1rem 1.5rem 1rem;
}
- .main > .main-left > .nav > .slide > .menu {
+ .main > .main-left > .nav > .slide > .menu,
+ .main > .main-left > .nav > li > [data-title="Logout"] {
font-size: 1.2rem;
}
.cbi-value-title {
display: block;
- width: 100%;
min-width: 0 !important;
- margin-top: 1rem;
- margin-bottom: .5rem;
+ margin: .5rem 0;
text-align: left;
}
+ .cbi-value-title,
+ .cbi-value-description,
.cbi-value-field,
- .cbi-value-description {
+ .cbi-value-field .cbi-dropdown,
+ .cbi-value-field .cbi-input-select,
+ .cbi-value input[type="text"] {
width: 100%;
}
display: inline-block;
}
- .cbi-tabmenu > li,
- .tabs > li {
- padding: .6rem 0;
- }
-
- .cbi-tabmenu > li > a,
- .tabs > li > a {
+ .tabs > li > a,
+ .cbi-tabmenu > li > a {
font-size: .9rem;
padding: .2rem .3rem;
}
padding: 0;
}
- .node-main-login > .main form > div:nth-last-child(1) {
+ .node-main-login > .main form > div:last-child {
margin-top: 2rem;
}
margin-top: -8px;
}
+ #syslog,
#diag-rc-output > pre,
- #command-rc-output > pre {
- font-size: .8rem;
+ #command-rc-output > pre,
+ [data-page="admin-services-wol"] .notice code {
+ font-size: .8rem !important;
}
h2 {
font-size: .62rem;
}
- #cbi-wireless .td {
+ #cbi-wireless > #wifi_assoclist_table .td {
overflow: hidden;
}
+ #cbi-wireless > .cbi-section-node .td,
+ .Interfaces .td.cbi-section-actions {
+ text-align: center !important;
+ }
+
+ [data-page="admin-status-processes"] .td[data-title="Hang Up"]::before,
+ [data-page="admin-status-processes"] .td[data-title="Terminate"]::before,
+ [data-page="admin-status-processes"] .td[data-title="Kill"]::before {
+ display: none;
+ }
+
.hide-sm,
.hide-xs:not([data-title="MAC-Address"]) {
display: none;
::-webkit-scrollbar {
width: 10px;
height: 10px;
+ }
+
+ ::-webkit-scrollbar,
+ ::-webkit-scrollbar-corner {
background: transparent;
}
background: #424242;
}
}
-
-@media screen and (min-width: 1152px) {
- .cbi-value input[type="password"],
- .cbi-value input[type="text"] {
- min-width: 20rem;
- }
-
- .cbi-value-field .cbi-input-select {
- width: 20rem;
- }
-
- .cbi-value-field .cbi-dropdown {
- min-width: 20rem;
- }
-
- .cbi-section-node .tr {
- overflow: hidden;
- }
-}
-
-@media screen and (min-width: 1366px) {
- .cbi-value input[type="password"],
- .cbi-value input[type="text"] {
- min-width: 22rem;
- }
-
- .cbi-value-field .cbi-input-select {
- width: 22rem;
- }
-
- .cbi-value-field .cbi-dropdown {
- min-width: 22rem;
- }
-}
-
-@media screen and (min-width: 1600px) {
- .cbi-value input[type="password"],
- .cbi-value input[type="text"] {
- min-width: 25rem;
- }
-
- .cbi-value-field .cbi-input-select {
- width: 25rem;
- }
-
- .cbi-value-field .cbi-dropdown {
- min-width: 25rem;
- }
-}
projects / project / luci.git / blobdiff