Jump to content
Wikipedia The Free Encyclopedia

Module:Random slideshow/sandbox/styles.css

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

AltStyle によって変換されたページ (->オリジナル) /