Module:Gallery/styles.css

/* {{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);
	}
}