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

.mw-body-content {
	// Apply only to internal link
	a[ href^='/' ] {
		.link-content-text(@color-link-active);

		&.new {
			background-image: linear-gradient( to right, @color-link-new-active 0, @color-link-new-active 100% );
		}
	}
}

#mw-content-text {
	/*
	 * Float styles
	 * Only apply to immediate childs as float classes
	 * are used in other places as well
	*/
	>.mw-parser-output {
		div.tnone,
		div.floatnone,
		table.floatnone,
		div.tleft,
		div.floatleft,
		table.floatleft,
		div.tright,
		div.floatright,
		table.floatright {
			z-index: 2;
			position: relative;
			margin: 0.6rem 1.4rem;
			transition: @transition-margin;
		}

		div.tnone,
		div.floatnone {
			display: flex;
			justify-content: center;

			> * {
				width: 100% !important;
				height: auto;
			}

			.thumbinner {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		div.tnone,
		div.floatnone,
		table.floatnone,
		div.tleft,
		div.floatleft,
		table.floatleft {
			margin-left: @negative-margin / 2;
		}

		div.tnone,
		div.floatnone,
		table.floatnone,
		div.tright,
		div.floatright,
		table.floatright {
			margin-right: @negative-margin / 2;
		}
	}
}

@media ( max-width: @screen0 ) {
	#mw-content-text {
		>.mw-parser-output {
			>div.tnone,
			>div.floatnone,
			>table.floatnone,
			>div.tleft,
			>div.floatleft,
			>table.floatleft,
			>div.tright,
			>div.floatright,
			>table.floatright {
				margin: 0.6rem -@margin-side !important;
				width: 100vw !important;
				float: unset;
				clear: none;
			}

			>div.tnone,
			>div.floatnone,
			>div.tleft,
			>div.floatleft,
			>div.tright,
			>div.floatright {
				display: flex;
				justify-content: center;
			}

			>table.floatleft,
			>table.floatright {
				padding: 0 @margin-side;
			}
		}
	}
}

@media ( max-width: @screen2 ) {
	#mw-content-text {
		>.mw-parser-output {
			>div.tnone,
			>div.floatnone,
			>table.floatnone {
				margin: 0.6rem~'calc((100vw - @{page-width}) / -2)';

				a.image,
				a.image > img {
					width: 100% !important;
					height: auto !important;
				}
			}

			>table.floatnone {
				padding: 0 @margin-side;
			}
		}
	}
}
@media ( max-width: @screen3 ) {
	#mw-content-text {
		>.mw-parser-output {
			>div.tleft,
			>div.floatleft,
			>table.floatleft {
				margin-left: 0;
			}

			>div.tright,
			>div.floatright,
			>table.floatright {
				margin-right: 0;
			}

			>div.tleft,
			>div.floatleft,
			>table.floatleft,
			>div.tright,
			>div.floatright,
			>table.floatright {
				z-index: 0; // Reset so it doesn't cover ToC
				position: relative;
			}
		}
	}
}

@media ( min-width: @screen4 ) {
	#mw-content-text {
		>.mw-parser-output {
			>div.tnone,
			>div.floatnone,
			>table.floatnone,
			>div.tleft,
			>div.floatleft,
			>table.floatleft {
				margin-left: @negative-margin !important;
			}

			>div.tnone,
			>div.floatnone,
			>table.floatnone,
			>div.tright,
			>div.floatright,
			>table.floatright {
				margin-right: @negative-margin !important;
			}
		}
	}
}