themes: adjust CSS for reworked apply widget

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

3 files changed, 49 insertions, 3 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 c8ce19aff..5aff09148 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1801,3 +1801,7 @@ div.cbi-value var,
 	line-height: 6px;
 	border: none;
 }
+
+html body.apply-overlay-active {
+	height: calc(100vh - 63px);
+}
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 cc9caac55..0e2ebd5c7 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
@@ -313,6 +313,12 @@ header > .container > .brand {
     color: red;
 }
 
+.alert-message h4 {
+    font-weight: bold;
+    font-size: 110%;
+    padding-bottom: 1em;
+}
+
 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
     font: inherit;
     overflow: visible;
@@ -565,7 +571,7 @@ td > table > tbody > tr > td,
 
 /* button style */
 
-.cbi-button {
+.btn, .cbi-button {
     -webkit-appearance: none;
     text-transform: uppercase;
     color: rgba(0, 0, 0, 0.87);
@@ -590,6 +596,9 @@ td > table > tbody > tr > td,
     width: auto !important;
 }
 
+.btn:hover,
+.btn:focus,
+.btn:active,
 .cbi-button:hover,
 .cbi-button:focus,
 .cbi-button:active {
@@ -599,15 +608,19 @@ td > table > tbody > tr > td,
     color: rgba(0, 0, 0, 0.87);
 }
 
+.btn:hover,
+.btn:focus,
 .cbi-button:hover,
 .cbi-button:focus {
     box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
+.btn:active,
 .cbi-button:active {
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
 
+.btn:disabled,
 .cbi-button:disabled {
     cursor: not-allowed;
     pointer-events: none;
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index b474bb9fe..d5d2686e7 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -181,6 +181,33 @@ code {
 	background-color: white;
 }
 
+.alert-message {
+	font-size: 9pt;
+	font-weight: normal;
+	padding: .5em;
+	border-radius: 3px;
+	color: #000;
+}
+
+.alert-message.notice {
+	background: linear-gradient(#ccc 0%, #eee 100%);
+	color: #4a6b7c;
+}
+
+.alert-message.warning {
+	background: linear-gradient(#dda 0%, #dd8 100%);
+	color: #c00;
+}
+
+.alert-message > * {
+	margin: .5em;
+}
+
+.alert-message > h4 {
+	font-weight: bold;
+	font-size: 10pt;
+}
+
 div.hostinfo {
 	float: left;
 	margin: 0;
@@ -447,18 +474,20 @@ img.cbi-image-button {
 	vertical-align: middle;
 }
 
-.cbi-button {
+.btn, .cbi-button {
 	padding: 2px;
 	border-radius: 3px;
 	border: 1px solid #aaa;
 	background: #eee 1px center no-repeat;
 }
 
-.cbi-button:hover {
+.btn:hover, .cbi-button:hover {
 	border-color: #4a6b7c;
 	background-color: #fff;
 }
 
+.btn[disabled],
+.btn[disabled]:hover,
 .cbi-button[disabled],
 .cbi-button[disabled]:hover {
 	opacity: .6;