luci-theme-material: table layout fixes and minor CSS corrections

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

themes/luci-theme-material/htdocs/luci-static/material/css/style.css

@@ -59,11 +59,23 @@
     bottom: 0;
     text-align: center;
     line-height: 3em;
+    background: inherit;
 }
 
 .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,
@@ -461,7 +473,7 @@ h4 {
 }
 
 .cbi-section {
-    margin: 2rem 0 0 0;
+    margin: 1rem 0 0 0;
     padding: 2rem;
     border: 0;
     font-weight: normal;
@@ -491,6 +503,7 @@ fieldset > fieldset {
     box-shadow: none;
 }
 
+.cbi-section > h3:first-child,
 .panel-title {
     width: 100%;
     display: block;
@@ -499,6 +512,7 @@ fieldset > fieldset {
     font-size: 1.4rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid #eee;
+    margin: 0;
 }
 
 table {
@@ -518,41 +532,18 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
     white-space: nowrap;
 }
 
-.td.cbi-value-field,
-.cbi-section-table-cell {
-    text-align: center;
-    display: inline-block;
-    flex: 10;
-}
-
 .cbi-section-table-cell {
     white-space: nowrap;
     align-self: flex-end;
-    flex: 1;
+    flex: 1 1 auto;
-}
-
-.td.cbi-value-field[data-title]::before {
-    content: attr(data-title);
-    padding: .5rem;
-    display: block;
-    white-space: nowrap;
 }
 
 .cbi-section-table {
     border: none;
 }
 
-.tr.cbi-section-table-titles,
-.tr.cbi-section-table-descr {
-    display: none;
-}
-
 .cbi-section-table-row {
     text-align: center;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: space-between;
     margin-bottom: 1rem;
     background: #f4f4f4;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
@@ -562,17 +553,6 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
     margin-bottom: 0;
 }
 
-.cbi-section-table-row[data-title]::before {
-    content: attr(data-title);
-    display: block;
-    width: 100%;
-    margin: .25rem;
-    padding: .25rem .25rem .5rem .25rem;
-    border-bottom: 1px solid rgba(0, 0, 0, .26);
-    text-align: center;
-    font-size: 1rem;
-}
-
 .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,
@@ -580,6 +560,11 @@ table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table
     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;
@@ -852,6 +837,33 @@ form.inline + form.inline,
     border: none;
 }
 
+.td[data-title]::before {
+    content: attr(data-title) ":\20";
+    font-weight: bold;
+    text-align: left;
+    display: none;
+    padding: .25rem 0;
+    white-space: nowrap;
+}
+
+.tr.placeholder .td[data-title]::before {
+    display: none;
+}
+
+.tr[data-title]::before,
+.tr.cbi-section-table-titles.named::before {
+    content: attr(data-title) "\20";
+    font-weight: bold;
+    text-align: center;
+    display: table-cell;
+    align-self: center;
+    flex: 1 1 5%;
+    padding: .25rem;
+    white-space: normal;
+    word-wrap: break-word;
+    vertical-align: middle;
+}
+
 .cbi-rowstyle-2 {
     background-color: #eee;
 }
@@ -1045,18 +1057,28 @@ form.inline + form.inline,
     display: none
 }
 
-.left {
+.left, .left::before {
     text-align: left !important;
 }
 
-.right {
+.right, .right::before {
     text-align: right !important;
 }
 
-.center {
+.center, .center::before {
     text-align: center !important;
 }
 
+.top {
+    align-self: flex-start !important;
+    vertical-align: top !important;
+}
+
+.bottom {
+    align-self: flex-end !important;
+    vertical-align: bottom !important;
+}
+
 .inline {
     display: inline;
 }
@@ -1082,6 +1104,12 @@ form.inline + form.inline,
     width: 15rem;
 }
 
+.th[data-type="button"], .td[data-type="button"],
+.th[data-type="fvalue"], .td[data-type="fvalue"] {
+    flex: 1 1 2em;
+    text-align: center;
+}
+
 .ifacebadge {
     display: inline-flex;
     border-bottom: 1px solid #CCCCCC;
@@ -1124,7 +1152,7 @@ td > .ifacebadge,
 }
 
 .network-status-table .ifacebox-body > span {
-    flex: 10;
+    flex: 10 10 auto;
 }
 
 .network-status-table .ifacebox-body > div {
@@ -1133,7 +1161,7 @@ td > .ifacebadge,
 }
 
 .network-status-table .ifacebox-body .ifacebadge {
-    flex: 1;
+    flex: 1 1 auto;
     margin: .5em .25em 0 .25em;
     padding: .5em;
     min-width: 220px;
@@ -1303,6 +1331,11 @@ td > .ifacebadge,
     height: 1rem;
 }
 
+.td .cbi-input-checkbox,
+.td .cbi-input-radio {
+    margin-top: 0;
+}
+
 .cbi-value-field > input + .cbi-value-description {
     padding: 0;
 }
@@ -1805,10 +1838,29 @@ body.lang_pl.node-main-login .cbi-value-title {
     }
 
     .th, .td {
-        flex: 1;
+        flex: 2 2 25%;
-        flex-basis: 33%;
+        align-self: flex-start;
         overflow: hidden;
         text-overflow: ellipsis;
+        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,
@@ -1817,6 +1869,54 @@ body.lang_pl.node-main-login .cbi-value-title {
     .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;
+        flex: 1 1 100%;
+        background: #eef;
+        font-size: .9rem;
+        border-bottom: 1px solid rgba(0, 0, 0, .26);
+    }
+
+    .td[data-title] {
+        text-align: left;
+    }
+
+    .td[data-title]::before {
+        display: block;
+    }
+
+    .hide-sm,
+    .hide-xs {
+        display: none;
+    }
 }
 
 @media screen and (max-width: 480px) {
@@ -1959,6 +2059,25 @@ body.lang_pl.node-main-login .cbi-value-title {
     .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;
+    }
 }
 
 @media screen and (min-width: 992px) {