display unread notifications only if present, make icon bigger on menu

rhodecode/public/css/style.css

@@ -1897,7 +1897,12 div.form div.fields div.field div.button
     margin: 0px 0px 0px 0px;
     cursor: pointer;
 }
-
+.user-menu .gravatar.enabled{
+	background-color: #FDF784 !important;
+}
+.user-menu .gravatar:hover{
+    background-color: #FDF784 !important; 
+}
 #quick_login{
     min-height: 80px;
     margin: 31px 0 0 -251px;
@@ -4044,10 +4049,10 form.comment-inline-form {
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;    
     float: right;
-    margin: 24px 0px 0px;
+    margin: 20px 0px 0px 0px;
     position: absolute;
     text-align: center;
-    width: 22px;
+    width: 26px;
     z-index: 1000;
 }
 .notifications a{
@@ -4061,6 +4066,7 form.comment-inline-form {
 }
 .notifications a:hover{
 	text-decoration: none !important;
+	background-color: #EEEFFF !important;
 }
 .notification-header{
 	padding-top:6px;

rhodecode/templates/base/base.html

@@ -64,9 +64,9
   <div class="user-menu">
       <div class="container">
        <div class="gravatar" id="quick_login_link">
-           <img alt="gravatar" src="${h.gravatar_url(c.rhodecode_user.email,20)}" />
+           <img alt="gravatar" src="${h.gravatar_url(c.rhodecode_user.email,24)}" />
        </div>
-       %if c.rhodecode_user.username != 'default':
+       %if c.rhodecode_user.username != 'default' and c.unread_notifications != 0:
         <div class="notifications">
           <a id="notification_counter" href="${h.url('notifications')}">${c.unread_notifications}</a>
         </div>