mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-01 07:21:15 +00:00
tweak :active transition animation for more tactile feedback
This commit is contained in:
Zachary Kain
parent
53a197097d
commit
b638ee5ea6
4 changed files with 113 additions and 7 deletions
|
|
@ -38,11 +38,17 @@
|
|||
.character-sprites span
|
||||
position: absolute
|
||||
|
||||
table.customize td
|
||||
padding: 10px
|
||||
|
||||
table.customize td div
|
||||
cursor: pointer
|
||||
-webkit-transition: 0.25s ease-out
|
||||
-moz-transition: 0.25s ease-out
|
||||
transition: 0.25s ease-out
|
||||
-webkit-transition: 0.5s ease-out
|
||||
-moz-transition: 0.5s ease-out
|
||||
transition: 0.5s ease-out
|
||||
|
||||
table.customize td div:active
|
||||
background-color: rgb(255, 242, 204);
|
||||
background-color: rgb(255, 242, 204);
|
||||
-webkit-transition: none
|
||||
-moz-transition: none
|
||||
transition: none
|
||||
|
|
@ -76,3 +76,46 @@
|
|||
.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
|
||||
// shared option-box styles
|
||||
[class^="f_hair"], [class^="f_skin"], [class^="f_armor"], .f_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: grey;
|
||||
border: 1px solid black;
|
||||
|
||||
// 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: -2817px -35px;
|
||||
.f_armor_0_v1
|
||||
background-position: -2907px -35px;
|
||||
|
|
@ -66,3 +66,39 @@
|
|||
.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
|
||||
[class^="m_hair"], [class^="m_skin"], .m_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: grey;
|
||||
border: 1px solid black;
|
||||
|
||||
// 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;
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
<!-- $table-of-contents
|
||||
===================================
|
||||
do a find for the string after "→"
|
||||
-----------------------------------
|
||||
→ $modal-template
|
||||
→ $customizations-modal
|
||||
→ $avatar-template
|
||||
=================================== -->
|
||||
|
||||
<Title:>
|
||||
HabitRPG | Gamify Your Life
|
||||
|
||||
|
|
@ -127,11 +136,20 @@
|
|||
</@footer>
|
||||
</app:myModal>
|
||||
|
||||
<!-- $customizations-modal -->
|
||||
<app:myModal modalId="customizations-modal" header="Customize">
|
||||
{#with _user.preferences}
|
||||
<table class='customize'><tr>
|
||||
<td><div class='m_head_0' x-bind='click:customizeGender' data-value='m'></div></td>
|
||||
<td><div class='f_head_0' x-bind='click:customizeGender' data-value='f'></div></td>
|
||||
|
||||
<table>
|
||||
<td>
|
||||
<app:avatar profile={_user} />
|
||||
</td>
|
||||
</table>
|
||||
<table class='customize'>
|
||||
<tr>Change Gender:</tr>
|
||||
<tr>
|
||||
<td><div class='m_head_0' x-bind='click:customizeGender' data-value='m'></div>Male</td>
|
||||
<td><div class='f_head_0' x-bind='click:customizeGender' data-value='f'></div>Female</td>
|
||||
</tr></table>
|
||||
|
||||
<table class='customize'><tr>
|
||||
|
|
@ -382,6 +400,8 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- $modal-template -->
|
||||
<myModal: nonvoid>
|
||||
{{#if @noDismiss}}<div data-action="backdrop" class="modal-backdrop"></div>{{/}}
|
||||
<div class="modal {{#unless @noDismiss}}hide{{/}}" id={{@modalId}} role="dialog">
|
||||
|
|
@ -547,6 +567,7 @@
|
|||
</li>
|
||||
{/}
|
||||
|
||||
<!-- $avatar-template -->
|
||||
<avatar:>
|
||||
<div class="avatar {{#if @main}}main-avatar{{/}}" data-toggle='{{#if @main}}modal{{/}}' data-target='{{#if @main}}#customizations-modal{{/}}'>
|
||||
<div class='character-sprites'>
|
||||
|
|
|
|||
Loading…
Reference in a new issue