Tweaked ranks CSS

misago/static/misago/css/misago/index.less

@@ -43,11 +43,15 @@
           }
 
           small {
+            background-color: @panel-bg;
+            border-radius: @border-radius-small;
             float: right;
             position: relative;
-            top: 4px;
+            padding: @padding-xs-vertical @padding-xs-horizontal;
+            top: 5px;
 
-            color: @text-muted;
+            color: @panel-bg;
+            font-size: @font-size-base;
           }
         }
 

misago/static/misago/css/misago/profile.less

@@ -13,9 +13,32 @@
     border-bottom-width: 1px;
 
     h1 {
-    	small, small a {
-    		color: @text-muted;
-    	}
+      &>small {
+        &>a, &>a:link, &>a:visited, &>span {
+          background-color: fadeOut(@text-muted, 50%);
+          border-radius: @border-radius-base;
+          display: inline-block;
+          padding: @padding-small-vertical @padding-small-horizontal;
+          position: relative;
+          top: -4px;
+
+          color: @body-bg;
+        }
+
+        &>a {
+          &:hover {
+            background-color: fadeOut(@text-muted, 15%);
+
+            text-decoration: none;
+          }
+
+          &:active {
+            background-color: @state-clicked;
+
+            text-decoration: none;
+          }
+        }
+      }
     }
 
     .page-actions {

misago/static/misago/css/ranks.less

@@ -8,8 +8,18 @@
 //==
 .user-profile {
   &.profile-team {
-    .user-title, .user-title>a {
-      color: fadeOut(@brand-accent, 50%);
+    .user-title {
+      a, a:link, a:visited, span {
+        background-color: fadeOut(@brand-accent, 10%);
+      }
+
+      a:hover {
+        background: @brand-accent;
+      }
+
+      a:active {
+        background: darken(@brand-accent, 15%);
+      }
     }
   }
 }
@@ -18,7 +28,7 @@
 .ranks-online {
   .rank-online.rank-team {
     small {
-      color: fadeOut(@brand-accent, 50%);
+      background-color: fadeOut(@brand-accent, 10%);
     }
   }
 }

misago/templates/misago/profile/header.html

@@ -1,12 +1,12 @@
 {% load i18n %}
 <h1 class="user-name">
   {{ profile.username }}
-  {% if profile.full_title %}
+  {% if profile.title or profile.rank.is_tab %}
   <small class="user-title">
     {% if profile.rank.is_tab %}
     <a href="{% url 'misago:users_rank' rank_slug=profile.rank.slug %}">{{ profile.full_title }}</a>
     {% else %}
-    {{ profile.full_title }}
+    <span>{{ profile.full_title }}</span>
     {% endif %}
   </small>
   {% endif %}