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

Revision as of 07:29, 29 April 2021

Latest revision as of 04:24, 3 May 2021

(14 intermediate revisions by the same user not shown)

Line 4:

}

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

.randomSlideshow-container .galleryboxrandomSlideshow-sr-only { display:block; }

/* // TODO */

display:block;

width:1px;

height:1px;

text-indent:-999px;

overflow:hidden;

}

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

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

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

}

/* Make sure the labels are underneath not alongside the gallery */

.randomSlideshow-container .gallerybox { display:block; }