MediaWiki:OggPlayer.css

.audio-button { display: inline-block; vertical-align: text-top; width: 1em; height: 1em; overflow: hidden; border-radius: 3px; background-color: #006cb0; transition: background-color .2s; cursor: pointer; background-repeat: no-repeat; background-position: center; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdmlld0JveD0iMCAwIDE4IDE4IiB2ZXJzaW9uPSIxLjEiIHk9IjBweCIgeD0iMHB4IiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxtZXRhZGF0YT48cmRmOlJERj48Y2M6V29yayByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPjxkYzp0aXRsZS8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxwYXRoIHN0eWxlPSJjb2xvci1yZW5kZXJpbmc6YXV0bzt0ZXh0LWRlY29yYXRpb24tY29sb3I6IzAwMDAwMDtjb2xvcjojMDAwMDAwO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtzaGFwZS1yZW5kZXJpbmc6YXV0bztzb2xpZC1jb2xvcjojMDAwMDAwO2Jsb2NrLXByb2dyZXNzaW9uOnRiO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO2ltYWdlLXJlbmRlcmluZzphdXRvO3doaXRlLXNwYWNlOm5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmUiIGQ9Im00LjQ4MjQgNGMtMC4yNjkyIDAuMDA5NS0wLjQ4MjUgMC4yMzA2LTAuNDgyNCAwLjV2OWMwLjAwMDM3MjYgMC4zNzEwMSAwLjM5MDQ0IDAuNjEyNDMgMC43MjI2NiAwLjQ0NzI3bDkuMDAwMy00LjQ5OTdjMC4zNjg1OC0wLjE4NDI4IDAuMzY4NTgtMC43MTAyNiAwLTAuODk0NTNsLTktNC41Yy0wLjA3NDgtMC4wMzc0LTAuMTU3NC0wLjA1NTUtMC4yNDA2LTAuMDUyOHoiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=='); } .audio-button-parent { cursor: pointer; } .audio-button.now-playing, .audio-button:hover, .audio-button-parent:hover > .click-parent { background-color: #b30000; } .audio-button.now-playing { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdmlld0JveD0iMCAwIDE4IDE4IiB2ZXJzaW9uPSIxLjEiIHk9IjBweCIgeD0iMHB4IiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxtZXRhZGF0YT48cmRmOlJERj48Y2M6V29yayByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPjxkYzp0aXRsZS8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxwYXRoIHN0eWxlPSJjb2xvci1yZW5kZXJpbmc6YXV0bzt0ZXh0LWRlY29yYXRpb24tY29sb3I6IzAwMDAwMDtjb2xvcjojMDAwMDAwO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtzaGFwZS1yZW5kZXJpbmc6YXV0bztzb2xpZC1jb2xvcjojMDAwMDAwO2Jsb2NrLXByb2dyZXNzaW9uOnRiO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO2ltYWdlLXJlbmRlcmluZzphdXRvO3doaXRlLXNwYWNlOm5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmUiIGQ9Im00LjUgNGMtMC4yNzYxIDAtMC41IDAuMjIzOS0wLjUgMC41djljMC4wMDAwMjc2IDAuMjc2MTMgMC4yMjM4NyAwLjQ5OTk3IDAuNSAwLjVoOWMwLjI3NjEzLTAuMDAwMDI4IDAuNDk5OTctMC4yMjM4NyAwLjUtMC41di05YzAtMC4yNzYxLTAuMjI0LTAuNS0wLjUtMC41eiIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIi8+PC9zdmc+'); } .audio-button.no-audio { cursor: help; background-color: #b30000; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdmlld0JveD0iMCAwIDE4IDE4IiB2ZXJzaW9uPSIxLjEiIHk9IjBweCIgeD0iMHB4IiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxwYXRoIHN0eWxlPSJjb2xvci1yZW5kZXJpbmc6YXV0bzt0ZXh0LWRlY29yYXRpb24tY29sb3I6IzAwMDAwMDtjb2xvcjojMDAwMDAwO2lzb2xhdGlvbjphdXRvO21peC1ibGVuZC1tb2RlOm5vcm1hbDtzaGFwZS1yZW5kZXJpbmc6YXV0bztzb2xpZC1jb2xvcjojMDAwMDAwO2Jsb2NrLXByb2dyZXNzaW9uOnRiO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uLXN0eWxlOnNvbGlkO2ltYWdlLXJlbmRlcmluZzphdXRvO3doaXRlLXNwYWNlOm5vcm1hbDt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmUiIGQ9Im00LjUgNGMtMC4yNzYxIDAtMC41IDAuMjIzOS0wLjUgMC41djEuNWMwLjAwMDAyNTUgMC4xMzI2IDAuMDUyNzE2IDAuMjU5NzYgMC4xNDY0OCAwLjM1MzUybDIuNjQ2NSAyLjY0NjUtMi42NDY1IDIuNjQ2Yy0wLjA5MzggMC4wOTQtMC4xNDY1IDAuMjIxLTAuMTQ2NSAwLjM1NHYxLjVjMC4wMDAwMjc2IDAuMjc2MTMgMC4yMjM4NyAwLjQ5OTk3IDAuNSAwLjVoMS41YzAuMTMyNi0wLjAwMDAyNSAwLjI1OTc2LTAuMDUyNzIgMC4zNTM1Mi0wLjE0NjQ4bDIuNjQ2NS0yLjY0NyAyLjY0NiAyLjY0N2MwLjA5NCAwLjA5MyAwLjIyMSAwLjE0NiAwLjM1NCAwLjE0NmgxLjVjMC4yNzYxMy0wLjAwMDAyOCAwLjQ5OTk3LTAuMjIzODcgMC41LTAuNXYtMS41Yy0wLjAwMDAyNS0wLjEzMjYtMC4wNTI3Mi0wLjI1OTc2LTAuMTQ2NDgtMC4zNTM1MmwtMi42NDctMi42NDYgMi42NDctMi42NDY1YzAuMDkzLTAuMDkzNyAwLjE0Ni0wLjIyMDkgMC4xNDYtMC4zNTM1di0xLjVjMC0wLjI3NjEtMC4yMjQtMC41LTAuNS0wLjVoLTEuNWMtMC4xMzI2IDAuMDAwMDI1NC0wLjI1OTc2IDAuMDUyNzE2LTAuMzUzNTIgMC4xNDY0OGwtMi42NDYgMi42NDY1LTIuNjQ2NS0yLjY0NjVjLTAuMDkzNy0wLjA5MzgtMC4yMjA5LTAuMTQ2NS0wLjM1MzUtMC4xNDY1eiIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIi8+PC9zdmc+'); } .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; }