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

Content deleted Content added
remove tests, reactivate the commented-out rules as mobile-only rules
fix
 
(5 intermediate revisions by the same user not shown)
Line 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 35 ⟶ 45:
}
 
/* Make sure the labels are underneath not alongside the gallery */
.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;
}
 
Line 45 ⟶ 66:
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;
}
 
/*******************************************************************************
Line 56 ⟶ 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).
******************************************************************************/