account.less

@media screen and (min-width: @screen-sm-min) {
	.account .card .card-header:not(.ch-alt) {
		padding-top: 15px;
		padding-left: 26px;
		padding-bottom: 5px;
	}
}

.account .card {
	.card-body {
		.checkbox>label {
			font-size: 14px;
		}

		.select>label {
			font-size: 14px;
			font-weight: normal;
		}

		&.card-padding {
			padding: 15px 25px;

			@media (max-width: @screen-xs-max)
			{
				padding: 15px;
			}
		}
	}

	.card-header {
		text-align: left;
	}
}

.account.settings {
	.card .card-header {
		font-size: 16px;
		font-weight: 500;
	}

	.form-control {
		color: inherit;
		border-bottom: @input-border-bottom;
	}
}

.account-username-box {
	margin-bottom: 10px;

	.nav.nav-pills>li>a {
		font-size: 16px;
		font-weight: 500;
	}
}

.status {
	display: inline-block;
	border-radius: 50%;
	width: 11px;
	height: 11px;
	vertical-align: middle;
}

.edit-account .input-group {
	margin-left: -10px;
	margin-bottom: 20px;

	label {
		font-size: 14px;
		font-weight: normal;
	}
}

.user-profile-picture {
	width: 128px;
	height: 128px;
	border-radius: 50%;
}

.cover {
	height: 200px;
}

.user-icon.profile-header-img {
	position: absolute;
	left: 46px;
	top: -90px;
	height: 120px;
	width: 120px;
	font-size: 5rem;
	border: 3px solid #fff;
	line-height: 120px;

	@media (max-width: @screen-xs-max) {
		left: 50%;
		margin-left: -60px;
	}
}

.user-profile-view {

	.card-footer {
		position: relative;
		padding: 20px 20px 20px 30px;

		hr {
			border: @account-hr-border;
			margin: 0;
		}

		@media (max-width: @screen-xs-max) {
			padding: inherit;

			hr {
				margin-top: 20px;
			}
		}

		.status {
			left: 140px;
			position: absolute;
			top: 0;
			border: 1px solid #fff;
			height: 18px;
			width: 18px;
			border-radius: 50%;

			@media (max-width: @screen-xs-max) {
				left: 50%;
				margin-left: 35px;
			}
		}

		.user-info {

			h3 {
				color: #fff;
				font-size: 20px;

				@media (max-width: @screen-xs-max) {
					color: @body-color;
					margin-top: 10px;
					font-size: 16px;
					text-align: center;
					margin-bottom: 2px;
				}
			}

			h4 {
				font-size: 13px;
				text-align: left;

				@media (max-width: @screen-xs-max) {
					font-size: 11px;
					text-align: center;
					margin-top: 0;
					margin-bottom: 0;
				}
			}

			@media (max-width: @screen-xs-max) {
			    margin-top: 40px;
			}

			@media (min-width: @screen-md-min) {
				position: absolute;
				top: -50px;
				left: 175px;
			}
		}

		.account-stats {
			display: inline-block;
			text-align: center;

			.stat {
				text-align: center;
				display: inline-block;
				min-width: 100px;

				@media (max-width: @screen-xs-max) {
					padding: 10px 0;
				}
			}

			.stat-label {
				font-size: 14px;
			}

			.human-readable-number {
				font-weight: bold;
				font-size: 18px;
			}

			@media (max-width: @screen-xs-max) {
				margin-top: 20px;
				margin-bottom: 10px;
			}
		}

		[component="account/chat"], [component="account/follow"], [component="account/unfollow"] {
			float: left;
			margin: 15px 5px 0;

			@media (max-width: @screen-xs-max) {
				float: inherit;
				margin: 0 5px 15px 5px;
			}
		}
	}
}

.account .cover {

	&:hover {
		.controls {
			.opacity(0.8);
		}
	}

	.controls {
		text-align: center;
		height: 200px;
		line-height: 200px;
		.opacity(0);
		.transition(opacity .15s linear);
		cursor: pointer;
		pointer-events: none;

		> * {
			pointer-events: all;
		}

		.fa {
			color: white;
			background-color: #333;
			opacity: 1;
			margin: 15px;
			padding: 5px;
		}
	}

	&.active {
		&:hover {
			cursor: move;
		}

		.controls {
			> * {
				display: none;
			}
		}

		.save {
			display: inline-block;
		}
	}

	&.saving {
		.save {
			display: none;
		}

		.indicator {
			display: inline-block;
		}
	}

	.save, .indicator {
		display: inline-block;
		position: absolute;
		top: 1em;
		right: 2em;
		opacity: 1;
		background-color: @brand-primary;
		color: #eee;
		padding: 0.5em;
		font-weight: bold;

		&:hover {
			cursor: pointer;
		}
	}

	.save {
		display: none;
	}

	.indicator {
		display: none;
	}
}

.account-fab {
	border-radius: 50%;
}

.account .account-fab {
	vertical-align: inherit;
	float: right;
	position: absolute;
	top: -23px;
	right: 50px;

	@media (max-width: @screen-xs-max) {
		right: 30px;
	}
}

.account-picture-block .user-profile-picture {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	font-size: 5rem;
	line-height: 128px;
}

.account.change-username #change-username,
.account.change-password #change-password,
.account.change-email #change-email {
	padding: 10px;
}

.profile-view {
	text-align: center;

	.profile-label {
		font-size: 12px;
		margin-top: 10px;
		padding-right: 3px;
		padding-left: 5px;
	}
}

.account {
	&.account-info {
		.ban-history {
			padding-left: 0;

			.timestamp {
				font-weight: bold;
			}

			.expiry {
				font-size: 11px;
			}
		}

		.recent-flags {
			padding-left: 0;

			.title {
				font-weight: bold;
			}

			.timestamp {
				font-size: 11px;
			}
		}

		.moderation-history {
			.timeline .frame .timeline-badge {
				background: none;
				border: none;
				left: 5px;
			}

			.user-avatar {
				.user-avatar(30px);
			}

			.user-icon {
				.user-icon(30px, 1.6rem);
			}
		}
	}
}