Newer
Older
anicusi / scss / components / single-item.scss
@Eugene Eugene on 11 Apr 1 KB init
.component.single-item {
	& > .std-row {
		align-items: flex-start;
		flex-wrap: nowrap;

		@include media("max", "md") {
			flex-wrap: wrap;
			flex-direction: column;
		}
	}

	.component.thumbnail {
		.thumbnail-img, .poster-placeholder {
			width: 320px;
			
			@include media("max", "md") {
				width: 100%;
			}
		}
	}

	.item-info {
		display: flex;
		flex-direction: column;
		gap: $std-mg-sm;

		.title {
			font-size: $fsize-xl;
			font-weight: normal;

			strong {
				color: $color-primary;
			}
		}

		.time-period {
			font-size: $fsize-lg;

			&::first-letter {
				text-transform: uppercase;
			}
		}

		.genres {
			margin-bottom: 5px;
		}

		.team {
			.voice {
				
			}
		}

		.description {
			line-height: 1.3em;
		}

		.control-panel {
			width: 100%;
			margin: $std-mg-md 0;
		}
	}

	.tabs {
		margin-top: $std-mg-md;

		.tabs-content {
			height: 660px;
			
			@include media("max", "lg") {
				height: 520px;
			}

			@include media("max", "md") {
				height: 410px;
			}

			@include media("max", "sm") {
				height: 300px;
			}
		}
	}

	.player {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
}