MediaWiki:Common.css/src/content/thumbnails,gallery.scss

@use "../lib";
/********* Thumbnails *********/

/* Styles relating to vanilla MediaWiki thumbnails. For legacy reasons this also contains the floatleft, tleft, tright and floatright classes. */

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/content.thumbnails-screen.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/content.thumbnails-common.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.skinning/content.thumbnails-print.less */

.thumb{
	margin-bottom: var(--layout-gap);
	border: 0;
	*{
		box-sizing: content-box;
	}
	.thumbinner{
		@include lib.box-style;
		font-size: unset;
	}
	a.img{
		display: block;
	}
	img{
		background: none;
		border-color: var(--theme-box-border-color);
	}
	.thumbcaption{
		font-size: var(--font-size-s);
		line-height: var(--line-height-s);
		padding: 0 1px;/* 1px for border of image. */
		margin-top: var(--layout-gap);
		.magnify:first-child{
			display: none;
		}
	}
}

div.tleft {
	margin: 0 var(--layout-gap) var(--layout-gap) 0;
}

div.tright {
	margin: 0 0 var(--layout-gap) var(--layout-gap);
}

/********* Gallery *********/

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/gallery.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/print.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.page.gallery.styles/content.media.less */
.gallery.gallery{
	margin: var(--layout-gap) 0;
}

.gallery.mw-gallery-traditional{
	/* Some lengths are hard-coded in html code, so we have to do some tricks. */
	--offset-width: -5px; /* html width of .gallerybox>div is width of .thumb + 5px */
	--offset-margin: -15px; /* width/height of .thumb is width/height of .thumb>div>img + 15px */
	display: flex;
	flex-wrap: wrap;
	gap: var(--layout-gap);
	.gallerybox{
		width: unset !important;
		margin: 0;
		--offset-left: calc(0px - var(--offset-margin) - var(--layout-box-padding) - 1px);
		--offset-right: calc(0px - var(--offset-width) - var(--offset-margin) - var(--layout-box-padding) - 1px);
		>div{
			margin: 0 calc(0px - var(--offset-right)) 0 calc(0px - var(--offset-left));
		}
		.thumb{
			@include lib.box-style();
			margin: 0 var(--offset-right) 0 var(--offset-left);
			width: unset !important;
			>div{
				>*:first-child{
					margin-top: var(--offset-margin);
					margin-bottom: var(--offset-margin);
				}
			}
			a{
				display: block;
			}
		}
		.gallerytext{
			font-size: var(--font-size-s);
			line-height: var(--line-height-s);
			padding: 0 1px;/* 1px for border of image. */
			margin: 4px var(--offset-right) var(--layout-gap) var(--offset-left);/* 5px margin-right for .gallerybox>div */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			p{
				width: auto;
				flex: 0 1 auto;
			}
		}
	}
	.gallerycaption{
		flex-basis: 100%; /* the caption should always be on its own line */
	}
}