carrramba-encore-rate/frontend/src/passagesPanel.scss

@use "_utils.scss";

.body {
	.passagesContainer {
		height: 100%;
		width: 100%;

		display: none;

		position: relative;

		/* TODO: Remove the bottom border only if there are 5 displayed lines. */
		.line:last-child {
			border-bottom: 0;
			/* To make up for the bottom border deletion */
			padding-bottom: calc(2px);
		}

		/* Idfm: 1880x176px (margin: 0px 20px) */
		.line {
			width: calc(1880/1920*100%);
			height: calc(100% / 5);
			margin: 0 calc(20/1920*100%);

			display: flex;
			align-items: center;

			/* TODO: compute the border weight according to the parent height */
			/* TODO: Disable border-bottom for the last .line  */
			border-bottom: solid calc(2px);

			svg {
				font-family: IDFVoyageur-bold;
				max-width: 100%;
				max-height: 100%;
			}

		}

		/* Idfm: 100x100px (margin: 0px 15px) */
		.transportMode {
			@extend %transportMode;

			height: calc(100/176*100%);
			margin: 0 calc(15/1920*100%);
		}

		.busLinePicto {
			@extend %busLinePicto;

			height: calc(70/176*100%);
			margin-right: calc(23/1920*100%);
		}

		.metroLinePicto, .tramLinePicto, .trainLinePicto {
			aspect-ratio : 1 / 1;
			height: calc(100/176*100%);
			margin-right: calc(23/1920*100%);
		}

		.destination {
			height: calc(60/176*100%);
			width: 50%;

			font-family: IDFVoyageur-bold;
			text-align: left;
		}

		.trafficStatus {
			height: calc(50/176*100%);
			aspect-ratio: 35/50;
			margin-left: auto;

			display: flex;
			align-items: center;
			justify-content: center;

			svg {
				width: 100%;
			}
		}

		.firstPassage {
			height: calc(100/176*100%);
			aspect-ratio: 2.5;

			display: flex;
			align-items: center;
			justify-content: center;

			padding-right: calc(30/1920*100%);

			/* TODO: compute the border weight according to the parent width */
			border-right: solid calc(5px);

			svg {
				aspect-ratio: 215/50;
				height: calc(50%);
			}
		}

		.unavailableFirstPassage {
			height: calc(100/176*100%);
			aspect-ratio: calc(230/100);

			/* TODO: compute the border weight according to the parent width */
			border-right: solid calc(5px);
		}

		.secondPassage {
			height: calc(45/176*100%);
			aspect-ratio: calc(230/45);
			margin-right: calc(30/1920*100%);

			svg {
				font-family: IDFVoyageur-regular;
			}
		}

		.unavailableSecondPassage {
			height: calc(100/176*100%);
			aspect-ratio: calc(230/100);
			margin-right: calc(30/1920*100%);

			svg {
				font-family: IDFVoyageur-regular;
			}
		}

		%withPlatformPassage {
			height: calc(120/176*100%);

			display: flex;
			flex-direction: column;
		}

		.withPlatformFirstPassage {
			@extend %withPlatformPassage;

			aspect-ratio: 250/120;

			padding-right: calc(30/1920*100%);
			/* TODO: compute the border weight according to the parent width */
			border-right: solid calc(5px);

			.passage {
				aspect-ratio: 215/50;
				height: calc(1/2*100%);

				font-family: IDFVoyageur-bold;
				margin-top: calc(5/176*100%);
			}

			.platform {
				margin-top: auto;
				margin-bottom: calc(5/176*100%);

				rect {
					background-color: var(--idfm-black);
				}

				text {
					vertical-align: middle;
					font-family: IDFVoyageur-bold;
				}
			}
		}

		.withPlatformSecondPassage {
			@extend %withPlatformPassage;

			aspect-ratio: 215/120;

			align-items: end;
			justify-content: center;

			margin-right: calc(30/1920*100%);

			.passage {
				aspect-ratio: 215/45;
				height: calc(45/120*100%);
				/* 5px + (first passage font size - second passage font size/2) to align passages... */
				/* There must exist a better way to align them. */
				margin-top: calc(7.5/176*100%);
			}

			svg {
				font-family: IDFVoyageur-regular;
			}

			.platform {
				rect {
					background-color: var(--idfm-black);
				}

				text {
					vertical-align: middle;
					font-family: IDFVoyageur-bold;
				}
			}
		}

	}

	.displayed {
		display: block;
	}
}