MediaWiki:Custom-Common.less/attackspeedbar.less

/* ==============================  Template:Attack speed bar ============================== */ .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: inline-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.weapon { max-width: 150px; b { background-color: #c6dce8; &::after { background-color: #438ab5; }	} }

.attack-speed.monster { max-width: 123px; b { background-color: #ecccc6; &::after { background-color: #861c10; }	} }

.attack-speed.weapon.fastest { b { &::after { width: 100%; } } } .attack-speed.weapon.fast { b { &::after { width: 80%; } } } .attack-speed.weapon.average { b { &::after { width: 60%; } } } .attack-speed.weapon.slow { b { &::after { width: 40%; } } } .attack-speed.weapon.slowest { b { &::after { width: 20%; } } }

.attack-speed.monster.t1 { b { &::after { width: 100%; } } } .attack-speed.monster.t2 { b { &::after { width: 90%; } } } .attack-speed.monster.t3 { b { &::after { width: 80%; } } } .attack-speed.monster.t4 { b { &::after { width: 70%; } } } .attack-speed.monster.t5 { b { &::after { width: 60%; } } } .attack-speed.monster.t6 { b { &::after { width: 50%; } } } .attack-speed.monster.t7 { b { &::after { width: 40%; } } } .attack-speed.monster.t8 { b { &::after { width: 30%; } } } .attack-speed.monster.t9 { b { &::after { width: 20%; } } } .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 { 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; }	} }