improve the addCollection overlay

Piwigo · Nov 4, 2017 · 37e359e · 37e359e
1 parent ba6f4a1
commit 37e359e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/scss/theme/_plugin-fixes.scss b/scss/theme/_plugin-fixes.scss
@@ -107,6 +107,7 @@ ul#thumbnails .gthumb a img.thumbnail {
 
 .card-thumbnail .addCollection {
   opacity: 0;
+  transition: opacity 0.25s ease-in;
   z-index: 1;
   width: 100%;
   position: absolute;
@@ -115,10 +116,15 @@ ul#thumbnails .gthumb a img.thumbnail {
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
-  background-color: rgba(0, 0, 0, 0.5);
+  color: $yellow;
+  background-color: rgba(0, 0, 0, 0.6);
   &:hover {
     opacity: 0.9;
   }
+  > span {
+    color: #fff;
+    font-size: 0.9rem;
+  }
 }
 .card-thumbnail a:hover {
   .addCollection {

diff --git a/template/thumbnails.tpl b/template/thumbnails.tpl
@@ -28,7 +28,7 @@
         <a href="{$thumbnail.URL}" data-index="{$idx}" class="ripple{if $smarty.cookies.view != 'list'} d-block{/if}">
             <img class="{if $smarty.cookies.view == 'list'}card-img-left{else}card-img-top{/if}" {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
 {if isset($loaded_plugins['UserCollections']) && !isset($U_LOGIN)}
-            <div class="fa fa-star-o addCollection" data-id="{$thumbnail.id}" data-cols="[{$thumbnail.COLLECTIONS}]"><span class="text-muted ml-2">{'Collections'|@translate}</span></div>
+            <div class="fa fa-star addCollection" data-id="{$thumbnail.id}" data-cols="[{$thumbnail.COLLECTIONS}]"><span class="ml-2">{'Collections'|@translate}</span></div>
 {/if}
         </a>
 {assign var=idx value=$idx+1}

diff --git a/theme.css b/theme.css
diff --git a/theme.css.map b/theme.css.map