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>

1 files changed, 139 insertions, 80 deletions

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 4a40f6d68..b54510876 100644
--- 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,