More actions
No edit summary |
|||
| 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 untrainable"></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 untrainable"></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> | |||