habitica/public/css/avatar.styl

/* herobox and avatar
======================
* this is the canonical `herobox` avatar component
* it can be placed anywhere on the site and look the
* way it's supposed to. TODO: add variables for show/
* or hiding user metadata in different situations

Seeing as the sprites might change drastically in the
future re: pets and whatnot, this is just temporary.
---------------------------------------------------- */

.profile-modal-header
  width:560px
  margin: 0px auto

.herobox
  // Base styles
  height: 10.5em // higher to acct for the name area
  width: 10em
  max-width: 10em
  margin: 0 // need this b/c of bootstrap, remove or reset later
  position: relative
  cursor: pointer
  
  // Username and Level
  .avatar-level, .avatar-name
    position: absolute
    @extend $hrpg-label
  .avatar-level
    bottom: 2px
   	right: 2px
    // when a buff/rebirth exists, add space between the icon and the level
    .glyphicon-circle-arrow-up
      padding-right: 4px
    .glyphicon-plus-sign
      padding-left: 4px
  .avatar-name
    top: 2px
    left: 2px
    opacity: 0 // Hide username by default
    transition: opacity 0.2s ease-out
    opacity: 1 // TST XXX ALYS - make it easy to see name colour in party
  
  // Show username if not using mount or background
  &.isUser.noBackgroundImage:not(.hasMount)
    .avatar-name
      opacity: 1
  
  // Show username on hover and focus
  &:hover, &:focus
    .avatar-name
      opacity: 1
  
  // Sprite positioning – Base styles
  .character-sprites
    width: 6.428571429em // 90px
    height: 6.428571429em
    margin: 0 auto
    span
      position: absolute
  padding-top: 2em
  
  // Sprite positioning – Position avatar sprite differently if they have a pet or a mount
  &.hasPet
    padding-top: 1.75em    
  &.hasMount
    padding-top:0em
  
  // Backgrounds – Set a background color when no background image is set
  &.noBackgroundImage
    background: darken($color-herobox, 8%)
    &:hover, &:focus
      background: darken($color-herobox, 6%)
    &.isUser
      background: $color-herobox // Set a different background color for the current user
      &:hover, &:focus
        background: lighten($color-herobox, 16.18%)	

//Need to find a way to indicate who is leader without using background-color as it won't work when a background image is applied
//.herobox.isLeader.noBackgroundImage
//background: lighten($color-herobox, 10%)