feat: make metadata, post tools, and moderator tools invisible by default, fade in on post hover

less/mixins.less

@@ -46,4 +46,9 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+}
+
+.fadeInStart {
+	.transition(250ms ease-in-out opacity);
+	opacity: 0;
 }

less/topic.less

@@ -277,7 +277,13 @@
 		min-height: 60px;
 	}
 
+	[component="post/metadata"] {
+		.fadeInStart;
+	}
+
 	.post-tools {
+		.fadeInStart;
+
 		a {
 			padding-right: 10px;
 			.pointer;
@@ -285,6 +291,8 @@
 	}
 
 	.moderator-tools {
+		.fadeInStart;
+
 		margin-left: 10px;
 		font-size: 14px;
 
@@ -434,6 +442,12 @@
 
 			.transition(0.75s ease-in-out border-color);
 
+			&:hover {
+				.moderator-tools, .post-tools, [component="post/metadata"] {
+					opacity: 1;
+				}
+			}
+
 			.edit-icon {
 				vertical-align: -2%;
 			}

templates/partials/topic/post.tpl

@@ -36,7 +36,7 @@
 	<small class="pull-right">
 		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
 	</small>
-	<small class="pull-right">
+	<small class="pull-right" component="post/metadata">
 		<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
 
 		<small data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></small>