MediaWiki:Common.less/attackspeedbar.less

// <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%; } } }

@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 {
			animation-name: random-speed;
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}
	}
}