mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-19 07:37:25 +01:00
109 lines
3.0 KiB
Stylus
109 lines
3.0 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.
|
||
---------------------------------------------------- */
|
||
|
||
// see http://stackoverflow.com/questions/24166568/set-bootstrap-modal-body-height-by-percentage
|
||
.profile-modal
|
||
.modal-dialog
|
||
height: 100%
|
||
width: auto
|
||
max-width: 920px
|
||
margin: 0 auto
|
||
padding: 10px
|
||
@media screen and (min-width:768px)
|
||
padding: 30px 10px
|
||
.modal-content
|
||
height: 100%
|
||
.modal-body
|
||
max-height: calc(100% - 137px) // 100% = dialog height, 137px = header (70px) + footer (67px)
|
||
overflow-y: scroll
|
||
.modal-footer
|
||
margin: 0
|
||
padding: 16px 20px
|
||
|
||
.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 !important
|
||
|
||
// 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%)
|