From 7b75289a294a0f4865e8d5b9564b6583f5d01aec Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Wed, 24 Apr 2013 20:39:28 +0200 Subject: 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) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/App_FrontController.php | 1 + public/theme/fallback.css | 65 +++++++++++++++++++++++++++++++++++++++++++++ public/theme/freshrss.css | 2 +- public/theme/global.css | 19 +++++-------- 4 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 public/theme/fallback.css 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; } -- cgit v1.2.3