Fix issue #63 : gestion des couleurs dégradés et des transitions pour plus de navigateurs (utilisation des préfixes dans une feuille fallback.css)

4 files changed, 74 insertions, 13 deletions

diff --git a/app/App_FrontController.php b/app/App_FrontController.php
index 5a66ae1dd..cf32a1c44 100644
--- a/app/App_FrontController.php
+++ b/app/App_FrontController.php
@@ -41,6 +41,7 @@ class App_FrontController extends FrontController {
 	}
 
 	private function loadStylesAndScripts () {
+		View::appendStyle (Url::display ('/theme/fallback.css'));
 		View::appendStyle (Url::display ('/theme/global.css'));
 		View::appendStyle (Url::display ('/theme/freshrss.css'));
 		if (login_is_conf ($this->conf)) {
diff --git a/public/theme/fallback.css b/public/theme/fallback.css
new file mode 100644
index 000000000..579b2eaa8
--- /dev/null
+++ b/public/theme/fallback.css
@@ -0,0 +1,65 @@
+.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/theme/freshrss.css b/public/theme/freshrss.css
index d39ca7fc8..95809f653 100644
--- a/public/theme/freshrss.css
+++ b/public/theme/freshrss.css
@@ -24,7 +24,7 @@
 			}
 		.header > .item.search input {
 			width: 200px;
-			transition: all 200ms linear;
+			transition: width 200ms linear;
 		}
 			.header .item.search input:focus {
 				width: 300px;
diff --git a/public/theme/global.css b/public/theme/global.css
index 7bae3f432..84fbca3cb 100644
--- a/public/theme/global.css
+++ b/public/theme/global.css
@@ -173,8 +173,7 @@ input, select, textarea {
 	min-height: 37px;
 	min-width: 15px;
 	padding: 5px 10px;
-	background: #fff;
-	background: linear-gradient(#fff, #eee);
+	background: linear-gradient(to bottom, #fff 0%, #eee 100%);
 	border-radius: 3px;
 	border: 1px solid #ddd;
 	border-bottom: 1px solid #aaa;
@@ -190,8 +189,7 @@ input, select, textarea {
 		line-height: 25px;
 	}
 	.btn:hover {
-		background: #f0f0f0;
-		background: linear-gradient(#f8f8f8, #f0f0f0);
+		background: linear-gradient(to bottom, #f8f8f8, #f0f0f0);
 		text-decoration: none;
 	}
 	.btn.active,
@@ -201,14 +199,13 @@ input, select, textarea {
 	}
 
 	.btn.btn-important {
-		background: #0084CC;
-		background: linear-gradient(#0084CC, #0045CC);
+		background: linear-gradient(to bottom, #0084CC, #0045CC);
 		color: #fff;
 		border: 1px solid #0062B7;
 		text-shadow: 0px -1px 0 #aaa;
 	}
 		.btn.btn-important:hover {
-			background: linear-gradient(#0066CC, #0045CC);
+			background: linear-gradient(to bottom, #0066CC, #0045CC);
 		}
 		.btn.btn-important:active {
 			background: #0044CB;
@@ -216,14 +213,13 @@ input, select, textarea {
 		}
 
 	.btn.btn-attention {
-		background: #E95B57;
-		background: linear-gradient(#E95B57, #BD362F);
+		background: linear-gradient(to bottom, #E95B57, #BD362F);
 		color: #fff;
 		border: 1px solid #C44742;
 		text-shadow: 0px -1px 0px #666;
 	}
 		.btn.btn-attention:hover {
-			background: linear-gradient(#D14641, #BD362F);
+			background: linear-gradient(to bottom, #D14641, #BD362F);
 		}
 		.btn.btn-attention:active {
 			background: #BD362F;
@@ -289,8 +285,7 @@ input, select, textarea {
 .nav-head {
 	display: block;
 	margin: 0;
-	background: #fff;
-	background: linear-gradient(#fff, #f0f0f0);
+	background: linear-gradient(to bottom, #fff, #f0f0f0);
 	border-bottom: 1px solid #ddd;
 	text-align: right;
 }