WeatherStar4000/server/styles/scss/_latest-observations.scss

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

.weather-display .latest-observations {

	&.main {
		overflow-y: hidden;

		.column-headers {
			height: 20px;
			position: absolute;
			width: 100%;
		}

		.column-headers {
			top: 0px;

			div {
				display: inline-block;
				font-family: 'Star4000 Small';
				font-size: 24pt;
				position: absolute;
				top: -14px;
				@include u.text-shadow();
			}

			.temp {
				// hidden initially for english/metric switching
				display: none;

				&.show {
					display: inline-block;
				}
			}
		}

		.temp {
			left: 230px;
		}

		.weather {
			left: 280px;
		}

		.wind {
			left: 430px;
		}

		.like {
			display: none;
		}

		// wide and enhanced moves the columns and enables the like column
		.wide.enhanced & {
			.temp {
				left: 320px;
			}

			.like {
				left: 380px;
				display: hidden;

				&.heat-index {
					color: c.$heat-index;
					display: block;
				}

				&.wind-chill {
					display: block;
					color: c.$wind-chill;
				}
			}

			.weather {
				left: 470px;
			}

			.wind {
				left: 630px;
			}

		}

		.observation-lines {
			min-height: 338px;
			padding-top: 10px;

			.observation-row {
				font-family: 'Star4000';
				font-size: 24pt;
				@include u.text-shadow();
				position: relative;
				height: 40px;

				>div {
					position: absolute;
					top: 8px;
				}

				.wind {
					white-space: pre;
					text-align: right;
				}
			}
		}
	}
}