MusareReact/frontend/app/styles/station.scss

@import "colors";
@import "breakpoints";


@mixin aspect-ratio($width, $height) {
	position: relative;
	&:before {
		display: block;
		content: "";
		width: 100%;
		padding-top: ($height / $width) * 100%;
	}
	> * {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

main#station {
	width: calc(100% - 88px);
	margin-left: 76px;

	// Sidebar
	div#sidebar {
		width: 64px;
		height: calc(100% - 64px);
		position: absolute;
		top: 64px;
		bottom: 0;
		left: 0;
		background-color: $musare_color_primary_blue;

		button {
			width: 64px;
			height: 64px;
			margin: 0;
			padding: 0;

			i {
				font-size: 32px;
				margin-top: 8px;
			}
		}

		hr {
			width: 64px;
			height: 0;
			padding: .5px;
			background-color: white;
		}
	}

	.player-container {
		.iframe-container {
			@include aspect-ratio(16, 9);

			#player {
				width: 100%;
				height: 100%;
			}

			.paused-overlay {
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.6);
				pointer-events: none;
			}
		}

		.seekerbar-container {
			display: block;
			width: 100%;
			height: 4px;
			background-color: $musare_color_white;

			span {
				display: inline-block;
				background-color: $musare_color_primary_blue;
				height: 100%;
				float: left;
			}
		}
	}

	> .content {
		text-align: center;
		margin-top: 16px;

		.title {
			font-size: 24px;
			display: block;
		}

		.artists {
			font-size: 20px;
			font-weight: $font_weight_semilight;
			display: block;
			margin-top: 8px;
		}

		.time {
			font-size: 16px;
			display: block;
			margin-top: 24px;
		}

		.volume-container {
			display: block;
			height: 24px;
			margin-top: 6px;

			i {
				font-size: 24px;
				float: left;
			}

			input[type="range"] {
				width: calc(100% - 26px);
				margin-left: 2px;
				margin-top: 2px;
				margin-bottom: 2px;
				height: 20px;
				float: left;
			}
		}

		.ratings-container {
			height: 24px;
			display: inline-block;
			margin-top: 16px;

			div {
				float: left;

				&:last-child {
					margin-left: 24px;
				}

				.liked {
					color: green;
				}

				.disliked {
					color: red;
				}

				i {
					font-size: 24px;
					float: left;
					color: $musare_color_secondary_gray;
					cursor: pointer;

					&:focus, &:hover {
						color: $musare_color_primary_gray;
					}
				}

				span {
					font-size: 18px;
					margin-left: 8px;
					float: left;
					color: #4A4A4A;
				}
			}
		}
	}

	@include responsive(smallest) {

	}

	@include responsive(small) {

	}
}