Module:Gallery/sandbox/styles.css
/* */
@media all and (max-width: 720px) {
.mod-gallery-sb {
width: 100% !important;
}
}
.mod-gallery-sb {
display: table;
}
.mod-gallery-sb-default {
background: transparent;
margin-top: 4px;
}
.mod-gallery-sb-center {
margin-left: auto;
margin-right: auto;
}
/* The outer container uses a float, it allows text to be on the side of the gallery
But it can't align multi-row galleries by itself.
*/
.mod-gallery-sb-left {
float: left;
}
.mod-gallery-sb-right {
float: right;
}
.mod-gallery-sb-none {
float: none;
}
/* The inner
- is a flex container, and we use it to align multi-row galleries.
*/
.mod-gallery-sb-center .gallery {
justify-content: center;
}
.mod-gallery-sb-left .gallery {
justify-content: left;
}
.mod-gallery-sb-right .gallery {
justify-content: right;
}
.mod-gallery-sb-collapsible {
width: 100%;
}
.mod-gallery-sb .title,
.mod-gallery-sb .main,
.mod-gallery-sb .footer {
display: table-row;
}
.mod-gallery-sb .title > div {
display: table-cell;
padding: 0 4px 4px;
text-align: center;
font-weight: bold;
}
.mod-gallery-sb .main > div {
display: table-cell;
}
.mod-gallery-sb .gallery.gallery.gallery {
line-height: 1.35em;
display: flex;
flex-wrap: wrap;
column-gap: 4px;
}
.mod-gallery-sb .footer > div {
display: table-cell;
padding: 4px;
text-align: right;
font-size: 80%;
line-height: 1em;
}
.mod-gallery-sb .title > div *,
.mod-gallery-sb .footer > div * {
overflow: visible;
}
.mod-gallery-sb .gallerybox img {
background: none !important;
}
.mod-gallery-sb .bordered-images .thumb img {
outline: solid var(--background-color-neutral,#eaecf0) 1px;
}
.mod-gallery-sb .whitebg .thumb {
background: var( --background-color-base, #fff ) !important;
}
/* skin-invert-image is encoded as \200b\200b\200b */
/* bg-transparent is encoded as \200b\200b\200c */
@media screen {
/* As skin-invert-image also invert the border color
we have to use a light color to get a darker border */
html.skin-theme-clientpref-night .mod-gallery-sb .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img /* when wrapped around .skin-invert-image */
{
outline: solid #d7d7d7 1px;
}
/* when wrapped around .skin-invert-image */
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img {
background: none !important;
}
/* white background fallback for darkmode */
html.skin-theme-clientpref-night .mod-gallery-sb .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
background: white !important;
}
html.skin-theme-clientpref-night .mod-gallery-sb img[alt*="\200b\200b\200b"] {
filter: invert(1) hue-rotate(180deg);
}
}
@media screen and (prefers-color-scheme: dark) {
/* As skin-invert-image also invert the border color
we have to use a light color to get a darker border */
html.skin-theme-clientpref-os .mod-gallery-sb .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img /* when wrapped around .skin-invert-image */
{
outline: solid #d7d7d7 1px;
}
/* when wrapped around .skin-invert-image */
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img {
background: none !important;
}
/* white background fallback for darkmode */
html.skin-theme-clientpref-os .mod-gallery-sb .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
background: white !important;
}
html.skin-theme-clientpref-os .mod-gallery-sb img[alt*="\200b\200b\200b"] {
filter: invert(1) hue-rotate(180deg);
}
}