5 files changed, 31 insertions, 14 deletions
diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js
index e3780f024a..311da92a95 100644
--- a/phpBB/styles/prosilver/template/ajax.js
+++ b/phpBB/styles/prosilver/template/ajax.js
@@ -132,9 +132,9 @@ phpbb.markNotifications = function($popup, unreadCount) {
 
 	// Update the unread count.
 	$('strong', '#notification_list_button').html(unreadCount);
-	// Remove the Mark all read link if there are no unread notifications.
+	// Remove the Mark all read link & notification count if there are no unread notifications.
 	if (!unreadCount) {
-		$('#mark_all_notifications').remove();
+		$('#mark_all_notifications, #notification_list_button > strong').remove();
 	}
 
 	// Update page title
diff --git a/phpBB/styles/prosilver/template/navbar_header.html b/phpBB/styles/prosilver/template/navbar_header.html
index e948e2e0f6..e5f354a943 100644
--- a/phpBB/styles/prosilver/template/navbar_header.html
+++ b/phpBB/styles/prosilver/template/navbar_header.html
@@ -18,7 +18,7 @@
 						<!-- IF S_USER_LOGGED_IN -->
 							<li class="small-icon icon-search-new"><a href="{U_SEARCH_NEW}" role="menuitem">{L_SEARCH_NEW}</a></li>
 						<!-- ENDIF -->
-						<!-- IF S_LOAD_UNREADS --> 
+						<!-- IF S_LOAD_UNREADS -->
 							<li class="small-icon icon-search-unread"><a href="{U_SEARCH_UNREAD}" role="menuitem">{L_SEARCH_UNREAD}</a></li>
 						<!-- ENDIF -->
 						<li class="small-icon icon-search-unanswered"><a href="{U_SEARCH_UNANSWERED}" role="menuitem">{L_SEARCH_UNANSWERED}</a></li>
@@ -55,14 +55,14 @@
 					<div class="pointer"><div class="pointer-inner"></div></div>
 					<ul class="dropdown-contents" role="menu">
 						<!-- IF U_RESTORE_PERMISSIONS --><li class="small-icon icon-restore-permissions"><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
-	
+
 						<!-- EVENT navbar_header_profile_list_before -->
-	
+
 						<li class="small-icon icon-ucp"><a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">{L_PROFILE}</a></li>
 						<li class="small-icon icon-profile"><a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">{L_READ_PROFILE}</a></li>
-	
+
 						<!-- EVENT navbar_header_profile_list_after -->
-	
+
 						<li class="separator"></li>
 						<li class="small-icon icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">{L_LOGIN_LOGOUT}</a></li>
 					</ul>
@@ -72,12 +72,12 @@
 		</li>
 		<!-- IF S_DISPLAY_PM -->
 			<li class="small-icon icon-pm rightside" data-skip-responsive="true">
-				<a href="{U_PRIVATEMSGS}" role="menuitem"><span>{L_PRIVATE_MESSAGES} [</span><strong>{PRIVATE_MESSAGE_COUNT}</strong><span>]</span></a>
+				<a href="{U_PRIVATEMSGS}" role="menuitem"><span>{L_PRIVATE_MESSAGES} </span><!-- IF PRIVATE_MESSAGE_COUNT --><strong class="badge">{PRIVATE_MESSAGE_COUNT}</strong><!-- ENDIF --></a>
 			</li>
 		<!-- ENDIF -->
 		<!-- IF S_NOTIFICATIONS_DISPLAY -->
 			<li class="small-icon icon-notification dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
-				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
+				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger"><span>{L_NOTIFICATIONS} </span><!-- IF NOTIFICATIONS_COUNT --><strong class="badge">{NOTIFICATIONS_COUNT}</strong><!-- ENDIF --></a>
 				<!-- INCLUDE notification_dropdown.html -->
 			</li>
 		<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index 29cf641df2..9095e61369 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1161,3 +1161,8 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
 li.notification-reported strong, li.notification-disapproved strong {
 	color: #D31141;
 }
+
+.badge {
+	background-color: #D31141;
+	color: #ffffff;
+}
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 5dd5ecdb28..9c2f33f7a9 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -1251,6 +1251,22 @@ ul.linklist:after,
 	margin-left: 58px;
 }
 
+.badge {
+	border-radius: 10px;
+	opacity: 0.8;
+	text-align: center;
+	white-space: nowrap;
+	font-size: 10px;
+	line-height: 1;
+	float: right;
+	display: inline-block;
+	margin-left: 3px;
+	vertical-align: baseline;
+	position: relative;
+	top: 3px;
+	padding: 4px 6px;
+}
+
 /* Navbar specific list items
 ----------------------------------------*/
 
@@ -1281,10 +1297,6 @@ ul.linklist:after,
 	display: none;
 }
 
-.compact .icon-notification > a > strong, .compact .icon-pm > a > strong {
-	padding-left: 2px;
-}
-
 .dropdown-page-jump .dropdown {
 	top: 20px;
 }
diff --git a/tests/functional/notification_test.php b/tests/functional/notification_test.php
index ec03f7a6a4..d4c61cc062 100644
--- a/tests/functional/notification_test.php
+++ b/tests/functional/notification_test.php
@@ -82,6 +82,6 @@ class phpbb_functional_notification_test extends phpbb_functional_test_case
 		// Get form token
 		$link = $crawler->selectLink($this->lang('NOTIFICATIONS_MARK_ALL_READ'))->link()->getUri();
 		$crawler = self::request('GET', substr($link, strpos($link, 'ucp.')));
-		$this->assertEquals(0, $crawler->filter('#notification_list_button strong')->text());
+		$this->assertCount(0, $crawler->filter('#notification_list_button strong'));
 	}
 }