diff.less
No OneTemporary
Actions

Size

6 KB

Referenced Files

None

Subscribers

None

diff.less
View Options

	/*!
	* Diff rendering
	*
	* Stable for use on any page where a diff is rendered.
	* The early-loaded part of the mediawiki.diff module.
	* Usually added via DifferenceEngine::showDiffStyle() and loaded for all diffs generated by DifferenceEngine
	* IMPORTANT: This stylesheet is loaded on various pages.
	* This includes (but is not limited to):
	* diff pages, undo workflow, edit preview, edit conflict workflow.
	*/

	@import 'mediawiki.skin.variables.less';
	@import 'mediawiki.mixins.less';

	/* stylelint-disable selector-class-pattern */

	.diff {
	border: 0;
	border-spacing: 4px;
	margin: 0;
	width: 100%;
	/* Ensure that columns are of equal width */
	table-layout: fixed;

	td {
	padding: 0.33em 0.5em;

	&.diff-marker {
	/* Compensate padding for increased font-size */
	padding: 0.25em;
	text-align: right;
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.2;

	&::before {
	content: attr( data-marker );
	}
	}

	div {
	/* Force-wrap very long lines such as URLs or page-widening char strings */
	word-wrap: break-word;
	}
	}

	col.diff-marker {
	width: 2%;
	}

	.diff-content {
	width: 48%;
	}
	}

	.diff-title {
	vertical-align: top;
	}

	.diff-notice,
	.diff-multi,
	.diff-otitle,
	.diff-ntitle {
	text-align: center;
	}

	.diff-lineno {
	font-weight: bold;
	.user-select( none );
	}

	.mw-diff-inline-added,
	.mw-diff-inline-changed,
	.mw-diff-inline-moved,
	.mw-diff-inline-deleted {
	ins,
	del {
	padding: 0.3em 1px;
	text-decoration: none;
	white-space: break-spaces;
	// When JS is enabled, deleted and added content will show a popup explaining what the colors mean.
	// Show a cursor pointer to make it clear it's clickable.
	.client-js & {
	// Note: This currently only happens at low resolutions.
	@media only screen and ( max-width: @max-width-breakpoint-tablet ) {
	cursor: pointer;
	}
	}
	}
	}

	.mw-diff-inline-added ins,
	.mw-diff-inline-changed ins,
	.mw-diff-inline-moved ins {
	background: @background-color-content-added;
	}

	.mw-diff-inline-deleted del,
	.mw-diff-inline-changed del,
	.mw-diff-inline-moved del {
	background: @background-color-content-removed;
	}

	.mw-diff-table-prefix {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 1em 0;

	.mw-diff-inline-legend {
	margin-right: auto;

	.mw-diff-inline-legend-ins,
	.mw-diff-inline-legend-del {
	display: inline-block;
	padding: 4px 6px;
	}

	.mw-diff-inline-legend-ins {
	background: @background-color-content-added;
	}

	.mw-diff-inline-legend-del {
	background: @background-color-content-removed;
	}
	}

	.mw-diffPage-inlineToggle-container {
	margin-left: 1em;
	}
	}

	.diff-addedline,
	.diff-deletedline,
	.diff-context {
	vertical-align: top;
	border-style: solid;
	border-width: 1px 1px 1px 4px;
	border-radius: 0.33em;
	}

	.diff-addedline,
	.diff-deletedline,
	.diff-context,
	.mw-diff-inline-added,
	.mw-diff-inline-deleted,
	.mw-diff-inline-moved,
	.mw-diff-inline-changed,
	.mw-diff-inline-context {
	// TODO: Re-evaluate we can use Codex design token like @font-size-small, which would mean to
	// bump the size up by equal to 14px in Vector 2022 and MinervaNeue.
	font-size: 0.8125rem;
	/* Standardize tab width */
	-moz-tab-size: 4;
	tab-size: 4;
	line-height: 1.6;
	// Support Chrome <= 75, Firefox <= 68: Fallback for browsers that don't support `break-spaces`.
	white-space: pre-wrap;
	white-space: break-spaces;

	// Allow editfont to be set on container while only
	// affecting wikitext content.
	// These classes match mw-editfont-*
	.diff-editfont-monospace & {
	font-family: monospace, monospace;
	}

	.diff-editfont-sans-serif & {
	font-family: sans-serif;
	}

	.diff-editfont-serif & {
	font-family: serif;
	}
	}

	.mw-diff-inline-header {
	font-weight: bold;
	margin: 1em 0;
	}

	.diff-context {
	background: @background-color-neutral-subtle;
	color: @color-base;
	border-color: @border-color-muted;
	}

	.diff-addedline {
	border-color: @background-color-content-added;
	}

	.diff-deletedline {
	border-color: @background-color-content-removed;
	}

	.diffchange {
	font-weight: bold;
	text-decoration: none;

	.diff-addedline &,
	.diff-deletedline & {
	border-radius: 0.33em;
	padding: 0.25em 0;
	}

	.diff-addedline & {
	background: @background-color-content-added;
	}

	.diff-deletedline & {
	background: @background-color-content-removed;
	}
	}

	/* Correct user & content directionality when viewing a diff */
	.diff-currentversion-title,
	.diff {
	direction: ltr;
	unicode-bidi: embed;
	}

	.diff-contentalign-right td {
	/* @noflip */
	direction: rtl;
	unicode-bidi: embed;
	}

	.diff-contentalign-left td {
	/* @noflip */
	direction: ltr;
	unicode-bidi: embed;
	}

	.diff-multi,
	.diff-otitle,
	.diff-ntitle,
	.diff-lineno {
	direction: ltr !important; /* stylelint-disable-line declaration-no-important */
	unicode-bidi: embed;
	}

	.mw-diff-slot-header {
	text-align: center;
	}

	.mw-diff-slot-error {
	text-align: center;
	color: @color-error;
	}

	/*!
	* Wikidiff2 rendering for moved paragraphs
	*/

	.mw-diff-movedpara-left,
	.mw-diff-movedpara-right {
	&,
	&:visited,
	&:active {
	display: block;
	color: transparent;
	.user-select( none );
	}

	&:hover {
	text-decoration: none;
	color: transparent;
	}

	&::after {
	display: block;
	color: @color-base;
	margin-top: -1.25em;
	}
	}

	.mw-diff-movedpara-left::after,
	.rtl .mw-diff-movedpara-right::after {
	content: '↪';
	}

	.mw-diff-movedpara-right::after,
	.rtl .mw-diff-movedpara-left::after {
	content: '↩';
	}

	#mw-inlinediff-header {
	#mw-diff-otitle1,
	#mw-diff-otitle2,
	#mw-diff-otitle3,
	#mw-diff-otitle5 {
	display: none;
	}
	}

	/* Lock selection to a single side */
	.diff[ data-selected-side='deleted' ] .diff-side-added,
	.diff[ data-selected-side='added' ] .diff-side-deleted {
	.user-select( none );
	cursor: text;
	}

	/*!
	* Wikidiff2 rendering for new lines and deleted lines
	*/
	.mw-diff-inline-added.mw-diff-empty-line,
	.mw-diff-inline-deleted.mw-diff-empty-line,
	.mw-inline-diff-newline {
	&::after {
	font-family: @font-family-monospace;
	font-size: 87.5%;
	padding: 0 3px;
	display: inline-block;
	color: @color-subtle;
	}
	}

	.mw-diff-inline-added.mw-diff-empty-line,
	.mw-inline-diff-newline {
	&::after {
	content: '@{msg-diff-newline}';
	background: @background-color-content-added;
	}
	}

	.mw-diff-inline-deleted.mw-diff-empty-line {
	&::after {
	content: '@{msg-diff-line-deleted}';
	background: @background-color-content-removed;
	}
	}

	.mw-diffPage-inlineToggle-container .oo-ui-fieldLayout-body {
	align-items: center;
	white-space: nowrap;
	}

	.mw-diff-empty-line {
	ins,
	del {
	display: none;
	}
	}

	// Hidden by default, but can be used to adapt layout to mobile devices.
	// This content may be useful on desktop skins too, however initially this
	// is hidden by default as communities have not yet been consulted about this.
	.mw-diff-usermetadata,
	.mw-diff-revision-history-links {
	display: none;
	}

	// Hide the diff legend at lower resolutions.
	@media only screen and ( max-width: @max-width-breakpoint-tablet ) {
	.mw-diff-inline-legend {
	display: none;
	}
	}

File Metadata

Mime Type: text/plain
Expires: Sat, May 16, 12:30 (1 d, 4 h)
Storage Engine: local-disk
Storage Format: Raw Data
Storage Handle: 23/cb/d7ef3b902dfee8a11430f63f64a3
Default Alt Text: diff.less (6 KB)

diff.lessNo OneTemporaryActions

diff.lessView Options

File Metadata

Event Timeline

diff.less
No OneTemporary
Actions

diff.less
View Options