Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

themes: add forward-compatibility CSS

Browse source 
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 2018-05-28 14:54:50 +02:00
parent fb70693b7d
commit 97a640c836
3 changed files with 166 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -25,7 +25,8 @@ body {
h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s, 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, 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; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -671,7 +672,7 @@ textarea[readonly] {
.cbi-page-actions { .cbi-page-actions {
background: #f5f5f5; background: #f5f5f5;
margin-bottom: 18px; margin-bottom: 18px;
padding: 17px 20px 18px 150px; padding: 17px 20px 18px 17px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px;
@ -719,7 +720,12 @@ textarea[readonly] {
* Tables.less * Tables.less
* Tables for, you guessed it, tabular data * 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%; width: 100%;
margin-bottom: 18px; margin-bottom: 18px;
padding: 0; padding: 0;
@ -727,24 +733,26 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
table th, table td { .table .th, .table .td {
display: table-cell;
vertical-align: middle; /* Fixme */
padding: 10px 10px 9px; padding: 10px 10px 9px;
line-height: 18px; line-height: 18px;
text-align: left; text-align: left;
} }
table th { .table .th {
padding-top: 9px; padding-top: 9px;
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
} }
table td { .table .td {
vertical-align: top; vertical-align: top;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
table tbody th { .table .tbody .th {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
vertical-align: top; vertical-align: top;
} }
@ -1585,10 +1593,6 @@ footer {
padding: 3px 9px 3px 27px; 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 { button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0; padding: 0;
border: 0; border: 0;
@ -1765,6 +1769,8 @@ header .pull-right { padding-top: 8px; }
.right { text-align: right !important; } .right { text-align: right !important; }
.center { text-align: center !important; }
.cbi-value-field { line-height: 1.5em; } .cbi-value-field { line-height: 1.5em; }
.cbi-value-field input[type=checkbox], .cbi-value-field input[type=checkbox],
@ -1778,22 +1784,22 @@ table table td,
border: none; border: none;
} }
table.cbi-section-table input, .table.cbi-section-table input,
table.cbi-section-table textarea, .table.cbi-section-table textarea,
table.cbi-section-table select { .table.cbi-section-table select {
width: auto; width: auto;
} }
table.cbi-section-table td.cbi-section-table-cell { .table.cbi-section-table .td.cbi-section-table-cell {
white-space: nowrap; white-space: nowrap;
text-align: right; 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; width: inherit;
} }
table.valign-middle td { .table.valign-middle .td {
vertical-align: middle; vertical-align: middle;
} }
@ -1909,7 +1915,7 @@ table.valign-middle 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;
} }
@ -1945,12 +1951,14 @@ td.cbi-value-field var {
display: block; display: block;
font-style: normal; font-style: normal;
padding: 2px; padding: 2px;
line-height: 19px;
white-space: pre;
} }
.uci-change-list var ins, .uci-change-list var ins,
.uci-change-list var del { .uci-change-list var del {
/*display: inline;*/ display: inline;
border: none; /*border: none;*/
white-space: pre; white-space: pre;
font-style: normal; font-style: normal;
padding: 0px; padding: 0px;

58
themes/luci-theme-material/htdocs/luci-static/material/css/style.css
View file

@ -32,6 +32,25 @@
font-style: normal; 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-up,
.cbi-button-down, .cbi-button-down,
.cbi-value-helpicon, .cbi-value-helpicon,
@ -468,14 +487,16 @@ fieldset > fieldset {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
table { table,
.table {
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
border: 1px solid #eee; 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; padding: .5rem;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
white-space: nowrap; white-space: nowrap;
@ -489,7 +510,13 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
text-align: center; 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; background-color: #f9f9f9;
} }
@ -516,19 +543,23 @@ fieldset > table > tbody > tr:nth-of-type(2n) {
/* fix multiple table */ /* fix multiple table */
table table { table table,
.table .table {
border: none; border: none;
} }
.cbi-value-field table { .cbi-value-field table,
.cbi-value-field .table {
border: none; border: none;
} }
td > table > tbody > tr > td { td > table > tbody > tr > td,
.td > .table > .tbody > .tr > .td {
border: none; 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; border: none;
} }
@ -776,6 +807,10 @@ form.inline + form.inline,
text-align: right !important; text-align: right !important;
} }
.center {
text-align: center !important;
}
.inline { .inline {
display: 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); 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; background-color: #F0F0F0;
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -986,7 +1022,7 @@ td > .ifacebadge {
padding: 0.5rem; 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; font-style: italic;
color: #0069D6; color: #0069D6;
} }
@ -1134,13 +1170,13 @@ header > .container > .pull-right > * {
/* fix status overview */ /* 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; white-space: normal;
} }
/* fix status processes */ /* 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; white-space: normal;
} }

155
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
View file

@ -29,6 +29,17 @@ body {
padding: 0; 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 { a img {
border: none; border: none;
text-decoration: none; text-decoration: none;
@ -420,9 +431,9 @@ input[type=password] {
width: 20em; width: 20em;
} }
td select, .td select,
td input[type=text], .td input[type=text],
td input[type=password] { .td input[type=password] {
width: 99%; width: 99%;
} }
@ -432,24 +443,24 @@ img.cbi-image-button {
vertical-align: middle; vertical-align: middle;
} }
input.cbi-button { .cbi-button {
background-color: #EEEEEE; padding: 2px;
background-repeat: no-repeat;
background-position: 1px center;
border: 1px solid #CCCCCC;
border-radius: 3px; border-radius: 3px;
border: 1px solid #aaa;
background: #eee 1px center no-repeat;
} }
input.cbi-button:hover { .cbi-button:hover {
border-color: #4A6B7C; border-color: #4a6b7c;
background-color: #FFFFFF; background-color: #fff;
} }
input.cbi-button[disabled] { .cbi-button[disabled],
color: #CCCCCC; .cbi-button[disabled]:hover {
border-color: #CCCCCC; opacity: .6;
background-color: #EEEEEE;
cursor: default; cursor: default;
border-color: inherit;
background-color: inherit;
} }
input.cbi-input-user { input.cbi-input-user {
@ -494,7 +505,6 @@ input.cbi-button-fieldadd {
background-image: url(../resources/cbi/fieldadd.gif); background-image: url(../resources/cbi/fieldadd.gif);
color: #000000; color: #000000;
padding-left: 17px; padding-left: 17px;
padding-right: 1px;
} }
input.cbi-input-reset, input.cbi-input-reset,
@ -513,6 +523,7 @@ input.cbi-button-save {
padding-right: 1px; padding-right: 1px;
} }
/*
input.cbi-input-apply, input.cbi-input-apply,
input.cbi-button-apply { input.cbi-button-apply {
background-image: url('../resources/cbi/apply.gif'); background-image: url('../resources/cbi/apply.gif');
@ -520,6 +531,18 @@ input.cbi-button-apply {
padding-left: 17px; padding-left: 17px;
padding-right: 1px; 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-input-link,
input.cbi-button-link { input.cbi-button-link {
@ -608,12 +631,18 @@ form > div > input[type=reset] {
margin-left: 0.5em; margin-left: 0.5em;
} }
table td, table td, table th {
table th {
color: #000000; color: #000000;
} }
table.smalltext { .table .td, .table .th {
color: #000000;
padding: .25em 0;
text-align: center;
vertical-align: middle;
}
.table.smalltext {
background: #f5f5f5; background: #f5f5f5;
color: #000000; color: #000000;
border-top: 1px solid #666666; border-top: 1px solid #666666;
@ -626,35 +655,35 @@ table.smalltext {
border-collapse: collapse; border-collapse: collapse;
} }
table.smalltext tr:hover td { .table.smalltext .tr:hover .td {
background-color: #bbddee; background-color: #bbddee;
color: #000000; color: #000000;
} }
table.smalltext tr th { .table.smalltext .tr .th {
padding: 0 0.25em; padding: 0 0.25em;
border-left: 1px solid #666666; border-left: 1px solid #666666;
text-align: left; text-align: left;
} }
table.smalltext tr td { .table.smalltext .tr .td {
padding: 0 0.25em; padding: 0 0.25em;
border-top: 1px solid #666666; border-top: 1px solid #666666;
border-left: 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; background-color: #eeeeff;
color: #000000; color: #000000;
} }
table.cbi-section-table .cbi-rowstyle-1:hover, .table.cbi-section-table .cbi-rowstyle-1:hover,
table.cbi-section-table .cbi-rowstyle-2:hover { .table.cbi-section-table .cbi-rowstyle-2:hover {
background-color: #b2c8d4; background-color: #b2c8d4;
color: #000000; color: #000000;
} }
table.cbi-section-table .cbi-section-table-cell { .table.cbi-section-table .cbi-section-table-cell {
padding: 3px; padding: 3px;
white-space: nowrap; white-space: nowrap;
} }
@ -692,6 +721,11 @@ div.cbi-value-field {
padding: 0.25em 0; padding: 0.25em 0;
} }
div.td.cbi-value-field {
width: auto;
vertical-align: middle;
}
div.cbi-value-description { div.cbi-value-description {
font-size: 90%; font-size: 90%;
display: inline; display: inline;
@ -740,7 +774,7 @@ div.cbi-section-remove {
border-bottom: none; border-bottom: none;
} }
.cbi-section-node table div { .cbi-section-node .table div {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
} }
@ -749,23 +783,23 @@ div.cbi-section-remove {
margin: 0.25em; margin: 0.25em;
} }
table.cbi-section-table { .table.cbi-section-table {
width: 100%; width: 100%;
font-size: 95%; font-size: 95%;
} }
table.cbi-section-table th, .table.cbi-section-table .th,
table.cbi-section-table td { .table.cbi-section-table .td {
text-align: center; text-align: center;
} }
tr.cbi-section-table-descr th { .tr.cbi-section-table-descr .th {
font-weight: normal; font-weight: normal;
font-size: 90%; font-size: 90%;
vertical-align: top; vertical-align: top;
} }
td.cbi-section-table-optionals { .td.cbi-section-table-optionals {
text-align: left !important; text-align: left !important;
padding-top: 1em; padding-top: 1em;
} }
@ -781,7 +815,7 @@ div.cbi-error {
background-color: #ffffff; background-color: #ffffff;
} }
td.cbi-value-error { .td.cbi-value-error {
border-color: red; border-color: red;
} }
@ -864,6 +898,10 @@ div.cbi-tab-descr {
text-align: right !important; text-align: right !important;
} }
.center {
text-align: center !important;
}
.luci { .luci {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -904,40 +942,18 @@ div.cbi-tab-descr {
} }
.ifacebox { .ifacebadge, .ifacebox {
background-color: #FFFFFF; display: inline-flex;
border: 1px solid #CCCCCC; align-content: center;
margin: 0 10px; border: 1px solid #ccc;
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;
border-radius: 3px; border-radius: 3px;
padding: 2px;
background: #fff;
margin: .25em .5em;
} }
.ifacebadge img { .ifacebadge > img {
width: 16px; margin-right: 2px;
height: 16px;
vertical-align: middle;
} }
.ifacebadge-active { .ifacebadge-active {
@ -945,6 +961,17 @@ div.cbi-tab-descr {
font-weight: bold; font-weight: bold;
} }
.ifacebox {
flex-direction: column;
margin: 0 10px;
padding: 0;
min-width: 70px;
}
.ifacebox > * {
padding: 2px;
}
.zonebadge { .zonebadge {
padding: 2px; padding: 2px;