میڈیا وکی: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 */
#content > #GallerySlideStartButtons {
	font-size:80%;
}

#GallerySlideStartButtons {
	float:left;
	white-space: nowrap;
	position: relative;
}

#GallerySlideStartButtons span.ui-button-text {
	overflow: hidden;
}

#GallerySlideStartButtonsInner {
	position: relative;
	right: -4px;
}

/* Hide the button in print view */
@media print {
        #GallerySlideStartButtons {
                display:none !important;
        }
}

/*! 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. */
/* [[File:Slideshow sprite.png]] */
/* @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; } 
 
#SlideContainer {
	width:100%;
	height:0px;
	background: #3B3B3B;
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 1002;
	line-height: 2em;
	font: small sans-serif;
}

#GallerySlideHelpSplash {
	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;
}

.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. */
/* [[File:Gnome-media-playback-sprite.png]] */
/* @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. */
/* [[File:Slideshow menu icon sprite.png]] */
/* @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:left;
	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 {
	right: 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 {
	right: -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;
	right:-30px;
	font-size: 30px;
}
 
ul.com-gs-thumbs a.com-gs-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: left;
    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;
	right: 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;
}
 
.slideshow-container 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;
}
 
#com-gs-thumbs.navigation, .slideshow-container, div.controls {
	overflow: hidden;
	margin: 0 25px;
}
 
ul.com-gs-thumbs {
	position: relative;
	margin: 0;
	padding: 0;
	right:0;
	height: 80px;
	width: 10000px;
	overflow: hidden;
}
ul.com-gs-thumbs li, ul.com-gs-thumbs {
	display: inline-block;
	zoom: 1;
	display:inline!ie;
}
ul.com-gs-thumbs li {
	padding: 0;
	margin: 2px;
	list-style: none;
}
 
a.com-gs-thumb {
	padding: 1px;
	display: block;
}
 
a.com-gs-thumb:focus, div.slideshow a.advance-link:focus {
	outline: none;
}
 
ul.com-gs-thumbs img {
	border: none;
	display: block;
}