Improve showing notification banner (#4023)

* bad notification show double time of good notification

* stop timer, when mouse is over the notification

* after leaving the mouse hover close the notification in 1 second

* onlick to eddEventListener

* code fix

* fixed code

* more code fixes

* set default in template.css

* theme alternative dark

* theme ansum

* theme Blue lagoon

* theme dark

* theme flat

* theme Origine compact

* theme Origine

* theme Pafat

* theme Screwdriver

* theme Swage

* fixed RTL error

* fix css code

* mouseleave = 3sec.

25 files changed, 88 insertions, 45 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index cdf3a1324..af34368b4 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1327,8 +1327,12 @@ function openNotification(msg, status) {
 	notification.querySelector('.msg').innerHTML = msg;
 	notification.className = 'notification';
 	notification.classList.add(status);
-
-	notification_interval = setTimeout(closeNotification, 4000);
+	if (status == 'good') {
+		notification_interval = setTimeout(closeNotification, 4000);
+	} else {
+		// no status or f.e. status = 'bad', give some more time to read
+		notification_interval = setTimeout(closeNotification, 8000);
+	}
 }
 
 function closeNotification() {
@@ -1340,14 +1344,28 @@ function closeNotification() {
 function init_notifications() {
 	notification = document.getElementById('notification');
 
-	notification.querySelector('a.close').onclick = function () {
+	notification.querySelector('a.close').addEventListener('click', function (ev) {
 		closeNotification();
+		ev.preventDefault();
 		return false;
-	};
+	});
+
+	notification.addEventListener('mouseenter', function () {
+		clearInterval(notification_interval);
+	});
+
+	notification.addEventListener('mouseleave', function () {
+		notification_interval = setTimeout(closeNotification, 3000);
+	});
 
 	if (notification.querySelector('.msg').innerHTML.length > 0) {
 		notification_working = true;
-		notification_interval = setTimeout(closeNotification, 4000);
+		if (notification.classList.contains('good')) {
+			notification_interval = setTimeout(closeNotification, 4000);
+		} else {
+			// no status or f.e. status = 'bad', give some more time to read
+			notification_interval = setTimeout(closeNotification, 8000);
+		}
 	}
 }
 // </notification>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index eab1b1786..11e6c6ab5 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -865,13 +865,11 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -888,6 +886,10 @@ a.btn {
 	border: 1px solid #ecc;
 }
 
+.notification a {
+	color: #0062be;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 79dcae992..c521b3170 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -865,13 +865,11 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -888,6 +886,10 @@ a.btn {
 	border: 1px solid #ecc;
 }
 
+.notification a {
+	color: #0062be;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 0411a1236..2ef77113f 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -411,10 +411,13 @@
 	left: 0;
 	right: 0;
 	text-align: center;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 
+	a {
+		color: #000;
+	}
+
 	.msg {
 		display: inline-block;
 		font-size: 1rem;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 3a61c3be4..2e53f7534 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1091,10 +1091,12 @@ form th {
 	left: 0;
 	right: 0;
 	text-align: center;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
+.notification a {
+	color: #000;
+}
 .notification .msg {
 	display: inline-block;
 	font-size: 1rem;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 990847458..12e823cd0 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1091,10 +1091,12 @@ form th {
 	right: 0;
 	left: 0;
 	text-align: center;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
+.notification a {
+	color: #000;
+}
 .notification .msg {
 	display: inline-block;
 	font-size: 1rem;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index d12559b97..bc3ab7fbb 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -1021,7 +1021,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -1030,7 +1029,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;
@@ -1051,6 +1049,14 @@ a.btn {
 	line-height: 3em;
 }
 
+.notification a.close:hover {
+	background: rgba(255,255,255,0.2);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 .notification#actualizeProgress {
 	line-height: 2em;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index dfbc3cc84..cc28c5619 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -1021,7 +1021,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -1030,7 +1029,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;
@@ -1051,6 +1049,14 @@ a.btn {
 	line-height: 3em;
 }
 
+.notification a.close:hover {
+	background: rgba(255,255,255,0.2);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 .notification#actualizeProgress {
 	line-height: 2em;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 4753fc053..f9b5f69e1 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -887,7 +887,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #111;
 	color: #c95;
 	font-size: 0.9em;
@@ -896,7 +895,6 @@ a.btn {
 	box-shadow: 0 0 5px #666;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 77482e8f6..ab5751ce8 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -887,7 +887,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #111;
 	color: #c95;
 	font-size: 0.9em;
@@ -896,7 +895,6 @@ a.btn {
 	box-shadow: 0 0 5px #666;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 7616fa180..1d069a01d 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -900,7 +900,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #ddd;
 	color: #666;
 	font-size: 0.9em;
@@ -908,7 +907,6 @@ a.btn {
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -923,6 +921,10 @@ a.btn {
 	color: #fff;
 }
 
+.notification a {
+	color: #000;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 63d0b3657..852fa1b9a 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -900,7 +900,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #ddd;
 	color: #666;
 	font-size: 0.9em;
@@ -908,7 +907,6 @@ a.btn {
 	border-radius: 3px;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
@@ -923,6 +921,10 @@ a.btn {
 	color: #fff;
 }
 
+.notification a {
+	color: #000;
+}
+
 .notification a.close {
 	padding: 0 15px;
 	line-height: 3em;
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index d2a1b15f8..843d98177 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -978,14 +978,12 @@ a.btn,
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 552abc28b..d74434d8d 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -978,14 +978,12 @@ a.btn,
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 4ec39cecd..f651c52c2 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -906,14 +906,12 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index f081e535b..0ee8f79d4 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -906,14 +906,12 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index e1c55e458..01f945990 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -895,14 +895,12 @@ a.signin {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 7716c2115..552dfc452 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -895,14 +895,12 @@ a.signin {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	font-size: 0.9em;
 	border: 1px solid #eeb;
 	border-radius: 3px;
 	box-shadow: 0 0 5px #ddd;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	z-index: 10;
 	vertical-align: middle;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 6f29c1562..a943642c8 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -990,7 +990,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -999,7 +998,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 7dd1bc717..51be738de 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -990,7 +990,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
 	background: #222;
 	color: #fff;
 	font-size: 0.9em;
@@ -999,7 +998,6 @@ a.btn {
 	box-shadow: 0px 0px 4px rgba(0,0,0,0.45), 0 -1px rgba(255,255,255,0.08) inset, 0 2px 2px #171717 inset;
 	text-align: center;
 	font-weight: bold;
-	line-height: 3em;
 	position: absolute;
 	top: 0;
 	z-index: 10;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 78937cd3a..14d2eccff 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -781,8 +781,7 @@ form th {
 	left: 0;
 	top: auto;
 }
-.notification.good,
-.notification .bad {
+.notification.good, .notification.bad {
 	color: #fcfcfc;
 }
 .notification.good {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 71785ff65..9c8b01840 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -781,8 +781,7 @@ form th {
 	right: 0;
 	top: auto;
 }
-.notification.good,
-.notification .bad {
+.notification.good, .notification.bad {
 	color: #fcfcfc;
 }
 .notification.good {
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 0ce67a5ba..9932f94d0 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -985,7 +985,7 @@ form {
 	@extend %aside-width;
 
 	&.good,
-	.bad {
+	&.bad {
 		color: $color_light;
 	}
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 63d7a3b41..9884fdcbd 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -917,6 +917,7 @@ br {
 
 /*=== Notification and actualize notification */
 .notification {
+	padding: 10px 50px 10px 10px;
 	position: absolute;
 	top: 1em;
 	left: 25%; right: 25%;
@@ -924,6 +925,7 @@ br {
 	background: #fff;
 	border: 1px solid #aaa;
 	opacity: 1;
+	line-height: 2;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -940,6 +942,14 @@ br {
 	display: inline-block;
 }
 
+.notification a.close:hover {
+	background: rgba(10,10,10,0.05);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 #actualizeProgress {
 	position: fixed;
 }
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index e5bc46970..07cc25e83 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -917,6 +917,7 @@ br {
 
 /*=== Notification and actualize notification */
 .notification {
+	padding: 10px 10px 10px 50px;
 	position: absolute;
 	top: 1em;
 	right: 25%; left: 25%;
@@ -924,6 +925,7 @@ br {
 	background: #fff;
 	border: 1px solid #aaa;
 	opacity: 1;
+	line-height: 2;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -940,6 +942,14 @@ br {
 	display: inline-block;
 }
 
+.notification a.close:hover {
+	background: rgba(10,10,10,0.05);
+}
+
+.notification a.close:hover .icon {
+	filter: brightness(2);
+}
+
 #actualizeProgress {
 	position: fixed;
 }