From: Jo-Philipp Wich <jo@mein.io>
Date: Wed, 11 Sep 2019 07:23:16 +0000 (+0200)
Subject: luci-theme-bootstrap: cleanup alert-message css, add fade-in/fade-out anims
X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=43d8e98a15072ff8f53d343a6a3fa1f59fcd175c;p=oweals%2Fluci.git

luci-theme-bootstrap: cleanup alert-message css, add fade-in/fade-out anims

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 0399985a3..e411ec315 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -1709,7 +1709,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 
 .alert-message {
 	position: relative;
-	padding: 7px 15px;
+	padding: .25em .5em;
 	margin-bottom: 18px;
 	color: #404040;
 	background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
@@ -1727,30 +1727,22 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 	*margin-top: 0;
 }
 
-.alert-message a {
-	font-weight: bold;
-	color: #404040;
-}
-
-.alert-message.danger p a,
-.alert-message.error p a,
-.alert-message.success p a,
-.alert-message.info p a {
-	color: #fff;
-}
-
-.alert-message h5 {
-	line-height: 18px;
-}
-
+.alert-message h4,
+.alert-message h5,
+.alert-message pre,
+.alert-message ul,
+.alert-message li,
 .alert-message p {
-	margin-bottom: 0;
+	color: inherit;
+	border: none;
+	line-height: inherit;
+	background: transparent;
+	padding: 0;
+	margin: .25em 0;
 }
 
-.alert-message div {
-	margin-top: 5px;
-	margin-bottom: 2px;
-	line-height: 28px;
+.alert-message button {
+	margin: .25em 0;
 }
 
 .label {
@@ -2339,3 +2331,21 @@ html body.apply-overlay-active {
 .cbi-filebrowser .upload > div > input {
 	width: 100%;
 }
+
+@keyframes fade-in {
+	0% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+@keyframes fade-out {
+	0% { opacity: 1; }
+	100% { opacity: 0; }
+}
+
+.fade-in {
+	animation: fade-in .4s ease;
+}
+
+.fade-out {
+	animation: fade-out .4s ease;
+}