Module:Random slideshow/sandbox/styles.css: Difference between revisions

Revision as of 06:47, 29 April 2021

Latest revision as of 04:24, 3 May 2021

(16 intermediate revisions by the same user not shown)

Line 4:

}

/* Visually hide the labels' text content, but retain screenreader access (hopefully) */

@media screen and ( max-width: 720px ) {

.randomSlideshow-container .randomSlideshow-sr-only {

/* On mobile devices, only show the first four images */

display:block;

.randomSlideshow-container > .gallery.mw-gallery-slideshow > li:nth-child(n+5) {

width:1px;

display: none;

height:1px;

}

text-indent:-999px;

overflow:hidden;

.randomSlideshow-container > .gallery.mw-gallery-slideshow {

}

padding-left: 0;

padding-right: 0;

/*******************************************************************************

display: flex;

* MOBILE-ONLY STYLES

flex-wrap: wrap;

*******************************************************************************

justify-content: space-around;

* Mobile-only can targeted by prefixing these selectors:

align-items: flex-start;

}*

* .randomSlideshow-container ul.gallery:first-child

*

.randomSlideshow-container > .gallery.mw-gallery-slideshow > li {

* This is becaue the div with class "nomobile" only gets included in the html

width: initial !important; /* overrides inline style */

* for the desktop website, and not on mobile (except in Template namespace).

margin: 0 0.5em;

******************************************************************************/

}

/* Make labels sit side-by-side */

.randomSlideshow-container > .gallery.mw-gallery-slideshow > li > div > div > div {

.randomSlideshow-container ul.gallery:first-child label {

margin: 0.5em 0 !important; /* overrides inline style */

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 */

}