mediawiki-skins-MinervaNeue/skinStyles/mediawiki.action.history.styles.less

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

.action-history {
	#mw-content-text > form { // stylelint-disable-line selector-max-id
		margin: 0;
	}

	// the margin value used to create a "faux" column after the
	// radio buttons.
	@revision-selectors-width: 50px;

	// form element wrapping history page content. Overrides #mw-content-text > form
	// for tablet widths.
	#mw-history-compare { // stylelint-disable-line selector-max-id
		width: 100%;
		max-width: 100%;
	}

	// The large "Compare selected revisions" button container
	.mw-history-compareselectedversions {
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		background: @skinContentBgColor;
		z-index: @z-indexAboveContent;

		// "Compare selected revisions" button
		.mw-history-compareselectedversions-button {
			.mw-ui-button();
			.mw-ui-button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive );
			width: 100%;
			max-width: 100%;
			-webkit-appearance: unset;
			font-weight: bold;
			border-radius: 2px;
			margin: 10px 0;
		}

		// Admin specific "change visibility of selected revisions" buttons.
		.mw-history-revisionactions,
		.mw-checkbox-toggle-controls {
			display: none;
		}

		// Second large "Compare selected revisions" button container at bottom of page
		& ~ .mw-history-compareselectedversions {
			// hide second "Compare selected revisions" button near bottom
			.mw-history-compareselectedversions-button {
				display: none;
			}

			// show second "Change visibility of selected revisions" button near bottom
			.mw-history-revisionactions,
			.mw-checkbox-toggle-controls {
				display: block;
			}
		}
	}

	// "Change visibility of selected revisions" button (for admins only)
	.mw-history-revisiondelete-button {
		.mw-ui-button();
		.mw-ui-button-states();
		background-color: @colorGray15;
		margin-bottom: 1em;
	}

	// (cur|prev) links
	.mw-history-histlinks {
		float: right;
	}

	// Date
	.mw-changeslist-date {
		float: left;
		font-weight: bold;
		clear: none;
	}

	// User name
	.history-user {
		float: left;
		// margin separates the entire username (talk | contrib) block
		// from the (cur|prev) links on the right. Approximates a  
		margin-right: 0.5em;

		.mw-userlink {
			// margin separates the username
			// from the (talk | contrib) links. Approximates a  
			margin-right: 0.5em;
			// Word-break overlong usernames, see T237230.
			.hyphens( auto );
		}
	}

	// Container for rollback, undo buttons
	.mw-changeslist-links:not( .mw-usertoollinks ):not( .mw-history-histlinks ) {
		// removing parentheses around undo button
		& > span:before {
			content: '';
		}

		& > span:after {
			content: '';
		}
	}

	// edit summary
	.comment {
		// meant to give space for the undo button to the right of
		// the revision description.
		width: 65%;
	}

	// edit summary, +/- bytes changed, tags
	.comment,
	.updatedmarker,
	.mw-diff-bytes,
	.mw-tag-markers {
		float: left;
		clear: left;
	}

	// add left margin to create a faux column after the radio buttons
	.history-user,
	.comment,
	.updatedmarker,
	.mw-diff-bytes,
	.mw-history-tools,
	.mw-tag-markers {
		margin-left: @revision-selectors-width;
	}

	// stylelint-disable selector-max-id
	// `#pagehistory` needs to come last due to id specificity best-practice.
	#pagehistory {
		margin-bottom: 24px;
		padding: 0;

		li {
			.changeslist-row();
			min-height: inherit;
			padding: 12px 0;
		}

		li:after {
			.clearfix();
		}

		// diff radio buttons, admin revision-delete checkbox
		input[ type='radio' ],
		input[ type='checkbox' ] {
			float: left;
			position: relative;
			display: inline-block;
			// aligning checkboxes with text
			top: 5px;
			margin-right: 10px;
			// FIXME: Overrides the border: 0 in reset.less
			// When that reset rule doesn't exist, neither should this.
			border: 1px solid @grayLight;
		}

		// FIXME: Override the background: none; in reset.less.
		// When that reset rule doesn't exist, neither should this.
		input[ type='radio' ] {
			background: @grayMediumDark;
		}

		// checkbox appears slightly smaller than radio buttons,
		// moving down 6px to vertically center.
		input[ type='checkbox' ] {
			top: 6px;
		}
	}
	// stylelint-enable selector-max-id

	// hide page instructions, article size, double dot separator, thank link
	.mw-history-legend,
	.history-size,
	.mw-changeslist-separator,
	.mw-thanks-thank-link,
	abbr {
		display: none;
	}
}