luci-theme-material: align CSS with markup changes

Add the bare minimum of changes to make the theme render correctly with the
latest markup, requires further refinement and tuning in the future.

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

1 files changed, 173 insertions, 22 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index a9585cf40e..03a82b656a 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -32,8 +32,8 @@
     font-style: normal;
 }
 
-.table { display: table; }
-.tr { display: table-row; }
+.table { display: table; position: relative; }
+.tr    { display: table-row; }
 .thead { display: table-header-group; }
 .tbody { display: table-row-group; }
 .tfoot { display: table-footer-group; }
@@ -48,6 +48,19 @@
     font-weight: bold;
 }
 
+.tr.placeholder {
+    height: 4em;
+}
+
+.tr.placeholder > .td {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    line-height: 3em;
+}
+
 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
 
@@ -442,10 +455,12 @@ h3 {
 }
 
 h4 {
-
+    margin: 2rem 0 0 0;
+    font-size: 1.2rem;
+    padding-bottom: 10px;
 }
 
-fieldset {
+.cbi-section {
     margin: 2rem 0 0 0;
     padding: 2rem;
     border: 0;
@@ -465,7 +480,7 @@ fieldset {
     margin-top: 1rem;
 }
 
-fieldset > legend {
+.cbi-section > legend {
     display: none !important;
 }
 
@@ -486,10 +501,12 @@ fieldset > fieldset {
     border-bottom: 1px solid #eee;
 }
 
-table,
-.table {
+table {
     border-spacing: 0;
     border-collapse: collapse;
+}
+
+table, .table {
     width: 100%;
     border: 1px solid #eee;
 }
@@ -501,21 +518,75 @@ 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;
+}
+
+.td.cbi-value-field[data-title]::before {
+    content: attr(data-title);
+    padding: .5rem;
+    display: block;
+    white-space: nowrap;
+}
+
+.cbi-section-table {
+    border: none;
+}
+
+.cbi-section-table-titles,
+.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);
+}
+
+.cbi-section-table-row:last-child {
+    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,
+.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
+    width: 100%;
 }
 
-fieldset > table > tbody > tr:nth-of-type(2n),
-fieldset > .table > .tbody > .tr:nth-of-type(2n) {
+div > table > tbody > tr:nth-of-type(2n),
+div > .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) {
+div > table > tbody > tr:nth-of-type(2n),
+div > .table > .tbody > .tr:nth-of-type(2n) {
     background-color: #f9f9f9;
 }
 
@@ -1029,7 +1100,7 @@ td > .ifacebadge,
 .ifacebadge > img {
     display: inline-block;
     margin: 0 .2rem;
-    align-self: start;
+    align-self: flex-start;
 }
 
 .ifacebadge > img + img {
@@ -1206,10 +1277,9 @@ td > .ifacebadge,
 .zonebadge {
     padding: 0.2rem 0.5rem;
     display: inline-block;
-    cursor: pointer;
 }
 
-.zonebadge > .ifacebadge {
+.zonebadge .ifacebadge {
     padding: .2rem .3rem;
     margin: 0.1rem 0.2rem;
     border: 1px solid #6C6C6C;
@@ -1255,11 +1325,13 @@ td > .ifacebadge,
     min-width: 7rem;
 }
 
-.cbi-section-table-row > .cbi-value-field .cbi-input-select {
-    width: 7rem;
+.cbi-section-create {
+    margin: .5rem -3px;
+    display: inline-flex;
+    align-items: center;
 }
 
-.cbi-section-create > .cbi-button-add {
+.cbi-section-create > * {
     margin: 0.5rem;
 }
 
@@ -1291,6 +1363,62 @@ small {
     border-top: 1px solid #CCC;
 }
 
+.cbi-dropdown-container {
+    position: relative;
+}
+
+.cbi-tooltip-container {
+    cursor: help;
+}
+
+.cbi-tooltip {
+    position: absolute;
+    z-index: 1000;
+    left: -1000px;
+    opacity: 0;
+    transition: opacity .25s ease-out;
+    pointer-events: none;
+    box-shadow: 0 0 2px #444;
+}
+
+.cbi-tooltip-container:hover .cbi-tooltip {
+    left: auto;
+    opacity: 1;
+    transition: opacity .25s ease-in;
+}
+
+.zonebadge .cbi-tooltip {
+    padding: .25rem;
+    background: inherit;
+    margin: -1.5rem 0 0 -.5rem;
+}
+
+.zonebadge-empty {
+    background: repeating-linear-gradient(45deg,rgba(204,204,204,0.5),rgba(204,204,204,0.5) 5px,rgba(255,255,255,0.5) 5px,rgba(255,255,255,0.5) 10px);
+    color: #404040;
+}
+
+.zone-forwards {
+    display: flex;
+    min-width: 10rem;
+}
+
+.zone-forwards > * {
+    flex: 1 1 45%;
+}
+
+.zone-forwards > span {
+    flex-basis: 10%;
+    text-align: center;
+    padding: 0 .25rem;
+}
+
+.zone-forwards .zone-src,
+.zone-forwards .zone-dest {
+    display: flex;
+    flex-direction: column;
+}
+
 #diag-rc-output > pre {
     background-color: #f5f5f5;
     display: block;
@@ -1475,11 +1603,6 @@ header > .container > .pull-right > * {
     margin-top: 0;
 }
 
-/* fix network firewall*/
-.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select {
-    min-width: 4rem;
-}
-
 .node-status-iptables fieldset,
 .node-system-packages fieldset,
 .node-system-flashops fieldset {
@@ -1669,6 +1792,26 @@ body.lang_pl.node-main-login .cbi-value-title {
     .node-main-login > .main .cbi-value-title {
         text-align: left;
     }
+
+    .tr {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .th, .td {
+        flex: 1;
+        flex-basis: 33%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .th.cbi-value-field,
+    .td.cbi-value-field,
+    .th.cbi-section-table-cell,
+    .td.cbi-section-table-cell {
+        flex-basis: auto;
+    }
 }
 
 @media screen and (max-width: 480px) {
@@ -1803,6 +1946,14 @@ body.lang_pl.node-main-login .cbi-value-title {
     .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] {
         margin-top: 1rem;
     }
+
+    .th, .td {
+        flex-basis: 50%;
+    }
+
+    .td.cbi-value-field {
+        flex-basis: 100%;
+    }
 }
 
 @media screen and (min-width: 992px) {