luci-theme-material: fix some severe styling issues

Add some CSS band aids to fix styling and positioning of hidden tab panes,
cbi maps in modal dialogs and nested cbi sections.

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

1 files changed, 25 insertions, 0 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 91f87c69c1..a59e255a20 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -689,6 +689,7 @@ h5 {
 #cbi-network > .cbi-section-node,
 #cbi-wireless > .cbi-section-node,
 #cbi-wireless > #wifi_assoclist_table,
+[data-tab-title],
 [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear),
 [data-page="admin-system-opkg"] #maincontent > .container {
 	font-family: inherit;
@@ -704,6 +705,12 @@ h5 {
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 }
 
+.cbi-modal .cbi-section,
+.cbi-section .cbi-section {
+	padding: 0;
+	box-shadow: none;
+}
+
 .cbi-map-descr,
 .cbi-section-descr {
 	font-size: small;
@@ -741,6 +748,15 @@ fieldset > fieldset,
 	border-bottom: thin solid #eee;
 }
 
+.cbi-section > h3:first-child,
+.cbi-section > h4:first-child,
+.cbi-section > p:first-child,
+[data-tab-title] > h3:first-child,
+[data-tab-title] > h4:first-child,
+[data-tab-title] > p:first-child {
+	padding-top: 1rem;
+}
+
 table {
 	border-spacing: 0;
 	border-collapse: collapse;
@@ -1119,6 +1135,8 @@ td > table > tbody > tr > td,
 	overflow: hidden;
 	height: 0;
 	opacity: 0;
+	margin: 0;
+	padding: 0rem 1rem !important;
 }
 
 [data-tab-active="true"] {
@@ -1126,6 +1144,7 @@ td > table > tbody > tr > td,
 	height: auto;
 	opacity: 1;
 	transition: opacity .25s ease-in;
+	margin: inherit !important;
 }
 
 .cbi-section[id] .cbi-section-remove:nth-of-type(4n+3),
@@ -1595,6 +1614,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 .modal > * {
 	line-height: normal;
 	flex-basis: 100%;
+	margin-bottom: .5em;
 }
 
 .modal > pre,
@@ -1651,6 +1671,11 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 	margin-bottom: 2em;
 }
 
+.modal.cbi-modal {
+	max-width: 90%;
+	max-height: none;
+}
+
 body.modal-overlay-active {
 	overflow: hidden;
 	height: 100vh;