@import "minerva.variables";
@import "minerva.mixins";


#mw-mf-diffview {
	@userInfoHeight: 5em;

	h2 {
		.watchlist-heading();
		a {
			color: inherit;
		}
	}

	.mw-mf-bytesremoved,
	.mw-mf-bytesadded {
		padding-left: 1.5em;
		.background-size( 1em, 1em );
		background-position: left center;
		background-repeat: no-repeat;
		display: inline-block;
		line-height: 1em;
	}

	.mw-mf-bytesadded {
		background-image: url(images/positive.png);
	}

	.mw-mf-bytesremoved {
		background-image: url(images/negative.png);
	}

	.meta {
		font-size: 0.7em;
		text-transform: uppercase;
	}

	.mw-mf-diff-date {
		color: #c6c6c6;
	}

	#mw-mf-diffarea {
		padding: 1em 1em (2 * @userInfoHeight + 1em);
	}

	#mw-mf-diff-info {
		line-height: 1em;
		padding-bottom: 1em;
	}

	#mw-mf-diff-comment {
		padding-bottom: 1em;
		font-style: italic;
	}

	.mw-mf-diff-tool {
		display: inline-block;
		margin-left: 0.5em;
	}

	#mw-mf-userinfo {
		min-height: @userInfoHeight;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		padding: 1em;
		background-color: #f0f0f0;
		border-top: solid 1px #c0c0c0;
		bottom: 0;
		left: 0;
		right: 0;

		.mw-mf-user {
			margin-bottom: .7em;
		}

		.mw-mf-edit-count {
			display: inline-block;
			text-align: left;
			margin-top: 1.2em;
			color: #333;
			line-height: 1;

			/* the edit count number */
			div {
				text-align: center;
				font-size: 1.85em;
				color: #888;
			}
		}
	}

	ins,
	del {
		color: black;
		text-decoration: none;
	}

	span {
		margin-right: 2px;
	}

	ins {
		background-color: #75C877;
	}

	del {
		background-color: #E07076;
		text-decoration: none;
	}

	.prettyDiff {
		ins, del, span {
			display: inline;
		}
	}
}

.beta,
.alpha {
	.revision-history-links {
		font-size: 0.9em;
		margin-top: 8px;
	}
}

#mw-mf-diffview {
	// Action buttons, e.g. Thank, Undo, etc.
	// FIXME: Migrate to mw-ui-button
	.mw-mf-action-button {
		float: right;
		border: 1px #25A260 solid;
		background-color: #27AA65;
		.vertical-gradient( #2EC977, #27AA65 );
		&:hover {
			background-color: #2EC977;
			.vertical-gradient( #3ED384, #2EC977 );
		}
		&:active {
			background-color: #249E5E;
			.vertical-gradient( #31B570, #249E5E );
		}
		&:disabled {
			color: white;
			border: 1px #80D1A7 solid;
			background-color: #80D1A7;
			.vertical-gradient( #90DEB5, #80D1A7 );
		}
	}
	.mw-mf-action-button-icon {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0.6em 0 -0.5em;
	}
}