WeatherStar4000/server/styles/scss/_hourly-graph.scss

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

#hourly-graph-html {
	background-image: url(../images/backgrounds/1-chart.png);

	// change background for wide-enhanced
	.wide.enhanced & {
		background-image: url(../images/backgrounds/1-chart-wide.png);
		background-position-x: 0px;
	}

	.header {
		.right {
			position: absolute;
			top: 35px;
			right: 60px;
			width: 360px;
			font-family: 'Star4000 Small';
			font-size: 28px;
			@include u.text-shadow();
			text-align: right;

			div {
				margin-top: -18px;
			}

			.temperature {
				color: red;
			}

			.dewpoint {
				color: green;
			}

			.cloud {
				color: lightgrey;
			}

			.rain {
				color: aqua;
			}
		}
	}
}

.weather-display .main.hourly-graph {

	&.main {
		>div {
			position: absolute;
		}

		.label {
			font-family: 'Star4000 Small';
			font-size: 24pt;
			color: c.$column-header-text;
			@include u.text-shadow();
			margin-top: -15px;
			position: absolute;
		}

		.x-axis {
			bottom: 0px;
			left: 54px;
			width: 532px;
			height: 20px;

			.label {
				text-align: center;
				transform: translateX(-50%);
				white-space: nowrap;

				&.l-1 {
					left: 0px;
				}

				&.l-2 {
					left: calc(532px / 4 * 1);
				}

				&.l-3 {
					left: calc(532px / 4 * 2);
				}

				&.l-4 {
					left: calc(532px / 4 * 3);
				}

				&.l-5 {
					left: calc(532px / 4 * 4);
				}

				// adjust when enhanced
				.wide.enhanced & {

					&.l-1 {
						left: 0px;
					}

					&.l-2 {
						left: calc(726px / 6 * 1);
					}

					&.l-3 {
						left: calc(726px / 6 * 2);
					}

					&.l-4 {
						left: calc(726px / 6 * 3);
					}

					&.l-5 {
						left: calc(726px / 6 * 4);
					}

					&.l-6 {
						left: calc(726px / 6 * 5);
					}

					&.l-7 {
						left: calc(726px / 6 * 6);
					}
				}

				// only in wide + enhanced
				&.l-6,
				&.l-7 {
					display: none;

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

			}

		}

		.chart {
			top: 0px;
			left: 50px;

			img {
				width: 532px;
				height: 285px;

				// wide and enhanced
				.wide.enhanced & {
					width: 746px;
				}
			}
		}

		.y-axis {
			top: 0px;
			left: 0px;
			width: 50px;
			height: 285px;

			.label {
				text-align: right;
				right: 0px;

				&.l-1 {
					top: 0px;
				}

				&.l-2 {
					top: calc(280px / 3);
				}

				&.l-3 {
					bottom: calc(280px / 3 - 11px);
				}

				&.l-4 {
					bottom: 0px;
				}
			}
		}

	}
}