comty/packages/app/src/components/Music/Playlist/index.less

@playlist_cover_maxSize: 200px;

.playlist {
	position: relative;
	display: flex;
	flex-direction: column;

	cursor: pointer;

	width: @playlist_cover_maxSize;
	max-width: @playlist_cover_maxSize;

	overflow: hidden;

	transition: all 150ms ease-in-out;

	&.cover-hovering {
		.playlist_cover {
			.playlist_cover_mask {
				opacity: 1;
			}
		}
	}

	.playlist_cover {
		display: flex;
		position: relative;

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

		width: 100%;
		//max-height: 150px;

		transition: all 0.2s ease-in-out;
		z-index: 50;

		img {
			width: @playlist_cover_maxSize;
			height: @playlist_cover_maxSize;

			object-fit: cover;
			border-radius: 12px;
		}

		.playlist_cover_mask {
			position: absolute;

			top: 0;
			left: 0;

			display: flex;

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

			width: 100%;
			height: 100%;

			opacity: 0;

			transition: all 0.2s ease-in-out;

			z-index: 55;

			background-color: rgba(var(--layoutBackgroundColor), 0.6);
			color: var(--text-color);

			font-size: 3rem;
		}
	}

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

		width: 100%;
		transition: all 150ms ease-in-out;

		&:hover {
			.playlist_info_title {
				text-decoration: underline;
			}
		}

		.playlist_info_title {
			font-size: 0.7rem;
			font-weight: 600;

			color: var(--background-color-contrast);

			overflow: hidden;

			h1,
			h4 {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				margin: 0;
			}
		}

		.playlist_info_subtitle {
			color: var(--text-color);
			font-size: 0.7rem;

			p {
				overflow: hidden;

				text-overflow: ellipsis;
				white-space: nowrap;

				margin: 0;
			}
		}
	}

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

		align-self: flex-end;
		justify-self: flex-end;

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

		height: 100%;

		padding: 10px;

		.ant-btn {
			svg {
				margin: 0 !important;
			}
		}
	}

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

		gap: 8px;
		font-size: 0.7rem;

		text-transform: uppercase;

		svg,
		p {
			margin: 0;
		}
	}
}