Jump to content

Module:Random slideshow/sandbox/styles.css

From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by Evad37 (talk | contribs) at 09:19, 29 April 2021 (something broke the auto-sizing on desktop...). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.
/* Hide the toggle gallery button */
.randomSlideshow-container > .gallery.mw-gallery-slideshow > .gallerycarousel > div > div > div > span:nth-child(2)  {
	display: none;
}

/* == On mobile, show the switcher labels in a sort-of gallery-like format == */

/* Make labels sit side-by-side *
.randomSlideshow-container label {
	display:inline-block !important; /* overrides inline style *
	padding:0.2em 0.3em;
}*/

/* Hide the "Show all" option *
.randomSlideshow-container label:last-child {
	display:none !important; /* overrides inline style *
}
/* Make sure the labels are underneath not alongside the gallery *
.randomSlideshow-container .gallerybox {
	display:block;
}
/* Visually hide the labels' text content, but retain screenreader access (hopefully) *
.randomSlideshow-container .randomSlideshow-sr-only {
	display:block;
	width:1px;
	height:1px;
	text-indent:-999px;
	overflow:hidden;
}

/* Center the gallery within its container *
.randomSlideshow-container ul.gallery.mw-gallery-slideshow {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
}

/* == On desktop, hide all the switcher labels == */
.randomSlideshow-container .nomobile+ul label {
	display:none !important; /* overrides inline style */
}