MediaWiki:Gadget-YouTubePopups.css
From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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(https://mario.wiki.gallery/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(https://mario.wiki.gallery/images/a/a7/ShroomYoutubeClose.png) repeat scroll 0% 0%;
position: absolute;
right: -30px;
cursor: pointer;
}
#bodyContent .shroomYoutube a.external {
background-image: url(https://mario.wiki.gallery/images/3/36/ShroomYoutubeIcons.png);
background-position: right 3px;
background-repeat: no-repeat;
}
#bodyContent .shroomYoutube.playState a.external {
background-position: right -17px;
}
#bodyContent .shroomYoutube.pauseState a.external {
background-position: right -37px;
}
#bodyContent .shroomYoutube.stopState a.external {
background-position: right -57px;
}
