Open main menu
Home
Random
Donate
Recent changes
Special pages
Community portal
Preferences
About Stockhub
Disclaimers
Search
User menu
Talk
Contributions
Create account
Log in
Editing
Module:Random slideshow/styles.css
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
/* {{pp-template}} */ /* 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-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 */ }
Summary:
Please note that all contributions to Stockhub may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see
Stockhub:Copyrights
for details).
Do not submit copyrighted work without permission!
Cancel
Editing help
(opens in new window)
Templates used on this page:
Template:Pp-template
(
edit
)
Module:Protection banner
(
edit
)