Initial implementation of Action Skill

This commit is contained in:
Aldi Doanta 2018-05-25 00:55:12 +08:00
parent b7d8ebbd98
commit 43c78075a7
2 changed files with 30 additions and 2 deletions

View file

@ -186,6 +186,12 @@ body.choicePage .wrapper {
height: 53px; height: 53px;
} }
.skill-action {
display: inline-block;
position: relative;
cursor: pointer;
}
.points { .points {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
@ -243,7 +249,9 @@ legend {
display: none; display: none;
} }
.tree .description { .tree .description,
.skill-action .description
{
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
@ -264,6 +272,11 @@ legend {
right: 110%; right: 110%;
} }
.skill-action .description {
top: 10%;
left: 105%;
}
.tier[data-level='4'] .description { .tier[data-level='4'] .description {
top: auto; top: auto;
bottom: -59px; bottom: -59px;
@ -279,7 +292,8 @@ legend {
bottom: 0; bottom: 0;
} }
.tree .description h2 { .tree .description h2,
.skill-action .description h2 {
padding: 0.15em 0; padding: 0.15em 0;
margin-bottom: 0.15em; margin-bottom: 0.15em;
font-size: 125%; font-size: 125%;
@ -362,6 +376,14 @@ legend {
display: none; display: none;
} }
.skill-action:hover .description {
display: block;
}
.skill-action:hover .description:hover {
display: none;
}
.green legend { .green legend {
color: #41974D; color: #41974D;
} }

View file

@ -17,6 +17,12 @@
<h3>Level <span class="charLevel">5</span> Mechromancer</h3> <h3>Level <span class="charLevel">5</span> Mechromancer</h3>
</div> </div>
<img unselectable="on" class="portrait" src="mechromancerPortrait.png"> <img unselectable="on" class="portrait" src="mechromancerPortrait.png">
<div>
<div class="skill-action"><img src="icons/mechromancer-actionskill.png" />
<div class="description"><h2>Summon Deathtrap</h2>Action Skill. Summon Deathtrap to fight for you. Cooldown: 60 seconds</div>
<div class="points"></div>
</div>
</div>
<div class="treeCollection"> <div class="treeCollection">
<div class="treewrapper green"> <div class="treewrapper green">
<div class="bglayer gray"></div> <div class="bglayer gray"></div>