More actions
| (2 intermediate revisions by the same user not shown) | |||
| Line 59: | Line 59: | ||
Alpha Clone State: | Alpha Clone State: | ||
* Omega Skill level, untrainable: darker yellow - {{co|#9F7C0C|█}} | * Omega Skill level, untrainable: darker yellow - {{co|#9F7C0C|█}} | ||
* Omega skill level trained but unusable: lighter yellow - {{co|# | * Omega skill level trained but unusable: lighter yellow - {{co|#CE9F09|█}} | ||
And finally, if a skill is actively being trained "right now" (and queue not paused) it will be flashing between blue and light gray.<br> | And finally, if a skill is actively being trained "right now" (and queue not paused) it will be flashing between blue and light gray.<br> | ||
| Line 80: | Line 80: | ||
| {{co|#9F7C0C|█}} omega untrainable - #9F7C0C | | {{co|#9F7C0C|█}} omega untrainable - #9F7C0C | ||
|- | |- | ||
| {{co|# | | {{co|#CE9F09|█}} omega trained but unusable - #CE9F09 | ||
|- | |- | ||
| {{co|#92B1BA|█}} blue on diagonal - #92B1BA | | {{co|#92B1BA|█}} blue on diagonal - #92B1BA | ||
| Line 86: | Line 86: | ||
| {{co|#9A9A9A|█}} gray on diagonal - #9A9A9A | | {{co|#9A9A9A|█}} gray on diagonal - #9A9A9A | ||
|} | |} | ||
== Test == | |||
{{#css: | |||
.outer-div { | |||
float: left; | |||
margin: 2px; | |||
border: 1px #212121 solid; | |||
background-color: #181818; | |||
padding: 0px 12px 12px 12px; | |||
width: 75%; | |||
} | |||
.skill-entry { | |||
clear: left; | |||
border: 0px; | |||
padding: 12px 0px; | |||
color: #cccccc; | |||
} | |||
.skill-level { | |||
overflow: hidden; | |||
float: left; | |||
margin-right: 2px; | |||
height: 10px; | |||
width: 10px; | |||
background-color: #464646; | |||
} | |||
.untrainable { | |||
height: 4px; | |||
width: 4px; | |||
margin: 3px; | |||
} | |||
.partial { | |||
width: 0px; | |||
height: 0px; | |||
margin-left: 0px; | |||
margin-top: 0px; | |||
border-bottom: 10px solid #cccccc; | |||
border-right: 10px solid transparent; | |||
} | |||
.trained { | |||
background-color: #cccccc; | |||
} | |||
.enqueued { | |||
background-color: #30839C; | |||
} | |||
.omega { | |||
height: 4px; | |||
width: 4px; | |||
margin: 3px; | |||
background-color: #9F7C0C; | |||
} | |||
.omega-trained { | |||
background-color: #CE9F09; | |||
} | |||
.active { | |||
animation-timing-function: linear; | |||
animation-delay: 0s; | |||
animation-duration: 1825ms; | |||
animation-name: active-skill; | |||
animation-iteration-count: infinite | |||
} | |||
@keyframes active-skill { | |||
0% { background-color: #30839C; } | |||
28.75% { background-color: #30839C; } | |||
48% { background-color: #cccccc; } | |||
59% { background-color: #cccccc; } | |||
100% { background-color: #30839C; } | |||
} | |||
}} | |||
<div class="outer-div"> | |||
<div class="skill-entry"> | |||
<div class="skill-level trained"></div> | |||
<div class="skill-level trained"></div> | |||
<div class="skill-level trained"></div> | |||
<div class="skill-level active"></div> | |||
<div class="skill-level"></div> | |||
</div> | |||
<div class="skill-entry"> | |||
<div class="skill-level trained"></div> | |||
<div class="skill-level partial enqueued"></div> | |||
<div class="skill-level enqueued"></div> | |||
<div class="skill-level enqueued"></div> | |||
<div class="skill-level"></div> | |||
</div> | |||
<div class="skill-entry"> | |||
<div class="skill-level omega-trained"></div>Gallente Battlecruiser | |||
<div class="skill-level omega-trained"></div> | |||
<div class="skill-level omega-trained"></div> | |||
<div class="skill-level omega"></div> | |||
<div class="skill-level omega"></div> | |||
</div> | |||
</div> | |||