MediaWiki:Gadget-GallerySlideshow.css

/* At some point the MW-devs decided making mw.util.$content #content instead of #bodyContent */ /* But #content does not have the usual font applied */ font-size:80%; }
 * 1) content > #GallerySlideStartButtons {

float:right; overflow: hidden; white-space: nowrap; position: relative; }
 * 1) GallerySlideStartButtons {

position: absolute; right: 4px; }
 * 1) GallerySlideStartButtonsInner {

/*! CREDIT: (c) 2012 by Rainer Rillke, CC-By-SA, GFDL, GPL, LGPL; choose what you like best */ /* Using a sprite in CSS for performance reasons. Thumbnailing SVG takes too long. Using Base64 encoded file because it is loaded on nearly each page view anyway. */ /* */ /* @noflip */ .ui-button .ui-icon-slideshow { background-repeat: no-repeat; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAQCAYAAADOFPsRAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADQklEQVRYhe2Y32tSYRjHTyyCGLE7r7oq8lgkCwTvdhX+BeI/oOeo3WweNrZpo2LdzLYgrNVFdOFU1o6xii67CPJCugghGcwpmbalCdVya7Ef55y+53jOcJtsbus9wvCBD+/zvox9X/lwXl8PRbXr5JbL7UowHmamVfmSJCVAy/IpXyQBWpZPB/gE7Y8fPZ9xMwVZ4n/c06EK8gqyxFblQ15Bkdiiov18QZbY1B+73e4uCJOagcRmIapLarJI5FNDfBdkSU1BoC4gH8KkZmj4DzSBY8Gx1fGJ8RWZ4L2gEBwPbmnz0buja6QF5vP5z7lcLitTKBQ2wZo2X1pa+kpa4JuFkvS++KMhTz7kiAt8lfsuvV382ZCnH/MHCww9DP2efDy5LINeCD0KbWrzifsTK6yHXSPxATSBc6hPamUymY35+flVbZ7NZhdEUfxDIl8TuPh3Q6piH41IfvslnemPEfn8msA55H9BViPelZalqyMvGue3BbYFHqvaAtsCj1cnRSAEbYF1BS8rYhS1uR63UAjaAn9lBEHAIAraXI9b6On+mNA5NL1e47nYOTgtanM9bqFXRuJC9+3ZdYU7L8XuW7OiNt/3FupwODoYhrHUg9+AJYZlUvVrLMteI/EB4KUDWHZRAqlda0TyKQffQfXGLDvoi5QoXzS1Y80XI5ZvGuYt9UBWCaTq1y4F+ObylSeSZcoujyvNcdxZIpvep9QnsgzSQPf82hMZLYM0xfG658tPpNHPl01+Pn3+KPmQF8ZxWcVYgcQHBPa4b0FaWP3qqQDd83FUhikuUsVYAbrnm4ZnwrQ/XoXECj3MHy4fx6Qd8jKgyHiYpDxC4nVCe91TEGYHGVCU7w7qqFs+jk47pGUo31SR6osmlbE3qls+5NlxdGboAF80BWaS6IvGQLy5fK/Xa4CwssvrsmrvQiHRJvdOp/Mc4b3L8gzq0WmV1HehwKb2xPOpgSkD5JUpLmbdfhfaF7Ep/eAz4vkXB2YN8tFpvMlbtXehlwO8TekHXx+cr15meuQe34Nm5w0nLffq2imy29++zPSovRnQat8DiOcrlxkuouRTXNQMeXStl9f0yTf640q+aYg30yO8kl9b25v/D7228kP7LK3bAAAAAElFTkSuQmCC") !important; } .ui-state-default .ui-icon-slideshow { background-position: -96px 0; width: 16px; height: 16px; } .ui-state-hover .ui-icon-slideshow { background-position: -64px 0; width: 16px; height: 16px; } .ui-state-active .ui-icon-slideshow { background-position: 0 0; width: 16px; height: 16px; } .skin-vector .ui-state-error .ui-icon-slideshow, .skin-vector .ui-button-red .ui-icon-slideshow, .skin-vector .ui-button-green .ui-icon-slideshow, .skin-vector .ui-button-blue .ui-icon-slideshow, .skin-vector .ui-button-orange .ui-icon-slideshow{ background-position: -32px 0; width: 16px; height: 16px; } width:100%; height:0px; background: #3B3B3B; position: fixed; top: 0px; left: 0px; z-index: 1002; line-height: 2em; font: small sans-serif; }
 * 1) SlideContainer {

display: block; position: fixed; border: 1px solid #000; background: #DDD; max-width: 350px; z-index: 1005; } .cat-label, .license-label { border: #AAA solid 1px; padding: 2px; white-space:nowrap; } .cat-label { background: #000; color: #EEE; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; } .cat-label:visited { color: #5695FD; } .license-label { color: gray; display: inline-block; }
 * 1) GallerySlideHelpSplash {

.gs-author-label, .gs-date-label, .gs-uploader-label { font-weight: bold; display: inline-block; min-width: 75px; } .cat-wrap, .license-wrap { font-size: 0.5em; margin-left:2px; margin-top:10px; line-height:2em; } .digit-separator { font-size:70%; font-weight:100; }

/*! CREDIT: GNOME icon artists: Licensed under GPL. http://www.gnu.org/copyleft/gpl-3.0.html */ /* Using a sprite in CSS for performance reasons. Thumbnailing SVG takes too long. */ /* */ /* @noflip */ .gs-play { background: url("//upload.wikimedia.org/wikipedia/commons/0/07/Gnome-media-playback-sprite.png") no-repeat top left; } /* @noflip */ .gs-play-bwd{ background-position: 5px 5px; width: 35px; height: 35px; } /* @noflip */ .gs-play-fwd{ background-position: -40px 5px; width: 35px; height: 35px; } /* @noflip */ .gs-play-pause{ background-position: -85px 5px; width: 35px; height: 35px; } /* @noflip */ .gs-play-play{ background-position: -130px 5px; width: 35px; height: 35px; } /* In RTL languages, the arrows point to the wrong direction, Fix this */ /* @noflip */ body.rtl .gs-play-fwd{ background-position: 5px 5px; width: 35px; height: 35px; } /* @noflip */ body.rtl .gs-play-bwd{ background-position: -40px 5px; width: 35px; height: 35px; }

/*! CREDIT: Key icons: Image from the Silk icon theme by Mark James, CC-By; Clock icon: http://cliparts101.com, CC0; Help icon: Markus Hohenwarter, Michael Borcherds, CC-By-SA (but was part of a software licensed as whole under GPL)*/ /* Using a sprite in CSS for performance reasons. Loading single images does not create a good user experience. */ /* */ /* @noflip */ .gs-icon { display: inline-block; background: url("//upload.wikimedia.org/wikipedia/commons/1/11/Slideshow_menu_icon_sprite.png") no-repeat top left; } /* @noflip */ .gs-icon-clock{ background-position: 0 0; } /* @noflip */ .gs-icon-help{ background-position: -32px 0; } /* @noflip */ .gs-icon-keyGo{ background-position: -64px 0; } /* @noflip */ .gs-icon-zkey{ background-position: -96px 0; }

.gs-icon-clock, .gs-icon-help, .gs-icon-keyGo, .gs-icon-zkey { height:16px; width:16px; }

.continue-key-insert, .gs-help-link, .delay-insert { float:right; margin-left:3px; margin-right:3px; display:block; } .cont-key-container { word-wrap: break-word; padding: 7px 7px 7px 12px; background-color: #EEE; background-position: -93px 50%; font-size: 6px; margin-top: 10px; display: block; }

.cont-key-container > a { color: #CCD; }

.cont-key-container > a:hover { color: #55A; }

.gs-img-description-desc { background-color: #EEE; margin: 10px 0; }

.gs-img-metrics { color:green; } .gs-img-uploader, .gs-img-description, .gs-img-metrics { font-size:0.7em; margin-top:10px; } .bar-fwd { right: 0; border-radius:2px 0 0 2px ; -webkit-border-radius:2px 0 0 2px ; -moz-border-radius:2px 0 0 2px ; -o-border-radius:2px 0 0 2px ; } .bar-bwd { left: 0; border-radius:0 2px 2px 0; -webkit-border-radius:0 2px 2px 0; -moz-border-radius:0 2px 2px 0; -o-border-radius:0 2px 2px 0; } .bar-fwd, .bar-bwd { width: 15px; background: #888; overflow: visible; opacity: 0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; height: 100%; position: absolute; top: 0; cursor: pointer; } .bar-btn-fwd, .bar-btn-bwd { position:relative; display: none; font-size: 30px; text-align: center; padding-top: 20px; border-radius:2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; background: #888; z-index: 1006; width: 40px; height: 56px; cursor: pointer; top: 45%; } .bar-btn-fwd { left: -30px }

.slideshow-close-button { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; text-align: center; background: #888; z-index: 1019; width: 50px; height: 40px; position: relative; top: 0; left:-30px; font-size: 30px; } ul.thumbs a.thumb { overflow: hidden; width: 75px; height: 75px; } div.slideshow-container, div.slideshow { height: 100%; } div.slideshow { position: relative; display: block; vertical-align: top; } div.loader, div.slideshow a.advance-link, .caption-container { width: 100%; } div.loader, div.slideshow a.advance-link { display: none; } div.content { clear: both; } div.content a:hover, div.content a:active { text-decoration: underline; } div.controls { margin-top: 5px; height: 50px; } div.controls a { padding: 5px; display: inline-block; } div.ss-controls { display:inline-block; } div.nav-controls { margin: 0 auto; width: 136px; border: 1px solid #2B2B2B; padding: 0 15px; border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; -o-border-radius: 80px; margin-top: 6px; opacity: 0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); -o-box-shadow: 3px 2px 7px rgba(0, 0, 0, 0.3); background: #666; background-image: -o-linear-gradient(bottom, rgb(77,77,77) 0%, rgb(171,171,171) 100%); background-image: -moz-linear-gradient(bottom, rgb(77,77,77) 0%, rgb(171,171,171) 100%); background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(77,77,77)), to(rgb(171,171,171))); background-image: -webkit-linear-gradient(bottom, rgb(77,77,77) 0%, rgb(171,171,171) 100%); background-image: -ms-linear-gradient(bottom, rgb(77,77,77) 0%, rgb(171,171,171) 100%); background-image: linear-gradient(bottom, rgb(77,77,77) 0%, rgb(171,171,171) 100%); }

span.image-wrapper img { width: 100%; } div.other-controls { float: right; margin-top: -25px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; opacity: 0.6; }

/* //upload.wikimedia.org/wikipedia/commons/1/1b/Ajax-loader-dark.gif is in the Public Domain */ div.loader { position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-position: center; height: 100%; background-image: url("//upload.wikimedia.org/wikipedia/commons/1/1b/Ajax-loader-dark.gif"); } div.slideshow span.image-wrapper { display: block; position: absolute; top: 0; left: 0; } div.slideshow a.advance-link { display: block; text-align: center; } div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited, div.content a, div.navigation a { text-decoration: none; } div.caption-container { font-size: 1.5em; width: 20%; min-width: 180px; max-width: 320px; position:relative; display:inline-block; vertical-align: top; } span.image-caption { display: block; z-index: 1003; overflow: auto; position:absolute; width: 100%; background:#DDD; padding: 10px; } div.caption { padding: 0 12px; } div.image-title { font-weight: 700; font-size: 1.4em; } div.image-desc { line-height: 1.3em; padding-top: 12px; } div.download { margin-top: 8px; }	overflow: hidden; margin: 0 25px; } ul.thumbs { position: relative; margin: 0; padding: 0; left:0; height: 80px; width: 10000px; overflow: hidden; } ul.thumbs li, ul.thumbs { display: inline-block; zoom: 1; display:inline!ie; } ul.thumbs li { padding: 0; margin: 2px; list-style: none; } a.thumb { padding: 1px; display: block; } a.thumb:focus, div.slideshow a.advance-link:focus { outline: none; } ul.thumbs img { border: none; display: block; }
 * 1) thumbs.navigation, .slideshow-container, div.controls {