User:Bluemorpho/common.css

.audio-button { display: inline-block; vertical-align: text-top; width: 1em; height: 1em; overflow: hidden; border-radius: 3px; background-color: #C4D167; transition: background-color .2s; cursor: pointer; background-repeat: no-repeat; background-position: center; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/8/85/OggPlayer_Play.png'); background-size: 18px auto; } .audio-button-parent { cursor: pointer; } .audio-button.now-playing, .audio-button:hover, .audio-button-parent:hover > .click-parent { background-color: #C4D167; } .audio-button.now-playing { background-image: url('https://static.miraheze.org/twistedwonderlandwiki/3/3e/OggPlayer_Stop.png'); background-size: 18px auto; } .audio-button.no-audio { cursor: help; background-color: #337701; background-size: 18px auto; background-image: url('https://static.miraheze.org/twistedwonderlandwiki/b/b3/OggPlayer_Mute.png'); } .ogg-player audio, .ogg-player video { display: inline-block; } .ogg-player .info-icon { display: none; position: absolute; z-index: 2; background-color: transparent; background-image: url('https://images.wikia.nocookie.net/common/skins/shared/images/sprite.png'); background-repeat: no-repeat; background-position: -1228px 0; height: 18px; width: 18px; } .ogg-audio-player .info-icon { background-color: rgba(0, 0, 0, .5); margin: -5px 0 0 -5px; border-radius: 100%; } .ogg-video-player .info-icon { margin: 2px 0 0 -20px; } .ogg-player:hover .info-icon { display: inline-block; } .audio-button>*{ display: none; }