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)
This commit is contained in:
Marien Fressinaud
2013-10-09 21:05:09 +02:00
parent 365be07117
commit 044f4542ba
10 changed files with 140 additions and 107 deletions

View File

@@ -9,7 +9,7 @@
<a class="dropdown-toggle btn" href="#dropdown-cat"><i class="icon i_down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<li class="dropdown-header"><?php echo Translate::t ('category'); ?></li>

View File

@@ -73,7 +73,7 @@
<div id="dropdown-<?php echo $feed->id(); ?>" class="dropdown-target"></div>
<a class="dropdown-toggle" href="#dropdown-<?php echo $feed->id(); ?>"><i class="icon i_configure"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<li class="item"><a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>"><?php echo Translate::t ('filter'); ?></a></li>
<li class="item"><a target="_blank" href="<?php echo $feed->website (); ?>"><?php echo Translate::t ('see_website'); ?></a></li>
<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>

View File

@@ -51,7 +51,7 @@
<a class="btn dropdown-toggle" href="#dropdown-configure"><i class="icon i_configure"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<li class="dropdown-header"><?php echo Translate::t ('configuration'); ?></li>
<li class="item"><a href="<?php echo _url ('configure', 'display'); ?>"><?php echo Translate::t ('general_and_reading'); ?></a></li>
<li class="item"><a href="<?php echo _url ('configure', 'categorize'); ?>"><?php echo Translate::t ('categories'); ?></a></li>

View File

@@ -62,7 +62,7 @@
<a class="dropdown-toggle btn" href="#dropdown-read"><i class="icon i_down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<li class="item"><a href="<?php echo _url ('entry', 'read', 'is_read', 1, 'get', $get, 'nextGet', $nextGet); ?>"><?php echo $string_mark; ?></a></li>
<li class="separator"></li>
@@ -93,7 +93,7 @@
<div id="dropdown-views" class="dropdown-target"></div>
<a class="dropdown-toggle btn" href="#dropdown-views"><?php echo Translate::t ('display'); ?> <i class="icon i_down"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<?php
$url_output = $url;

View File

@@ -101,7 +101,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
<i class="icon i_share"></i> <a class="dropdown-toggle" href="#dropdown-share-<?php echo $item->id ();?>"><?php echo Translate::t ('share'); ?></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<?php
$shaarli = $this->conf->urlShaarli ();
@@ -144,7 +144,7 @@ if (isset ($this->entryPaginator) && !$this->entryPaginator->isEmpty ()) {
<i class="icon i_tag"></i> <a class="dropdown-toggle" href="#dropdown-tags-<?php echo $item->id ();?>"><?php echo Translate::t ('related_tags'); ?></a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="dropdown-close"><a href="#close">&nbsp;</a></li>
<?php foreach($tags as $tag) { ?>
<li class="item"><a href="<?php echo _url ('index', 'index', 'search', urlencode ('#' . $tag)); ?>"><?php echo $tag; ?></a></li>

View File

@@ -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;
}
}

View File

@@ -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;
}
}

View File

@@ -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;
}
@@ -360,6 +361,19 @@ input, select, textarea {
border-radius: 5px;
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;
@@ -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 */

View File

@@ -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);
}

View File

@@ -203,14 +203,13 @@ input, select, textarea {
min-height: 25px;
line-height: 25px;
}
.btn:hover {
.btn.active,
.btn:active,
.btn:hover,
.dropdown-target:target ~ .btn.dropdown-toggle {
background: #2980b9;
text-decoration: none;
}
.btn.active,
.btn:active {
background: #2980b9;
}
.btn.btn-important {
background: #e67e22;
@@ -351,6 +350,19 @@ input, select, textarea {
border: 1px solid #95a5a6;
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;
@@ -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 */