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

// includes padding as well as enough space for 2 lines of user groups
@userInfoHeight: 8em;
@userInfoPadding: 1em;

#mw-mf-page-center {
	// See https://phabricator.wikimedia.org/T144579#2699879
	// This prevents the footer margin bottom from collapsing on iOS9.3
	border-bottom: 1px solid transparent;
}

.mw-diff-inline-moved {
	position: relative;

	a[ name^='movedpara' ] {
		position: absolute;
		top: -40px;
	}
}

// In lieu of no generic way to handle this we reserve space below the footer
// the footer can sit above the user info box.
footer {
	margin-bottom: @userInfoHeight + ( 2 * @userInfoPadding );
}

// FIXME: Overly specific selector
#mw-mf-diffarea {
	.hyphens( auto );
	padding: 0 1em ( 2 * @userInfoHeight + 1em );
}

#mw-mf-diffview {
	.meta {
		font-size: 0.7em;
		text-transform: uppercase;
	}

	.mw-mf-diff-date {
		color: @colorGray7;
	}

	// FIXME: Overly specific selector
	#mw-mf-diff-info {
		line-height: 1em;
		padding-bottom: 1em;
	}

	// FIXME: Overly specific selector
	#mw-mf-diff-comment {
		padding-bottom: 1em;
		font-style: italic;
	}

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

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

	span {
		margin-right: 2px;
	}

	ins {
		background-color: #75c877;
	}

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

	.mw-diff-inline-moved {
		background: #ffedcc;

		a {
			color: #ffa500;
			display: block;

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

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

	.patrollink {
		margin-top: 1em;
	}

	// FIXME: Overly specific selector
	#mw-mf-userinfo {
		height: @userInfoHeight;
		padding: @userInfoPadding;
		background-color: @colorGray15;
		border-top: solid 1px @colorGray12;
		bottom: 0;
		left: 0;
		right: 0;

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

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

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

		// For Extension:Thanks link
		.mw-mf-action-button,
		.patrollink {
			clear: both;
			float: right;
		}
	}
}

.revision-history-links {
	font-size: 0.9em;
	margin-bottom: 12px;

	.revision-history-next {
		float: right;
	}
}

@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
	#mw-mf-diffarea {
		padding-left: 0;
		padding-right: 0;
	}
}