Improve notification design on mobile

Impact all themes:
- Notification is extended from left to right and top (0px)
- Close button is hidden: by clicking (or touching) notification it will close
the notification

See #427

3 files changed, 59 insertions, 26 deletions

diff --git a/p/themes/Dark/freshrss.css b/p/themes/Dark/freshrss.css
index e448f081f..f6577c645 100644
--- a/p/themes/Dark/freshrss.css
+++ b/p/themes/Dark/freshrss.css
@@ -572,35 +572,25 @@
 	box-shadow: 0 0 5px #666;
 	background: #1a1a1a;
 	color: #888;
+	border: 1px solid #f4f899;
 	font-weight: bold;
 	z-index: 10;
 }
 	#notification.closed {
 		display: none;
 	}
-	#notification.good {
-		border:1px solid #f4f899;
-	}
-	#notification.bad {
-		border:1px solid #f4a899;
-	}
 	#notification a.close {
+		position: absolute;
+		top: -10px; right: -10px;
 		display: inline-block;
 		width: 16px;
 		height: 16px;
-		float: right;
-		margin: -20px -20px 0 0;
 		padding: 5px;
 		background: #1a1a1a;
 		border-radius: 50px;
 		line-height: 16px;
-	}
-	#notification.good a.close{
 		border:1px solid #f4f899;
 	}
-	#notification.bad a.close{
-		border:1px solid #f4a899;
-	}
 
 .toggle_aside, .btn.toggle_aside {
 	display: none;
@@ -782,10 +772,25 @@ select.number option {
 		text-shadow: none;
 	}
 
-	.notification,
+	#notification,
 	.actualizeProgress {
-		left: 10px;
-		right: 10px;
+		top: 0;
+		left: 0;
+		right: 0;
+		border-radius: 0;
+		border: none;
+		border-bottom: 1px solid #f4f899;
+	}
+	#notification a.close {
+		left: 0; right: 0;
+		top: 0; bottom: 0;
+		width: auto;
+		height: auto;
+		background: transparent;
+		border: none;
+	}
+	#notification a.close .icon {
+		display: none;
 	}
 }
 
diff --git a/p/themes/Flat/freshrss.css b/p/themes/Flat/freshrss.css
index c23743843..1d551d8fb 100644
--- a/p/themes/Flat/freshrss.css
+++ b/p/themes/Flat/freshrss.css
@@ -589,11 +589,11 @@ body {
 		color: #fff;
 	}
 	#notification a.close {
+		position: absolute;
+		top: -6px; right: -6px;
 		display: inline-block;
 		width: 16px;
 		height: 16px;
-		float: right;
-		margin: -16px -16px 0 0;
 		padding: 5px;
 		border-radius: 3px;
 		line-height: 16px;
@@ -790,10 +790,25 @@ select.number option {
 		text-shadow: none;
 	}
 
-	.notification,
+	#notification,
 	.actualizeProgress {
-		left: 10px;
-		right: 10px;
+		top: 0;
+		left: 0;
+		right: 0;
+		border-radius: 0;
+	}
+	#notification a.close,
+	#notification.good a.close,
+	#notification.bad a.close {
+		left: 0; right: 0;
+		top: 0; bottom: 0;
+		width: auto;
+		height: auto;
+		background: transparent;
+		border: none;
+	}
+	#notification a.close .icon {
+		display: none;
 	}
 }
 
diff --git a/p/themes/Origine/freshrss.css b/p/themes/Origine/freshrss.css
index e605465dc..86bd508df 100644
--- a/p/themes/Origine/freshrss.css
+++ b/p/themes/Origine/freshrss.css
@@ -598,11 +598,11 @@
 		background: #f4a899;
 	}
 	#notification a.close {
+		position: absolute;
+		top: -10px; right: -10px;
 		display: inline-block;
 		width: 16px;
 		height: 16px;
-		float: right;
-		margin: -20px -20px 0 0;
 		padding: 5px;
 		background: #fff;
 		border-radius: 50px;
@@ -790,10 +790,23 @@ select.number option {
 		text-shadow: none;
 	}
 
-	.notification,
+	#notification,
 	.actualizeProgress {
-		left: 10px;
-		right: 10px;
+		top: 0;
+		left: 0;
+		right: 0;
+		border-radius: 0;
+	}
+	#notification a.close {
+		left: 0; right: 0;
+		top: 0; bottom: 0;
+		width: auto;
+		height: auto;
+		background: transparent;
+		border: none;
+	}
+	#notification a.close .icon {
+		display: none;
 	}
 }