gab-social/app/javascript/styles/gabsocial/components/user-panel.scss

.user-panel {
	display: flex;
	width: 285px;
	flex-direction: column;
	overflow-y: hidden;
	@include gab-container-standards();
	&__header {
		display: block;
		height: 112px;
		width: 100%;
		background: lighten($gab-background-container, 4%);
		body.theme-gabsocial-light & {
			background: darken($gab-background-container-light, 4%);
		}

		img {
			display: block;
			height: 100%;
			width: 100%;
			margin: 0;
			object-fit: cover;
		}
	}

	&__profile {
		display: flex;
		align-items: flex-start;
		padding: 0 10px;
		margin-top: -53px;

		.account__avatar {
			display: block;
			width: 82px;
			height: 82px;
			border: 6px solid $gab-background-base;
			body.theme-gabsocial-light & {border: 6px solid $gab-background-base-light;}
			background-size: cover;
		}
	}

	&__meta {
		display: block;
		padding: 6px 20px 17px 20px;
	}

	&__account {
		a {
			text-decoration: none;
			color: $primary-text-color;
		}

		&__name {
			display: block;
			font-size: 20px;
			font-weight: bold;
			line-height: 24px;
			color: #fff;
			body.theme-gabsocial-light & {color: $gab-default-text-light;}
		}

		&:hover & {
			&__name {
				text-decoration: underline;
			}
		}

		&__username {
			display: block;
			font-size: 14px;
			line-height: 16px;
			color: $gab-secondary-text;
			text-decoration: none !important;
		}
	}

	&__stats-block {
		display: flex;
		justify-content: space-between;
		padding-top: 12px;
	}

	.user-panel-stats-item {
		display: flex;
		align-items: start;
		justify-content: left;
		flex-wrap: wrap;
		flex-direction: column;

		a {
			text-decoration: none;

			color: $primary-text-color;

			&:hover {
				opacity: 0.8;
			}
		}

		&__value {
			display: block;
			width: 100%;
			color: #fff;
			body.theme-gabsocial-light & {color: $gab-default-text-light;}
			font-size: 20px;
			font-weight: 800;
			line-height: 24px;
		}

		&__label {
			display: block;
			width: 100%;
			color: $gab-secondary-text;
			font-size: 12px;
			line-height: 14px;
		}
	}
}