ws4kp-linhanced/server/styles/scss/_weather-display.scss

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

.weather-display {
	width: 640px;
	height: 480px;
	overflow: hidden;
	position: relative;
	background-image: var(--theme-background-1);

	/* this method is required to hide blocks so they can be measured while off screen */
	height: 0px;

	&.show {
		height: 480px;
	}

	.template {
		display: none;
	}

	.header {
		width: 640px;
		height: 60px;
		padding-top: 30px;
		position: relative;
		z-index: 20;

		.title {
			color: #eebe4b;
			text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0px -2px 0 #000, 0px 2px 0 #000, -2px 0px 0 #000, 2px 0px 0 #000, 3px 3px 0px #000, 4px 4px 0px #000, 5px 5px 2px rgba(0, 0, 0, 0.8);
			font-family: 'Star4000';
			font-size: 24pt;
			position: absolute;
			width: 250px;

			&.single {
				left: 138px;
				top: 40px;
			}

			&.dual {
				left: 144px;

				&>div {
					position: absolute;
				}

				.top {
					top: -3px;
				}

				.bottom {
					top: 26px;
				}
			}

		}

		.logo {
			top: 30px;
			left: 50px;
			position: absolute;
			z-index: 10;
		}

		.noaa-logo {
			position: absolute;
			top: 39px;
			left: 356px;
		}



		.date-time {
			white-space: pre;
			color: c.$date-time;
			font-family: 'Star4000 Small';
			font-size: 24pt;
			@include u.text-shadow(3px, 1.5px);
			left: 436px;
			width: 170px;
			text-align: right;
			position: absolute;

			&.date {
				padding-top: 22px;
			}
		}
	}

	.main {
		position: relative;

		&.has-scroll {
			width: 640px;
			margin-top: 0;
			height: 320px;
			overflow: hidden;

			&.no-header {
				height: 400px;
				margin-top: 0; // Reset for no-header case since the gap issue is header-related
			}
		}

		&.has-box {
			margin-left: 64px;
			margin-right: 64px;
			width: calc(100% - 128px);
		}

	}

}

#container>.scroll {
	display: none;
	@include u.text-shadow(3px, 1.5px);
	width: 640px;
	height: 77px;
	overflow: hidden;
	margin-top: 3px;
	position: absolute;
	bottom: 0px;
	z-index: 1;

	&.hazard {
		background-color: rgb(112, 35, 35);
	}

	.scroll-container {
		width: 640px;

		.fixed,
		.scroll-header {
			margin-left: 55px;
			margin-right: 55px;
			overflow: hidden;
			white-space: nowrap;
		}

		.scroll-header {
			height: 26px;
			font-family: "Star4000 Small";
			font-size: 20pt;
			margin-top: -10px;
		}

		.fixed {
			font-family: 'Star4000';
			font-size: 24pt;

			.scroll-area {
				text-wrap: nowrap;
				position: relative;
				// the following added by js code as it is dependent on the content of the element
				// transition: left (x)s;
				// left: calc((elem width) - 640px);
			}
		}
	}



}

.radar #container>.scroll {
	z-index: 100;
}

.radar #container>.scroll.hazard {
	z-index: 1000 !important;
}

.wide #container>.scroll {
	width: 854px;
	margin-left: -107px;

	.scroll-container {
		margin-left: 107px;
	}
}