nodebb-theme-persona/less/account.less

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

	.edit-form {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50px;
	}

	> .row {
		max-width: @screen-lg-min;
		margin-left: auto;
		margin-right: auto;

		.fullname {
			text-align: center;
			font-size: 20px;
			color: @gray-light;
			font-weight: 300;
			margin-bottom: 24px;
		}
	}

	.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-wrapper {
			position: absolute;
			left: 50%;
			margin-left: -64px;
			top: 128px;
			border: 4px solid white;
			border-radius: 50%;

			.fab.btn-morph {
				top: 93px;
				right: 4px;
				position: absolute;
			}

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

			.chat, .follow {
				position: absolute;
				width: 30px;
				height: 30px;
			}

			.chat {
				left: -1px;
				bottom: 1px;
			}

			.follow {
				right: 1px;
				bottom: 1px;
			}
		}

		&: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: @gray-lighter;
			padding: 0.5em;
			font-weight: bold;

			&:hover {
				cursor: pointer;
			}
		}

		.save {
			display: none;
		}

		.indicator {
			display: none;
		}
	}

	margin-top: 200px;

	.container {
		height: 200px;
		position: relative;
		pointer-events: none;

		> * {
			pointer-events: all;
		}
	}

	@media (min-width: @screen-md-min) {
		margin-top: 300px;

		.cover,  .container {
			height: 300px;

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

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

	.profile {
		margin-bottom: 40px;

		.fullname {
			margin-bottom: 12px;
			font-size: 32px;
		}

		.username {
			text-transform: uppercase;
			text-align: center;
			margin-top: 0px;
			font-size: 15px;
		}

		.aboutme > p {
			max-width: 75%;
			margin-left: auto;
			margin-right: auto;
			color: @gray-light;
		}

		.profile-meta {
			font-size: 10px;
			text-transform: uppercase;
			color: #777;
			margin-top: 25px;

			strong {
				color: #333;
			}
		}

		.account-stats {
			text-align: center;
			font-size: 35px;
			line-height: 25px;
			margin-top: 25px;
			margin-bottom: -20px;

			.stat {
				display: inline-block;
				min-width: 100px;
				margin-bottom: 20px;
			}

			.stat-label {
				font-size: 12px;
				text-transform: uppercase;
				color: @gray-light;
			}
		}
	}

	.show-success {
		.form-control {
			border-color: #5cb85c;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
			padding-right: 2.25rem;
		    background-repeat: no-repeat;
		    background-position: center right .625rem;
		    -webkit-background-size: 1.25rem 1.25rem;
		    background-size: 1.25rem 1.25rem;
		}

		.form-feedback {
			color: #5cb85c;
			display: block;
			margin-top: .25rem;
		}
	}

	.show-danger {
		.form-control {
			border-color: #d9534f;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
			padding-right: 2.25rem;
		    background-repeat: no-repeat;
		    background-position: center right .625rem;
		    -webkit-background-size: 1.25rem 1.25rem;
		    background-size: 1.25rem 1.25rem;
		}

		.form-feedback {
			color: #d9534f;
			display: block;
			margin-top: .25rem;
		}
	}

	[component="account/moderation-note/list"] {
		.icon {
			margin-right: 10px;
		}

		.content {
			white-space: pre-line;
		}
	}

	.categories {
		[component="categories/category"] {
			.depth-1 {
				padding-left: 50px;
			}
			.depth-2 {
				padding-left: 100px;
			}
			.depth-3 {
				padding-left: 150px;
			}
			.depth-4 {
				padding-left: 150px;
			}
		}
	}
}


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

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

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


@media (max-width: @screen-md-min) {
	.account > .row {
		overflow: hidden;
	}

	.profile {
		margin-top: -25px;
	}
}


//

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

	div {
		margin-bottom: 10px;
	}

	.dropdown-toggle {
		cursor: pointer;
	}
}

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


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

.picture-switcher {
	img, .user-icon {
		.user-icon-style(46px, 2.4rem, 50%);
	}

	@media (max-width: @screen-sm) {
		img, .user-icon {
			display: none;
		}
	}

	h4 {
		line-height: 46px;
		margin: 0;
	}

	.modal-body .btn {
		padding: 10px 5px;
		font-size: 13px;
	}
}

.page-user-info {
	.recent-flags {
		padding-left: 0;

		li {
			list-style-type: none;
		}

		.title {
			font-weight: bold;
		}

		.timestamp {
			font-size: 1.25rem;
			font-style: italic;
			color: @gray-light;
		}
	}

	.ban-history {
		padding-left: 0;

		li {
			list-style-type: none;
			border-bottom: 1px solid @gray-lighter;
			margin-bottom: 1rem;
		}

		.expiry {
			font-size: 1.25rem;
			font-style: italic;
			color: @gray-light;
		}
	}
}