From f72f5e95238a866c39535932c803720d7644a276 Mon Sep 17 00:00:00 2001 From: maTh <1645099+math-GH@users.noreply.github.com> Date: Fri, 31 Jan 2025 13:58:57 +0100 Subject: 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 * Update app/i18n/fr/gen.php --------- Co-authored-by: UserRoot-Luca <55756898+UserRoot-Luca@users.noreply.github.com> Co-authored-by: Frans de Jonge Co-authored-by: Alexandre Alapetite --- app/i18n/cs/gen.php | 1 + app/i18n/de/gen.php | 1 + app/i18n/el/gen.php | 1 + app/i18n/en-us/gen.php | 1 + app/i18n/en/gen.php | 1 + app/i18n/es/gen.php | 1 + app/i18n/fa/gen.php | 1 + app/i18n/fi/gen.php | 1 + app/i18n/fr/gen.php | 1 + app/i18n/he/gen.php | 1 + app/i18n/hu/gen.php | 1 + app/i18n/id/gen.php | 1 + app/i18n/it/gen.php | 1 + app/i18n/ja/gen.php | 1 + app/i18n/ko/gen.php | 1 + app/i18n/lv/gen.php | 1 + app/i18n/nl/gen.php | 1 + app/i18n/oc/gen.php | 1 + app/i18n/pl/gen.php | 1 + app/i18n/pt-br/gen.php | 1 + app/i18n/ru/gen.php | 1 + app/i18n/sk/gen.php | 1 + app/i18n/tr/gen.php | 1 + app/i18n/zh-cn/gen.php | 1 + app/i18n/zh-tw/gen.php | 1 + app/layout/layout.phtml | 6 +++--- p/scripts/main.js | 2 +- p/themes/Alternative-Dark/adark.css | 21 +++++++++++++++++---- p/themes/Alternative-Dark/adark.rtl.css | 21 +++++++++++++++++---- p/themes/Ansum/_layout.scss | 10 ++++++---- p/themes/Ansum/ansum.css | 10 +++++----- p/themes/Ansum/ansum.rtl.css | 10 +++++----- p/themes/Dark-pink/pinkdark.css | 24 ++++++++++++++++++++++++ p/themes/Dark-pink/pinkdark.rtl.css | 24 ++++++++++++++++++++++++ p/themes/Dark/dark.css | 18 +++++++++++++++--- p/themes/Dark/dark.rtl.css | 18 +++++++++++++++--- p/themes/Flat/flat.css | 20 ++++++++++++++------ p/themes/Flat/flat.rtl.css | 20 ++++++++++++++------ p/themes/Mapco/_layout.scss | 10 ++++++---- p/themes/Mapco/mapco.css | 10 +++++----- p/themes/Mapco/mapco.rtl.css | 10 +++++----- p/themes/Nord/nord.css | 16 ++++++++++++---- p/themes/Nord/nord.rtl.css | 16 ++++++++++++---- p/themes/Origine/origine.css | 16 ++++++++++------ p/themes/Origine/origine.rtl.css | 16 ++++++++++------ p/themes/Pafat/pafat.css | 18 +++++++++++++----- p/themes/Pafat/pafat.rtl.css | 18 +++++++++++++----- p/themes/Swage/swage.css | 10 +++++----- p/themes/Swage/swage.rtl.css | 10 +++++----- p/themes/base-theme/base.css | 10 +++++----- p/themes/base-theme/base.rtl.css | 10 +++++----- p/themes/base-theme/frss.css | 13 ++++--------- p/themes/base-theme/frss.rtl.css | 13 ++++--------- 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(); } ?> -
- - + 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 { -- cgit v1.2.3