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>

53 files changed, 299 insertions, 126 deletions

diff --git a/app/i18n/cs/gen.php b/app/i18n/cs/gen.php
index f8c71eb8b..40245df6b 100644
--- a/app/i18n/cs/gen.php
+++ b/app/i18n/cs/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Přidat',
 		'back_to_rss_feeds' => '← Jít zpět na vaše kanály RSS',
 		'cancel' => 'Zrušit',
+		'close' => 'Close',	// TODO
 		'create' => 'Vytvořit',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/de/gen.php b/app/i18n/de/gen.php
index 5c0543d0e..6f43a6ad6 100644
--- a/app/i18n/de/gen.php
+++ b/app/i18n/de/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Hinzufügen',
 		'back_to_rss_feeds' => '← Zurück zu Ihren RSS-Feeds gehen',
 		'cancel' => 'Abbrechen',
+		'close' => 'Schließen',
 		'create' => 'Erstellen',
 		'delete_all_feeds' => 'Alle Feeds löschen',
 		'delete_errored_feeds' => 'Feeds mit Fehlern löschen',
diff --git a/app/i18n/el/gen.php b/app/i18n/el/gen.php
index 3edc4a3b7..2c2060e0d 100644
--- a/app/i18n/el/gen.php
+++ b/app/i18n/el/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Add',	// TODO
 		'back_to_rss_feeds' => '← Go back to your RSS feeds',	// TODO
 		'cancel' => 'Cancel',	// TODO
+		'close' => 'Close',	// TODO
 		'create' => 'Create',	// TODO
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/en-us/gen.php b/app/i18n/en-us/gen.php
index 1409ef465..e034c7536 100644
--- a/app/i18n/en-us/gen.php
+++ b/app/i18n/en-us/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Add',	// IGNORE
 		'back_to_rss_feeds' => '← Go back to your RSS feeds',	// IGNORE
 		'cancel' => 'Cancel',	// IGNORE
+		'close' => 'Close',	// IGNORE
 		'create' => 'Create',	// IGNORE
 		'delete_all_feeds' => 'Delete all feeds',	// IGNORE
 		'delete_errored_feeds' => 'Delete feeds with errors',	// IGNORE
diff --git a/app/i18n/en/gen.php b/app/i18n/en/gen.php
index 74b627bbe..64721444f 100644
--- a/app/i18n/en/gen.php
+++ b/app/i18n/en/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Add',
 		'back_to_rss_feeds' => '← Go back to your RSS feeds',
 		'cancel' => 'Cancel',
+		'close' => 'Close',	// TODO
 		'create' => 'Create',
 		'delete_all_feeds' => 'Delete all feeds',
 		'delete_errored_feeds' => 'Delete feeds with errors',
diff --git a/app/i18n/es/gen.php b/app/i18n/es/gen.php
index b93e82fe2..893ce16ca 100644
--- a/app/i18n/es/gen.php
+++ b/app/i18n/es/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Añadir',
 		'back_to_rss_feeds' => '← regresar a tus fuentes RSS',
 		'cancel' => 'Cancelar',
+		'close' => 'Close',	// TODO
 		'create' => 'Crear',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/fa/gen.php b/app/i18n/fa/gen.php
index 6db2a685b..72fda14c1 100644
--- a/app/i18n/fa/gen.php
+++ b/app/i18n/fa/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => ' اضافه کنید',
 		'back_to_rss_feeds' => '← به فیدهای RSS خود برگردید',
 		'cancel' => ' لغو',
+		'close' => 'Close',	// TODO
 		'create' => ' ایجاد کنید',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/fi/gen.php b/app/i18n/fi/gen.php
index 762b04842..b7f2b7adb 100644
--- a/app/i18n/fi/gen.php
+++ b/app/i18n/fi/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Lisää',
 		'back_to_rss_feeds' => '← Palaa RSS-syötteisiin',
 		'cancel' => 'Peruuta',
+		'close' => 'Close',	// TODO
 		'create' => 'Luo',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/fr/gen.php b/app/i18n/fr/gen.php
index 14a2c99b4..3a3e65249 100644
--- a/app/i18n/fr/gen.php
+++ b/app/i18n/fr/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Ajouter',
 		'back_to_rss_feeds' => '← Retour à vos flux RSS',
 		'cancel' => 'Annuler',
+		'close' => 'Fermer',
 		'create' => 'Créer',
 		'delete_all_feeds' => 'Supprimer tous les flux',
 		'delete_errored_feeds' => 'Supprimer les flux en erreur',
diff --git a/app/i18n/he/gen.php b/app/i18n/he/gen.php
index ac0cd96de..6a96f76f9 100644
--- a/app/i18n/he/gen.php
+++ b/app/i18n/he/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Add',	// TODO
 		'back_to_rss_feeds' => '← חזרה להזנות הRSS שלך',
 		'cancel' => 'ביטול',
+		'close' => 'Close',	// TODO
 		'create' => 'יצירה',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/hu/gen.php b/app/i18n/hu/gen.php
index 1947f8e4d..469b17309 100644
--- a/app/i18n/hu/gen.php
+++ b/app/i18n/hu/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Hozzáad',
 		'back_to_rss_feeds' => '← Vissza az RSS hírforrásokhoz',
 		'cancel' => 'Mégsem',
+		'close' => 'Close',	// TODO
 		'create' => 'Létrehoz',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/id/gen.php b/app/i18n/id/gen.php
index 6cbff2de8..46d80c8f8 100644
--- a/app/i18n/id/gen.php
+++ b/app/i18n/id/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Add',	// TODO
 		'back_to_rss_feeds' => '← Go back to your RSS feeds',	// TODO
 		'cancel' => 'Cancel',	// TODO
+		'close' => 'Close',	// TODO
 		'create' => 'Create',	// TODO
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/it/gen.php b/app/i18n/it/gen.php
index 6aec6c5b2..dc51d3cd7 100644
--- a/app/i18n/it/gen.php
+++ b/app/i18n/it/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Aggiungi',
 		'back_to_rss_feeds' => '← Indietro',
 		'cancel' => 'Annulla',
+		'close' => 'Chiudere',
 		'create' => 'Crea',
 		'delete_all_feeds' => 'Cancella tutti i feed',
 		'delete_errored_feeds' => 'Cancella i feed con errori',
diff --git a/app/i18n/ja/gen.php b/app/i18n/ja/gen.php
index f726a8983..906c68c11 100644
--- a/app/i18n/ja/gen.php
+++ b/app/i18n/ja/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => '追加',
 		'back_to_rss_feeds' => '← RSSフィードに戻る',
 		'cancel' => 'キャンセル',
+		'close' => 'Close',	// TODO
 		'create' => '作成',
 		'delete_all_feeds' => 'すべてのフィードを削除する',
 		'delete_errored_feeds' => 'エラーのフィードを削除する',
diff --git a/app/i18n/ko/gen.php b/app/i18n/ko/gen.php
index 471e07b0c..625fcc9c1 100644
--- a/app/i18n/ko/gen.php
+++ b/app/i18n/ko/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => '추가',
 		'back_to_rss_feeds' => '← RSS 피드로 돌아가기',
 		'cancel' => '취소',
+		'close' => 'Close',	// TODO
 		'create' => '생성',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/lv/gen.php b/app/i18n/lv/gen.php
index c32e65abf..641a1bf22 100644
--- a/app/i18n/lv/gen.php
+++ b/app/i18n/lv/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Pievienot',
 		'back_to_rss_feeds' => '← Atgriezieties pie RSS barotnēm',
 		'cancel' => 'Atcelt',
+		'close' => 'Close',	// TODO
 		'create' => 'Uztaisīt',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/nl/gen.php b/app/i18n/nl/gen.php
index 1477eebbd..49d9f85a1 100644
--- a/app/i18n/nl/gen.php
+++ b/app/i18n/nl/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Toevoegen',
 		'back_to_rss_feeds' => '← Ga terug naar je RSS feeds',
 		'cancel' => 'Annuleren',
+		'close' => 'Sluiten',
 		'create' => 'Opslaan',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/oc/gen.php b/app/i18n/oc/gen.php
index 294f7862a..63437ea1c 100644
--- a/app/i18n/oc/gen.php
+++ b/app/i18n/oc/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Ajustar',
 		'back_to_rss_feeds' => '← Tornar a vòstres fluxes RSS',
 		'cancel' => 'Anullar',
+		'close' => 'Close',	// TODO
 		'create' => 'Crear',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/pl/gen.php b/app/i18n/pl/gen.php
index 3c14af170..3abce4809 100644
--- a/app/i18n/pl/gen.php
+++ b/app/i18n/pl/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Dodaj',
 		'back_to_rss_feeds' => '← Wróć do subskrybowanych kanałów RSS',
 		'cancel' => 'Anuluj',
+		'close' => 'Close',	// TODO
 		'create' => 'Stwórz',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/pt-br/gen.php b/app/i18n/pt-br/gen.php
index aa9406f3c..a0e9212e4 100644
--- a/app/i18n/pt-br/gen.php
+++ b/app/i18n/pt-br/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Adicionar',
 		'back_to_rss_feeds' => '← Volte para o seu feeds RSS',
 		'cancel' => 'Cancelar',
+		'close' => 'Close',	// TODO
 		'create' => 'Criar',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/ru/gen.php b/app/i18n/ru/gen.php
index bb7fb5159..302d90a5b 100644
--- a/app/i18n/ru/gen.php
+++ b/app/i18n/ru/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Добавить',
 		'back_to_rss_feeds' => '← Вернуться к вашим RSS-лентам',
 		'cancel' => 'Отменить',
+		'close' => 'Close',	// TODO
 		'create' => 'Создать',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/sk/gen.php b/app/i18n/sk/gen.php
index 4e0e8b2bc..c46362eae 100644
--- a/app/i18n/sk/gen.php
+++ b/app/i18n/sk/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Pridať',
 		'back_to_rss_feeds' => '← Späť na vaše RSS kanály',
 		'cancel' => 'Zrušiť',
+		'close' => 'Close',	// TODO
 		'create' => 'Vytvoriť',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/tr/gen.php b/app/i18n/tr/gen.php
index 264e30926..cd5ac95a3 100644
--- a/app/i18n/tr/gen.php
+++ b/app/i18n/tr/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => 'Ekle',
 		'back_to_rss_feeds' => '← RSS akışlarınız için geri gidin',
 		'cancel' => 'İptal',
+		'close' => 'Close',	// TODO
 		'create' => 'Oluştur',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/zh-cn/gen.php b/app/i18n/zh-cn/gen.php
index c6bd135b8..24c0fb167 100644
--- a/app/i18n/zh-cn/gen.php
+++ b/app/i18n/zh-cn/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => '添加',
 		'back_to_rss_feeds' => '← 返回订阅源',
 		'cancel' => '取消',
+		'close' => 'Close',	// TODO
 		'create' => '创建',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/i18n/zh-tw/gen.php b/app/i18n/zh-tw/gen.php
index 43ba35b77..ae18de65d 100644
--- a/app/i18n/zh-tw/gen.php
+++ b/app/i18n/zh-tw/gen.php
@@ -16,6 +16,7 @@ return array(
 		'add' => '新增',
 		'back_to_rss_feeds' => '← 返回訂閱源',
 		'cancel' => '取消',
+		'close' => 'Close',	// TODO
 		'create' => '創建',
 		'delete_all_feeds' => 'Delete all feeds',	// TODO
 		'delete_errored_feeds' => 'Delete feeds with errors',	// TODO
diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml
index 217239f01..6d4668cd5 100644
--- a/app/layout/layout.phtml
+++ b/app/layout/layout.phtml
@@ -91,9 +91,9 @@
 		invalidateHttpCache();
 	}
 ?>
-<div id="notification" class="notification <?= $status ?>">
-	<span class="msg"><?= $msg ?></span>
-	<a class="close" href=""><?= _i('close') ?></a>
+<div role="dialog" id="notification" class="notification <?= $status ?>" aria-describedby="dialogMsg">
+	<span class="msg" id="dialogMsg"><?= $msg ?></span>
+	<button class="close" title="<?= _t('gen.action.close') ?>"><?= _i('close') ?></button>
 </div>
 	</body>
 </html>
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 1dce5f9fc..2face429d 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1690,7 +1690,7 @@ function closeNotification() {
 function init_notifications() {
 	notification = document.getElementById('notification');
 
-	notification.querySelector('a.close').addEventListener('click', function (ev) {
+	notification.querySelector('.close').addEventListener('click', function (ev) {
 		closeNotification();
 		ev.preventDefault();
 		return false;
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 {