apply contributor tier color to avatar name

public/css/avatar.styl

@@ -13,12 +13,6 @@ future re: pets and whatnot, this is just temporary.
     width:560px
     margin: 0px auto
 
-.avatar-level
-    position: absolute
-    bottom: 2px
-    right: 2px
-    @extend $hrpg-label
-
 // basic herobox styles
 .herobox
 	height: 10.5em // higher to acct for the name area
@@ -34,28 +28,27 @@ future re: pets and whatnot, this is just temporary.
 	outline: 1px solid rgba(0,0,0,0.1)
 // padding: 0 // push down the sprite
 
-// the hero's info frame
-.herobox:after
-	content: attr(data-name) //" – " "lvl " attr(data-level) // " " attr(data-class)
+// herobox avatar level (always visible) and name (hidden by default)
+.herobox .avatar-level
 	position: absolute
-	top: 0
-	display: block
-	margin: 2px
-	text-align: left
+	bottom: 2px
+	right: 2px
+	@extend $hrpg-label
+.herobox .avatar-name
+	position: absolute
+	top:  2px
+	left: 2px
 	@extend $hrpg-label
-	hrpg-label-color-mixin(darken($good, 15%))
-	transition: opacity 0.2s ease-out
-
-// info revealed on hover/focus for party
-// always visible on the user's own avatar
-// except that the user's own name is hidden
-// if the user has a mount or background
-.herobox:after
 	opacity: 0
-.herobox.isUser.notBackground:not(.hasMount):after
+	transition: opacity 0.2s ease-out
+// user's own name is visible if not using mount or background
+.herobox.isUser.notBackground:not(.hasMount) .avatar-name
 	opacity: 1
-	// make it a bit special
-	hrpg-label-color-mixin(darken($color-herobox, 16.18%))
+// avatar name becomes visible on hover
+.herobox:hover .avatar-name, .herobox:focus .avatar-name
+	opacity: 1
+.herobox.noBackgroundImage:hover, .herobox.noBackgroundImage:focus
+	background: lighten($color-herobox, 30%)
 
 // when a buff/rebirth exists, add space between the icon and the level
 .glyphicon-circle-arrow-up
@@ -64,16 +57,16 @@ future re: pets and whatnot, this is just temporary.
 	padding-left: 4px
 
 .character-sprites span
-    position: absolute
+	position: absolute
 
 #profileStable
-    .active
-        border 1px solid black
+	.active
+		border 1px solid black
 
 // if not user's avatar, remove lines for party unity
 .herobox.noBackgroundImage:not(.isUser)
-  outline: 0
-  background-color: darken($color-herobox, 8%)
+	outline: 0
+	background-color: darken($color-herobox, 8%)
 
 // vertically center avatar sprite depending on if they have a pet
 .herobox.hasPet
@@ -83,14 +76,6 @@ future re: pets and whatnot, this is just temporary.
 .herobox.hasMount
     padding-top:0em
 
-// expose hero info on hover, taking
-// into account the extra pet space
-.herobox:hover, .herobox:focus
-  &:after
-    opacity: 1
-.herobox.noBackgroundImage:hover, .herobox.noBackgroundImage:focus
-  background: lighten($color-herobox, 30%)
-
 // positioning the sprites, etc
 .herobox
 	.character-sprites

views/shared/header/avatar.jade

@@ -74,6 +74,8 @@ mixin avatar(opts)
 mixin herobox(opts)
   - if (!opts) {opts = {minimal:false,main:false}}
   figure.herobox(ng-click='spell ? castEnd(profile, "user", $event) : clickMember(profile._id)', data-name='{{profile.profile.name}}', class='background_{{profile.preferences.background}} #{opts.main ? "isUser" : ""} #{opts.minimal ? "minimal" : ""}', ng-class='{hasPet: (#{!opts.minimal} && profile.items.currentPet), hasMount: (#{!opts.minimal} && profile.items.currentMount), notBackground: !profile.preferences.background, "cast-target": applyingAction, isLeader: party.leader==profile._id}')
+    .avatar-name(ng-class='userLevelStyle(profile)')
+      {{profile.profile.name}}
     +avatar(opts)
     .avatar-level(ng-class='userLevelStyle(profile)')
       span.glyphicon.glyphicon-circle-arrow-up(ng-show='profile.stats.buffs.str || profile.stats.buffs.per || profile.stats.buffs.con || profile.stats.buffs.int || profile.stats.buffs.stealth', tooltip=env.t('buffed'))