User:Bluemorpho/common.css

/* CSS for Audio button */

.audio-lilia { width: 50px; height: 50px; background-color: transparent; border: none; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png'); display: inline-block; background-size: 50px auto; filter: grayscale(50%); transition: filter 1s, background-image 1s, } .audio-lilia.playing, .audio-lilia:hover, .audio-lilia-parent:hover > .click-parent { background-color: transparent !important; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/7/71/Lilia_Music_2.png'); background-size: 50px auto; filter: none;} .audio-lilia.playing { animation-duration: 3s; animation-name: wiggle; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes wiggle { 0% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-20deg);} } .audio-lilia.no-audio { background-color: transparent; background-size: 50px auto; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/d/d1/Lilia_Music_1.png'); filter: grayscale(100%); }

.audio-lilia>*{ display: none; } /* Audio Button CSS End */