Zoran at 05:36, 16 July 2021

2021-07-16T05:36:20Z

Zoran: Zoran created the page Module:Random slideshow/styles.css using a non-default content model "CSS"

2021-07-16T05:36:07Z

Zoran created the page Module:Random slideshow/styles.css using a non-default content model "CSS"

New page

← Older revision	Revision as of 05:36, 16 July 2021
Line 1:	Line 1:
	+	/* {{pp-template}} */
	+	/* Hide the toggle gallery button */
	+	.randomSlideshow-container > .gallery.mw-gallery-slideshow > .gallerycarousel > div > div > div > span:nth-child(2) {
	+	display: none;
	+	}

	+	/* 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;
	+	}
	+
	+	/*******************************************************************************
	+	* MOBILE-ONLY STYLES
	+	*******************************************************************************
	+	* Mobile-only can targeted by prefixing these selectors:
	+	*
	+	* .randomSlideshow-container ul.gallery:first-child
	+	*
	+	* This is becaue the div with class "nomobile" only gets included in the html
	+	* for the desktop website, and not on mobile (except in Template namespace).
	+	******************************************************************************/
	+
	+	/* Make labels sit side-by-side */
	+	.randomSlideshow-container ul.gallery:first-child label {
	+	display:inline-block !important; /* overrides inline style */
	+	padding:0.2em 0.3em;
	+	}
	+
	+	/* Position the radio input in the center */
	+	.randomSlideshow-container ul.gallery:first-child label,
	+	.randomSlideshow-container ul.gallery:first-child input {
	+	vertical-align: middle;
	+	}
	+	/* Make radio inputs bigger */
	+	.randomSlideshow-container ul.gallery:first-child input {
	+	transform: scale(1.4)
	+	}
	+
	+	/* Hide the "Show all" option */
	+	.randomSlideshow-container ul.gallery:first-child label:last-child {
	+	display:none !important; /* overrides inline style */
	+	}
	+
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox {
	+	/* Make sure the labels are underneath not alongside the gallery */
	+	display:block;
	+	/* Center gallery items within the gallery container */
	+	margin: auto;
	+	}
	+
	+	/* Remove excess padding around captions */
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox li,
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox div,
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox p {
	+	padding-top:0;
	+	padding-bottom:0;
	+	margin:0;
	+	}
	+
	+	/* Center the gallery within its container */
	+	.randomSlideshow-container ul.gallery.mw-gallery-slideshow:first-child {
	+	position: relative;
	+	left: 50%;
	+	transform: translateX(-50%);
	+	display: inline-block; /* fallback */
	+	text-align:center; /* fallback: place the radio inputs in the center */
	+	display: flex;
	+	flex-wrap: wrap;
	+	justify-content: center;
	+	}
	+	/* Place radio inputs at the top, and gallery contents below */
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox {
	+	order: 99999;
	+	flex-shrink: 0;
	+	}
	+	.randomSlideshow-container ul.gallery:first-child label {
	+	flex: 0 0;
	+	}
	+
	+	/* Allow descriptions to take up the full width of the container */
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox {
	+	width: 100% !important; /* overrides inline style */
	+	}
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox > div,
	+	.randomSlideshow-container ul.gallery:first-child .gallerybox > div > div {
	+	width: inherit !important; /* overrides inline style */
	+	max-width: 100%;
	+	text-align: center;
	+	}
	+
	+	/*******************************************************************************
	+	* DESKTOP-ONLY STYLES
	+	*******************************************************************************
	+	* Desktop-only can targeted by prefixing these selectors:
	+	*
	+	* .randomSlideshow-container .nomobile+ul
	+	*
	+	* This is becaue the div with class "nomobile" only gets included in the html
	+	* for the desktop website, and not on mobile (except in Template namespace).
	+	******************************************************************************/
	+
	+	/* Hide all the switcher labels */
	+	.randomSlideshow-container .nomobile+ul label {
	+	display:none !important; /* overrides inline style */
	+	}

Module:Random slideshow/styles.css - Revision history

Zoran at 05:36, 16 July 2021

Zoran: Zoran created the page Module:Random slideshow/styles.css using a non-default content model "CSS"