themes: add forward-compatibility CSS
Subsequent changes will largely replace tables with div based markup, so add forward compatibility style rules to keep the rendering intact. Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich
parent
fb70693b7d
commit
97a640c836
3 changed files with 166 additions and 95 deletions
|
|
@ -25,7 +25,8 @@ body {
|
|||
|
||||
h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
|
||||
small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
|
||||
form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
.table, .tbody, .tfoot, .thead, .tr, .th, .td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -671,7 +672,7 @@ textarea[readonly] {
|
|||
.cbi-page-actions {
|
||||
background: #f5f5f5;
|
||||
margin-bottom: 18px;
|
||||
padding: 17px 20px 18px 150px;
|
||||
padding: 17px 20px 18px 17px;
|
||||
border-top: 1px solid #ddd;
|
||||
-webkit-border-radius: 0 0 3px 3px;
|
||||
-moz-border-radius: 0 0 3px 3px;
|
||||
|
|
@ -719,7 +720,12 @@ textarea[readonly] {
|
|||
* Tables.less
|
||||
* Tables for, you guessed it, tabular data
|
||||
* ---------------------------------------- */
|
||||
table {
|
||||
.tr { display: table-row; }
|
||||
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
|
||||
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
padding: 0;
|
||||
|
|
@ -727,24 +733,26 @@ table {
|
|||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
.table .th, .table .td {
|
||||
display: table-cell;
|
||||
vertical-align: middle; /* Fixme */
|
||||
padding: 10px 10px 9px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table th {
|
||||
.table .th {
|
||||
padding-top: 9px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table td {
|
||||
.table .td {
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table tbody th {
|
||||
.table .tbody .th {
|
||||
border-top: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -1585,10 +1593,6 @@ footer {
|
|||
padding: 3px 9px 3px 27px;
|
||||
}
|
||||
|
||||
:root .alert-message, :root .btn {
|
||||
border-radius: 0 0;
|
||||
}
|
||||
|
||||
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
|
@ -1765,6 +1769,8 @@ header .pull-right { padding-top: 8px; }
|
|||
|
||||
.right { text-align: right !important; }
|
||||
|
||||
.center { text-align: center !important; }
|
||||
|
||||
.cbi-value-field { line-height: 1.5em; }
|
||||
|
||||
.cbi-value-field input[type=checkbox],
|
||||
|
|
@ -1778,22 +1784,22 @@ table table td,
|
|||
border: none;
|
||||
}
|
||||
|
||||
table.cbi-section-table input,
|
||||
table.cbi-section-table textarea,
|
||||
table.cbi-section-table select {
|
||||
.table.cbi-section-table input,
|
||||
.table.cbi-section-table textarea,
|
||||
.table.cbi-section-table select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
table.cbi-section-table td.cbi-section-table-cell {
|
||||
.table.cbi-section-table .td.cbi-section-table-cell {
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.cbi-section-table td.cbi-section-table-cell select {
|
||||
.table.cbi-section-table .td.cbi-section-table-cell select {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
table.valign-middle td {
|
||||
.table.valign-middle .td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -1909,7 +1915,7 @@ table.valign-middle td {
|
|||
}
|
||||
|
||||
div.cbi-value var,
|
||||
td.cbi-value-field var {
|
||||
.td.cbi-value-field var {
|
||||
font-style: italic;
|
||||
color: #0069D6;
|
||||
}
|
||||
|
|
@ -1945,12 +1951,14 @@ td.cbi-value-field var {
|
|||
display: block;
|
||||
font-style: normal;
|
||||
padding: 2px;
|
||||
line-height: 19px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.uci-change-list var ins,
|
||||
.uci-change-list var del {
|
||||
/*display: inline;*/
|
||||
border: none;
|
||||
display: inline;
|
||||
/*border: none;*/
|
||||
white-space: pre;
|
||||
font-style: normal;
|
||||
padding: 0px;
|
||||
|
|
|
|||
|
|
@ -32,6 +32,25 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.table { display: table; }
|
||||
.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: .5em;
|
||||
}
|
||||
|
||||
.th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
|
||||
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
|
||||
|
||||
.cbi-button-up,
|
||||
.cbi-button-down,
|
||||
.cbi-value-helpicon,
|
||||
|
|
@ -468,14 +487,16 @@ fieldset > fieldset {
|
|||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
table {
|
||||
table,
|
||||
.table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
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,
|
||||
.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;
|
||||
|
|
@ -489,7 +510,13 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
fieldset > table > tbody > tr:nth-of-type(2n) {
|
||||
fieldset > table > tbody > tr:nth-of-type(2n),
|
||||
fieldset > .table > .tbody > .tr:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
fieldset > table > tbody > tr:nth-of-type(2n),
|
||||
fieldset > .table > .tbody > .tr:nth-of-type(2n) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
|
|
@ -516,19 +543,23 @@ fieldset > table > tbody > tr:nth-of-type(2n) {
|
|||
|
||||
/* fix multiple table */
|
||||
|
||||
table table {
|
||||
table table,
|
||||
.table .table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cbi-value-field table {
|
||||
.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 {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cbi-value-field > table > tbody > tr > td {
|
||||
.cbi-value-field > table > tbody > tr > td,
|
||||
.cbi-value-field > .table > .tbody > .tr > .td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
@ -776,6 +807,10 @@ form.inline + form.inline,
|
|||
text-align: right !important;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -806,7 +841,8 @@ form.inline + form.inline,
|
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
td > .ifacebadge {
|
||||
td > .ifacebadge,
|
||||
.td > .ifacebadge {
|
||||
background-color: #F0F0F0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
|
@ -986,7 +1022,7 @@ td > .ifacebadge {
|
|||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
div.cbi-value 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;
|
||||
}
|
||||
|
|
@ -1134,13 +1170,13 @@ header > .container > .pull-right > * {
|
|||
|
||||
/* fix status overview */
|
||||
|
||||
.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) {
|
||||
.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,17 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.table { display: table; }
|
||||
.tr { display: table-row; }
|
||||
.thead { display: table-header-group; }
|
||||
.tbody { display: table-row-group; }
|
||||
.tfoot { display: table-footer-group; }
|
||||
.td, .th { display: table-cell; }
|
||||
.th { font-weight: bold; }
|
||||
|
||||
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
|
||||
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
|
@ -420,9 +431,9 @@ input[type=password] {
|
|||
width: 20em;
|
||||
}
|
||||
|
||||
td select,
|
||||
td input[type=text],
|
||||
td input[type=password] {
|
||||
.td select,
|
||||
.td input[type=text],
|
||||
.td input[type=password] {
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
|
|
@ -432,24 +443,24 @@ img.cbi-image-button {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input.cbi-button {
|
||||
background-color: #EEEEEE;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 1px center;
|
||||
border: 1px solid #CCCCCC;
|
||||
.cbi-button {
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #aaa;
|
||||
background: #eee 1px center no-repeat;
|
||||
}
|
||||
|
||||
input.cbi-button:hover {
|
||||
border-color: #4A6B7C;
|
||||
background-color: #FFFFFF;
|
||||
.cbi-button:hover {
|
||||
border-color: #4a6b7c;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
input.cbi-button[disabled] {
|
||||
color: #CCCCCC;
|
||||
border-color: #CCCCCC;
|
||||
background-color: #EEEEEE;
|
||||
.cbi-button[disabled],
|
||||
.cbi-button[disabled]:hover {
|
||||
opacity: .6;
|
||||
cursor: default;
|
||||
border-color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
input.cbi-input-user {
|
||||
|
|
@ -494,7 +505,6 @@ input.cbi-button-fieldadd {
|
|||
background-image: url(../resources/cbi/fieldadd.gif);
|
||||
color: #000000;
|
||||
padding-left: 17px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
input.cbi-input-reset,
|
||||
|
|
@ -513,6 +523,7 @@ input.cbi-button-save {
|
|||
padding-right: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
input.cbi-input-apply,
|
||||
input.cbi-button-apply {
|
||||
background-image: url('../resources/cbi/apply.gif');
|
||||
|
|
@ -520,6 +531,18 @@ input.cbi-button-apply {
|
|||
padding-left: 17px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
*/
|
||||
|
||||
input.cbi-input-apply:before,
|
||||
input.cbi-button-apply:before {
|
||||
background-image: url('../resources/cbi/apply.gif');
|
||||
border: 2px solid red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
content: ".";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
input.cbi-input-link,
|
||||
input.cbi-button-link {
|
||||
|
|
@ -608,12 +631,18 @@ form > div > input[type=reset] {
|
|||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
table td, table th {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
table.smalltext {
|
||||
.table .td, .table .th {
|
||||
color: #000000;
|
||||
padding: .25em 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table.smalltext {
|
||||
background: #f5f5f5;
|
||||
color: #000000;
|
||||
border-top: 1px solid #666666;
|
||||
|
|
@ -626,35 +655,35 @@ table.smalltext {
|
|||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.smalltext tr:hover td {
|
||||
.table.smalltext .tr:hover .td {
|
||||
background-color: #bbddee;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
table.smalltext tr th {
|
||||
.table.smalltext .tr .th {
|
||||
padding: 0 0.25em;
|
||||
border-left: 1px solid #666666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.smalltext tr td {
|
||||
.table.smalltext .tr .td {
|
||||
padding: 0 0.25em;
|
||||
border-top: 1px solid #666666;
|
||||
border-left: 1px solid #666666;
|
||||
}
|
||||
|
||||
table.cbi-section-table .cbi-rowstyle-1 {
|
||||
.table.cbi-section-table .cbi-rowstyle-1 {
|
||||
background-color: #eeeeff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
table.cbi-section-table .cbi-rowstyle-1:hover,
|
||||
table.cbi-section-table .cbi-rowstyle-2:hover {
|
||||
.table.cbi-section-table .cbi-rowstyle-1:hover,
|
||||
.table.cbi-section-table .cbi-rowstyle-2:hover {
|
||||
background-color: #b2c8d4;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
table.cbi-section-table .cbi-section-table-cell {
|
||||
.table.cbi-section-table .cbi-section-table-cell {
|
||||
padding: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -692,6 +721,11 @@ div.cbi-value-field {
|
|||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
div.td.cbi-value-field {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
div.cbi-value-description {
|
||||
font-size: 90%;
|
||||
display: inline;
|
||||
|
|
@ -740,7 +774,7 @@ div.cbi-section-remove {
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cbi-section-node table div {
|
||||
.cbi-section-node .table div {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -749,23 +783,23 @@ div.cbi-section-remove {
|
|||
margin: 0.25em;
|
||||
}
|
||||
|
||||
table.cbi-section-table {
|
||||
.table.cbi-section-table {
|
||||
width: 100%;
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
table.cbi-section-table th,
|
||||
table.cbi-section-table td {
|
||||
.table.cbi-section-table .th,
|
||||
.table.cbi-section-table .td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tr.cbi-section-table-descr th {
|
||||
.tr.cbi-section-table-descr .th {
|
||||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td.cbi-section-table-optionals {
|
||||
.td.cbi-section-table-optionals {
|
||||
text-align: left !important;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
|
@ -781,7 +815,7 @@ div.cbi-error {
|
|||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
td.cbi-value-error {
|
||||
.td.cbi-value-error {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
|
|
@ -864,6 +898,10 @@ div.cbi-tab-descr {
|
|||
text-align: right !important;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.luci {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -904,40 +942,18 @@ div.cbi-tab-descr {
|
|||
}
|
||||
|
||||
|
||||
.ifacebox {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #CCCCCC;
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ifacebox .ifacebox-head {
|
||||
border-bottom: 1px solid #CCCCCC;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.ifacebox .ifacebox-body {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
.ifacebadge {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #CCCCCC;
|
||||
padding: 1px 2px;
|
||||
margin-left: 2px;
|
||||
display: inline-block;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
.ifacebadge, .ifacebox {
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
padding: 2px;
|
||||
background: #fff;
|
||||
margin: .25em .5em;
|
||||
}
|
||||
|
||||
.ifacebadge img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
.ifacebadge > img {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.ifacebadge-active {
|
||||
|
|
@ -945,6 +961,17 @@ div.cbi-tab-descr {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ifacebox {
|
||||
flex-direction: column;
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.ifacebox > * {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
.zonebadge {
|
||||
padding: 2px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue