Mise à jour design (dropdown) + fichier fallback supprimé

* Suppression des boutons de fermeture pour les dropdowns : la fermeture
  se fait maintenant en cliquant n'importe où sur l'écran
* Suppression fichier fallback.css pour le thème par défaut. Déplacement
  dans freshrss.css en fin de fichier pour bien le séparer du reste (#166)

5 files changed, 133 insertions, 100 deletions

diff --git a/public/themes/default/fallback.css b/public/themes/default/fallback.css
deleted file mode 100644
index 579b2eaa8..000000000
--- a/public/themes/default/fallback.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.btn {
-	background: #fff;
-	background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
-	background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
-	background: -o-linear-gradient(top, #fff 0%, #eee 100%);
-	background: -ms-linear-gradient(top, #fff 0%, #eee 100%);
-}
-	.btn:hover {
-		background: #f0f0f0;
-		background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-		background: -webkit-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-		background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-		background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
-	}
-	.btn.btn-important {
-		background: #0084CC;
-		background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-		background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-		background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-		background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%);
-	}
-		.btn.btn-important:hover {
-			background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-			background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-			background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-			background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%);
-		}
-	.btn.btn-attention {
-		background: #E95B57;
-		background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-		background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-		background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-		background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%);
-	}
-		.btn.btn-attention:hover {
-			background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%);
-			background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
-			background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%);
-			background: -ms-linear-gradient(top, #D14641 0%, #BD362F 100%);
-		}
-
-
-.nav-head {
-	background: #fff;
-	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-}
-
-.header > .item.search input {
-	-moz-transition: width 200ms linear;
-	 -webkit-transition: width 200ms linear;
-	-o-transition: width 200ms linear;
-	-ms-transition: width 200ms linear;
-}
-
-@media(max-width: 840px) {
-	.aside {
-		-moz-transition: width 200ms linear;
-		 -webkit-transition: width 200ms linear;
-		-o-transition: width 200ms linear;
-		-ms-transition: width 200ms linear;
-	}
-}
diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index a9df3ba55..b157568cc 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -69,6 +69,9 @@
 		.aside.aside_feed .nav-form .dropdown .dropdown-menu {
 			right: -20px;
 		}
+		.aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
+			right: 33px;
+		}
 
 	.nav-login {
 		display: none;
@@ -149,6 +152,9 @@
 		.categories .feeds .dropdown .dropdown-menu {
 			left: 0;
 		}
+		.categories .feeds .dropdown .dropdown-menu:after {
+			left: 2px;
+		}
 		.categories .feeds .item .dropdown-toggle i {
 			background-image: none;
 		}
@@ -734,3 +740,75 @@
 		right: 10px;
 	}
 }
+
+/*** FALLBACK ***/
+.btn {
+	background: #fff;
+	background: -moz-linear-gradient(top, #fff 0%, #eee 100%);
+	background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
+	background: -o-linear-gradient(top, #fff 0%, #eee 100%);
+	background: -ms-linear-gradient(top, #fff 0%, #eee 100%);
+}
+	.btn:hover {
+		background: #f0f0f0;
+		background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+		background: -webkit-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+		background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+		background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
+	}
+	.btn.btn-important {
+		background: #0084CC;
+		background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+		background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+		background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+		background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%);
+	}
+		.btn.btn-important:hover {
+			background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+			background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+			background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+			background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%);
+		}
+	.btn.btn-attention {
+		background: #E95B57;
+		background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+		background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+		background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+		background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%);
+	}
+		.btn.btn-attention:hover {
+			background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%);
+			background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
+			background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%);
+			background: -ms-linear-gradient(top, #D14641 0%, #BD362F 100%);
+		}
+
+.dropdown .dropdown-menu:after {
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+}
+
+.nav-head {
+	background: #fff;
+	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+}
+
+.header > .item.search input {
+	-moz-transition: width 200ms linear;
+	 -webkit-transition: width 200ms linear;
+	-o-transition: width 200ms linear;
+	-ms-transition: width 200ms linear;
+}
+
+@media(max-width: 840px) {
+	.aside {
+		-moz-transition: width 200ms linear;
+		 -webkit-transition: width 200ms linear;
+		-o-transition: width 200ms linear;
+		-ms-transition: width 200ms linear;
+	}
+}
diff --git a/public/themes/default/global.css b/public/themes/default/global.css
index 7caeb34e6..8685b4e92 100644
--- a/public/themes/default/global.css
+++ b/public/themes/default/global.css
@@ -211,7 +211,8 @@ input, select, textarea {
 		text-decoration: none;
 	}
 	.btn.active,
-	.btn:active {
+	.btn:active,
+	.dropdown-target:target ~ .btn.dropdown-toggle {
 		box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa;
 		background: #eee;
 	}
@@ -361,6 +362,19 @@ input, select, textarea {
 		text-align: left;
 		box-shadow: 3px 3px 3px #ddd;
 	}
+	.dropdown .dropdown-menu:after {
+		content: "";
+		position: absolute;
+		top: -6px;
+		right: 13px;
+		width: 10px;
+		height: 10px;
+		background: #fff;
+		border-top: 1px solid #ddd;
+		border-left: 1px solid #ddd;
+		z-index: -10;
+		transform: rotate(45deg);
+	}
 		.dropdown .dropdown-menu .dropdown-header {
 			display: block;
 			padding: 0 5px;
@@ -418,24 +432,14 @@ input, select, textarea {
 			z-index: 10;
 		}
 	.dropdown .dropdown-close {
-		display: inline-block;
-		position: absolute;
-		top: -16px; right: -16px;
-		width: 26px;
-		height: 26px;
-		background: #fff;
-		border-radius: 50px;
-		border: 1px solid #ddd;
-		line-height: 26px;
-		text-align: center;
+		display: inline;
 	}
 		.dropdown .dropdown-close a {
+			position: fixed;
+			top: 0; bottom: 0;
+			left: 0; right: 0;
 			display: block;
-			width: 100%;
-			height: 100%;
-		}
-		.dropdown .dropdown-close:hover {
-			background: #f4f4f4;
+			z-index: -10;
 		}
 
 /* ALERTS */
diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index bea574e37..49533f017 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -67,6 +67,9 @@ body {
 		.aside.aside_feed .nav-form .dropdown .dropdown-menu {
 			right: -20px;
 		}
+		.aside.aside_feed .nav-form .dropdown .dropdown-menu:after {
+			right: 33px;
+		}
 
 	.nav-login {
 		display: none;
@@ -138,6 +141,9 @@ body {
 		.categories .feeds .dropdown .dropdown-menu {
 			left: 0;
 		}
+		.categories .feeds .dropdown .dropdown-menu:after {
+			left: 2px;
+		}
 		.categories .feeds .item .dropdown-toggle i {
 			background-image: none;
 		}
@@ -739,3 +745,10 @@ body {
 		right: 10px;
 	}
 }
+
+/*** FALLBACK ***/
+.dropdown .dropdown-menu:after {
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+}
diff --git a/public/themes/flat-design/global.css b/public/themes/flat-design/global.css
index 5f645602b..0824d1bb3 100644
--- a/public/themes/flat-design/global.css
+++ b/public/themes/flat-design/global.css
@@ -203,13 +203,12 @@ input, select, textarea {
 		min-height: 25px;
 		line-height: 25px;
 	}
-	.btn:hover {
-		background: #2980b9;
-		text-decoration: none;
-	}
 	.btn.active,
-	.btn:active {
+	.btn:active,
+	.btn:hover,
+	.dropdown-target:target ~ .btn.dropdown-toggle {
 		background: #2980b9;
+		text-decoration: none;
 	}
 
 	.btn.btn-important {
@@ -352,6 +351,19 @@ input, select, textarea {
 		border-radius: 3px;
 		text-align: left;
 	}
+	.dropdown .dropdown-menu:after {
+		content: "";
+		position: absolute;
+		top: -6px;
+		right: 13px;
+		width: 10px;
+		height: 10px;
+		background: #fff;
+		border-top: 1px solid #95a5a6;
+		border-left: 1px solid #95a5a6;
+		z-index: -10;
+		transform: rotate(45deg);
+	}
 		.dropdown .dropdown-menu .dropdown-header {
 			display: block;
 			padding: 0 5px;
@@ -412,23 +424,14 @@ input, select, textarea {
 			z-index: 10;
 		}
 	.dropdown .dropdown-close {
-		display: inline-block;
-		position: absolute;
-		top: -10px; right: -10px;
-		width: 26px;
-		height: 26px;
-		background: #95a5a6;
-		line-height: 24px;
-		text-align: center;
-		border-radius: 3px;
+		display: inline;
 	}
 		.dropdown .dropdown-close a {
+			position: fixed;
+			top: 0; bottom: 0;
+			left: 0; right: 0;
 			display: block;
-			width: 100%;
-			height: 100%;
-		}
-		.dropdown .dropdown-close:hover {
-			background: #7f8c8d;
+			z-index: -10;
 		}
 
 /* ALERTS */