From 43c78075a78ed3d7ca59ab5a00ee12c4e6b5c08e Mon Sep 17 00:00:00 2001
From: Aldi Doanta <aldi@insignia.vc>
Date: Fri, 25 May 2018 00:55:12 +0800
Subject: [PATCH] Initial implementation of Action Skill

---
 main.css          | 26 ++++++++++++++++++++++++--
 mechromancer.html |  6 ++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/main.css b/main.css
index 11cc638..389c35c 100644
--- a/main.css
+++ b/main.css
@@ -186,6 +186,12 @@ body.choicePage .wrapper {
   height: 53px;
 }
 
+.skill-action {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+}
+
 .points {
   visibility: hidden;
   position: absolute;
@@ -243,7 +249,9 @@ legend {
   display: none;
 }
 
-.tree .description {
+.tree .description,
+.skill-action .description
+ {
   display: none;
   position: absolute;
   top: 0;
@@ -264,6 +272,11 @@ legend {
   right: 110%;
 }
 
+.skill-action .description {
+  top: 10%;
+  left: 105%;
+}
+
 .tier[data-level='4'] .description {
   top: auto;
   bottom: -59px;
@@ -279,7 +292,8 @@ legend {
   bottom: 0;
 }
 
-.tree .description h2 {
+.tree .description h2,
+.skill-action .description h2 {
   padding: 0.15em 0;
   margin-bottom: 0.15em;
   font-size: 125%;
@@ -362,6 +376,14 @@ legend {
   display: none;
 }
 
+.skill-action:hover .description {
+  display: block;
+}
+
+.skill-action:hover .description:hover {
+  display: none;
+}
+
 .green legend {
   color: #41974D;
 }
diff --git a/mechromancer.html b/mechromancer.html
index 51b803e..cbf9bb1 100644
--- a/mechromancer.html
+++ b/mechromancer.html
@@ -17,6 +17,12 @@
 	<h3>Level <span class="charLevel">5</span> Mechromancer</h3>
 </div>
 <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="treewrapper green">
 	<div class="bglayer gray"></div>