Improved: Centralized CSS for notifications (#4800)

* wip. all themes

* fixes

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

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

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

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

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

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;

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;

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;

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;

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;

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;

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

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

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

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;

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;

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 */

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 */

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;

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;

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;

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;

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

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

p/themes/Swage/swage.scss

@@ -1061,10 +1061,6 @@ form {
 		}
 	}
 
-	&#actualizeProgress {
-		line-height: 2;
-	}
-
 	a.close {
 		display: none;
 	}

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;

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;

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 {

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 {