107 lines
2.0 KiB
CSS
107 lines
2.0 KiB
CSS
/* 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 {
|
||
aspect-ratio: 1/1;
|
||
height: 100%;
|
||
margin: 0;
|
||
margin-right: calc(23/1920*100%);
|
||
}
|
||
|
||
.header .title {
|
||
height: 50%;
|
||
width: 70%;
|
||
|
||
margin-right: auto;
|
||
}
|
||
|
||
.header .menu {
|
||
height: calc(80/100*100%);
|
||
aspect-ratio: 1;
|
||
margin-right: calc(30/1920*100%);
|
||
}
|
||
|
||
.header .menu button {
|
||
height: 100%;
|
||
aspect-ratio: 1;
|
||
|
||
background-color: var(--idfm-black);
|
||
border: solid var(--idfm-white) 3px;
|
||
border-radius: calc(9/86*100%);
|
||
}
|
||
|
||
.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%);
|
||
}
|