MusareReact/frontend/app/styles/home.scss

@import "colors";
@import "breakpoints";
@import "specific/form";

main#homepage {
	width: calc(100% - 24px);
	margin-left: 12px;
	margin-right: 12px;
	overflow: hidden;

	.stations {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: -12px -12px 12px -12px;

		.station-card {
			width: 296px;
			background-color: $musare_color_white;
			border: 1px solid hsla(204, 3, 60, .5); //TODO Change this later and/or add to colors
			position: relative;
			margin: 12px;

			.station-media {
				width: 296px;
				height: 296px;
				display: block;

				> * {
					width: 296px;
					height: 296px;
					display: block;
				}
			}

			.station-media-icon {
				background-color: $musare_color_primary_blue;
				color: #EFEFEF; //TODO Change this color and figure out proper sizes

				> * {
					font-size: 296px;
					cursor: pointer;
					user-select: none;
				}
			}

			.station-body {
				padding: 20px;
				display: block;
				color: $musare_color_primary_gray;

				h3 {
					font-size: 23px;
					line-height: 31px;
					margin-bottom: 6px;
				}

				p {
					font-size: 15px;
					line-height: 20px;
					font-weight: 300;
					height: 60px;
					display: block;
				}

				label:first-child {
					margin-bottom: 6px;

					input {
						border: 0;
						padding: 0;
						font-size: 23px;
						line-height: 31px;
						height: 31px;

						color: $musare_color_primary_gray;

						@include forPlaceholder() {
							opacity: .75;
						}
					}
				}

				label:last-child {
					margin-bottom: 0;

					textarea {
						border: 0;
						padding: 0;
						font-size: 15px;
						line-height: 20px;
						height: 60px;
						font-weight: 300;

						color: $musare_color_primary_gray;

						@include forPlaceholder() {
							opacity: .75;
						}
					}
				}
			}

			.station-footer {
				padding: 0 20px 20px 20px;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.user-count {
					height: 27px;
					display: flex;
					align-items: flex-end;

					i {
						margin-right: 6px;
					}

					span {
						font-size: 20px;
						line-height: 27px;
					}
				}

				.nameContainer {
					display: flex;
					padding-top: 6px;

					span {
						font-size: 16px;
						line-height: 21px;
						height: 21px;
					}

					label {
						margin-bottom: 0;

						input {
							border: 0;
							padding: 0;
							font-size: 16px;
							line-height: 21px;
							font-weight: 300;

							color: $musare_color_primary_gray;

							@include forPlaceholder() {
								opacity: .75;
							}
						}
					}
				}

				i {
					margin-left: 10px;
					cursor: pointer;
					user-select: none;

					&.active {
						color: $musare_color_primary_blue;
					}
				}
			}

			> a {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
	}

	h2 {
		font-size: 20px;
		line-height: 27px;
		margin-bottom: 12px;
		text-align: center;
	}
}