Improve notification banner (#7268)

* a -> button

* i18n: Close

* a.close -> .close

* themes

* Apply suggestions from code review

Co-authored-by: UserRoot-Luca <55756898+UserRoot-Luca@users.noreply.github.com>
Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

* Update app/i18n/fr/gen.php

---------

Co-authored-by: UserRoot-Luca <55756898+UserRoot-Luca@users.noreply.github.com>
Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

2 files changed, 28 insertions, 12 deletions

diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 498b36603..c71e26942 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -813,18 +813,26 @@ th {
 	color: #000;
 }
 
-.notification a.close {
+.notification .close {
 	border-radius: 0 3px 3px 0;
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #16a085;
 }
 
-.notification.bad a.close:hover {
+.notification .close .icon {
+	filter: brightness(2.5);
+}
+
+.notification.bad .close:hover {
 	background: #c0392b;
 }
 
+.notification .close:hover .icon {
+	filter: brightness(4);
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
@@ -991,17 +999,17 @@ th {
 		border-radius: 0;
 	}
 
-	.notification a.close {
+	.notification .close {
 		background: transparent;
 		display: block;
 		left: 0;
 	}
 
-	.notification a.close:hover {
+	.notification .close:hover {
 		opacity: 0.5;
 	}
 
-	.notification a.close .icon {
+	.notification .close .icon {
 		display: none;
 	}
 
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 5d050ab85..6aba2b15b 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -813,18 +813,26 @@ th {
 	color: #000;
 }
 
-.notification a.close {
+.notification .close {
 	border-radius: 3px 0 0 3px;
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #16a085;
 }
 
-.notification.bad a.close:hover {
+.notification .close .icon {
+	filter: brightness(2.5);
+}
+
+.notification.bad .close:hover {
 	background: #c0392b;
 }
 
+.notification .close:hover .icon {
+	filter: brightness(4);
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
@@ -991,17 +999,17 @@ th {
 		border-radius: 0;
 	}
 
-	.notification a.close {
+	.notification .close {
 		background: transparent;
 		display: block;
 		right: 0;
 	}
 
-	.notification a.close:hover {
+	.notification .close:hover {
 		opacity: 0.5;
 	}
 
-	.notification a.close .icon {
+	.notification .close .icon {
 		display: none;
 	}