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>

26 files changed, 270 insertions, 122 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 6e5ebc2d4..2367772a5 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -41,6 +41,7 @@
 
 	--notification-border-color: #eeb;
 	--notification-good-border-color: #0062b7;
+	--notification-good-background-color: #0062b7;
 	--notification-bad-background-color: #fdd;
 	--notification-bad-font-color: #912621;
 	--notification-bad-border-color: #ecc;
@@ -896,16 +897,28 @@ kbd {
 	border-color: var(--notification-good-border-color);
 }
 
+.notification.good .close:hover {
+	background: var(--notification-good-background-color);
+}
+
 .notification.bad {
 	background-color: var(--notification-bad-background-color);
 	color: var(--notification-bad-font-color);
 	border-color: var(--notification-bad-border-color);
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: var(--notification-bad-background-color);
 }
 
+.notification .close .icon {
+	filter: brightness(1);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(2);
+}
+
 .notification a {
 	color: var(--font-color-contrast);
 }
@@ -1128,17 +1141,17 @@ kbd {
 		background: var(--background-color-hover);
 	}
 
-	.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/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 7258b5b17..d5ce7cc45 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -41,6 +41,7 @@
 
 	--notification-border-color: #eeb;
 	--notification-good-border-color: #0062b7;
+	--notification-good-background-color: #0062b7;
 	--notification-bad-background-color: #fdd;
 	--notification-bad-font-color: #912621;
 	--notification-bad-border-color: #ecc;
@@ -896,16 +897,28 @@ kbd {
 	border-color: var(--notification-good-border-color);
 }
 
+.notification.good .close:hover {
+	background: var(--notification-good-background-color);
+}
+
 .notification.bad {
 	background-color: var(--notification-bad-background-color);
 	color: var(--notification-bad-font-color);
 	border-color: var(--notification-bad-border-color);
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: var(--notification-bad-background-color);
 }
 
+.notification .close .icon {
+	filter: brightness(1);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(2);
+}
+
 .notification a {
 	color: var(--font-color-contrast);
 }
@@ -1128,17 +1141,17 @@ kbd {
 		background: var(--background-color-hover);
 	}
 
-	.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;
 	}
 
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 8987ce2b7..9e7ef2957 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -342,15 +342,17 @@ main.prompt {
 		color: variables.$white;
 	}
 
-	a.close {
-		border-radius: 0 3px 3px 0;
+	.close {
+		.icon {
+			filter: brightness(3);
+		}
 	}
 
-	&.good a.close:hover {
+	&.good .close:hover {
 		background: variables.$success-text;
 	}
 
-	&.bad a.close:hover {
+	&.bad .close:hover {
 		background: variables.$alert-text;
 	}
 
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index b471c48b8..86c97756e 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -967,13 +967,13 @@ main.prompt {
 	background: #f5633e;
 	color: #fff;
 }
-.notification a.close {
-	border-radius: 0 3px 3px 0;
+.notification .close .icon {
+	filter: brightness(3);
 }
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #0c7556;
 }
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: #73341f;
 }
 .notification#actualizeProgress br {
@@ -1332,4 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 3d77beb4e..a0788dc12 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -967,13 +967,13 @@ main.prompt {
 	background: #f5633e;
 	color: #fff;
 }
-.notification a.close {
-	border-radius: 3px 0 0 3px;
+.notification .close .icon {
+	filter: brightness(3);
 }
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #0c7556;
 }
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: #73341f;
 }
 .notification#actualizeProgress br {
@@ -1332,4 +1332,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #ca7227;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Dark-pink/pinkdark.css b/p/themes/Dark-pink/pinkdark.css
index a4cecf9e5..80024e673 100644
--- a/p/themes/Dark-pink/pinkdark.css
+++ b/p/themes/Dark-pink/pinkdark.css
@@ -89,6 +89,30 @@ input:focus {
 	border-color: #ffb6c1;
 }
 
+.notification.bad {
+	border-color: #ff449a;
+}
+
+.notification.good .close:hover {
+	background: #ffb6c1;
+}
+
+.notification.bad .close:hover {
+	background: #ff449a;
+}
+
+.notification.good .close:hover .icon {
+	filter: brightness(0.3);
+}
+
+.notification.bad .close .icon {
+	filter: brightness(0.3);
+}
+
+.notification.bad .close:hover .icon {
+	filter: brightness(3);
+}
+
 .stick .btn-important:first-child {
 	border-right-color: #fd6aae;
 }
diff --git a/p/themes/Dark-pink/pinkdark.rtl.css b/p/themes/Dark-pink/pinkdark.rtl.css
index c692f60da..4ad1e8c3d 100644
--- a/p/themes/Dark-pink/pinkdark.rtl.css
+++ b/p/themes/Dark-pink/pinkdark.rtl.css
@@ -89,6 +89,30 @@ input:focus {
 	border-color: #ffb6c1;
 }
 
+.notification.bad {
+	border-color: #ff449a;
+}
+
+.notification.good .close:hover {
+	background: #ffb6c1;
+}
+
+.notification.bad .close:hover {
+	background: #ff449a;
+}
+
+.notification.good .close:hover .icon {
+	filter: brightness(0.3);
+}
+
+.notification.bad .close .icon {
+	filter: brightness(0.3);
+}
+
+.notification.bad .close:hover .icon {
+	filter: brightness(3);
+}
+
 .stick .btn-important:first-child {
 	border-left-color: #fd6aae;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index e6ff8f2b8..3f203d908 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -94,6 +94,8 @@
 	--dark-font-colorA: #aaa;
 
 	--dark-notification-border-color: #c95;
+	--dark-notification-good-border-color: #484;
+	--dark-notification-bad-border-color: #a44;
 	--dark-notification-font-color: #c95;
 
 	--dark-notification-good-close-background-color-hover: #484;
@@ -505,24 +507,34 @@ button.as-link[disabled] {
 
 .notification.good {
 	background-color: var(--dark-background-color1);
+	border-color: var(--dark-notification-good-border-color);
 }
 
 .notification.bad {
 	background-color: var(--dark-background-color1);
+	border-color: var(--dark-notification-bad-border-color);
 }
 
-.notification a.close:hover {
+.notification .close:hover {
 	background-color: var(--dark-background-color2);
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background-color: var(--dark-notification-good-close-background-color-hover);
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background-color: var(--dark-notification-bad-close-background-color-hover);
 }
 
+.notification .close .icon {
+	filter: brightness(0.6);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(3);
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead:hover {
 	background-color: var(--dark-background-color1);
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 3faf057f7..f884386b9 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -94,6 +94,8 @@
 	--dark-font-colorA: #aaa;
 
 	--dark-notification-border-color: #c95;
+	--dark-notification-good-border-color: #484;
+	--dark-notification-bad-border-color: #a44;
 	--dark-notification-font-color: #c95;
 
 	--dark-notification-good-close-background-color-hover: #484;
@@ -505,24 +507,34 @@ button.as-link[disabled] {
 
 .notification.good {
 	background-color: var(--dark-background-color1);
+	border-color: var(--dark-notification-good-border-color);
 }
 
 .notification.bad {
 	background-color: var(--dark-background-color1);
+	border-color: var(--dark-notification-bad-border-color);
 }
 
-.notification a.close:hover {
+.notification .close:hover {
 	background-color: var(--dark-background-color2);
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background-color: var(--dark-notification-good-close-background-color-hover);
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background-color: var(--dark-notification-bad-close-background-color-hover);
 }
 
+.notification .close .icon {
+	filter: brightness(0.6);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(3);
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead:hover {
 	background-color: var(--dark-background-color1);
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;
 	}
 
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 2bbbbb694..27e3e8413 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -354,15 +354,17 @@ main.prompt {
 		color: variables.$white;
 	}
 
-	a.close {
-		border-radius: 0 3px 3px 0;
+	.close {
+		.icon {
+			filter: brightness(3);
+		}
 	}
 
-	&.good a.close:hover {
+	&.good .close:hover {
 		background: variables.$success-text;
 	}
 
-	&.bad a.close:hover {
+	&.bad .close:hover {
 		background: variables.$alert-text;
 	}
 
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 1454acc43..deae7ed5d 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -985,13 +985,13 @@ main.prompt {
 	background: #f5633e;
 	color: #fff;
 }
-.notification a.close {
-	border-radius: 0 3px 3px 0;
+.notification .close .icon {
+	filter: brightness(3);
 }
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #0c7540;
 }
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: #73341f;
 }
 .notification#actualizeProgress br {
@@ -1352,4 +1352,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 9972d7a3c..7400c1beb 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -985,13 +985,13 @@ main.prompt {
 	background: #f5633e;
 	color: #fff;
 }
-.notification a.close {
-	border-radius: 3px 0 0 3px;
+.notification .close .icon {
+	filter: brightness(3);
 }
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background: #0c7540;
 }
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background: #73341f;
 }
 .notification#actualizeProgress br {
@@ -1352,4 +1352,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 9c7754a36..9b9df2d3f 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -908,11 +908,19 @@ li.item.active {
 	filter: brightness(60%);
 }
 
-.notification a.close {
+.notification .close {
 	padding: 1.25rem;
 	line-height: 1;
 }
 
+.notification .close:hover {
+	background-color: var(--border-elements);
+}
+
+.notification .close:hover .icon {
+	filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
+}
+
 /*=== Popup */
 #popup-content {
 	background-color: var(--accent-bg);
@@ -1313,16 +1321,16 @@ optgroup::before {
 		right: 2%;
 	}
 
-	.notification a.close {
+	.notification .close {
 		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/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index c35f7d158..7bb2c47ba 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -908,11 +908,19 @@ li.item.active {
 	filter: brightness(60%);
 }
 
-.notification a.close {
+.notification .close {
 	padding: 1.25rem;
 	line-height: 1;
 }
 
+.notification .close:hover {
+	background-color: var(--border-elements);
+}
+
+.notification .close:hover .icon {
+	filter: invert(86%) sepia(8%) saturate(1976%) hue-rotate(159deg) brightness(180%) contrast(100%);
+}
+
 /*=== Popup */
 #popup-content {
 	background-color: var(--accent-bg);
@@ -1313,16 +1321,16 @@ optgroup::before {
 		left: 2%;
 	}
 
-	.notification a.close {
+	.notification .close {
 		display: block;
 		right: 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/Origine/origine.css b/p/themes/Origine/origine.css
index 1aa91bfec..0c6a94c9e 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -962,12 +962,16 @@ a:hover .icon {
 	border: 1px solid var(--notification-bad-border-color);
 }
 
-.notification.good a.close:hover {
+.notification .close:hover {
 	background-color: var(--notification-close-background-color-hover);
 }
 
-.notification.bad a.close:hover {
-	background-color: var(--notification-close-background-color-hover);
+.notification .close .icon {
+	filter: brightness(1.5);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(0.5);
 }
 
 .notification#actualizeProgress {
@@ -1178,17 +1182,17 @@ a:hover .icon {
 		text-shadow: none;
 	}
 
-	.notification a.close {
+	.notification .close {
 		background-color: 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/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 4490784af..ac85175eb 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -962,12 +962,16 @@ a:hover .icon {
 	border: 1px solid var(--notification-bad-border-color);
 }
 
-.notification.good a.close:hover {
+.notification .close:hover {
 	background-color: var(--notification-close-background-color-hover);
 }
 
-.notification.bad a.close:hover {
-	background-color: var(--notification-close-background-color-hover);
+.notification .close .icon {
+	filter: brightness(1.5);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(0.5);
 }
 
 .notification#actualizeProgress {
@@ -1178,17 +1182,17 @@ a:hover .icon {
 		text-shadow: none;
 	}
 
-	.notification a.close {
+	.notification .close {
 		background-color: transparent;
 		display: block;
 		right: 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/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 36b0a3a35..1aa41ed05 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -929,14 +929,22 @@ a.signin {
 	border: 1px solid var(--notification-bad-border-color);
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background-color: var(--notification-good-border-color);
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background-color: var(--notification-bad-border-color);
 }
 
+.notification .close .icon {
+	filter: brightness(1.5);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(0.5);
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background-color: var(--background-color-grey-light);
@@ -1084,17 +1092,17 @@ a.signin {
 		text-shadow: none;
 	}
 
-	.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/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 862270759..768f3c255 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -929,14 +929,22 @@ a.signin {
 	border: 1px solid var(--notification-bad-border-color);
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 	background-color: var(--notification-good-border-color);
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 	background-color: var(--notification-bad-border-color);
 }
 
+.notification .close .icon {
+	filter: brightness(1.5);
+}
+
+.notification .close:hover .icon {
+	filter: brightness(0.5);
+}
+
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background-color: var(--background-color-grey-light);
@@ -1084,17 +1092,17 @@ a.signin {
 		text-shadow: none;
 	}
 
-	.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;
 	}
 
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 64e0770a9..28c6a8644 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -812,7 +812,7 @@ form th {
 .notification.bad a.close:hover {
 	background-color: var(--color-background-bad);
 }
-.notification a.close {
+.notification .close {
 	display: none;
 }
 
@@ -1027,15 +1027,15 @@ a.signin {
 	.notification {
 		width: 100%;
 	}
-	.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;
 	}
 	#nav_entries {
@@ -1168,4 +1168,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
\ No newline at end of file
+}
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index d87d97e68..705beae31 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -812,7 +812,7 @@ form th {
 .notification.bad a.close:hover {
 	background-color: var(--color-background-bad);
 }
-.notification a.close {
+.notification .close {
 	display: none;
 }
 
@@ -1027,15 +1027,15 @@ a.signin {
 	.notification {
 		width: 100%;
 	}
-	.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;
 	}
 	#nav_entries {
@@ -1168,4 +1168,4 @@ button.as-link {
 
 #slider label {
 	min-height: initial;
-}
\ No newline at end of file
+}
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 63a566f16..ea60eaacb 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -599,10 +599,10 @@ th {
 .notification.bad {
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 }
 
 /*=== "Load more" part */
@@ -753,16 +753,16 @@ th {
 		margin: 0 0 3.5em;
 	}
 
-	.notification a.close {
+	.notification .close {
 		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/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index d4cceb6da..aec8ac341 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -599,10 +599,10 @@ th {
 .notification.bad {
 }
 
-.notification.good a.close:hover {
+.notification.good .close:hover {
 }
 
-.notification.bad a.close:hover {
+.notification.bad .close:hover {
 }
 
 /*=== "Load more" part */
@@ -753,16 +753,16 @@ th {
 		margin: 0 0 3.5em;
 	}
 
-	.notification a.close {
+	.notification .close {
 		display: block;
 		right: 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/base-theme/frss.css b/p/themes/base-theme/frss.css
index bc5e8a9a1..67656b1cf 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1749,21 +1749,16 @@ a.website:hover .favicon {
 	visibility: hidden;
 }
 
-.notification a.close {
+.notification .close {
 	padding: 0 1rem;
 	position: absolute;
 	top: 0; bottom: 0;
 	right: 0;
 	display: inline-block;
 	line-height: 3;
-}
-
-.notification a.close:hover {
-	background-color: var(--frss-darken-background-hover-transparent);
-}
-
-.notification a.close:hover .icon {
-	filter: brightness(2);
+	border: 0;
+	background-color: transparent;
+	cursor: pointer;
 }
 
 #actualizeProgress {
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 8f90de8b7..291ee4f77 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1749,21 +1749,16 @@ a.website:hover .favicon {
 	visibility: hidden;
 }
 
-.notification a.close {
+.notification .close {
 	padding: 0 1rem;
 	position: absolute;
 	top: 0; bottom: 0;
 	left: 0;
 	display: inline-block;
 	line-height: 3;
-}
-
-.notification a.close:hover {
-	background-color: var(--frss-darken-background-hover-transparent);
-}
-
-.notification a.close:hover .icon {
-	filter: brightness(2);
+	border: 0;
+	background-color: transparent;
+	cursor: pointer;
 }
 
 #actualizeProgress {