imported>Arthurfragoso: Uses a flex container to allow align multi-row galleries

2025-02-13T23:01:47Z

Uses a flex container to allow align multi-row galleries

New page

/* {{pp-template}} */
@media all and (max-width: 720px) {
.mod-gallery {
width: 100% !important;
}
}

.mod-gallery {
display: table;
}

.mod-gallery-default {
background: transparent;
margin-top: 4px;
}

.mod-gallery-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-left {
float: left;
}

.mod-gallery-right {
float: right;
}

.mod-gallery-none {
float: none;
}

/* The inner <ul> is a flex container, and we use it to align multi-row galleries.
*/

.mod-gallery-center .gallery {
justify-content: center;
}

.mod-gallery-left .gallery {
justify-content: left;
}

.mod-gallery-right .gallery {
justify-content: right;
}

.mod-gallery-collapsible {
width: 100%;
}

.mod-gallery .title,
.mod-gallery .main,
.mod-gallery .footer {
display: table-row;
}

.mod-gallery .title > div {
display: table-cell;
padding: 0 4px 4px;
text-align: center;
font-weight: bold;
}

.mod-gallery .main > div {
display: table-cell;
}

.mod-gallery .gallery.gallery.gallery {
line-height: 1.35em;
display: flex;
flex-wrap: wrap;
column-gap: 4px;
}

.mod-gallery .footer > div {
display: table-cell;
padding: 4px;
text-align: right;
font-size: 85%;
line-height: 1em;
}

.mod-gallery .title > div *,
.mod-gallery .footer > div * {
overflow: visible;
}

.mod-gallery .gallerybox img {
background: none !important;
}

.mod-gallery .bordered-images .thumb img {
outline: solid var(--background-color-neutral,#eaecf0) 1px;
}

.mod-gallery .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 .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery .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 .whitebg .thumb.thumb.thumb img {
background: none !important;
}

/* white background fallback for darkmode */
html.skin-theme-clientpref-night .mod-gallery .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
background: white !important;
}

html.skin-theme-clientpref-night .mod-gallery 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 .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery .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 .whitebg .thumb.thumb.thumb img {
background: none !important;
}

/* white background fallback for darkmode */
html.skin-theme-clientpref-os .mod-gallery .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
background: white !important;
}

html.skin-theme-clientpref-os .mod-gallery img[alt*="\200b\200b\200b"] {
filter: invert(1) hue-rotate(180deg);
}
}

Module:Gallery/styles.css - Revision history

imported>Arthurfragoso: Uses a flex container to allow align multi-row galleries