From 87bf6d39dd284b97a3e2ac4a3af4a19fced141a4 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <mrpetovan@gmail.com>
Date: Thu, 23 Mar 2017 22:45:40 -0400
Subject: [PATCH] More display fixes

See
https://github.com/friendica/friendica/pull/3204#issuecomment-288908490
---
 view/theme/frio/css/style.css              | 48 +++++++++++++---------
 view/theme/frio/templates/comment_item.tpl | 14 +++----
 view/theme/frio/templates/event_form.tpl   |  2 +-
 view/theme/frio/templates/jot.tpl          | 12 +++---
 view/theme/frio/templates/prv_message.tpl  | 14 +++----
 5 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 3762e14945..45243a3b01 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -51,13 +51,14 @@ body a[name]:not([href]) {
     visibility: hidden;
 }
 
-body a:hover, body .btn-link:hover,
-body a:focus, body .btn-link:focus,
-body a:active, body .btn-link:active,
-body a.active, body .btn-link.active {
+body a:hover, .btn-link:hover,
+body a:focus, .btn-link:focus,
+body a:active, .btn-link:active,
+body a.active, .btn-link.active {
     /*color: #59d6e4;*/
     color: $link_hover_color;
     text-decoration: none;
+    outline: none;
 }
 
 .wall-item-container a:hover {
@@ -206,6 +207,8 @@ a#item-delete-selected {
 .btn-link {
     border: 0;
     color: $link_color;
+    padding-left: 0;
+    padding-right: 0;
 }
 .btn-link:focus, .btn-link:hover {
     color: #23527c;
@@ -404,7 +407,8 @@ header #banner #logo-img,
     top: 2px;
     right: 10px
 }
-.topbar .dropdown-header .dropdown-header-link a {
+.topbar .dropdown-header .dropdown-header-link a,
+.topbar .dropdown-header .dropdown-header-link .btn-link {
     /*color: #6fdbe8!important;*/
     color: $link_color !important;
     font-size: 12px;
@@ -652,10 +656,10 @@ nav.navbar a, nav.navbar .btn-link {
 #myNavmenu li.nav-sitename {
     font-weight: bold;
 }
-#topbar-first .dropdown.account>a,
-#topbar-first .dropdown.account.open>a,
-#topbar-first .dropdown.account>a:hover,
-#topbar-first .dropdown.account.open>a:hover {
+#topbar-first .dropdown.account > a,
+#topbar-first .dropdown.account.open > a,
+#topbar-first .dropdown.account > :hover,
+#topbar-first .dropdown.account.open > :hover {
     background-color: $nav_bg;
 }
 #topbar-first .dropdown.account li#nav-sitename {
@@ -823,14 +827,19 @@ nav.navbar a, nav.navbar .btn-link {
 }
 
 /* Dropdown Menus */
-.nav > li > .btn-link:not(.nav-avatar):focus,
-.nav > li > .btn-link:not(.nav-avatar):hover {
+.nav > li > .btn-link {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+}
+.nav > li > .btn-link:focus,
+.nav > li > .btn-link:hover {
     text-decoration: none;
     background-color: #eee;
 }
-.nav .open > .btn-link:not(.nav-avatar),
-.nav .open > .btn-link:not(.nav-avatar):focus,
-.nav .open > .btn-link:not(.nav-avatar):hover {
+.nav .open > .btn-link,
+.nav .open > .btn-link:focus,
+.nav .open > .btn-link:hover {
     background-color: #eee;
     border-color: #337ab7;
 }
@@ -1562,18 +1571,17 @@ code > .hl-main {
 }
 
 /* item social action buttons */
+.wall-item-actions {
+    margin-top: 15px;
+}
 .wall-item-actions, .wall-item-actions a, .wall-item-actions button {
     font-size: 13px;
     color: #555;
-    margin-top: 15px;
     margin-bottom: 0;
 }
 .wall-item-actions .active {
     font-weight: bold;
 }
-.wall-item-actions :hover {
-    color: #555;
-}
 .wall-item-actions .active:hover {
     color: $link_color;
 }
@@ -1682,8 +1690,8 @@ code > .hl-main {
     padding-top: 5px !important;
     padding-bottom: 5px !important;
 }
-.comment-icon-list .icon,
-.comment-icon-list .icon:hover {
+.comment-icon-list > li > .icon,
+.comment-icon-list > li > .icon:hover {
     color: #555;
     background-color: transparent;
 }
diff --git a/view/theme/frio/templates/comment_item.tpl b/view/theme/frio/templates/comment_item.tpl
index e4ff8c03de..8ce7805bbd 100644
--- a/view/theme/frio/templates/comment_item.tpl
+++ b/view/theme/frio/templates/comment_item.tpl
@@ -33,38 +33,38 @@
 			{{/if}}
 			<ul class="comment-edit-bb-{{$id}} comment-icon-list nav nav-pills pull-right">
 				<li>
-					<button type="button" class="btn btn-link icon" style="cursor: pointer;" title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}">
+					<button type="button" class="btn-link icon" style="cursor: pointer;" title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="{{$id}}">
 						<i class="fa fa-picture-o"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon bb-url" style="cursor: pointer;" title="{{$edurl}}" onclick="insertFormatting('url',{{$id}});">
+					<button type="button" class="btn-link icon bb-url" style="cursor: pointer;" title="{{$edurl}}" onclick="insertFormatting('url',{{$id}});">
 						<i class="fa fa-link"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon bb-video" style="cursor: pointer;" title="{{$edvideo}}" onclick="insertFormatting('video',{{$id}});">
+					<button type="button" class="btn-link icon bb-video" style="cursor: pointer;" title="{{$edvideo}}" onclick="insertFormatting('video',{{$id}});">
 						<i class="fa fa-video-camera"></i>
 					</button>
 				</li>
 
 				<li>
-					<button type="button" class="btn btn-link icon underline" style="cursor: pointer;" title="{{$eduline}}" onclick="insertFormatting('u',{{$id}});">
+					<button type="button" class="btn-link icon underline" style="cursor: pointer;" title="{{$eduline}}" onclick="insertFormatting('u',{{$id}});">
 						<i class="fa fa-underline"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon italic" style="cursor: pointer;" title="{{$editalic}}" onclick="insertFormatting('i',{{$id}});">
+					<button type="button" class="btn-link icon italic" style="cursor: pointer;" title="{{$editalic}}" onclick="insertFormatting('i',{{$id}});">
 						<i class="fa fa-italic"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon bold" style="cursor: pointer;"  title="{{$edbold}}" onclick="insertFormatting('b',{{$id}});">
+					<button type="button" class="btn-link icon bold" style="cursor: pointer;"  title="{{$edbold}}" onclick="insertFormatting('b',{{$id}});">
 						<i class="fa fa-bold"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon quote" style="cursor: pointer;" title="{{$edquote}}" onclick="insertFormatting('quote',{{$id}});">
+					<button type="button" class="btn-link icon quote" style="cursor: pointer;" title="{{$edquote}}" onclick="insertFormatting('quote',{{$id}});">
 						<i class="fa fa-quote-left"></i>
 					</button>
 				</li>
diff --git a/view/theme/frio/templates/event_form.tpl b/view/theme/frio/templates/event_form.tpl
index d4b455b234..c34fadc8ad 100644
--- a/view/theme/frio/templates/event_form.tpl
+++ b/view/theme/frio/templates/event_form.tpl
@@ -78,7 +78,7 @@
 				<ul id="event-desc-text-edit-bb" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
 					{{* commented out because it isn't implemented yet
 					<li>
-						<button type="button" class="btn btn-link icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="desc">
+						<button type="button" class="btn-link icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="desc">
 							<i class="fa fa-picture-o"></i>
 						</button>
 					</li>
diff --git a/view/theme/frio/templates/jot.tpl b/view/theme/frio/templates/jot.tpl
index 28cf173a5d..71fdae7cd3 100644
--- a/view/theme/frio/templates/jot.tpl
+++ b/view/theme/frio/templates/jot.tpl
@@ -91,13 +91,13 @@
 						{{* uncomment the button for "wall-immage-upload" because we have integrated it directly in the jot modal
 						<li><a href="#" id="wall-image-upload" title="{{$upload}}"><i class="fa fa-picture-o"></i></a></li>
 						*}}
-						<li><button type="button" class="btn btn-link" id="wall-file-upload" title="{{$attach}}"><i class="fa fa-paperclip"></i></button></li>
-						<li><button type="button" class="btn btn-link" id="profile-link"  ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink();" title="{{$weblink}}"><i class="fa fa-link"></i></button></li>
-						<li><button type="button" class="btn btn-link" id="profile-video" onclick="jotVideoURL();" title="{{$video}}"><i class="fa fa-film"></i></button></li>
-						<li><button type="button" class="btn btn-link" id="profile-audio" onclick="jotAudioURL();" title="{{$audio}}"><i class="fa fa-music"></i></button></li>
-						<li><button type="button" class="btn btn-link" id="profile-location" onclick="jotGetLocation();" title="{{$setloc}}"><i class="fa fa-map-marker"></i></button></li>
+						<li><button type="button" class="btn-link" id="wall-file-upload" title="{{$attach}}"><i class="fa fa-paperclip"></i></button></li>
+						<li><button type="button" class="btn-link" id="profile-link"  ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink();" title="{{$weblink}}"><i class="fa fa-link"></i></button></li>
+						<li><button type="button" class="btn-link" id="profile-video" onclick="jotVideoURL();" title="{{$video}}"><i class="fa fa-film"></i></button></li>
+						<li><button type="button" class="btn-link" id="profile-audio" onclick="jotAudioURL();" title="{{$audio}}"><i class="fa fa-music"></i></button></li>
+						<li><button type="button" class="btn-link" id="profile-location" onclick="jotGetLocation();" title="{{$setloc}}"><i class="fa fa-map-marker"></i></button></li>
 						<!-- TODO: waiting for a better placement
-						<li><button type="button" class="btn btn-link" id="profile-nolocation" onclick="jotClearLocation();" title="{{$noloc}}">{{$shortnoloc}}</button></li>
+						<li><button type="button" class="btn-link" id="profile-nolocation" onclick="jotClearLocation();" title="{{$noloc}}">{{$shortnoloc}}</button></li>
 						-->
 
 						<li class="pull-right"><button class="btn btn-primary" id="jot-submit" type="submit" id="profile-jot-submit" name="submit" ><i class="fa fa-slideshare fa-fw"></i> {{$share}}</button></li>
diff --git a/view/theme/frio/templates/prv_message.tpl b/view/theme/frio/templates/prv_message.tpl
index 436a453c4b..4079bb3926 100644
--- a/view/theme/frio/templates/prv_message.tpl
+++ b/view/theme/frio/templates/prv_message.tpl
@@ -33,38 +33,38 @@
 
 	<ul id="prvmail-text-edit-bb" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
 				<li>
-					<button type="button" class="btn btn-link icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="input">
+					<button type="button" class="btn-link icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="input">
 						<i class="fa fa-picture-o"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon bb-url" style="cursor: pointer;" title="{{$edurl|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="url" data-id="input">
+					<button type="button" class="btn-link icon bb-url" style="cursor: pointer;" title="{{$edurl|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="url" data-id="input">
 						<i class="fa fa-link"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon bb-video" style="cursor: pointer;" title="{{$edvideo|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="video" data-id="input">
+					<button type="button" class="btn-link icon bb-video" style="cursor: pointer;" title="{{$edvideo|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="video" data-id="input">
 						<i class="fa fa-video-camera"></i>
 					</button>
 				</li>
 
 				<li>
-					<button type="button" class="btn btn-link icon underline" style="cursor: pointer;" title="{{$eduline|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="u" data-id="input">
+					<button type="button" class="btn-link icon underline" style="cursor: pointer;" title="{{$eduline|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="u" data-id="input">
 						<i class="fa fa-underline"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon italic" style="cursor: pointer;" title="{{$editalic|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="i" data-id="input">
+					<button type="button" class="btn-link icon italic" style="cursor: pointer;" title="{{$editalic|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="i" data-id="input">
 						<i class="fa fa-italic"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon bold" style="cursor: pointer;"  title="{{$edbold|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="b" data-id="input">
+					<button type="button" class="btn-link icon bold" style="cursor: pointer;"  title="{{$edbold|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="b" data-id="input">
 						<i class="fa fa-bold"></i>
 					</button>
 				</li>
 				<li>
-					<button type="button" class="btn btn-link icon quote" style="cursor: pointer;" title="{{$edquote|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="quote" data-id="input">
+					<button type="button" class="btn-link icon quote" style="cursor: pointer;" title="{{$edquote|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="quote" data-id="input">
 						<i class="fa fa-quote-left"></i>
 					</button>
 				</li>