http://wiki.filipefonseca.pt/index.php?action=history&feed=atom&title=Module%3ARandom_slideshow%2Fstyles.css 2026-04-19T06:13:24Z Revision history for this page on the wiki MediaWiki 1.36.1 http://wiki.filipefonseca.pt/index.php?title=Module:Random_slideshow/styles.css&diff=8804&oldid=prev 2021-05-07T06:25:45Z

<p>Better mobile view handling per <a href="/index.php?title=Module_talk:Random_slideshow&amp;action=edit&amp;redlink=1" class="new" title="Module talk:Random slideshow (page does not exist)">Module talk:Random slideshow#Mobile view improvement</a></p> <p><b>New page</b></p><div>/* {{pp-template}} */<br /> /* Hide the toggle gallery button */<br /> .randomSlideshow-container &gt; .gallery.mw-gallery-slideshow &gt; .gallerycarousel &gt; div &gt; div &gt; div &gt; span:nth-child(2) {<br /> display: none;<br /> }<br /> <br /> /* Visually hide the labels' text content, but retain screenreader access (hopefully) */<br /> .randomSlideshow-container .randomSlideshow-sr-only {<br /> display:block;<br /> width:1px;<br /> height:1px;<br /> text-indent:-999px;<br /> overflow:hidden;<br /> }<br /> <br /> /*******************************************************************************<br /> * MOBILE-ONLY STYLES<br /> *******************************************************************************<br /> * Mobile-only can targeted by prefixing these selectors:<br /> *<br /> * .randomSlideshow-container ul.gallery:first-child<br /> *<br /> * This is becaue the div with class &quot;nomobile&quot; only gets included in the html<br /> * for the desktop website, and not on mobile (except in Template namespace).<br /> ******************************************************************************/<br /> <br /> /* Make labels sit side-by-side */<br /> .randomSlideshow-container ul.gallery:first-child label {<br /> display:inline-block !important; /* overrides inline style */<br /> padding:0.2em 0.3em;<br /> }<br /> <br /> /* Position the radio input in the center */<br /> .randomSlideshow-container ul.gallery:first-child label,<br /> .randomSlideshow-container ul.gallery:first-child input {<br /> vertical-align: middle;<br /> }<br /> /* Make radio inputs bigger */<br /> .randomSlideshow-container ul.gallery:first-child input {<br /> transform: scale(1.4)<br /> }<br /> <br /> /* Hide the &quot;Show all&quot; option */<br /> .randomSlideshow-container ul.gallery:first-child label:last-child {<br /> display:none !important; /* overrides inline style */<br /> }<br /> <br /> .randomSlideshow-container ul.gallery:first-child .gallerybox {<br /> /* Make sure the labels are underneath not alongside the gallery */<br /> display:block;<br /> /* Center gallery items within the gallery container */<br /> margin: auto;<br /> }<br /> <br /> /* Remove excess padding around captions */<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox li,<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox div,<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox p {<br /> padding-top:0;<br /> padding-bottom:0;<br /> margin:0;<br /> }<br /> <br /> /* Center the gallery within its container */<br /> .randomSlideshow-container ul.gallery.mw-gallery-slideshow:first-child {<br /> position: relative;<br /> left: 50%;<br /> transform: translateX(-50%);<br /> display: inline-block; /* fallback */<br /> text-align:center; /* fallback: place the radio inputs in the center */<br /> display: flex;<br /> flex-wrap: wrap;<br /> justify-content: center;<br /> }<br /> /* Place radio inputs at the top, and gallery contents below */<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox {<br /> order: 99999;<br /> flex-shrink: 0;<br /> }<br /> .randomSlideshow-container ul.gallery:first-child label {<br /> flex: 0 0;<br /> }<br /> <br /> /* Allow descriptions to take up the full width of the container */<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox {<br /> width: 100% !important; /* overrides inline style */<br /> }<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox &gt; div,<br /> .randomSlideshow-container ul.gallery:first-child .gallerybox &gt; div &gt; div {<br /> width: inherit !important; /* overrides inline style */<br /> max-width: 100%;<br /> text-align: center;<br /> }<br /> <br /> /*******************************************************************************<br /> * DESKTOP-ONLY STYLES<br /> *******************************************************************************<br /> * Desktop-only can targeted by prefixing these selectors:<br /> *<br /> * .randomSlideshow-container .nomobile+ul<br /> *<br /> * This is becaue the div with class &quot;nomobile&quot; only gets included in the html<br /> * for the desktop website, and not on mobile (except in Template namespace).<br /> ******************************************************************************/<br /> <br /> /* Hide all the switcher labels */<br /> .randomSlideshow-container .nomobile+ul label {<br /> display:none !important; /* overrides inline style */<br /> }</div>

imported>Evad37