🚚 Rename NextPassagesDisplay/NextPassagesPanel (remove Next prefix)

frontend/src/passagesDisplay.module.css

@@ -0,0 +1,96 @@
+
+/* TODO: Remove this class */
+.ar16x9 {
+	aspect-ratio: 16 / 9;
+}
+
+/* Idfm: 1860x1080px */
+.PassagesDisplay {
+	aspect-ratio: 16/9;
+	--reverse-aspect-ratio: 9/16;
+	/* height is set according to the aspect-ratio, don´t touch it */
+	width: 100%;
+	
+	display: flex;
+	flex-direction: column;	   
+
+	background-color: var(--idfm-black);
+}
+
+/* Idfm: 1800x100px (margin: 17px 60px) */
+.header {
+	width: calc(1800/1920*100%);
+	height: calc(100/1080*100%);
+	/*Percentage margin are computed relatively to the nearest block container's width, not height */
+	/* cf. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom */
+	margin: calc(17/1080*var(--reverse-aspect-ratio)*100%) calc(60/1920*100%);
+	
+	display: flex;
+	align-items: center;
+
+	font-family: IDFVoyageur-bold;
+}
+
+.header .transportMode {
+	height: 100%;
+	margin: 0;
+	margin-right: calc(23/1920*100%);
+}
+
+.header .title {
+	height: 50%;
+	width: 70%;
+
+	margin-right: auto;
+}
+
+.header .clock {
+	width: calc(175/1920*100%);
+	height: calc(80/100*100%);
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	
+	border:solid var(--idfm-white) 3px;
+	border-radius: calc(9/86*100%);
+}
+
+.header .clock svg {
+	aspect-ratio: 2.45;
+	height: calc(0.7*100%);
+}
+
+/* Idfm: 1860x892px (margin: 0px 30px) */
+.panelsContainer {
+	width: calc(1860/1920*100%);
+	height: calc(892/1080*100%);
+	margin: 0 calc(30/1920*100%);
+	
+	display: flex;
+	flex-direction: column;
+	
+	background-color: white;
+	
+	border-collapse:separate;
+	border:solid var(--idfm-black) 1px;
+	border-radius: calc(15/1920*100%);
+}
+
+/* Idfm: 1800x54px (margin: 0px 50px) */
+.footer {
+	width: calc(1820/1920*100%);
+	height: calc(54/1080*100%);	   
+	margin: 0 calc(50/1920*100%);
+
+	display: flex;
+	align-items: center;
+	justify-content: right;
+}
+
+.footer div {
+	aspect-ratio: 1;
+	height: 50%;
+
+	margin-left: calc(42/1920*100%);
+}