comty/packages/app/src/pages/account/[username]/index.less

@import "@styles/vars.less";

@borderRadius: 12px;
@stickyCardTop: 20px;
@withCoverPanelElevation: 100px;

.account-profile {
	position: relative;

	display: flex;

	flex-direction: column;

	width: 100%;
	height: 100%;

	gap: @default-gap;

	&.withCover {
		.panels {
			.left-panel {
				position: sticky;

				top: calc(@withCoverPanelElevation + @stickyCardTop);
				left: 0;

				transform: translate(0, -@withCoverPanelElevation);

				.userCard {
					filter: drop-shadow(0 0 20px var(--border-color));
				}
			}
		}
	}

	&.topHidden {
		.cover {
			height: 0;
			min-height: 0;
			margin-bottom: 0;
			outline: none;
		}

		.panels {
			padding-top: 0;

			.left-panel {
				transform: translate(0, 0);

				.actions {
					opacity: 0;
				}
			}
		}
	}

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

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

		width: 100%;
		height: 25vh;
		min-height: 25vh;

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

		transition: all 0.3s ease-in-out;

		&.expanded {
			height: 70vh;
			min-height: 70vh;

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

	.panels {
		position: relative;

		display: flex;
		flex-direction: row;

		gap: @default-gap;

		height: 100%;
		width: 100%;

		.left-panel {
			position: sticky;
			top: @stickyCardTop;

			height: fit-content;

			z-index: 55;

			display: flex;
			flex-direction: column;

			align-items: center;

			transition: all 0.3s ease-in-out;

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

				gap: 10px;

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

				padding: 20px;
				margin-top: @default-gap;

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

				transition: all 0.3s ease-in-out;

				border: 1px solid var(--border-color);

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

		.center-panel {
			display: flex;
			flex-direction: column;

			align-items: center;

			height: 100%;
			width: 100%;

			.fade-opacity-active {
				height: 100%;
			}

			.post-list_wrapper {
				display: flex;
				flex-direction: column;

				align-items: center;

				width: 100%;

				.post-list {
					width: 100%;

					max-width: 900px;

					.post_card {
						width: 100%;

						max-width: unset;
					}
				}
			}
		}

		.right-panel {
			position: sticky;
			top: @stickyCardTop;

			display: flex;
			flex-direction: column;

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

			height: fit-content;
			width: fit-content;

			min-width: 15%;

			justify-self: center;

			.ant-menu-item {
				display: inline-flex;
				align-items: center;

				justify-content: flex-start;

				padding: 5px 15px !important;

				svg {
					margin: 0 !important;
				}
			}

			.ant-menu-item-selected {
				background-color: var(--background-color-primary) !important;
			}
		}
	}

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

		width: 100%;
	}

	@media (max-width: 1720px) {
		.panels {
			.left-panel {
				.userCard {
					width: 300px;
					min-width: 300px;
				}

				.actions {
					width: 300px;
					min-width: 300px;
				}
			}

			.right-panel {
				width: fit-content;
				min-width: 60px;

				align-items: center;
				justify-content: center;

				padding: 10px !important;

				.ant-menu {
					display: flex;
					flex-direction: column;

					margin: 0;
					padding: 0;
					width: fit-content;

					.ant-menu-item {
						width: fit-content;

						.ant-menu-title-content {
							width: 0;
							opacity: 0;
							margin: 0;
						}
					}
				}
			}
		}
	}
}