styled tags

less/tags.less

@@ -7,28 +7,20 @@
 }
 
 .tag-item {
-	border: solid 1px @gray-light;
+	color: lighten(@gray-light, 20%);
-	border-bottom-left-radius: 5px;
+	padding: .2em .4em .3em;
-	border-top-left-radius: 5px;
+	font-size: 85%;
-	background-color: transparent;
+	text-transform: uppercase;
-	color: @gray-light;
+	color: #999;
-	padding: .2em .6em .3em;
-	font-size: 75%;
 	font-weight: 700;
 	white-space: nowrap;
 }
 
 .tag-topic-count {
-	border: solid 1px lighten(@brand-primary, 20%);
+	color: lighten(@brand-primary, 20%);
-	background-color: lighten(@brand-primary, 20%);
+	padding: 0em 0.4em 0.1em;
-	color: #FFFFFF;
+	font-size: 85%;
-	padding: .2em .6em .3em;
-	font-size: 75%;
 	font-weight: 700;
 	white-space: nowrap;
 	border-left: none;
-	padding-right: 5px;
-	padding-left: 5px;
-	border-bottom-right-radius: 5px;
-	border-top-right-radius: 5px;
 }

less/topic.less

@@ -80,6 +80,10 @@
 			.pointer;
 		}
 	}
+
+	.tags {
+		vertical-align: -40%;
+	}
 }
 
 

templates/partials/post_bar.tpl

@@ -1,14 +1,10 @@
-<div class="inline-block">
+<span class="tags">
-	<span class="tags">
 	<!-- BEGIN tags -->
-	<a href="{relative_path}/tags/{tags.value}"><span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count">{tags.score}</span></a>
+	<a href="{relative_path}/tags/{tags.value}">
+	<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span>
+	<span class="tag-topic-count">{tags.score}</span></a>
 	<!-- END tags -->
-	</span>
+</span>
-
-	<!-- IF tags.length -->
-	<span>|</span>
-	<!-- ENDIF tags.length -->
-</div>
 
 <div class="topic-main-buttons pull-right">
 	<span class="loading-indicator btn pull-left" done="0" style="display:none;">