User:Taylan/vector.css

.mw-debug-pane {
	height: 800px;
}

a.ext-audiobutton[data-state="play"]::before {
	content: ' ';
	background-image: url('data:image/svg+xml,<svg fill="%23ffa03c" height="16px" width="16px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><path d="M256,0C114.608,0,0,114.608,0,256s114.608,256,256,256s256-114.608,256-256S397.392,0,256,0z M256,496C123.664,496,16,388.336,16,256S123.664,16,256,16s240,107.664,240,240S388.336,496,256,496z"/><polygon points="189.776,141.328 189.776,370.992 388.672,256.16 "/></svg>');
	width: 20px;
	height: 20px;
	display: inline-block;
	background-repeat: no-repeat;
	vertical-align: -12%;
	background-position: bottom;
}

a.ext-audiobutton[data-state="pause"]::before {
	content: ' ';
	background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><line fill="none" stroke="%23ffa03c" stroke-width="4" stroke-miterlimit="10" x1="25" y1="23" x2="25" y2="41"/><line fill="none" stroke="%23ffa03c" stroke-width="4" stroke-miterlimit="10" x1="38" y1="23" x2="38" y2="41"/><path fill="none" stroke="%23ffa03c" stroke-width="2" stroke-miterlimit="10" d="M53.92,10.081c12.107,12.105,12.107,31.732,0,43.838c-12.106,12.108-31.734,12.108-43.839,0c-12.107-12.105-12.107-31.732,0-43.838C22.186-2.027,41.813-2.027,53.92,10.081z"/></g></svg>');
	width: 20px;
	height: 20px;
	display: inline-block;
	background-repeat: no-repeat;
	vertical-align: -12%;
	background-position: bottom;
}