nodebb-theme-persona/less/account.less

.account {
	.breadcrumb {
		margin-bottom: 30px;
	}

	.cover {
		background-size: cover;
		background-repeat: no-repeat;
		height: 200px;
		position: relative;
		margin-bottom: 1em;
		background-origin: content-box;
		width: 100%;
		top: 50px;
		position: absolute;
		left: auto;
		right: 0px;

		.avatar {
			position: absolute;
			left: 50%;
			margin-left: -64px;
			top: 94px;
			border: 4px solid white;
			border-radius: 50%;

			.status {
				position: absolute;
				font-size: 23px;
				top: 17px;
				right: -3px;
			}
		}

		&: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;
		}
	}

	margin-top: 200px;

	.container {
		height: 200px;
		position: relative;
	}
	
	@media (min-width: @screen-md-min) {
		margin-top: 300px;
		
		.cover,  .container {
			height: 300px;

			.controls {
				height: 300px;
				line-height: 300px;
			}

			.avatar {
				top: 230px;
			}
		}
	}
}


.account-fab {
	position: absolute;
	right: 15px;
	bottom: -26px;

	.open #profile {
		background-color: lighten(@brand-primary, 10%);
	}

	.fab {
		color: white;
		font-size: 20px;
	}
}


//

.account-picture-block{
	vertical-align:top;
	margin-bottom:20px;

	div {
		margin-bottom: 10px;
	}

	.dropdown-toggle {
		cursor: pointer;
	}
}

.user-profile-picture {
	.user-icon-style(128px, 7.5rem, 50%);
}

.user-picture-label {
	font-size:20px;
}


.account-bio-label{
	display:block;
	font-size:14px;
	opacity:0.8;
}

.account-bio-value {
	display:block;
	margin-bottom:10px;
	font-size:18px;
}




.account-username{
  font-size:20px;
  font-weight:bold;
}


.account-stats {
	.formatted-number, .human-readable-number {
		font-size:30px;
	}

	.account-bio-label {
		font-size:16px;
		width:100px;
	}
}