benmanley
a6d101202c
avatar.jade was applying a class of .notBackground, but the css in avatar.styl used .noBackgroundImage. * Changed .notBackground to .noBackgroundImage in avatar.jade and avatar.styl * Consolidated css and added more comments * Amended spacing as Stylus wasn’t compiling correctly * Removed #profileStable and .pet css as couldn’t find reference to them anywhere else. * Commented out styles indicating who is party leader for now. Need a solution that doesn’t involve background color.
81 lines
2.3 KiB
Stylus
81 lines
2.3 KiB
Stylus
/* 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
|
||
|
||
// 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%)
|