luci-theme-bootstrap: align CSS with markup changes

Add 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>

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 4a40f6d680f1fe24492fcd82235f4ce14325e380..b54510876e91aaf6a7f7cff982922f5e85d476bf 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -215,7 +215,8 @@ a:hover {
  * ---------------------------------------------------------------------------------------- */
 p,
 .cbi-map-descr,
-.cbi-section-descr {
+.cbi-section-descr,
+.table .tr.cbi-section-table-descr .th {
        font-size: 13px;
        font-weight: normal;
        line-height: 18px;
@@ -229,7 +230,7 @@ p small {
 
 h1,
 h2,
-h3,
+h3, legend,
 h4,
 h5,
 h6 {
@@ -265,14 +266,14 @@ h2 small {
        font-size: 14px;
 }
 
-h3,
+h3, legend,
 h4,
 h5,
 h6 {
        line-height: 36px;
 }
 
-h3 {
+h3, legend {
        font-size: 18px;
 }
 
@@ -645,6 +646,26 @@ textarea[readonly] {
        border-color: #ddd;
 }
 
+.cbi-optionals,
+.cbi-section-create {
+       padding: 0 0 10px 10px;
+}
+
+.cbi-section-create {
+       margin: -3px;
+       display: inline-flex;
+       align-items: center;
+}
+
+.cbi-section-create > * {
+       margin: 3px;
+       flex: 1 1 auto;
+}
+
+.cbi-section-create > * > input {
+       width: 100%;
+}
+
 .actions,
 .cbi-page-actions {
        background: #f5f5f5;
@@ -706,6 +727,7 @@ textarea[readonly] {
        padding: 0;
        font-size: 13px;
        border-collapse: collapse;
+       position: relative;
 }
 
 .table .th, .table .td {
@@ -732,6 +754,19 @@ textarea[readonly] {
        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
  * Repeatable UI elements outside the base styles provided from the scaffolding
  * ---------------------------------------------------------------------------- */
@@ -1244,99 +1279,67 @@ footer {
        outline: 1px dotted #666;
 }
 
-.btn.primary,
-.cbi-page-actions .cbi-button-apply,
-.cbi-page-actions .cbi-button-save,
-.cbi-page-actions .cbi-button-reset {
-       color: #ffffff;
-       padding: 5px 14px 6px;
-       background-color: #0064cd;
-       background-repeat: repeat-x;
-       background-image: linear-gradient(to bottom, #049cdb, #0064cd);
-       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-       border-color: #0064cd #0064cd #003f81;
-       border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-}
-
 .cbi-input-invalid,
 .cbi-value-error input {
        color: #FF0000;
        border-color: #FF0000;
 }
 
-.cbi-button-up,
-.cbi-input-up {
-       background-position: center center;
-       background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-}
-
-.cbi-button-down,
-.cbi-input-down {
-       background-position: center center;
-       background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.cbi-button-positive,
+.cbi-button-fieldadd,
+.cbi-button-add,
+.cbi-button-save {
+       border-color: #4a4;
+       color: #4a4;
 }
 
+.cbi-button-neutral,
+.cbi-button-download,
 .cbi-button-find,
-.cbi-input-find {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-}
-
-.cbi-button-add,
-.cbi-input-add {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.cbi-button-link,
+.cbi-button-up,
+.cbi-button-down {
+       border-color: #444;
+       color: #444;
 }
 
+.btn.primary,
+.cbi-button-action,
 .cbi-button-apply,
-.cbi-input-apply {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.cbi-button-reload,
+.cbi-button-edit {
+       border-color: #0069d6;
+       color: #0069d6;
 }
 
+.cbi-button-negative,
+.cbi-section-remove .cbi-button,
 .cbi-button-reset,
-.cbi-input-reset {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.cbi-button-remove {
+       border-color: #c44;
+       color: #c44;
 }
 
-.cbi-button-edit,
-.cbi-input-edit {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-}
-
-.cbi-button-remove,
-.cbi-input-remove {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-}
-
-.cbi-button-reload,
-.cbi-input-reload {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.btn.primary,
+.cbi-button-action.important,
+.cbi-page-actions .cbi-button-apply,
+.cbi-section-actions .cbi-button-edit {
+       color: #fff;
+       background: #0069d6;
+       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
-.cbi-button-link,
-.cbi-input-link {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.cbi-button-positive.important,
+.cbi-page-actions .cbi-button-save {
+       color: #fff;
+       background: #4a4;
+       text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
-.cbi-button-download,
-.cbi-input-download {
-       background-position: 6px center, left top;
-       padding-left: 28px;
-       background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+.cbi-page-actions .cbi-button-apply + .cbi-button-save {
+       background: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
+       text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
+       color: #4a4;
 }
 
 .cbi-dropdown {
@@ -1492,6 +1495,58 @@ footer {
        opacity: .6;
 }
 
+.cbi-tooltip-container {
+       cursor: help;
+}
+
+.cbi-tooltip {
+       position: absolute;
+       z-index: 1000;
+       left: -1000px;
+       opacity: 0;
+       transition: opacity .25s ease-out;
+}
+
+.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
+       left: auto;
+       opacity: 1;
+       transition: opacity .25s ease-in;
+}
+
+.zonebadge .cbi-tooltip {
+       padding: 1px;
+       background: inherit;
+       margin: -1.6em 0 0 -5px;
+       border-radius: 3px;
+       pointer-events: none;
+       box-shadow: 0 0 3px #444;
+}
+
+.zonebadge .cbi-tooltip > * {
+       margin: 1px;
+}
+
+.zone-forwards {
+       display: flex;
+       flex-wrap: wrap;
+}
+
+.zone-forwards > * {
+       flex: 1 1 40%;
+       padding: 1px;
+}
+
+.zone-forwards > span {
+       flex-basis: 10%;
+       text-align: center;
+}
+
+.zone-forwards .zone-src,
+.zone-forwards .zone-dest {
+       display: flex;
+       flex-direction: column;
+}
+
 .btn.active, .btn:active {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -1751,9 +1806,13 @@ table table td,
        vertical-align: middle;
 }
 
-.cbi-value-description { display: inline; }
-
-.cbi-value-description img { vertical-align: middle; }
+.cbi-value-description {
+       background-image: url(/luci-static/resources/cbi/help.gif);
+       background-position: .25em .2em;
+       background-repeat: no-repeat;
+       margin: .25em 0 0 0;
+       padding: 0 0 0 1.7em;
+}
 
 .cbi-section-error {
        border: 1px solid #FF0000;
@@ -1852,6 +1911,7 @@ table table td,
        flex-wrap: wrap;
 }
 
+.ifacebadge.large,
 .network-status-table .ifacebox-body .ifacebadge {
        flex: 1;
        margin: .5em .25em 0 .25em;
@@ -1866,7 +1926,6 @@ table table td,
        white-space: nowrap;
        color: #666666;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-       cursor: pointer;
 }
 
 .zonebadge > em,