mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-07-22 03:34:14 +00:00
95 lines
No EOL
2.3 KiB
Stylus
95 lines
No EOL
2.3 KiB
Stylus
/* 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
|
||
|
||
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
|
||
|
||
.avatar-level
|
||
position absolute
|
||
bottom 0px
|
||
right 0px
|
||
padding 2px 3px 2px 3px
|
||
|
||
// 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
|
||
background: #f5f5f5
|
||
transition: border 0.25s ease-out, background 0.25s ease-out//, padding 0.13s ease-out
|
||
outline: 1px solid rgba(0,0,0,0.1)
|
||
// padding: 0 // push down the sprite
|
||
|
||
// the hero's info frame
|
||
.herobox:after
|
||
content: attr(data-name) //" – " "lvl " attr(data-level) // " " attr(data-class)
|
||
position: absolute
|
||
top: 0
|
||
display: block
|
||
width: 100%
|
||
line-height: 2
|
||
color: black
|
||
text-align: center
|
||
border-bottom: 1px solid rgba(0,0,0,0.1)
|
||
background: darken($good, 15%)
|
||
transition: opacity 0.2s ease-out
|
||
|
||
// info revealed on hover/focus for party
|
||
// always visible on the user's own avatar
|
||
.herobox:after
|
||
opacity: 0
|
||
.herobox.isUser:not(.hasMount):after
|
||
opacity: 1
|
||
// make it a bit special
|
||
background darken($better, 15%)
|
||
|
||
.character-sprites span
|
||
position: absolute
|
||
|
||
#profileStable
|
||
.active
|
||
border 1px solid black
|
||
|
||
// if not user's avatar, remove lines for party unity
|
||
.herobox:not(.isUser)
|
||
outline: 0
|
||
|
||
// 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
|
||
|
||
// expose hero info on hover, taking
|
||
// into account the extra pet space
|
||
.herobox:hover, .herobox:focus
|
||
background: desaturate(lighten($better, 30%), 10%)
|
||
&:after
|
||
opacity: 1
|
||
|
||
// positioning the sprites, etc
|
||
.herobox
|
||
.character-sprites
|
||
width: 6.428571429em // 90px
|
||
height: 6.428571429em
|
||
margin: 0 auto
|
||
|
||
.character-sprites span, .pet
|
||
position: absolute
|
||
|
||
.herobox.isLeader
|
||
background: $better |