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>

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

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',

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

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

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',

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

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

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

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',

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

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

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

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',

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' => 'エラーのフィードを削除する',

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

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

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

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

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

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

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

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

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

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

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

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>

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;

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;
 	}
 

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;
 	}
 

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;
 	}
 

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;
-}
+}

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;
-}
+}

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;
 }

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;
 }

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);

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);

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;
 	}
 

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;
 	}
 

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;
 	}
 

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;
-}
+}

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;
-}
+}

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;
 	}
 

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;
 	}
 

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;
 	}
 }

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;
 	}
 }

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;
 	}
 

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;
 	}
 

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;
-}
+}

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;
-}
+}

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;
 	}
 }

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;
 	}
 }

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 {

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 {