2013-03-19 03:42:03 +00:00
|
|
|
/* herobox & 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
|
2013-02-08 18:29:09 +00:00
|
|
|
|
2013-03-19 03:42:03 +00:00
|
|
|
Seeing as the sprites might change drastically in the
|
|
|
|
|
future re: pets and whatnot, this is just temporary.
|
|
|
|
|
---------------------------------------------------- */
|
2013-02-08 18:29:09 +00:00
|
|
|
|
2014-02-01 16:18:37 +00:00
|
|
|
.profile-modal-header
|
|
|
|
|
width:560px
|
|
|
|
|
margin: 0px auto
|
|
|
|
|
|
2013-03-19 03:42:03 +00:00
|
|
|
// basic herobox styles
|
|
|
|
|
.herobox
|
|
|
|
|
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
|
2014-06-09 18:59:20 +00:00
|
|
|
// users can have image backgrounds
|
2014-06-12 18:48:40 +00:00
|
|
|
.herobox.noBackgroundImage
|
2014-03-16 23:53:51 +00:00
|
|
|
background: $color-herobox
|
2013-12-22 18:20:35 +00:00
|
|
|
transition: border 0.25s ease-out, background 0.25s ease-out//, padding 0.13s ease-out
|
2013-03-19 03:42:03 +00:00
|
|
|
outline: 1px solid rgba(0,0,0,0.1)
|
2013-12-22 18:20:35 +00:00
|
|
|
// padding: 0 // push down the sprite
|
2013-02-08 18:29:09 +00:00
|
|
|
|
2014-07-28 22:53:23 +00:00
|
|
|
// herobox avatar level (always visible) and name (hidden by default)
|
|
|
|
|
.herobox .avatar-level
|
2013-03-19 03:42:03 +00:00
|
|
|
position: absolute
|
2014-07-28 22:53:23 +00:00
|
|
|
bottom: 2px
|
|
|
|
|
right: 2px
|
|
|
|
|
@extend $hrpg-label
|
|
|
|
|
.herobox .avatar-name
|
|
|
|
|
position: absolute
|
|
|
|
|
top: 2px
|
|
|
|
|
left: 2px
|
2014-04-15 22:41:52 +00:00
|
|
|
@extend $hrpg-label
|
2013-03-19 04:04:24 +00:00
|
|
|
opacity: 0
|
2014-07-28 22:53:23 +00:00
|
|
|
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
|
2013-03-19 04:04:24 +00:00
|
|
|
opacity: 1
|
2014-07-28 22:53:23 +00:00
|
|
|
// 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%)
|
2013-02-12 17:36:38 +00:00
|
|
|
|
2014-07-26 22:41:33 +00:00
|
|
|
// 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
|
|
|
|
|
|
2013-02-13 20:17:38 +00:00
|
|
|
.character-sprites span
|
2014-07-28 22:53:23 +00:00
|
|
|
position: absolute
|
2013-03-16 19:09:16 +00:00
|
|
|
|
|
|
|
|
#profileStable
|
2014-07-28 22:53:23 +00:00
|
|
|
.active
|
|
|
|
|
border 1px solid black
|
2013-03-21 19:51:38 +00:00
|
|
|
|
2013-03-21 18:49:07 +00:00
|
|
|
// if not user's avatar, remove lines for party unity
|
2014-06-12 18:48:40 +00:00
|
|
|
.herobox.noBackgroundImage:not(.isUser)
|
2014-07-28 22:53:23 +00:00
|
|
|
outline: 0
|
|
|
|
|
background-color: darken($color-herobox, 8%)
|
2014-02-08 04:47:50 +00:00
|
|
|
|
|
|
|
|
// vertically center avatar sprite depending on if they have a pet
|
|
|
|
|
.herobox.hasPet
|
|
|
|
|
padding-top: 1.75em
|
|
|
|
|
.herobox:not(.hasPet)
|
|
|
|
|
padding-top: 2em
|
|
|
|
|
.herobox.hasMount
|
|
|
|
|
padding-top:0em
|
2013-03-21 18:49:07 +00:00
|
|
|
|
2013-03-19 03:42:03 +00:00
|
|
|
// positioning the sprites, etc
|
|
|
|
|
.herobox
|
|
|
|
|
.character-sprites
|
|
|
|
|
width: 6.428571429em // 90px
|
|
|
|
|
height: 6.428571429em
|
|
|
|
|
margin: 0 auto
|
|
|
|
|
|
|
|
|
|
.character-sprites span, .pet
|
2013-11-23 23:49:33 +00:00
|
|
|
position: absolute
|
|
|
|
|
|
2014-06-12 18:48:40 +00:00
|
|
|
.herobox.isLeader.noBackgroundImage
|
2014-07-26 22:41:33 +00:00
|
|
|
background: lighten($color-herobox, 10%)
|
