mediawiki-skins-MinervaNeue/skinStyles/mediawiki.special.changeslist.less

/**
 * The "changeslist" module appears on Special pages such
 * as recent changes, watchlist, and parts of the action history page.
 */

@import '../minerva.less/minerva.mixins.less';
@import '../minerva.less/minerva.variables.less';
@import 'mediawiki.mixins.less';

// Decrease the font-size of the advanced filters module (see T229360).
.mw-rcfilters-container,
.mw-rcfilters-ui-overlay,
.watchlistDetails {
	font-size: @font-size-tag-line;
}

ul.mw-contributions-list,
ul.special {
	padding-left: 0 !important; // overriding `.content ul`
	margin-left: 0 !important; // overriding `.client-js .mw-changeslist ul`

	li {
		list-style-type: none;
		.changeslist-row();
	}

	// the following selector are nested due to their
	// generic names.
	.mw-contributions-title,
	.mw-title {
		font-weight: bold;
		// Word-break overlong user names, see T237230.
		.hyphens( auto );
	}

	.comment {
		float: left;
		clear: both;
		font-style: italic;
		line-height: 1.4em;
		padding: 0.5em 0;
		// avoid overflows on very long words in edit summaries (T297045)
		max-width: 100%;
	}
}

a.mw-contributions-title,
.mw-title a {
	word-break: break-word;
}

// T232955: Properly align deletion comments
span.mw-changeslist-log-entry {
	.comment {
		float: none;
		padding: 0;
	}
}

.mw-changeslist-line {
	.changeslist-row();
}

.mw-changeslist-line-inner {
	display: block;
}

.mw-changeslist-line-inner > *,
ul.mw-contributions-list li > * {
	float: left;
	margin-right: 0.5em;
}

.mw-changeslist-line-inner::before,
.mw-changeslist-line-inner::after {
	.clearfix();
}

.mw-changeslist-date,
.mw-tag-markers {
	clear: left;
}

/**
 * Colored watchlist and recent changes numbers.
 */
.mw-plusminus-pos {
	color: @color-content-added;
}

.mw-plusminus-neg {
	color: @color-content-removed;
}

.mw-plusminus-null {
	color: @color-disabled;
}

/*
 * Bidi-isolate these numbers.
 * See https://phabricator.wikimedia.org/T93484
 */
.mw-plusminus-pos,
.mw-plusminus-neg,
.mw-plusminus-null {
	unicode-bidi: -moz-isolate;
	unicode-bidi: isolate;
}

ul.mw-contributions-list li .mw-rollback-link {
	float: right;
	font-size: initial;
}

// rollback edit link
.mw-rollback-link a {
	// separating rollback link from undo link.
	margin-left: 1em;
}

.mw-revdelundel-link,
.mw-tag-markers {
	display: block;
}

.mw-special-Watchlist .mw-userlink {
	padding-top: 0.5em;
}

// On Watchlist and RecentChanges the user is on a separate line per T236328.
// This does not apply to the history page.
// It is unnecessary on Special:Contributions since all contributions are by the same user.
.mw-special-Watchlist,
.mw-special-Recentchanges {
	.mw-userlink,
	.mw-usertoollinks {
		float: none;
		clear: both;
	}

	.mw-userlink::before,
	.mw-usertoollinks::after {
		content: '';
		display: table;
		width: 100%;
	}

	.mw-tempuserlink {
		background-color: transparent;
		padding: 0;

		// Since the user link is split over two lines,
		// add the background color on the bdi instead
		bdi {
			// @background-color-interactive
			background-color: @background-color-interactive;
			padding: 2px 8px 2px 8px;
			border-radius: @border-radius-base;
		}
	}
}

// `.content` must be specified to override padding of
// `.content h2` and `.content h4` rule provided by ResourceLoaderSkinModule.
// Must apply to Watchlist h4s which currently do not use mw-index-pager-list-header.
.content .mw-index-pager-list-header,
.mw-special-Watchlist .content h4 {
	.changeslist-header();
	box-sizing: border-box;
}

.mw-mf-amc-disabled {
	/* Watchlist modifications */
	&.mw-special-Watchlist {
		/* Traditionally not in default experience for mobile.
		Can be restored once have design and PM approves. */
		.mw-pager-tool,
		.mw-changeslist-history,
		.mw-tag-markers,
		.mw-pager-tools,
		.mw-usertoollinks,
		/* visually not needed */
		.mw-changeslist-separator--semicolon,
		.mw-changeslist-separator {
			display: none;
		}

		.mw-title {
			display: block;
			float: none;

			a {
				color: @color-subtle;
			}
		}

		.mw-userlink {
			color: @color-subtle;
			display: block;

			bdi {
				word-break: break-word;
			}
		}

		/** hide if the span does not have any links inside it */
		.mw-changeslist-links > span:not( :has( a ) ) {
			display: none;
		}

		/* disable pseudo UI */
		.mw-changeslist-links > span::after,
		.mw-changeslist-links > span::before {
			content: none;
		}

		.mw-history-histlinks-previous,
		.mw-changeslist-diff {
			.changeslist-make-row-linkable();
		}

		/** Reduce clutter on mobile devices. Users can use "Use desktop site" to reveal these. */
		@media all and ( max-width: @max-width-breakpoint-mobile ) {
			/* Reduce space at top of page */
			.mw-rcfilters-ui-filterWrapperWidget-bottom-mobile,
			.mw-rcfilters-ui-watchlistTopSectionWidget,
			.mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails,
			.mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable {
				display: none;
			}
			/* Since we hid the above elements no need to compensate with a minimum height */
			.mw-rcfilters-head {
				min-height: auto !important;
			}
			/* Space reserved while filters load. */
			.watchlistDetails {
				visibility: hidden;
			}
			/* Make "Active filters" fill up entire page when collapsed. */
			.mw-rcfilters-ui-filterTagMultiselectWidget {
				/* Important so it also applies to collapsed view. */
				width: 100% !important;
			}
		}
	}

	/** These apply to history and watchlist page */
	&.mw-special-Watchlist,
	&.action-history {
		.mw-diff-bytes,
		.mw-changeslist-time {
			position: absolute;
			top: 12px;
			left: 16px;
			font-size: 0.875rem;
		}

		.mw-diff-bytes {
			top: 36px;
		}

		.mw-changeslist li,
		.mw-contributions-list li {
			padding: 12px 16px 12px 85px;
			font-size: 1rem;
			min-height: 90px;
			box-sizing: border-box;

			.comment {
				-webkit-line-clamp: 2;
				max-height: 2.6em;
				color: @color-subtle;
				line-height: 1.4;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				font-size: 0.875rem;
				font-style: normal;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.mw-userlink::before {
				content: '';
				.cdx-mixin-css-icon( @cdx-icon-user-avatar, @color-subtle );
				margin-right: 8px;
			}

			.mw-anonuserlink::before {
				.cdx-mixin-css-icon( @cdx-icon-user-anonymous, @color-subtle );
			}

			.mw-tempuserlink::before {
				.cdx-mixin-css-icon( @cdx-icon-user-temporary, @color-subtle );
			}
		}
	}
}