tree unread count styling

src/main/webapp/sass/components/_subscription-list.scss

@@ -8,7 +8,7 @@
 }
 
 .feed-search-dialog .feed-link {
-	font-size: large; 
+	font-size: large;
 }
 
 .feed-search-dialog a:hover {
@@ -32,7 +32,7 @@
 .css-treeview {
 	margin-top: 15px;
 	font-family: inherit;
-	font-size: 12px;
+	font-size: 13px;
 	white-space: nowrap;
 }
 
@@ -81,6 +81,11 @@
 	font-weight: bold;
 }
 
+.css-treeview .unread-counter {
+	color: #666;
+	font-size: 11px;
+}
+
 .css-treeview a {
 	cursor: pointer;
 	color: black;

src/main/webapp/templates/_category.html

@@ -10,8 +10,14 @@
 				<i ng-class="{'icon-caret-right': !node.expanded, 'icon-caret-down': node.expanded}" ng-click="toggleCategory(node, $event)" ng-show="showChildren"></i>
 				<i ng-class="{'icon-star' : node.id == 'starred', 'icon-inbox': node.id == 'all'}" ng-show="!showChildren"></i>
 			</span>
-			<span ng-class="{selected: (node.id == selectedId && selectedType == 'category'), unread: unreadCount({category:node})}">
-				{{categoryLabel(node)}} &lrm;{{categoryCountLabel(node)}}
+			<span ng-class="{selected: (node.id == selectedId && selectedType == 'category')}">
+				<span ng-class="{unread: unreadCount({category:node})}">
+					{{categoryLabel(node)}}
+				</span>
+				&lrm;
+				<span class="unread-counter">
+					{{categoryCountLabel(node)}}
+				</span>
 			</span>
 		</div>
 	</div>
@@ -29,9 +35,15 @@
 				<i class="icon-wrench config pointer"></i>
 			</div>
 			<a ng-click="feedClicked(feed.id)" class="feed-link"
-				ng-class="{error: feed.message && feed.errorCount > 10, selected: (feed.id == selectedId && selectedType == 'feed'), unread: feed.unread }">
+				ng-class="{error: feed.message && feed.errorCount > 10, selected: (feed.id == selectedId && selectedType == 'feed') }">
 				<favicon url="feed.iconUrl" />
-				{{feed.name}} &lrm;{{feedCountLabel(feed)}}
+				<span ng-class="{unread: feed.unread}">
+					{{feed.name}}
+				</span> 
+				&lrm;
+				<span class="unread-counter">
+					{{feedCountLabel(feed)}}
+				</span>
 			</a>
 		</li>
 	</ul>