Module:Random slideshow/sandbox/styles.css
Appearance
From Wikipedia, the free encyclopedia
/* 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-containerul.gallery:first-childlabel{ display:inline-block!important;/* overrides inline style */ padding:0.2em0.3em; } /* Position the radio input in the center */ .randomSlideshow-containerul.gallery:first-childlabel, .randomSlideshow-containerul.gallery:first-childinput{ vertical-align:middle; } /* Make radio inputs bigger */ .randomSlideshow-containerul.gallery:first-childinput{ transform:scale(1.4) } /* Hide the "Show all" option */ .randomSlideshow-containerul.gallery:first-childlabel:last-child{ display:none!important;/* overrides inline style */ } .randomSlideshow-containerul.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-containerul.gallery:first-child.galleryboxli, .randomSlideshow-containerul.gallery:first-child.galleryboxdiv, .randomSlideshow-containerul.gallery:first-child.galleryboxp{ padding-top:0; padding-bottom:0; margin:0; } /* Center the gallery within its container */ .randomSlideshow-containerul.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-containerul.gallery:first-child.gallerybox{ order:99999; flex-shrink:0; } .randomSlideshow-containerul.gallery:first-childlabel{ flex:00; } /* Allow descriptions to take up the full width of the container */ .randomSlideshow-containerul.gallery:first-child.gallerybox{ width:100%!important;/* overrides inline style */ } .randomSlideshow-containerul.gallery:first-child.gallerybox>div, .randomSlideshow-containerul.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+ullabel{ display:none!important;/* overrides inline style */ }