mediawiki-skins-Citizen/resources/skins.citizen.styles/skinning/content.media-common.less

/*
 * Citizen
 *
 * Module: mediawiki.skinning.content.media-common
 * Version: REL1_39
 *
 * Date: 2023-07-23
 */

/**
 * Block media items
 */
figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ],
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
	&.mw-halign-none {
		float: none;
		clear: none;
	}

	&.mw-halign-center {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}
}

figure[ typeof~='mw:File' ],
figure[ typeof~='mw:File/Frameless' ] {
	/* Hide the caption for frameless and plain floated images */
	> figcaption {
		display: none;
	}
}

figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
	display: table;
	margin: var( --space-xs ) auto var( --space-md ) auto;
	font-size: var( --font-size-x-small );
	text-align: center;

	> a:first-child,
	> span:first-child {
		/**
		 * Broken media get a span instead.
		 */
		span.mw-broken-media {
			display: inline-block;
			/* This is hardcoded in Linker::makeThumbLink2 for broken media */
			width: 180px;
			overflow-wrap: break-word;
		}
	}

	> figcaption {
		display: table-caption;
		// Sync with rounded corner
		padding-right: var( --border-radius--small );
		// Sync with rounded corner
		padding-left: var( --border-radius--small );
		margin-top: var( --space-xs );
		color: var( --color-subtle );
		letter-spacing: 0.025em;
		caption-side: bottom;
	}
}

/**
 * Inline media items
 * img is needed for 1.39 compat, change to .mw-file-element later
 */
.mw-valign-middle img {
	vertical-align: middle;
}

.mw-valign-baseline img {
	vertical-align: baseline;
}

.mw-valign-sub img {
	vertical-align: sub;
}

.mw-valign-super img {
	vertical-align: super;
}

.mw-valign-top img {
	vertical-align: top;
}

.mw-valign-text-top img {
	vertical-align: text-top;
}

.mw-valign-bottom img {
	vertical-align: bottom;
}

.mw-valign-text-bottom img {
	vertical-align: text-bottom;
}

// Do not float content in mobile view
@media ( min-width: @min-width-breakpoint-tablet ) {
	figure[ typeof~='mw:File/Thumb' ],
	figure[ typeof~='mw:File/Frame' ] {
		> figcaption {
			text-align: start;
		}

		// When float is not explicitly set
		.mw-content-ltr & {
			/* @noflip */
			float: right;
			/* @noflip */
			margin-left: var( --space-lg );
			/* @noflip */
			clear: right;
		}

		.mw-content-rtl & {
			/* @noflip */
			float: left;
			/* @noflip */
			margin-right: var( --space-lg );
			/* @noflip */
			clear: left;
		}
	}

	figure[ typeof~='mw:File' ],
	figure[ typeof~='mw:File/Frameless' ],
	figure[ typeof~='mw:File/Thumb' ],
	figure[ typeof~='mw:File/Frame' ] {
		&.mw-halign-right {
			/* @noflip */
			float: right;
			/* @noflip */
			margin-right: 0;
			/* @noflip */
			margin-left: var( --space-lg );
			/* @noflip */
			clear: right;
		}

		&.mw-halign-left {
			/* @noflip */
			float: left;
			/* @noflip */
			margin-right: var( --space-lg );
			/* @noflip */
			margin-left: 0;
			/* @noflip */
			clear: left;
		}

		&.mw-halign-center {
			float: none;
			margin-right: auto;
			margin-left: auto;
			clear: both;
			text-align: center;
		}
	}
}