mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-03 12:40:00 +00:00
better shared css. we're gona take out shared css in teh end
This commit is contained in:
Tyler Renelle
parent
51f60a1e71
commit
d464fd6a93
6 changed files with 340 additions and 1033 deletions
3
css/README.md
Normal file
3
css/README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
When updates are made to the main site's css / styl files, copy them in here & run `stylus index.styl`. The css doesn't map directly, so this is a temporary workflow.
|
||||
|
||||
TODO bring in pets, eggs, etc. (they're in /img/sprites/*)
|
||||
65
css/avatar.styl
Normal file
65
css/avatar.styl
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/* 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.
|
||||
---------------------------------------------------- */
|
||||
|
||||
// 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
|
||||
padding: 0 // push down the sprite
|
||||
position: relative
|
||||
|
||||
// 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)
|
||||
transition: opacity 0.2s ease-out
|
||||
|
||||
.character-sprites span
|
||||
position: absolute
|
||||
|
||||
#profileStable
|
||||
.active
|
||||
border 1px solid black
|
||||
|
||||
// vertically center avatar sprite
|
||||
// depending on if they have a pet
|
||||
.herobox[data-checkpet="hasPet"]
|
||||
padding-top: 2em
|
||||
.herobox:not([data-checkpet="hasPet"])
|
||||
padding-top: 1.75em
|
||||
|
||||
// if it is the user's avatar, check if
|
||||
// they have a pet and pad accordingly
|
||||
.herobox[data-checkpet="hasPet"][data-checkuser="isUser"]
|
||||
padding-top: 3.25em
|
||||
|
||||
// if not user's avatar, remove lines for party unity
|
||||
.herobox:not([data-checkuser="isUser"])
|
||||
outline: 0
|
||||
|
||||
// positioning the sprites, etc
|
||||
.herobox
|
||||
.character-sprites
|
||||
width: 6.428571429em // 90px
|
||||
height: 6.428571429em
|
||||
margin: 0 auto
|
||||
|
||||
.character-sprites span, .pet
|
||||
position: absolute
|
||||
119
css/female_sprites.styl
Normal file
119
css/female_sprites.styl
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
.f_weapon_6,
|
||||
.f_weapon_5,
|
||||
.f_weapon_4,
|
||||
.f_weapon_3,
|
||||
.f_weapon_2,
|
||||
.f_weapon_1,
|
||||
.f_weapon_0,
|
||||
.f_shield_5,
|
||||
.f_shield_4,
|
||||
.f_shield_3,
|
||||
.f_shield_2,
|
||||
.f_shield_1,
|
||||
.f_head_5_v2,
|
||||
.f_head_5_v1,
|
||||
.f_head_4_v2,
|
||||
.f_head_4_v1,
|
||||
.f_head_3_v2,
|
||||
.f_head_3_v1,
|
||||
.f_head_2_v2,
|
||||
.f_head_2_v1,
|
||||
.f_head_1,
|
||||
.f_head_0,
|
||||
.f_hair_white,
|
||||
.f_hair_brown,
|
||||
.f_hair_black,
|
||||
.f_hair_blond,
|
||||
.f_armor_5,
|
||||
.f_armor_4,
|
||||
.f_armor_3,
|
||||
.f_armor_2,
|
||||
.f_armor_1,
|
||||
.f_armor_0_v2,
|
||||
.f_armor_0_v1,
|
||||
.f_skin_dead,
|
||||
.f_skin_orc,
|
||||
.f_skin_asian,
|
||||
.f_skin_black,
|
||||
.f_skin_white
|
||||
background: url("../img/sprites/female_sprites.png") no-repeat
|
||||
|
||||
.f_weapon_6 {background-position: 0 0; width: 90px; height: 90px}
|
||||
.f_weapon_5 {background-position: -90px 0; width: 90px; height: 90px}
|
||||
.f_weapon_4 {background-position: -180px 0; width: 90px; height: 90px}
|
||||
.f_weapon_3 {background-position: -270px 0; width: 90px; height: 90px}
|
||||
.f_weapon_2 {background-position: -360px 0; width: 90px; height: 90px}
|
||||
.f_weapon_1 {background-position: -450px 0; width: 90px; height: 90px}
|
||||
.f_weapon_0 {background-position: -540px 0; width: 90px; height: 90px}
|
||||
.f_shield_5 {background-position: -630px 0; width: 90px; height: 90px}
|
||||
.f_shield_4 {background-position: -720px 0; width: 90px; height: 90px}
|
||||
.f_shield_3 {background-position: -810px 0; width: 90px; height: 90px}
|
||||
.f_shield_2 {background-position: -900px 0; width: 90px; height: 90px}
|
||||
.f_shield_1 {background-position: -990px 0; width: 90px; height: 90px}
|
||||
.f_head_5_v2 {background-position: -1080px 0; width: 90px; height: 90px}
|
||||
.f_head_5_v1 {background-position: -1170px 0; width: 90px; height: 90px}
|
||||
.f_head_4_v2 {background-position: -1260px 0; width: 90px; height: 90px}
|
||||
.f_head_4_v1 {background-position: -1350px 0; width: 90px; height: 90px}
|
||||
.f_head_3_v2 {background-position: -1440px 0; width: 90px; height: 90px}
|
||||
.f_head_3_v1 {background-position: -1530px 0; width: 90px; height: 90px}
|
||||
.f_head_2_v2 {background-position: -1620px 0; width: 90px; height: 90px}
|
||||
.f_head_2_v1 {background-position: -1710px 0; width: 90px; height: 90px}
|
||||
.f_head_1 {background-position: -1800px 0; width: 90px; height: 90px}
|
||||
.f_head_0 {background-position: -1890px 0; width: 90px; height: 90px}
|
||||
.f_hair_white {background-position: -1980px 0; width: 90px; height: 90px}
|
||||
.f_hair_brown {background-position: -2070px 0; width: 90px; height: 90px}
|
||||
.f_hair_black {background-position: -2160px 0; width: 90px; height: 90px}
|
||||
.f_hair_blond {background-position: -2250px 0; width: 90px; height: 90px}
|
||||
.f_armor_5 {background-position: -2340px 0; width: 90px; height: 90px}
|
||||
.f_armor_4 {background-position: -2430px 0; width: 90px; height: 90px}
|
||||
.f_armor_3 {background-position: -2520px 0; width: 90px; height: 90px}
|
||||
.f_armor_2 {background-position: -2610px 0; width: 90px; height: 90px}
|
||||
.f_armor_1 {background-position: -2700px 0; width: 90px; height: 90px}
|
||||
.f_armor_0_v2 {background-position: -2790px 0; width: 90px; height: 90px}
|
||||
.f_armor_0_v1 {background-position: -2880px 0; width: 90px; height: 90px}
|
||||
.f_skin_dead {background-position: -2970px 0; width: 90px; height: 90px}
|
||||
.f_skin_orc {background-position: -3060px 0; width: 90px; height: 90px}
|
||||
.f_skin_asian {background-position: -3150px 0; width: 90px; height: 90px}
|
||||
.f_skin_black {background-position: -3240px 0; width: 90px; height: 90px}
|
||||
.f_skin_white {background-position: -3330px 0; width: 90px; height: 90px}
|
||||
|
||||
|
||||
|
||||
// narrower spriting for customize modal
|
||||
.customize-menu
|
||||
// shared option-box styles
|
||||
[class^="f_hair"], [class^="f_skin"], [class^="f_armor"], .f_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
// head
|
||||
.f_head_0
|
||||
background-position: -1917px -9px;
|
||||
|
||||
// hair
|
||||
.f_hair_white
|
||||
background-position: -2009px -8px;
|
||||
.f_hair_brown
|
||||
background-position: -2099px -8px;
|
||||
.f_hair_black
|
||||
background-position: -2189px -8px;
|
||||
.f_hair_blond
|
||||
background-position: -2279px -8px;
|
||||
|
||||
// skin
|
||||
.f_skin_dead
|
||||
background-position: -2997px -20px;
|
||||
.f_skin_orc
|
||||
background-position: -3087px -20px;
|
||||
.f_skin_asian
|
||||
background-position: -3177px -20px;
|
||||
.f_skin_black
|
||||
background-position: -3267px -20px;
|
||||
.f_skin_white
|
||||
background-position: -3357px -20px;
|
||||
|
||||
// starting armor
|
||||
.f_armor_0_v2
|
||||
background-position: -2819px -38px;
|
||||
.f_armor_0_v1
|
||||
background-position: -2909px -38px;
|
||||
1080
css/index.css
1080
css/index.css
File diff suppressed because it is too large
Load diff
3
css/index.styl
Normal file
3
css/index.styl
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import './avatar.styl';
|
||||
@import './female_sprites.styl';
|
||||
@import './male_sprites.styl';
|
||||
103
css/male_sprites.styl
Normal file
103
css/male_sprites.styl
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
.m_weapon_6,
|
||||
.m_weapon_5,
|
||||
.m_weapon_4,
|
||||
.m_weapon_3,
|
||||
.m_weapon_2,
|
||||
.m_weapon_1,
|
||||
.m_weapon_0,
|
||||
.m_shield_5,
|
||||
.m_shield_4,
|
||||
.m_shield_3,
|
||||
.m_shield_2,
|
||||
.m_shield_1,
|
||||
.m_head_5,
|
||||
.m_head_4,
|
||||
.m_head_3,
|
||||
.m_head_2,
|
||||
.m_head_1,
|
||||
.m_head_0,
|
||||
.m_hair_blond,
|
||||
.m_hair_black,
|
||||
.m_hair_brown,
|
||||
.m_hair_white,
|
||||
.m_armor_5,
|
||||
.m_armor_4,
|
||||
.m_armor_3,
|
||||
.m_armor_2,
|
||||
.m_armor_1,
|
||||
.m_armor_0,
|
||||
.m_skin_dead,
|
||||
.m_skin_orc,
|
||||
.m_skin_asian,
|
||||
.m_skin_black,
|
||||
.m_skin_white
|
||||
background: url("../img/sprites/male_sprites.png") no-repeat
|
||||
|
||||
.m_weapon_6 {background-position: 0 0; width: 90px; height: 90px}
|
||||
.m_weapon_5 {background-position: -90px 0; width: 90px; height: 90px}
|
||||
.m_weapon_4 {background-position: -180px 0; width: 90px; height: 90px}
|
||||
.m_weapon_3 {background-position: -270px 0; width: 90px; height: 90px}
|
||||
.m_weapon_2 {background-position: -360px 0; width: 90px; height: 90px}
|
||||
.m_weapon_1 {background-position: -450px 0; width: 90px; height: 90px}
|
||||
.m_weapon_0 {background-position: -540px 0; width: 90px; height: 90px}
|
||||
.m_shield_5 {background-position: -630px 0; width: 90px; height: 90px}
|
||||
.m_shield_4 {background-position: -720px 0; width: 90px; height: 90px}
|
||||
.m_shield_3 {background-position: -810px 0; width: 90px; height: 90px}
|
||||
.m_shield_2 {background-position: -900px 0; width: 90px; height: 90px}
|
||||
.m_shield_1 {background-position: -990px 0; width: 90px; height: 90px}
|
||||
.m_head_5 {background-position: -1080px 0; width: 90px; height: 90px}
|
||||
.m_head_4 {background-position: -1170px 0; width: 90px; height: 90px}
|
||||
.m_head_3 {background-position: -1260px 0; width: 90px; height: 90px}
|
||||
.m_head_2 {background-position: -1350px 0; width: 90px; height: 90px}
|
||||
.m_head_1 {background-position: -1440px 0; width: 90px; height: 90px}
|
||||
.m_head_0 {background-position: -1530px 0; width: 90px; height: 90px}
|
||||
.m_hair_blond {background-position: -1620px 0; width: 90px; height: 90px}
|
||||
.m_hair_black {background-position: -1710px 0; width: 90px; height: 90px}
|
||||
.m_hair_brown {background-position: -1800px 0; width: 90px; height: 90px}
|
||||
.m_hair_white {background-position: -1890px 0; width: 90px; height: 90px}
|
||||
.m_armor_5 {background-position: -1980px 0; width: 90px; height: 90px}
|
||||
.m_armor_4 {background-position: -2070px 0; width: 90px; height: 90px}
|
||||
.m_armor_3 {background-position: -2160px 0; width: 90px; height: 90px}
|
||||
.m_armor_2 {background-position: -2250px 0; width: 90px; height: 90px}
|
||||
.m_armor_1 {background-position: -2340px 0; width: 90px; height: 90px}
|
||||
.m_armor_0 {background-position: -2430px 0; width: 90px; height: 90px}
|
||||
.m_skin_dead {background-position: -2520px 0; width: 90px; height: 90px}
|
||||
.m_skin_orc {background-position: -2610px 0; width: 90px; height: 90px}
|
||||
.m_skin_asian {background-position: -2700px 0; width: 90px; height: 90px}
|
||||
.m_skin_black {background-position: -2790px 0; width: 90px; height: 90px}
|
||||
.m_skin_white {background-position: -2880px 0; width: 90px; height: 90px}
|
||||
|
||||
|
||||
|
||||
// narrower spriting for customize modal
|
||||
.customize-menu
|
||||
// shared option-box styles
|
||||
[class^="m_hair"], [class^="m_skin"], .m_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
// head
|
||||
.m_head_0
|
||||
background-position: -1557px -9px;
|
||||
|
||||
// hair
|
||||
.m_hair_blond
|
||||
background-position: -1647px -4px;
|
||||
.m_hair_black
|
||||
background-position: -1737px -4px;
|
||||
.m_hair_brown
|
||||
background-position: -1827px -4px;
|
||||
.m_hair_white
|
||||
background-position: -1917px -4px;
|
||||
|
||||
// skin
|
||||
.m_skin_dead
|
||||
background-position: -2547px -20px;
|
||||
.m_skin_orc
|
||||
background-position: -2637px -20px;
|
||||
.m_skin_asian
|
||||
background-position: -2727px -20px;
|
||||
.m_skin_black
|
||||
background-position: -2817px -20px;
|
||||
.m_skin_white
|
||||
background-position: -2907px -20px;
|
||||
Loading…
Reference in a new issue