WeatherStar4000/server/styles/scss/_current-weather.scss

@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
@use 'shared/positions'as p;

.weather-display .main.current-weather {
	&.main {
		width: calc(p.$standard-width - (2 * p.$blue-box-margin));
		@include u.text-shadow();

		.portrait-only {
			display: none;

			.portrait.enhanced & {
				display: block;
			}
		}

		.standard-only {
			display: block;

			.portrait.enhanced & {
				display: none;
			}
		}

		.portrait-location {
			text-align: center;
			margin-top: 175px;
			font-family: "Star4000 Large";
			font-size: 32pt;
			color: c.$title-color;
		}

		.col {
			width: 255px;
			display: inline-block;
			margin-top: 10px;
			padding-top: 10px;
			position: absolute;

			.wide.enhanced & {
				width: 300px;
				margin-left: 25px;
				margin-right: 25px;
			}

			.portrait.enhanced & {
				margin-left: 20px;
				width: calc(p.$blue-box-width - 40px);
				display: block;
				position: relative;

				.wind-container {
					margin-left: 50px;
					width: calc(p.$blue-box-width - 140px);
				}
			}

			&.left {
				font-family: 'Star4000 Extended';
				font-size: 24pt;

				.portrait.enhanced & {
					font-size: 30pt;
					line-height: 40px;

					.icon {
						margin-top: 50px;
						transform: scale(1.5);
						margin-bottom: 50px;
					}
				}
			}

			&.right {
				right: 0px;
				font-family: "Star4000 Large";
				font-size: 20px;
				font-weight: bold;
				line-height: 24px;

				.portrait.enhanced & {
					font-family: "Star4000 Extended";
					font-size: 28pt;
					font-weight: 300;
					line-height: 36px;
				}


				.row {
					margin-bottom: 12px;

					.label,
					.value {
						display: inline-block;
					}

					.label {
						margin-left: 20px;
					}

					.value {
						float: right;
						text-align: right;
						margin-right: 10px;
					}

				}

			}
		}

		.center {
			text-align: center;
		}

		.temp {
			font-family: 'Star4000 Large';
			font-size: 24pt;
		}

		.icon {
			img {
				margin: 0 auto;
				display: block;
			}
		}

		.wind-container {
			margin-left: 10px;
			display: flex;

			&>div {
				width: 50%;
			}

			.wind {
				text-align: right;
			}
		}

		.wind-gusts {
			text-align: right;
			font-size: 28px;
		}

		.location {
			color: c.$title-color;
			max-height: 32px;
			margin-bottom: 10px;
			padding-top: 4px;
			overflow: hidden;
			text-wrap: nowrap;
		}
	}
}