habitica-self-host/public/css/customizer.styl
2013-09-06 19:19:43 +02:00

121 lines
No EOL
2.5 KiB
Stylus

// $customizations-modal layout
.avatar-window
float: right;
margin: 0 1em 0 0
menu
padding: 0;
margin: 0;
.customize-menu
padding: 0;
width: 70%;
list-style: none;
padding-bottom: 10px
menu:before
content: attr(label);
display: block;
font-size: 14px;
font-weight: bold;
line-height: 2
.customize-option
border: 1px solid grey;
background-color: hsl(0, 0%, 93%);
margin-bottom: 10px
cursor: pointer;
-webkit-transition: background-color 0.5s ease-out
-moz-transition: background-color 0.5s ease-out
transition: background-color 0.5s ease-out
.customize-option:active
background-color: rgb(255, 242, 204);
-webkit-transition: none
-moz-transition: none
transition: none
.customize-option:not(:last-of-type)
margin-right: 10px
@media (max-width: 480px) {
.avatar-window {
float: none;
margin-bottom: 1em
}
.customize-menu {
width: 100%;
}
}
// narrower spriting for customize modal
.customize-menu
.m_hair_blond,.m_hair_black,.m_hair_brown,.m_hair_white,
.f_hair_blond,.f_hair_black,.f_hair_brown,.f_hair_white,
.m_skin_dead,.m_skin_orc,.m_skin_asian,.m_skin_black,.m_skin_white,
.f_skin_dead,.f_skin_orc,.f_skin_asian,.f_skin_black,.f_skin_white,
.m_head_0,.f_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;
// 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;