1
0
Fork 0
mirror of https://github.com/Ysurac/openmptcprouter-feeds.git synced 2025-03-09 15:40:03 +00:00

Fix theme

This commit is contained in:
Ycarus 2018-07-23 19:23:18 +02:00
parent 8434404b4c
commit 97fa071f33
2 changed files with 175 additions and 186 deletions

View file

@ -39,6 +39,7 @@ form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
abbr[title], acronym[title] { abbr[title], acronym[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
font-weight: inherit;
cursor: help; cursor: help;
} }
@ -162,7 +163,7 @@ textarea {
* Basic and global styles for generating a grid system, structural layout, and page templates * Basic and global styles for generating a grid system, structural layout, and page templates
* ------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------- */
body { body {
background-color: #ffffff; background-color: #fff;
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px; font-size: 13px;
@ -516,7 +517,7 @@ input[type=checkbox], input[type=radio] {
} }
input[type=file] { input[type=file] {
background-color: #ffffff; background-color: #fff;
padding: initial; padding: initial;
border: initial; border: initial;
line-height: initial; line-height: initial;
@ -537,7 +538,7 @@ select, input[type=file] {
select[multiple] { select[multiple] {
height: inherit; height: inherit;
background-color: #ffffff; background-color: #fff;
} }
textarea { textarea {
@ -552,7 +553,7 @@ textarea {
} }
.uneditable-input { .uneditable-input {
background-color: #ffffff; background-color: #fff;
display: block; display: block;
border-color: #eee; border-color: #eee;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
@ -567,15 +568,17 @@ textarea {
color: #bfbfbf; color: #bfbfbf;
} }
input, textarea { .btn, .cbi-button, input, textarea {
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.btn:hover, .cbi-button:hover,
input:focus, textarea:focus { input:focus, textarea:focus {
outline: 0; outline: 0;
border-color: rgba(82, 168, 236, 0.8); border-color: rgba(82, 168, 236, 0.8) !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
text-decoration: none;
} }
input[type=file]:focus, input[type=checkbox]:focus, select:focus { input[type=file]:focus, input[type=checkbox]:focus, select:focus {
@ -583,66 +586,6 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
outline: 1px dotted #666; outline: 1px dotted #666;
} }
form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea {
color: #b94a48;
border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus {
border-color: #e9322d;
box-shadow: 0 0 6px #f8b9b7;
}
form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
color: #b94a48;
background-color: #fce6e6;
border-color: #b94a48;
}
form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
color: #c09853;
}
form .clearfix.warning input, form .clearfix.warning textarea {
color: #c09853;
border-color: #ccae64;
}
form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
border-color: #be9a3f;
box-shadow: 0 0 6px #e5d6b1;
}
form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
color: #c09853;
background-color: #d2b877;
border-color: #c09853;
}
form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
color: #468847;
}
form .clearfix.success input, form .clearfix.success textarea {
color: #468847;
border-color: #57a957;
}
form .clearfix.success input:focus, form .clearfix.success textarea:focus {
border-color: #458845;
box-shadow: 0 0 6px #9acc9a;
}
form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
color: #468847;
background-color: #bcddbc;
border-color: #468847;
}
input[disabled], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
@ -651,6 +594,14 @@ select[readonly],
textarea[readonly] { textarea[readonly] {
background-color: #f5f5f5; background-color: #f5f5f5;
border-color: #ddd; border-color: #ddd;
pointer-events: none;
cursor: default;
}
select[readonly],
textarea[readonly] {
pointer-events: auto;
cursor: auto;
} }
.cbi-optionals, .cbi-optionals,
@ -698,6 +649,11 @@ textarea[readonly] {
text-decoration: underline; text-decoration: underline;
} }
.cbi-page-actions > form {
display: inline;
margin: 0;
}
.help-inline, .help-block { .help-inline, .help-block {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
@ -745,20 +701,27 @@ textarea[readonly] {
text-align: left; text-align: left;
} }
.table .th { .table .tr:first-child .th {
padding-top: 9px; padding-top: 9px;
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: top;
} }
.table .td { .table .td, .table .th {
vertical-align: top;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.table .tbody .th { .tr.placeholder {
border-top: 1px solid #ddd; height: calc(3em + 20px);
vertical-align: top; }
.tr.placeholder > .td {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
line-height: 3em;
} }
/* /*
@ -794,19 +757,6 @@ table tbody th {
vertical-align: top; vertical-align: top;
} }
.tr.placeholder {
height: calc(3em + 20px);
}
.tr.placeholder > .td {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
line-height: 3em;
}
/* Patterns.less /* Patterns.less
* Repeatable UI elements outside the base styles provided from the scaffolding * Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------- */
@ -829,7 +779,7 @@ header a {
header h3 a:hover, header .brand:hover, header ul .active > a { header h3 a:hover, header .brand:hover, header ul .active > a {
background-color: #333; background-color: #333;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
color: #ffffff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -842,7 +792,7 @@ header h3 a, header .brand {
display: block; display: block;
padding: 8px 20px 12px; padding: 8px 20px 12px;
margin-left: -20px; margin-left: -20px;
color: #ffffff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
line-height: 1; line-height: 1;
@ -883,7 +833,7 @@ header div > ul a, .nav a {
} }
header div > ul a:hover, .nav a:hover { header div > ul a:hover, .nav a:hover {
color: #ffffff; color: #fff;
text-decoration: none; text-decoration: none;
} }
@ -933,7 +883,7 @@ header div > ul .menu-dropdown .dropdown-toggle,
.nav .menu-dropdown .dropdown-toggle, .nav .menu-dropdown .dropdown-toggle,
header div > ul .dropdown-menu .dropdown-toggle, header div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle { .nav .dropdown-menu .dropdown-toggle {
color: #ffffff; color: #fff;
} }
header div > ul .menu-dropdown a.menu.open, header div > ul .menu-dropdown a.menu.open,
@ -963,14 +913,14 @@ header div > ul .dropdown-menu li a:hover,
background-color: #191919; background-color: #191919;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #292929, #191919); background-image: linear-gradient(to bottom, #292929, #191919);
color: #ffffff; color: #fff;
} }
header div > ul .menu-dropdown .active a, header div > ul .menu-dropdown .active a,
.nav .menu-dropdown .active a, .nav .menu-dropdown .active a,
header div > ul .dropdown-menu .active a, header div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a { .nav .dropdown-menu .active a {
color: #ffffff; color: #fff;
} }
header div > ul .menu-dropdown .divider, header div > ul .menu-dropdown .divider,
@ -1000,12 +950,12 @@ a.menu:after, .dropdown-toggle:after {
margin-left: 4px; margin-left: 4px;
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid #ffffff; border-top: 4px solid #fff;
opacity: 0.5; opacity: 0.5;
} }
.menu-dropdown, .dropdown-menu { .menu-dropdown, .dropdown-menu {
background-color: #ffffff; background-color: #fff;
float: left; float: left;
position: absolute; position: absolute;
top: 45px; top: 45px;
@ -1038,7 +988,7 @@ a.menu:after, .dropdown-toggle:after {
margin: 5px 0; margin: 5px 0;
overflow: hidden; overflow: hidden;
background-color: #eee; background-color: #eee;
border-bottom: 1px solid #ffffff; border-bottom: 1px solid #fff;
} }
header .dropdown-menu a, .dropdown-menu a { header .dropdown-menu a, .dropdown-menu a {
@ -1048,16 +998,16 @@ header .dropdown-menu a, .dropdown-menu a {
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
color: #808080; color: #808080;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #fff;
} }
header .dropdown-menu a:hover, header .dropdown-menu a:hover,
.dropdown-menu a:hover, .dropdown-menu a:hover,
header .dropdown-menu a.hover, header .dropdown-menu a.hover,
.dropdown-menu a.hover { .dropdown-menu a.hover {
background-color: #dddddd; background-color: #ddd;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #eeeeee, #dddddd); background-image: linear-gradient(to bottom, #eee, #ddd);
color: #404040; color: #404040;
text-decoration: none; text-decoration: none;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
@ -1067,7 +1017,7 @@ header .dropdown-menu a.hover,
.dropdown.open .menu, .dropdown.open .menu,
.open .dropdown-toggle, .open .dropdown-toggle,
.dropdown.open .dropdown-toggle { .dropdown.open .dropdown-toggle {
color: #ffffff; color: #fff;
background: #ccc; background: #ccc;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
@ -1166,7 +1116,7 @@ header .dropdown-menu a.hover,
.cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
.cbi-tab > a:link, .cbi-tab > a:hover { .cbi-tab > a:link, .cbi-tab > a:hover {
color: #808080; color: #808080;
background-color: #ffffff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-bottom-color: transparent; border-bottom-color: transparent;
cursor: default; cursor: default;
@ -1210,15 +1160,15 @@ header .dropdown-menu a.hover,
margin: 0 0 18px; margin: 0 0 18px;
background-color: #f5f5f5; background-color: #f5f5f5;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5); background-image: linear-gradient(to bottom, #fff, #f5f5f5);
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #fff;
} }
.breadcrumb li { .breadcrumb li {
display: inline; display: inline;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #fff;
} }
.breadcrumb .divider { .breadcrumb .divider {
@ -1252,7 +1202,7 @@ footer {
.alert-message.info, .alert-message.info,
.btn.info:hover, .btn.info:hover,
.alert-message.info:hover { .alert-message.info:hover {
color: #ffffff; color: #fff;
} }
.btn .close, .alert-message .close { .btn .close, .alert-message .close {
@ -1264,29 +1214,26 @@ footer {
.alert-message.danger, .alert-message.danger,
.btn.error, .btn.error,
.alert-message.error { .alert-message.error {
background-color: #c43c35; background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
.btn.success, .alert-message.success { .btn.success, .alert-message.success {
background-color: #57a957; background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #62c462, #57a957);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
.btn.info, .alert-message.info { .btn.info, .alert-message.info {
background-color: #339bb9; background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.alert-message.notice {
background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
} }
@ -1294,9 +1241,7 @@ footer {
.cbi-button { .cbi-button {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
background-color: #e6e6e6; background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
background-repeat: no-repeat;
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
padding: 5px 14px 6px; padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333; color: #333;
@ -1308,12 +1253,6 @@ footer {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.btn:hover,
.cbi-button:hover {
color: #333;
text-decoration: none;
}
.btn:focus, .btn:focus,
.cbi-button:focus { .cbi-button:focus {
outline: 1px dotted #666; outline: 1px dotted #666;
@ -1321,8 +1260,8 @@ footer {
.cbi-input-invalid, .cbi-input-invalid,
.cbi-value-error input { .cbi-value-error input {
color: #FF0000; color: #f00;
border-color: #FF0000; border-color: #f00;
} }
.cbi-button-positive, .cbi-button-positive,
@ -1339,7 +1278,6 @@ footer {
.cbi-button-link, .cbi-button-link,
.cbi-button-up, .cbi-button-up,
.cbi-button-down { .cbi-button-down {
border-color: #444;
color: #444; color: #444;
} }
@ -1360,24 +1298,41 @@ footer {
color: #c44; color: #c44;
} }
.cbi-page-actions::after {
display: table;
content: "";
clear: both;
}
.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
float: left;
margin-right: .4em;
}
.btn.primary, .btn.primary,
.cbi-button-action.important, .cbi-button-action.important,
.cbi-page-actions .cbi-button-apply, .cbi-page-actions .cbi-button-apply,
.cbi-section-actions .cbi-button-edit { .cbi-section-actions .cbi-button-edit {
color: #fff; color: #fff;
background: #0069d6; background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} }
.cbi-button-positive.important, .cbi-button-positive.important,
.cbi-page-actions .cbi-button-save { .cbi-page-actions .cbi-button-save {
color: #fff; color: #fff;
background: #4a4; background: linear-gradient(to bottom, #4a4, #484) no-repeat;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.cbi-button-negative.important {
color: #fff;
background: linear-gradient(to bottom, #c44, #c00) no-repeat;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} }
.cbi-page-actions .cbi-button-apply + .cbi-button-save { .cbi-page-actions .cbi-button-apply + .cbi-button-save {
background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background: linear-gradient(#fff, #fff 25%, #e6e6e6);
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
color: #4a4; color: #4a4;
} }
@ -1446,7 +1401,7 @@ footer {
min-height: 20px; min-height: 20px;
} }
.cbi-dropdown > ul > li .hide-open { display: initial; } .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
.cbi-dropdown > ul > li .hide-close { display: none; } .cbi-dropdown > ul > li .hide-close { display: none; }
.cbi-dropdown > ul > li[display]:not([display="0"]) { .cbi-dropdown > ul > li[display]:not([display="0"]) {
@ -1511,7 +1466,7 @@ footer {
} }
.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } .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-close { display: block; display: initial; }
.cbi-dropdown[open] > ul.dropdown > li { .cbi-dropdown[open] > ul.dropdown > li {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
@ -1624,16 +1579,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.close { .close {
float: right; float: right;
color: #000000; color: #000;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 13.5px; line-height: 13.5px;
text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #fff;
opacity: 0.25; opacity: 0.25;
} }
.close:hover { .close:hover {
color: #000000; color: #000;
text-decoration: none; text-decoration: none;
opacity: 0.4; opacity: 0.4;
} }
@ -1643,11 +1598,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 7px 15px; padding: 7px 15px;
margin-bottom: 18px; margin-bottom: 18px;
color: #404040; color: #404040;
background-color: #eedc94; background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #fceec1, #eedc94);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-width: 1px; border-width: 1px;
@ -1670,7 +1622,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.alert-message.error p a, .alert-message.error p a,
.alert-message.success p a, .alert-message.success p a,
.alert-message.info p a { .alert-message.info p a {
color: #ffffff; color: #fff;
} }
.alert-message h5 { .alert-message h5 {
@ -1687,15 +1639,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
line-height: 28px; line-height: 28px;
} }
.alert-message .btn {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.label { .label {
padding: 1px 3px 2px; padding: 1px 3px 2px;
font-size: 9.75px; font-size: 9.75px;
font-weight: bold; font-weight: bold;
color: #ffffff !important; color: #fff !important;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
background-color: #bfbfbf; background-color: #bfbfbf;
@ -1705,7 +1653,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
a.label:link, a.label:link,
a.label:visited { a.label:visited {
color: #ffffff; color: #fff;
} }
a.label:hover { a.label:hover {
@ -1736,7 +1684,7 @@ a.label:hover {
#memcache > div, #memcache > div,
#membuff > div, #membuff > div,
#conns > div { #conns > div {
border: 1px solid #CCCCCC; border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;
color: #808080; color: #808080;
display: inline-block; display: inline-block;
@ -1748,7 +1696,7 @@ a.label:hover {
cursor: pointer; cursor: pointer;
} }
form.inline { display: inline } form.inline { display: inline; margin-bottom: 0; }
header .pull-right { padding-top: 8px; } header .pull-right { padding-top: 8px; }
@ -1756,15 +1704,13 @@ header .pull-right { padding-top: 8px; }
#syslog { width: 100%; } #syslog { width: 100%; }
.cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th { .cbi-section-table .tr:hover .td,
background-color: #f9f9f9; .cbi-section-table .tr:hover .th,
} .cbi-section-table .tr:hover::before {
.cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.cbi-section-table tr.cbi-section-table-descr th { .cbi-section-table .tr.cbi-section-table-descr .th {
font-weight: normal; font-weight: normal;
} }
@ -1776,17 +1722,21 @@ header .pull-right { padding-top: 8px; }
padding: 10px 10px 9px; padding: 10px 10px 9px;
line-height: 18px; line-height: 18px;
font-weight: bold; font-weight: bold;
vertical-align: middle;
} }
.cbi-section-table-titles.named::before,
.cbi-section-table-descr.named::before,
.cbi-section-table-row[data-title]::before { .cbi-section-table-row[data-title]::before {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.left { text-align: left !important; } .left { text-align: left !important; }
.right { text-align: right !important; } .right { text-align: right !important; }
.center { text-align: center !important; } .center { text-align: center !important; }
.top { vertical-align: top !important; }
.middle { vertical-align: middle !important; }
.bottom { vertical-align: bottom !important; }
.cbi-value-field { line-height: 1.5em; } .cbi-value-field { line-height: 1.5em; }
@ -1801,10 +1751,11 @@ table table td,
border: none; border: none;
} }
.table.cbi-section-table input, .table.cbi-section-table input[type="password"],
.table.cbi-section-table input[type="text"],
.table.cbi-section-table textarea, .table.cbi-section-table textarea,
.table.cbi-section-table select { .table.cbi-section-table select {
width: auto; width: 100%;
} }
.table.cbi-section-table .td.cbi-section-table-cell { .table.cbi-section-table .td.cbi-section-table-cell {
@ -1816,10 +1767,36 @@ table table td,
width: inherit; width: inherit;
} }
.td.cbi-section-actions {
text-align: right;
vertical-align: middle;
}
.td.cbi-section-actions > * {
display: flex;
}
.td.cbi-section-actions > * > *,
.td.cbi-section-actions > * > form > * {
flex: 1 1 4em;
margin: 0 1px;
}
.td.cbi-section-actions > * > form {
display: inline-flex;
margin: 0;
}
.table.valign-middle .td { .table.valign-middle .td {
vertical-align: middle; vertical-align: middle;
} }
.cbi-rowstyle-2,
.tr.table-titles,
.tr.cbi-section-table-titles {
background: #f9f9f9;
}
.cbi-value-description { .cbi-value-description {
background-image: url(/luci-static/resources/cbi/help.gif); background-image: url(/luci-static/resources/cbi/help.gif);
background-position: .25em .2em; background-position: .25em .2em;
@ -1829,26 +1806,27 @@ table table td,
} }
.cbi-section-error { .cbi-section-error {
border: 1px solid #FF0000; border: 1px solid #f00;
border-radius: 3px; border-radius: 3px;
background-color: #FCE6E6; background-color: #fce6e6;
padding: 5px; padding: 5px;
margin-bottom: 18px;
} }
.cbi-section-error ul { margin: 0 0 0 20px; } .cbi-section-error ul { margin: 0 0 0 20px; }
.cbi-section-error ul li { .cbi-section-error ul li {
color: #FF0000; color: #f00;
font-weight: bold; font-weight: bold;
} }
.ifacebox { .ifacebox {
background-color: #FFFFFF; background-color: #fff;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@ -1859,7 +1837,7 @@ table table td,
} }
.ifacebox .ifacebox-head { .ifacebox .ifacebox-head {
border-bottom: 1px solid #CCCCCC; border-bottom: 1px solid #ccc;
padding: 2px; padding: 2px;
background: #eee; background: #eee;
} }
@ -1869,17 +1847,17 @@ table table td,
} }
.ifacebox .ifacebox-body { .ifacebox .ifacebox-body {
padding: 6px; padding: .25em;
} }
.ifacebadge { .ifacebadge {
display: inline-flex; display: inline-block;
flex-direction: row; flex-direction: row;
white-space: nowrap; white-space: nowrap;
background-color: #FFFFFF; background-color: #fff;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
padding: 2px; padding: 2px;
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@ -1891,11 +1869,10 @@ table table td,
width: 16px; width: 16px;
height: 16px; height: 16px;
vertical-align: middle; vertical-align: middle;
margin-right: .25em;
} }
.ifacebadge-active { .ifacebadge-active {
border-color: #000000; border-color: #000;
font-weight: bold; font-weight: bold;
} }
@ -1916,21 +1893,32 @@ table table td,
text-align: left; text-align: left;
} }
.network-status-table .ifacebox-body > * {
margin: .25em;
}
.network-status-table .ifacebox-body > span { .network-status-table .ifacebox-body > span {
flex: 10; flex: 10 10 auto;
} }
.network-status-table .ifacebox-body > div { .network-status-table .ifacebox-body > div {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: -.125em;
} }
.ifacebadge.large, .ifacebadge.large,
.network-status-table .ifacebox-body .ifacebadge { .network-status-table .ifacebox-body .ifacebadge {
display: inline-flex;
flex: 1; flex: 1;
margin: .5em .25em 0 .25em; padding: .25em;
padding: .5em;
min-width: 220px; min-width: 220px;
margin: .125em;
}
.ifacebadge > *,
.ifacebadge.large > * {
margin: 0 .125em;
} }
.zonebadge { .zonebadge {
@ -1938,7 +1926,7 @@ table table td,
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
color: #666666; color: #666;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
} }
@ -1957,8 +1945,8 @@ table table td,
} }
.zonebadge-empty { .zonebadge-empty {
border: 1px dashed #AAAAAA; border: 1px dashed #aaa;
color: #AAAAAA; color: #aaa;
font-style: italic; font-style: italic;
font-size: smaller; font-size: smaller;
} }
@ -1966,7 +1954,7 @@ table table td,
div.cbi-value var, div.cbi-value var,
.td.cbi-value-field var { .td.cbi-value-field var {
font-style: italic; font-style: italic;
color: #0069D6; color: #0069d6;
} }
.uci-change-list { .uci-change-list {
@ -1976,8 +1964,8 @@ div.cbi-value var,
.uci-change-list ins, .uci-change-list ins,
.uci-change-legend-label ins { .uci-change-legend-label ins {
text-decoration: none; text-decoration: none;
border: 1px solid #00FF00; border: 1px solid #0f0;
background-color: #CCFFCC; background-color: #cfc;
display: block; display: block;
padding: 2px; padding: 2px;
} }
@ -1985,8 +1973,8 @@ div.cbi-value var,
.uci-change-list del, .uci-change-list del,
.uci-change-legend-label del { .uci-change-legend-label del {
text-decoration: none; text-decoration: none;
border: 1px solid #FF0000; border: 1px solid #f00;
background-color: #FFCCCC; background-color: #fcc;
display: block; display: block;
font-style: normal; font-style: normal;
padding: 2px; padding: 2px;
@ -1995,8 +1983,8 @@ div.cbi-value var,
.uci-change-list var, .uci-change-list var,
.uci-change-legend-label var { .uci-change-legend-label var {
text-decoration: none; text-decoration: none;
border: 1px solid #CCCCCC; border: 1px solid #ccc;
background-color: #EEEEEE; background-color: #eee;
display: block; display: block;
font-style: normal; font-style: normal;
padding: 2px; padding: 2px;

View file

@ -170,6 +170,7 @@
<% if css then %> <% if css then %>
<style title="text/css"><%= css %></style> <style title="text/css"><%= css %></style>
<% end -%> <% end -%>
<script src="<%=resource%>/cbi.js"></script>
<script src="<%=resource%>/xhr.js"></script> <script src="<%=resource%>/xhr.js"></script>
</head> </head>