MediaWiki:Gadget-YouTubePopups.css

/* CSS loaded alongside the YouTube Popups JavaScript for The 'Shroom */

.shroomYoutubeContainer { position: absolute; z-index: 3; transition: opacity 0.4s; opacity: 0; pointer-events: none; }

.shroomYoutubeContainer.visible { opacity: 1; pointer-events: all; }

.shroomYoutubeShade { position: fixed; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; }

.shroomYoutubeBg { position: fixed; top: calc(50% - 168px); left: calc(50% - 219px); border-radius: 13px; background-color: #E8C161; padding: 7px; }

.shroomYoutubeVideoWrapper { display: none; z-index: 1; position: relative; }

.shroomYoutubeVideoWrapper.visible { display: block; }

.shroomYoutubeVideoWrapper iframe { border-radius: 13px; border: transparent; display: block; }

.shroomThrobber { width: 71px; height: 71px; background-image: url(images/3/38/Shroomthrobber.png); animation: shroomThrobber 1s steps(23) infinite; }

.shroomYoutubeBg .shroomThrobber { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; }

@keyframes shroomThrobber { from { background-position: 0 0; } to  { background-position: -1633px 0; } }

.shroomYoutubeClose { width: 24px; height: 24px; background: transparent url(images/a/a7/ShroomYoutubeClose.png) repeat scroll 0% 0%; position: absolute; right: -30px; cursor: pointer; }

background-image: url(images/3/36/ShroomYoutubeIcons.png); background-position: right 3px; background-repeat: no-repeat; }
 * 1) bodyContent .shroomYoutube a.external {

background-position: right -17px; }
 * 1) bodyContent .shroomYoutube.playState a.external {

background-position: right -37px; }
 * 1) bodyContent .shroomYoutube.pauseState a.external {

background-position: right -57px; }
 * 1) bodyContent .shroomYoutube.stopState a.external {