habitica/website/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.
---------------------------------------------------- */

// see http://stackoverflow.com/questions/24166568/set-bootstrap-modal-body-height-by-percentage
.profile-modal
  .modal-dialog,.modal-content
    height: 96%
  .modal-body
    max-height: calc(100% - 150px) //100% = dialog height, 150px = header + footer
    overflow-y: scroll

.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
    z-index: 2
  .avatar-level
    bottom: 4px
   	right: 4px
    // 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
    max-width: 132px
    top: 4px
    left: 4px
    opacity: 0 // Hide username by default
    transition: opacity 0.2s ease-out
  
  // 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%)

  .addthis_pill_style
    width: 50px !important
  .addthis_native_toolbox
    position: absolute
    bottom:4px
    left:4px
    z-index: 2
    opacity:0
  &:hover .addthis_native_toolbox
    opacity:1

//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%)