comty/packages/app/src/pages/account/index.less

@borderRadius: 12px;

.accountProfile {
	display: flex;

	flex-direction: column;

	width: 100%;
	height: 100%;

	.cover {
		z-index: 50;
		position: relative;

		outline: 1px solid var(--border-color);
		border-radius: @borderRadius;
		content: "";

		width: 100%;
		height: 25vh;

		margin-bottom: 10px;

		background-position: center;
		background-size: cover;

		transition: all 0.3s ease-in-out;

		&.expanded {
			height: 70vh;

			background-size: cover;
			background-repeat: no-repeat;
		}
	}

	.panels {
		position: relative;

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 20px;
		grid-row-gap: 0px;

		padding-top: 20px;

		.leftPanel {
			position: sticky;
			top: 0;

			z-index: 55;

			display: flex;
			flex-direction: column;

			align-items: center;

			transition: all 0.3s ease-in-out;

			.userCard {
				position: sticky;
				top: 0;
				z-index: 55;
			}

			.actions {
				display: flex;
				flex-direction: column;

				height: fit-content;
				width: 20vw;
				min-width: 400px;

				padding: 20px;
				margin-top: 20px;

				background-color: var(--background-color-accent);
				border-radius: 12px;

				transition: all 0.3s ease-in-out;

				.followButton {
					width: fit-content;
				}
			}
		}

		.tabMenuWrapper {
			position: sticky;
			top: 0;

			display: flex;
			flex-direction: column;

			background-color: var(--background-color-accent);
			border-radius: 12px;
			padding: 20px;

			height: fit-content;
			width: 20vw;
			min-width: 400px;

			justify-self: center;
		}
	}

	.details {
		background-color: var(--background-color-accent);
		padding: 20px;
		border-radius: @borderRadius;
	}

	.followersList {
		background-color: var(--background-color-accent);
		padding: 20px;
		border-radius: @borderRadius;
	}
}