]> git.mxchange.org Git - friendica.git/commitdiff
frio - improve some hover effects to action link/buttons
authorrabuzarus <rabuzarus@t-online.de>
Sat, 11 Aug 2018 11:41:55 +0000 (13:41 +0200)
committerrabuzarus <rabuzarus@t-online.de>
Sat, 11 Aug 2018 11:41:55 +0000 (13:41 +0200)
view/theme/frio/css/style.css
view/theme/frio/templates/contact_block.tpl
view/theme/frio/templates/events_js.tpl
view/theme/frio/templates/group_side.tpl
view/theme/frio/templates/mail_head.tpl
view/theme/frio/templates/photo_album.tpl
view/theme/frio/templates/photo_albums.tpl
view/theme/frio/templates/profile_listing_header.tpl
view/theme/frio/templates/saved_searches_aside.tpl

index d425614a5ad7d59db20e2506e150098e6fefe088..8b684e00ef117690ae182c02fce448e9638122b9 100644 (file)
@@ -1106,7 +1106,7 @@ aside .vcard .tool .action{
     transition: all 0.25s ease-in-out;
 }
 aside .vcard .tool a {
-color: rgba(255,255,255,.85);
+    color: rgba(255,255,255,.85);
 }
 aside .vcard #profile-photo-wrapper:hover .tool .action {
     opacity: 1;
@@ -1244,14 +1244,22 @@ div#sidebar-group-list {
     transition: all 0.1s ease-in-out;
 }
 .faded-icon:hover {
+    color: #555;
     opacity: 1;
 }
 .icon-padding {
     margin-left: 20px;
 }
 
-aside #group-sidebar .sidebar-group-li .group-edit-tool:hover,
-aside #saved-search-list .saved-search-li .savedsearchdrop:hover {
+aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
+aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
+aside .widget:hover .widget-action.faded-icon {
+    opacity: 0.8;
+    transition: all 0.25s ease-in-out;
+}
+aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
+aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
+aside .widget .widget-action.faded-icon:hover {
     opacity: 1;
 }
 aside #group-sidebar li .group-checkbox {
@@ -2184,6 +2192,13 @@ ul.dropdown-menu li:hover {
     -webkit-box-shadow: 0 0 3px #dadada;
     -moz-box-shadow: 0 0 3px #dadada;
 }
+#content:hover .page-action.faded-icon {
+    opacity: 0.8;
+    transition: all 0.25s ease-in-out;
+}
+#content .page-action.faded-icon:hover {
+    opacity: 1;
+}
 
 .section-title-wrapper {
     overflow: hidden;
index e7b45cff3fadbb6665172168567d19ae9dff8231..45b582a6ffe71c0bb1250973b45e97767bde0c6b 100644 (file)
@@ -1,15 +1,18 @@
 
 <div id="contact-block">
        <h3 class="contact-block-h4 pull-left">{{$contacts}}</h3>
-{{if $micropro}}
-       <a class="pull-right" href="viewcontacts/{{$nickname}}">
-       <i class="faded-icon fa fa-eye" aria-hidden="true"></i><span class="sr-only">{{$viewcontacts}}</span>
+
+       {{if $micropro}}
+       <a class="pull-right widget-action faded-icon" id="contact-block-view-contacts" href="viewcontacts/{{$nickname}}">
+               <i class="fa fa-eye" aria-hidden="true"></i>
+               <span class="sr-only">{{$viewcontacts}}</span>
        </a>
+
        <div class='contact-block-content'>
-       {{foreach $micropro as $m}}
-               {{$m}}
-       {{/foreach}}
+               {{foreach $micropro as $m}}
+                       {{$m}}
+               {{/foreach}}
        </div>
-{{/if}}
+       {{/if}}
 </div>
 <div class="clear"></div>
index cdf1636fe391a687e41b9116006acaf1838bd48d..31debbe310954ba4bf1b2a616ebba9bc851f0504 100644 (file)
@@ -4,8 +4,8 @@
 
        {{* The link to create a new event *}}
        <div class="pull-right" id="new-event-link">
-               <button type="button" class="btn-link" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip">
-                       <i class="faded-icon fa fa-plus"></i>
+               <button type="button" class="btn-link page-action faded-icon" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip">
+                       <i class="fa fa-plus"></i>
                </button>
        </div>
 
index 51980a318309d4affe18466271db6ffc74a861b8..947ae974e8aec1b4d1eb442d60bd2a746a346ed7 100644 (file)
@@ -1,21 +1,21 @@
 <div class="widget" id="group-sidebar">
        <div id="sidebar-group-header">
-       <h3>{{$title}}</h3>
-       {{if ! $newgroup}}
-       <a class="group-edit-tool pull-right" href="{{$grouppage}}" data-toggle="tooltip" title="{{$editgroupstext}}">
-       <i class="faded-icon fa fa-pencil" aria-hidden="true"></i>
-       </a>
-       {{else}}
-       <a class="group-edit-tool pull-right" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');" data-toggle="tooltip" title="{{$createtext}}">
-       <i class="faded-icon fa fa-plus" aria-hidden="true"></i>
-       </a>
-       <form id="group-new-form" action="group/new" method="post" style="display:none;">
-               <div class="form-group">
-                       <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
-                       <input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
-               </div>
-       </form>
-       {{/if}}
+               <h3>{{$title}}</h3>
+               {{if ! $newgroup}}
+               <a class="group-edit-tool pull-right widget-action faded-icon" id="sidebar-edit-group" href="{{$grouppage}}" data-toggle="tooltip" title="{{$editgroupstext}}">
+                       <i class="fa fa-pencil" aria-hidden="true"></i>
+               </a>
+               {{else}}
+               <a class="group-edit-tool pull-right widget-action faded-icon" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');" data-toggle="tooltip" title="{{$createtext}}">
+                       <i class="fa fa-plus" aria-hidden="true"></i>
+               </a>
+               <form id="group-new-form" action="group/new" method="post" style="display:none;">
+                       <div class="form-group">
+                               <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+                               <input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
+                       </div>
+               </form>
+               {{/if}}
        </div>
        <div id="sidebar-group-list">
                {{* The list of available groups *}}
@@ -38,8 +38,8 @@
                                        {{/if}}
                                        {{if $group.edit}}
                                                {{* if the group is editable show a little pencil for editing *}}
-                                               <a id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-tool pull-right" href="{{$group.edit.href}}" data-toggle="tooltip" title="{{$edittext}}">
-                                                       <i class="faded-icon fa fa-pencil" aria-hidden="true"></i>
+                                               <a id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-tool pull-right faded-icon" href="{{$group.edit.href}}" data-toggle="tooltip" title="{{$edittext}}">
+                                                       <i class="fa fa-pencil" aria-hidden="true"></i>
                                                </a>
                                        {{/if}}
                                        <a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element" href="{{$group.href}}">{{$group.text}}</a>
index 6701910bc5c4962a4d1f0393612077a313200cb7..fa4f46cf8ca2cc1fc8869c90b98a1abfad9737a0 100644 (file)
@@ -1,16 +1,16 @@
 
 <div class="pull-left">
-<h3 class="heading">{{$messages}}</h3>
+       <h3 class="heading">{{$messages}}</h3>
 </div>
 
 <div id="message-new" class="pull-right">
        {{if $button.sel == "new"}}
-       <a href="{{$button.url}}" accesskey="m" class="newmessage-selected" title="{{$button.label}}" data-toggle="tooltip">
-       <i class="faded-icon fa fa-plus"></i>
+       <a href="{{$button.url}}" accesskey="m" class="newmessage-selected faded-icon page-action" title="{{$button.label}}" data-toggle="tooltip">
+               <i class="fa fa-plus"></i>
        </a>
        {{else}}
-       <a href="{{$button.url}}" title="{{$button.label}}" data-toggle="tooltip">
-       <i class="faded-icon fa fa-close"></i>
+       <a href="{{$button.url}}" title="{{$button.label}}" class="faded-icon page-action" data-toggle="tooltip">
+               <i class="fa fa-close"></i>
        </a>
        {{/if}}
 </div>
index f043ce3fa8a4348758e5f7d66dc5fc1bf1d0638f..c991b03cfc949afff607506eeab44d8b51d6c642 100644 (file)
@@ -1,40 +1,43 @@
 <div class="generic-page-wrapper">
        <div class="pull-left">
-       <h3 id="photo-album-title">{{$album}}</h3>
+               <h3 id="photo-album-title">{{$album}}</h3>
        </div>
-       
+
        <div class="photo-album-actions pull-right">
                {{if $can_post}}
-               <a class="photos-upload-link" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
-               <i class="faded-icon fa fa-plus"></i></a>
+               <a class="photos-upload-link page-action faded-icon" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
+                       <i class="fa fa-plus"></i>
+               </a>
                {{/if}}
+
                {{if $edit}}
                <span class="icon-padding"> </span>
-               <a id="album-edit-link" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
-               <i class="faded-icon fa fa-pencil"></i></a>
+               <a id="album-edit-link" class="page-action faded-icon" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
+                       <i class="fa fa-pencil"></i>
+               </a>
                {{/if}}
+
                {{if ! $noorder}}
                <span class="icon-padding"> </span>
-               <a class="photos-order-link" href="{{$order.1}}" title="{{$order.0}}" data-toggle="tooltip">
-               {{if $order.2 == "newest"}}
-               <i class="faded-icon fa fa-sort-numeric-desc"></i>
-               {{else}}
-               <i class="faded-icon fa fa-sort-numeric-asc"></i>
-               {{/if}}
+               <a class="photos-order-link page-action faded-icon" href="{{$order.1}}" title="{{$order.0}}" data-toggle="tooltip">
+                       {{if $order.2 == "newest"}}
+                       <i class="fa fa-sort-numeric-desc"></i>
+                       {{else}}
+                       <i class="fa fa-sort-numeric-asc"></i>
+                       {{/if}}
                </a>
                {{/if}}
        </div>
        <div class="clear"></div>
-       
+
        <div class="photo-album-wrapper" id="photo-album-contents">
-       {{foreach $photos as $photo}}
-               {{include file="photo_top.tpl"}}
-       {{/foreach}}
+               {{foreach $photos as $photo}}
+                       {{include file="photo_top.tpl"}}
+               {{/foreach}}
        </div>
-       
        <div class="photo-album-end"></div>
-       
+
        {{$paginate}}
-       
-       <script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>
 </div>
+
+<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>
index 407a092cb1359073b78b0f58e0165f944df91d74..f510bd976077b65f6f2576ea84b8802c66d6d94e 100644 (file)
@@ -1,14 +1,18 @@
 <div id="sidebar-photos-albums" class="widget">
        <div class="pull-left">
-       <h3>{{$title}}</h3>
+               <h3>{{$title}}</h3>
        </div>
+       
        <div class="pull-right">
        {{if $can_post}}
-       <div class="photos-upload-link" ><a href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
-       <i class="faded-icon fa fa-plus"></i>
-       </a></div>
-       {{/if}}
-       </div>  
+               <div class="photos-upload-link">
+                       <a href="{{$upload.1}}" title="{{$upload.0}}" class="widget-action faded-icon" data-toggle="tooltip">
+                               <i class="fa fa-plus"></i>
+                       </a>
+               </div>
+               {{/if}}
+       </div>
+
        <ul role="menubar" class="sidebar-photos-albums-ul clear">
                <li role="menuitem" class="sidebar-photos-albums-li">
                        <a href="{{$baseurl}}/photos/{{$nick}}" class="sidebar-photos-albums-element" title="{{$title}}" >{{$recent}}</a>
 
                {{if $albums}}
                {{foreach $albums as $al}}
-               {{if $al.text}}
-               <li role="menuitem" class="sidebar-photos-albums-li">
-                       <a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}" class="sidebar-photos-albums-element">
-                               <span class="badge pull-right">{{$al.total}}</span>{{$al.text}}
-                       </a>
-               </li>
-               {{/if}}
+                       {{if $al.text}}
+                       <li role="menuitem" class="sidebar-photos-albums-li">
+                               <a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}" class="sidebar-photos-albums-element">
+                                       <span class="badge pull-right">{{$al.total}}</span>{{$al.text}}
+                               </a>
+                       </li>
+                       {{/if}}
                {{/foreach}}
                {{/if}}
        </ul>
index f6364706bc81d143985bece68d74483d186eae96..1e6ae0dbf9c0e0e9349ae861ca25422092fbf78e 100644 (file)
@@ -4,8 +4,8 @@
                <h2>{{$header}}</h2>
        </div>
        <div id="profile-listing-new-link-wrapper" class="pull-right" >
-               <a href="{{$cr_new_link}}" id="profile-listing-new-link" title="{{$cr_new}}" data-toggle="tooltip">
-               <i class="faded-icon fa fa-plus"></i></a>
+               <a href="{{$cr_new_link}}" id="profile-listing-new-link" class="page-action faded-icon" title="{{$cr_new}}" data-toggle="tooltip">
+               <i class="fa fa-plus"></i></a>
        </div>
 
        <div class="section-content-wrapper">
index 764ab52124e7810a3936fad2136b0d935e9683cc..77444f48962fd95ad4c156d7b0494f8a5abb18aa 100644 (file)
@@ -6,7 +6,9 @@
        <ul role="menu" id="saved-search-ul">
                {{foreach $saved as $search}}
                <li role="menuitem" class="saved-search-li clear">
-                       <a title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" class="savedsearchdrop pull-right" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}"><i class="faded-icon fa fa-trash" aria-hidden="true"></i></a>
+                       <a title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" class="savedsearchdrop pull-right widget-action faded-icon" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}">
+                               <i class="fa fa-trash" aria-hidden="true"></i>
+                       </a>
                        <a id="saved-search-term-{{$search.id}}" class="savedsearchterm" href="search?search={{$search.encodedterm}}">{{$search.term}}</a>
                </li>
                {{/foreach}}