Files
ferrovia-infogare/src/pages/afficheurs/classiques/ClassiquesArrivees.css
T

234 lines
5.3 KiB
CSS

/* ══════════════════════════════════════════════════════════════════
AFFICHEUR CLASSIQUES ARRIVÉES (Image 2)
Résolution standard 1920x1080 - 10 Lignes (108px/ligne)
══════════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'Achemine';
src: url('/public/fonts/achemine_regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Achemine';
src: url('/public/fonts/achemine_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Achemine';
src: url('/public/fonts/achemine_italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Conteneur 1920x1080 */
.aff-classiques-arrivees__container {
--green-odd: #23742f;
--green-even: #144e1c;
--yellow: #ffc700;
--white: #ffffff;
--sidebar-green: #29b851;
position: relative;
width: 1920px;
height: 1080px;
max-width: 1920px;
max-height: 1080px;
overflow: hidden;
background: var(--green-even);
font-family: "Achemine", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
user-select: none;
box-sizing: border-box;
}
/* Watermark / Texte vertical "arrivées" sur la droite */
.aff-classiques-arrivees__sidebar {
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 1080px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
pointer-events: none;
}
.aff-classiques-arrivees__sidebar-text {
color: var(--sidebar-green);
font-size: 200px;
font-weight: 900;
letter-spacing: -2px;
line-height: 1;
transform: rotate(90deg);
transform-origin: center center;
white-space: nowrap;
font-family: "Achemine", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Liste des 10 lignes */
.aff-classiques-arrivees__list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 1080px;
display: flex;
flex-direction: column;
}
/* Chaque ligne (108px de haut) */
.aff-classiques-arrivees__row {
display: flex;
align-items: center;
height: 108px;
min-height: 108px;
max-height: 108px;
box-sizing: border-box;
padding-left: 20px;
padding-right: 240px; /* Espace réservé pour le texte vertical arrivées */
position: relative;
z-index: 2;
overflow: hidden;
}
.aff-classiques-arrivees__row:nth-child(odd) {
background: var(--green-odd);
}
.aff-classiques-arrivees__row:nth-child(even) {
background: var(--green-even);
}
.aff-classiques-arrivees__row--empty {
opacity: 0.9;
}
/* Colonne 1 : Logo opérateur (blanc) */
.aff-classiques-arrivees__col-logo {
width: 105px;
min-width: 105px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.aff-classiques-arrivees__op-logo {
max-width: 88px;
max-height: 52px;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* Colonne 2 : Type de train + Numéro */
.aff-classiques-arrivees__col-meta {
width: 185px;
min-width: 185px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-left: 12px;
height: 100%;
box-sizing: border-box;
}
.aff-classiques-arrivees__train-type {
font-size: 26px;
font-weight: 700;
color: var(--white);
line-height: 1.1;
text-transform: uppercase;
white-space: nowrap;
}
.aff-classiques-arrivees__train-number {
font-size: 26px;
font-weight: 700;
color: var(--white);
line-height: 1.1;
margin-top: 4px;
white-space: nowrap;
}
/* Colonne 3 : Heure (Grande, jaune vif) */
.aff-classiques-arrivees__col-time {
width: 290px;
min-width: 290px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 18px;
height: 100%;
box-sizing: border-box;
}
.aff-classiques-arrivees__time {
color: var(--yellow);
font-size: 80px;
font-weight: 700;
line-height: 1;
letter-spacing: -1px;
white-space: nowrap;
font-family: "Achemine", sans-serif;
}
/* Colonne 4 : Provenance (Gare d'origine) */
.aff-classiques-arrivees__col-destination {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 10px;
padding-right: 16px;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.aff-classiques-arrivees__destination {
color: var(--white);
font-size: 74px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Achemine", sans-serif;
}
/* Colonne 5 : Quai / Voie */
.aff-classiques-arrivees__col-platform {
width: 90px;
min-width: 90px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.aff-classiques-arrivees__platform-box {
width: 58px;
height: 58px;
border: 3.5px solid var(--white);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
box-sizing: border-box;
}
.aff-classiques-arrivees__platform-text {
color: var(--white);
font-size: 44px;
font-weight: 700;
line-height: 1;
font-family: "Achemine", sans-serif;
}