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

Revision as of 09:21, 29 April 2021

Revision as of 09:37, 29 April 2021

Line 4:

}

/* ==Visually On mobile, showhide the switcher labels' intext content, abut sort-ofretain gallery-likescreenreader formataccess ==(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).

******************************************************************************/

/* testing the above */

.randomSlideshow-container ul.gallery:first-child {border:5px solid red}

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

Line 13 ⟶ 34:

/* Hide the "Show all" option */

.randomSlideshow-container ul.gallery:first-child label:last-child {

display:none !important; /* overrides inline style */

}

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

}

Line 38 ⟶ 51:

}

/* == On desktop, hide all the switcher labels == */

/*******************************************************************************

* DESKTOP-ONLY STYLES

*******************************************************************************

* Desktop-only can targeted by prefixing these selectors:

*

* .randomSlideshow-container .nomobile+ul

*

* This is becaue the div with class "nomobile" is only get included in the html

* for the desktop website, and not on mobile (except in Template namespace).

******************************************************************************/

/* testing the above */

.randomSlideshow-container .nomobile+ul {border:5px solid green}

/* == On desktop, hideHide all the switcher labels == */

.randomSlideshow-container .nomobile+ul label {

display:none !important; /* overrides inline style */