// <pre>
/* ==============================
[[Predefinição:Barra de velocidade de ataque]]
============================== */
.attack-speed {
max-width: 150px;
line-height: 1.3em;
display: block;
text-align: center;
b {
width: 100%;
background-color: #dedede;
box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2);
display: block;
border-radius: 2.5px;
height: 5px;
&::after {
display: inline-block;
border-radius: 2.5px;
height: 5px;
content: "";
background-color: #999999;
display: inline-block;
width: 0%;
float: left;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 1px 0 rgba(0,0,0,.1);
}
}
}
.attack-speed.arma {
max-width: 150px;
b {
background-color: #c6dce8;
&::after {
background-color: #438ab5;
}
}
}
.attack-speed.monstro {
max-width: 123px;
b {
background-color: #ecccc6;
&::after {
background-color: #861c10;
}
}
}
.attack-speed.arma.fastest, .attack-speed.arma.maisrapida { b { &::after { width: 100%; } } }
.attack-speed.arma.fast, .attack-speed.arma.rapida { b { &::after { width: 80%; } } }
.attack-speed.arma.average, .attack-speed.arma.media, { b { &::after { width: 60%; } } }
.attack-speed.arma.slow, .attack-speed.arma.lenta { b { &::after { width: 40%; } } }
.attack-speed.arma.slowest, .attack-speed.arma.maislenta { b { &::after { width: 20%; } } }
.attack-speed.monstro.t1, .attack-speed.monster.t1 { b { &::after { width: 100%; } } }
.attack-speed.monstro.t2, .attack-speed.monster.t2 { b { &::after { width: 90%; } } }
.attack-speed.monstro.t3, .attack-speed.monster.t3 { b { &::after { width: 80%; } } }
.attack-speed.monstro.t4, .attack-speed.monster.t4 { b { &::after { width: 70%; } } }
.attack-speed.monstro.t5, .attack-speed.monster.t5 { b { &::after { width: 60%; } } }
.attack-speed.monstro.t6, .attack-speed.monster.t6 { b { &::after { width: 50%; } } }
.attack-speed.monstro.t7, .attack-speed.monster.t7 { b { &::after { width: 40%; } } }
.attack-speed.monstro.t8, .attack-speed.monster.t8 { b { &::after { width: 30%; } } }
.attack-speed.monstro.t9, .attack-speed.monster.t9 { b { &::after { width: 20%; } } }
.attack-speed.monstro.t10, .attack-speed.monster.t10 { b { &::after { width: 10%; } } }
@-webkit-keyframes "random-speed" {
0% { width: 20%; }
25% { width: 40%; }
50% { width: 60%; }
75% { width: 80%; }
100% { width: 100%; }
}
@keyframes "random-speed" {
0% { width: 20%; }
25% { width: 40%; }
50% { width: 60%; }
75% { width: 80%; }
100% { width: 100%; }
}
.attack-speed.random, .attack-speed.aleatorio {
b {
&::after {
-webkit-animation-name: random-speed;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-name: random-speed;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}