Improved: Centralized CSS for notifications (#4800)

* wip. all themes

* fixes

29 files changed, 18 insertions, 216 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 3b5a9d337..867110efe 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -915,15 +915,6 @@ kbd {
 	color: var(--font-color-contrast);
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
-.notification#actualizeProgress {
-	line-height: 2;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: var(--background-color-dark);
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 64ddd4403..3832ab7f9 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -915,15 +915,6 @@ kbd {
 	color: var(--font-color-contrast);
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
-.notification#actualizeProgress {
-	line-height: 2;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: var(--background-color-dark);
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index 4d099ab4a..ab7ec6e3e 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -348,9 +348,7 @@ main.prompt {
 	}
 
 	a.close {
-		padding: 0 15px;
 		border-radius: 0 3px 3px 0;
-		line-height: 3em;
 	}
 
 	&.good a.close:hover {
@@ -362,8 +360,6 @@ main.prompt {
 	}
 
 	&#actualizeProgress {
-		line-height: 2em;
-
 		br {
 			display: none;
 		}
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 21d718949..b38f6e578 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -951,9 +951,7 @@ main.prompt {
 	color: #fff;
 }
 .notification a.close {
-	padding: 0 15px;
 	border-radius: 0 3px 3px 0;
-	line-height: 3em;
 }
 .notification.good a.close:hover {
 	background: #0c7556;
@@ -961,9 +959,6 @@ main.prompt {
 .notification.bad a.close:hover {
 	background: #73341f;
 }
-.notification#actualizeProgress {
-	line-height: 2em;
-}
 .notification#actualizeProgress br {
 	display: none;
 }
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index a4d0e32b5..261017071 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -951,9 +951,7 @@ main.prompt {
 	color: #fff;
 }
 .notification a.close {
-	padding: 0 15px;
 	border-radius: 3px 0 0 3px;
-	line-height: 3em;
 }
 .notification.good a.close:hover {
 	background: #0c7556;
@@ -961,9 +959,6 @@ main.prompt {
 .notification.bad a.close:hover {
 	background: #73341f;
 }
-.notification#actualizeProgress {
-	line-height: 2em;
-}
 .notification#actualizeProgress br {
 	display: none;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index caf81bb51..21a0f0352 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -950,11 +950,6 @@ a.btn {
 	color: #eb2901;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
 .notification a.close:hover {
 	background: rgba(255,255,255,0.2);
 }
@@ -963,10 +958,6 @@ a.btn {
 	filter: brightness(2);
 }
 
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: #f9f7f4;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index f4c4e0d84..6f081f80a 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -950,11 +950,6 @@ a.btn {
 	color: #eb2901;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
 .notification a.close:hover {
 	background: rgba(255,255,255,0.2);
 }
@@ -963,10 +958,6 @@ a.btn {
 	filter: brightness(2);
 }
 
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: #f9f7f4;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index c0a5fa507..89e9e007c 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -841,11 +841,6 @@ a.btn {
 	color: #a44;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
 .notification a.close:hover {
 	background: #222;
 	border-radius: 0 3px 3px 0;
@@ -859,10 +854,6 @@ a.btn {
 	background: #a44;
 }
 
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 82ec53464..b7d70c2bd 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -841,11 +841,6 @@ a.btn {
 	color: #a44;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
 .notification a.close:hover {
 	background: #222;
 	border-radius: 3px 0 0 3px;
@@ -859,10 +854,6 @@ a.btn {
 	background: #a44;
 }
 
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 2f0362b9d..5982f7003 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -863,8 +863,6 @@ a.btn {
 }
 
 .notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
 	border-radius: 0 3px 3px 0;
 }
 
@@ -876,10 +874,6 @@ a.btn {
 	background: #c0392b;
 }
 
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 63d0103c4..fa802c438 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -863,8 +863,6 @@ a.btn {
 }
 
 .notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
 	border-radius: 3px 0 0 3px;
 }
 
@@ -876,10 +874,6 @@ a.btn {
 	background: #c0392b;
 }
 
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index a4aaf6fa8..b1cae52f1 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -366,9 +366,7 @@ main.prompt {
 	}
 
 	a.close {
-		padding: 0 15px;
 		border-radius: 0 3px 3px 0;
-		line-height: 3em;
 	}
 
 	&.good a.close:hover {
@@ -380,8 +378,6 @@ main.prompt {
 	}
 
 	&#actualizeProgress {
-		line-height: 2em;
-
 		br {
 			display: none;
 		}
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 028c12e12..b7fe16011 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -969,9 +969,7 @@ main.prompt {
 	color: #fff;
 }
 .notification a.close {
-	padding: 0 15px;
 	border-radius: 0 3px 3px 0;
-	line-height: 3em;
 }
 .notification.good a.close:hover {
 	background: #0c7540;
@@ -979,9 +977,6 @@ main.prompt {
 .notification.bad a.close:hover {
 	background: #73341f;
 }
-.notification#actualizeProgress {
-	line-height: 2em;
-}
 .notification#actualizeProgress br {
 	display: none;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 21cc44222..04efbb47d 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -969,9 +969,7 @@ main.prompt {
 	color: #fff;
 }
 .notification a.close {
-	padding: 0 15px;
 	border-radius: 3px 0 0 3px;
-	line-height: 3em;
 }
 .notification.good a.close:hover {
 	background: #0c7540;
@@ -979,9 +977,6 @@ main.prompt {
 .notification.bad a.close:hover {
 	background: #73341f;
 }
-.notification#actualizeProgress {
-	line-height: 2em;
-}
 .notification#actualizeProgress br {
 	display: none;
 }
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index 9de1f0189..65d2f8bea 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -664,16 +664,6 @@ li.item.active {
 	vertical-align: middle;
 }
 
-
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 .notification.closed {
 	opacity: 0;
 	visibility: hidden;
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 52bdd752d..570b77d62 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -664,16 +664,6 @@ li.item.active {
 	vertical-align: middle;
 }
 
-
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 .notification.closed {
 	opacity: 0;
 	visibility: hidden;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index a53055a75..e4d91099b 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -955,15 +955,6 @@ a:hover .icon {
 	border: 1px solid var(--notification-bad-border-color);
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
-.notification a.close:hover .icon {
-	filter: brightness(0.5);
-}
-
 .notification.good a.close:hover {
 	background-color: var(--notification-close-background-color-hover);
 }
@@ -973,7 +964,7 @@ a:hover .icon {
 }
 
 .notification#actualizeProgress {
-	line-height: 2;
+	line-height: 2em;
 }
 
 /*=== "Load more" part */
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 377ff9823..d26c17bdb 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -955,15 +955,6 @@ a:hover .icon {
 	border: 1px solid var(--notification-bad-border-color);
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
-.notification a.close:hover .icon {
-	filter: brightness(0.5);
-}
-
 .notification.good a.close:hover {
 	background-color: var(--notification-close-background-color-hover);
 }
@@ -973,7 +964,7 @@ a:hover .icon {
 }
 
 .notification#actualizeProgress {
-	line-height: 2;
+	line-height: 2em;
 }
 
 /*=== "Load more" part */
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index b513ba7ea..bf360127c 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -873,11 +873,6 @@ a.signin {
 	border: 1px solid #ecc;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
 .notification.good a.close:hover {
 	background: #eeb;
 }
@@ -886,10 +881,6 @@ a.signin {
 	background: #ecc;
 }
 
-.notification#actualizeProgress {
-	line-height: 2;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: #fafafa;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 7d5ae91c7..e11c9ab81 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -873,11 +873,6 @@ a.signin {
 	border: 1px solid #ecc;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
 .notification.good a.close:hover {
 	background: #eeb;
 }
@@ -886,10 +881,6 @@ a.signin {
 	background: #ecc;
 }
 
-.notification#actualizeProgress {
-	line-height: 2;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: #fafafa;
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 3829c787b..84c3b4c38 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -929,15 +929,6 @@ a.btn {
 	color: #844;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: #ede7de;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 7d745560d..cff62199f 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -929,15 +929,6 @@ a.btn {
 	color: #844;
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3em;
-}
-
-.notification#actualizeProgress {
-	line-height: 2em;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	background: #ede7de;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 1c438f4a1..44a986bb9 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -825,9 +825,6 @@ form th {
 .notification.bad a.close:hover {
 	background-color: var(--color-background-bad);
 }
-.notification#actualizeProgress {
-	line-height: 2;
-}
 .notification a.close {
 	display: none;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 0c3e52d20..24b0bbcfb 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -825,9 +825,6 @@ form th {
 .notification.bad a.close:hover {
 	background-color: var(--color-background-bad);
 }
-.notification#actualizeProgress {
-	line-height: 2;
-}
 .notification a.close {
 	display: none;
 }
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index 8f61015c5..f3ec8cf5c 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -1061,10 +1061,6 @@ form {
 		}
 	}
 
-	&#actualizeProgress {
-		line-height: 2;
-	}
-
 	a.close {
 		display: none;
 	}
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 22bc5a5e7..9f2e23a9c 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -658,13 +658,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 0 0 5px;
-	text-align: center;
-	font-weight: bold;
-	font-size: 0.9em;
-	line-height: 3;
-	z-index: 10;
-	vertical-align: middle;
 }
 
 .notification.good {
@@ -673,21 +666,12 @@ a.btn {
 .notification.bad {
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
 .notification.good a.close:hover {
 }
 
 .notification.bad a.close:hover {
 }
 
-.notification#actualizeProgress {
-	line-height: 2;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index d03906a90..da9d401a9 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -658,13 +658,6 @@ a.btn {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 0 5px 0 0;
-	text-align: center;
-	font-weight: bold;
-	font-size: 0.9em;
-	line-height: 3;
-	z-index: 10;
-	vertical-align: middle;
 }
 
 .notification.good {
@@ -673,21 +666,12 @@ a.btn {
 .notification.bad {
 }
 
-.notification a.close {
-	padding: 0 15px;
-	line-height: 3;
-}
-
 .notification.good a.close:hover {
 }
 
 .notification.bad a.close:hover {
 }
 
-.notification#actualizeProgress {
-	line-height: 2;
-}
-
 /*=== "Load more" part */
 #bigMarkAsRead {
 	text-align: center;
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 6367e60f5..1186457b3 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -1373,15 +1373,19 @@ a.website:hover .favicon {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 10px 50px 10px 10px;
+	padding: 0.75rem 3.5rem 0.75rem 0.75rem;
 	position: absolute;
-	top: 1em;
+	top: 1rem;
 	left: 25%; right: 25%;
 	z-index: 9999;
 	background-color: var(--frss-background-color);
+	font-weight: bold;
+	font-size: 0.9rem;
 	border: 1px solid var(--frss-border-color);
 	opacity: 1;
+	text-align: center;
 	line-height: 2;
+	vertical-align: middle;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -1392,10 +1396,12 @@ a.website:hover .favicon {
 }
 
 .notification a.close {
+	padding: 0 1rem;
 	position: absolute;
 	top: 0; bottom: 0;
 	right: 0;
 	display: inline-block;
+	line-height: 3;
 }
 
 .notification a.close:hover {
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 73dc4f83d..30a9c3e6c 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -1373,15 +1373,19 @@ a.website:hover .favicon {
 
 /*=== Notification and actualize notification */
 .notification {
-	padding: 10px 10px 10px 50px;
+	padding: 0.75rem 0.75rem 0.75rem 3.5rem;
 	position: absolute;
-	top: 1em;
+	top: 1rem;
 	right: 25%; left: 25%;
 	z-index: 9999;
 	background-color: var(--frss-background-color);
+	font-weight: bold;
+	font-size: 0.9rem;
 	border: 1px solid var(--frss-border-color);
 	opacity: 1;
+	text-align: center;
 	line-height: 2;
+	vertical-align: middle;
 	visibility: visible;
 	transition: visibility 0s, opacity .3s linear;
 }
@@ -1392,10 +1396,12 @@ a.website:hover .favicon {
 }
 
 .notification a.close {
+	padding: 0 1rem;
 	position: absolute;
 	top: 0; bottom: 0;
 	left: 0;
 	display: inline-block;
+	line-height: 3;
 }
 
 .notification a.close:hover {