mediawiki.interface.helpers.styles.less

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

@import 'mediawiki.mixins';

/**
 * Helper classes used across special pages and actions
 */

/* Content dividers */
/* @todo FIXME: Hard coded ". .". Is there a message for this? Should there be? */
.mw-changeslist-separator:empty:before {
	content: '. .';
}

/**
 * Rather than use an existing element, we have a specific element for designating
 * the separation of certain elements by a semicolon.
 * This is a variant of the rule mw-changeslist-separator rule above but uses a semicolon
 * rather than a the two dots. It's not clear why we use different things for separation, and
 * when adding this I was unable to see any information that led to its change. A designer in the
 * future of a developer who has the energy to invest may explore this more and see if these two
 * classes can be combined.
 *
 * There is lots of context on this rule in https://phabricator.wikimedia.org/T233649
 *
 * # History page
 *
 * The history page should never have a semicolon as there is never a mw-title element.
 * Previous attempts to add the semicolon used the timestamp and a before pseudo element
 * but this led to problems as the history page also uses this element and there is no
 * easy way to distinguish it from other elements and never any need to have a semicolon
 * on the history page.
 *
 * # Special:RecentChanges
 *
 * has always had a semicolon and motivation for moving this change here.
 *
 * # Special:Watchlist
 *
 * Note that before this change was introduced, the Special:Watchlist page
 * didn't have a semicolon after the title. This caused some confusion to
 * editors (https://phabricator.wikimedia.org/T237685) but this rule makes it
 * consistent with Special:RecentChanges. To disable the semicolon on the watchlist
 * would be additional CSS to reset the content of this pseudo element for that specific
 * page, but we should not accrue that technical debt without some strong arguments for
 * doing so - and they should be documented!
 * # Special:Contributions
 * Never use semicolon on this page. Always use “. .” as separators.
 */
.mw-changeslist-separator--semicolon:before {
	content: '@{msg-semicolon-separator}';
}

.mw-rollback-link {
	&:before {
		content: '@{msg-brackets-start}';
	}

	&:after {
		content: '@{msg-brackets-end}';
	}
}

.comment--without-parentheses,
.mw-changeslist-links,
.mw-diff-bytes,
/* Needed by pages calling ChangeTags::formatSummaryRow (T212613) */
.mw-tag-markers,
.mw-uctop {
	&:before {
		content: '@{msg-parentheses-start}';
	}

	&:after {
		content: '@{msg-parentheses-end}';
	}
}

.mw-changeslist-links {
	display: inline-block;

	> span:not( :first-child ):before {
		content: '@{msg-pipe-separator}';
	}

	// In pages like history, do not add additional brackets where not needed
	.mw-rollback-link:before,
	.mw-rollback-link:after {
		content: '';
	}
}

.mw-tag-marker {
	&:after {
		content: '@{msg-comma-separator}';
	}

	&:last-child:after {
		content: '';
	}
}

.unpatrolled {
	font-weight: bold;
	color: #d33;
}

.newpage,
.minoredit,
.botedit {
	font-weight: bold;
}

.mw-userlink {
	// Word-break overlong user names, see T237230.
	// FIXME: This property is introduced now, but will be separated in a follow-up
	// caring about 'i18n-directionality', see T247033.
	.hyphens( auto );
	unicode-bidi: embed;
}

/* Comment portions of RC entries, also used by Linker::commentBlock */
span.comment {
	font-style: italic;
	unicode-bidi: -moz-isolate;
	unicode-bidi: isolate;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* The auto-generated edit comments */
.autocomment,
.autocomment a,
.autocomment a:visited {
	color: #72777d;
}

.mw-comment-none {
	.mixin-screen-reader-text();
}

/** rev_deleted stuff */
li span.deleted,
span.history-deleted {
	text-decoration: line-through;
	color: #72777d;
	font-style: italic;
}

span.mw-history-suppressed {
	/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
	text-decoration-style: double;
	color: #202122;
}

/* (show/hide) revision deletion links */
span.mw-revdelundel-link,
strong.mw-revdelundel-link {
	font-size: 90%;
}