198 lines
3.7 KiB
CSS
198 lines
3.7 KiB
CSS
.passagesContainer {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
display: none;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.displayed {
|
|
display: block;
|
|
}
|
|
|
|
/* TODO: Remove the bottom border only if there are 5 displayed lines. */
|
|
.passagesContainer .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);
|
|
}
|
|
|
|
.line svg {
|
|
font-family: IDFVoyageur-bold;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
/* Idfm: 100x100px (margin: 0px 15px) */
|
|
.transportMode {
|
|
aspect-ratio : 1 / 1;
|
|
height: calc(100/176*100%);
|
|
margin: 0 calc(15/1920*100%);
|
|
}
|
|
|
|
.busLinePicto {
|
|
aspect-ratio : 2.25;
|
|
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;
|
|
}
|
|
|
|
.trafficStatus 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);
|
|
}
|
|
|
|
.unavailableFirstPassage {
|
|
height: calc(100/176*100%);
|
|
aspect-ratio: calc(230/100);
|
|
margin-right: calc(30/1920*100%);
|
|
|
|
/* TODO: compute the border weight according to the parent width */
|
|
border-right: solid calc(5px);
|
|
}
|
|
|
|
.firstPassage svg {
|
|
aspect-ratio: 215/50;
|
|
height: calc(1/2*100%);
|
|
}
|
|
|
|
.secondPassage {
|
|
height: calc(45/176*100%);
|
|
aspect-ratio: calc(230/45);
|
|
margin-right: calc(30/1920*100%);
|
|
}
|
|
|
|
.secondPassage svg {
|
|
font-family: IDFVoyageur-regular;
|
|
}
|
|
|
|
.unavailableSecondPassage {
|
|
height: calc(100/176*100%);
|
|
aspect-ratio: calc(230/100);
|
|
margin-right: calc(30/1920*100%);
|
|
}
|
|
|
|
.unavailableSecondPassage svg {
|
|
font-family: IDFVoyageur-regular;
|
|
}
|
|
|
|
.withPlatformFirstPassage {
|
|
height: calc(120/176*100%);
|
|
aspect-ratio: 250/120;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding-right: calc(30/1920*100%);
|
|
|
|
/* TODO: compute the border weight according to the parent width */
|
|
border-right: solid calc(5px);
|
|
}
|
|
|
|
.withPlatformFirstPassage .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%);
|
|
}
|
|
|
|
.withPlatformFirstPassage .platform rect {
|
|
background-color: var(--idfm-black);
|
|
}
|
|
|
|
.withPlatformFirstPassage .platform text {
|
|
vertical-align: middle;
|
|
font-family: IDFVoyageur-bold;
|
|
}
|
|
|
|
.withPlatformSecondPassage {
|
|
height: calc(120/176*100%);
|
|
aspect-ratio: 215/120;
|
|
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
margin-right: calc(30/1920*100%);
|
|
}
|
|
|
|
|
|
.withPlatformSecondPassage .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%);
|
|
}
|
|
|
|
.withPlatformSecondPassage svg {
|
|
font-family: IDFVoyageur-regular;
|
|
}
|
|
|
|
.withPlatformSecondPassage .platform rect {
|
|
background-color: var(--idfm-black);
|
|
}
|
|
|
|
.withPlatformSecondPassage .platform text {
|
|
vertical-align: middle;
|
|
font-family: IDFVoyageur-bold;
|
|
}
|