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

Revision as of 09:37, 29 April 2021

Latest revision as of 04:24, 3 May 2021

(6 intermediate revisions by the same user not shown)

Line 23:

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

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

/* testing the above */

.randomSlideshow-container ul.gallery:first-child {border:5px solid red}

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

Line 31 ⟶ 28:

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)

}

Line 38 ⟶ 45:

}

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

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

.randomSlideshow-container .gallerybox {

display:block;

/* Center the gallery items within itsthe gallery container */

margin: auto;

}

/* Remove excess padding around captions */

/* Center the gallery within its container *

.randomSlideshow-container ul.gallery.mw:first-gallery-slideshowchild .gallerybox {li,

.randomSlideshow-container ul.gallery:first-child .gallerybox div,

.randomSlideshow-container ul.gallery:first-child {border:5px.gallerybox solidp red}{

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.nomobile+ul {bordergallery:5pxfirst-child solidlabel green}{

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;

}

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

Line 59 ⟶ 99:

* .randomSlideshow-container .nomobile+ul

*

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

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

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

/* testing the above */

.randomSlideshow-container .nomobile+ul {border:5px solid green}

/* Hide all the switcher labels */