From e50fb4179f91ec3711b0fd602a749c447d0e141d Mon Sep 17 00:00:00 2001
From: Marien Fressinaud <dev@marienfressinaud.fr>
Date: Tue, 18 Feb 2014 19:56:26 +0100
Subject: 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
---
 p/themes/Dark/freshrss.css | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

(limited to 'p/themes/Dark/freshrss.css')

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;
 	}
 }
 
-- 
cgit v1.2.3