Refonte complète et fidèle des afficheurs Classiques Départs et Arrivées selon les images
This commit is contained in:
mathis committed
1 parent
62f268e677
commit
326e3e7c8b
4 files changed
+408
-765
No files matched your search
@@ -1,6 +1,8 @@
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
Fontes Achemine
|
||||
AFFICHEUR CLASSIQUES DÉPARTS (Image 1)
|
||||
Résolution standard 1920x1080 - 10 Lignes (108px/ligne)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Achemine';
|
||||
src: url('/public/fonts/achemine_regular.ttf') format('truetype');
|
||||
@@ -23,400 +25,211 @@
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
ANIMATIONS
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Info cause perturbation — slide-in de droite vers la gauche */
|
||||
@keyframes infoWrapperGrow {
|
||||
from { max-width: 0; }
|
||||
to { max-width: 576px; }
|
||||
}
|
||||
|
||||
@keyframes infoSlideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
40% { opacity: 1; }
|
||||
to { transform: translateX(0%); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
CONTENEUR PRINCIPAL
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Conteneur 1920x1080 */
|
||||
.aff-classiques-departs__container {
|
||||
/* Couleurs inspirées du vrai afficheur SNCF */
|
||||
--yellow: #FFCC00;
|
||||
--blue-bg: #003a79;
|
||||
--blue-odd: #0163ab;
|
||||
--blue-even: #003a79;
|
||||
--text-white: #ffffff;
|
||||
--text-muted: #7EB8E0;
|
||||
--blue-odd: #004b93;
|
||||
--blue-even: #003066;
|
||||
--yellow: #ffc700;
|
||||
--white: #ffffff;
|
||||
--sidebar-blue: #1084d7;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
max-width: 1920px;
|
||||
max-height: 1080px;
|
||||
overflow: hidden;
|
||||
background: var(--blue-bg);
|
||||
font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
WATERMARK "départs" — pivotée à 90°, fixée à droite
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__watermark {
|
||||
position: absolute;
|
||||
right: -97px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: center;
|
||||
/* Taille géante, très visible comme dans l'image */
|
||||
font-size: 248px;
|
||||
color: #1389D2;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.05em;
|
||||
pointer-events: none;
|
||||
background: var(--blue-even);
|
||||
font-family: "Achemine", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
opacity: 0.3; /* Opacité diminuée */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
LISTE STATIQUE — 10 lignes sur exactement 1080px
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Watermark / Texte vertical "départs" sur la droite */
|
||||
.aff-classiques-departs__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-departs__sidebar-text {
|
||||
color: var(--sidebar-blue);
|
||||
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-departs__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
MODE DÉFILEMENT — conteneur + track animé
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__scroll-container {
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Le track contient 2× les données pour une boucle seamless */
|
||||
.aff-classiques-departs__scroll-track {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
ROW — chaque ligne occupe 1/10 de 1080px
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Chaque ligne (108px de haut) */
|
||||
.aff-classiques-departs__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 108px;
|
||||
height: 108px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
min-height: 108px;
|
||||
max-height: 108px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
padding-right: 240px; /* Espace réservé pour le texte vertical départs */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Alternance de tons bleus (comme l'image) */
|
||||
.aff-classiques-departs__row:nth-child(odd) { background: var(--blue-odd); }
|
||||
.aff-classiques-departs__row:nth-child(even) { background: var(--blue-even); }
|
||||
|
||||
.aff-classiques-departs__row--empty {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--text-white);
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
.aff-classiques-departs__row:nth-child(odd) {
|
||||
background: var(--blue-odd);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 1 — Logo opérateur (~9 % largeur)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__row:nth-child(even) {
|
||||
background: var(--blue-even);
|
||||
}
|
||||
|
||||
.aff-classiques-departs__row--empty {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Colonne 1 : Logo opérateur (blanc) */
|
||||
.aff-classiques-departs__col-logo {
|
||||
width: 173px;
|
||||
flex-shrink: 0;
|
||||
width: 105px;
|
||||
min-width: 105px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__logo-box {
|
||||
width: 100%;
|
||||
/* Logo prend ~65% de la hauteur de la ligne */
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__op-logo {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 88px;
|
||||
max-height: 52px;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.aff-classiques-departs__logo-text {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 2 — Type + Numéro OU Statut (~11 % largeur)
|
||||
Alterne toutes les 4 secondes
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Colonne 2 : Type de train + Numéro */
|
||||
.aff-classiques-departs__col-meta {
|
||||
width: 211px;
|
||||
flex-shrink: 0;
|
||||
width: 185px;
|
||||
min-width: 185px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding-left: 12px;
|
||||
height: 100%;
|
||||
padding: 0 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
gap: 1px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Vue normale — type (ex: "MOBIGO") */
|
||||
.aff-classiques-departs__train-type {
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Vue normale — numéro de sillon (ex: "894251") */
|
||||
.aff-classiques-departs__train-number {
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Vue statut — à l'heure */
|
||||
.aff-classiques-departs__status-ontime {
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Vue statut — retardé */
|
||||
.aff-classiques-departs__status-delayed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__status-label {
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__status-value {
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Vue statut — supprimé */
|
||||
.aff-classiques-departs__status-suppressed {
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 3 — Heure (~15 % largeur)
|
||||
Grande, jaune vif (#FFCC00), bold — comme dans l'image
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Colonne 3 : Heure (Grande, jaune vif) */
|
||||
.aff-classiques-departs__col-time {
|
||||
width: 288px;
|
||||
flex-shrink: 0;
|
||||
width: 290px;
|
||||
min-width: 290px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-left: 18px;
|
||||
height: 100%;
|
||||
padding: 0 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__time {
|
||||
/* Jaune vif exactement comme dans la vidéo/image */
|
||||
color: var(--yellow);
|
||||
font-size: 80px;
|
||||
font-weight: 700;
|
||||
/* Grande taille — occupe ~65% de la hauteur de ligne */
|
||||
font-size: 70px;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
white-space: nowrap;
|
||||
font-family: "Achemine", sans-serif;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 4 — Destination + Info cause (flex:1 — prend tout le reste)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Colonne 4 : Destination */
|
||||
.aff-classiques-departs__col-destination {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
padding-left: 10px;
|
||||
padding-right: 16px;
|
||||
height: 100%;
|
||||
padding-right: 10px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Texte destination — blanc, bold, très grand */
|
||||
.aff-classiques-departs__destination {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 70px;
|
||||
color: var(--white);
|
||||
font-size: 74px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
font-family: "Achemine", sans-serif;
|
||||
}
|
||||
|
||||
/* ─── Wrapper animé cause perturbation ────────────────────────── */
|
||||
.aff-classiques-departs__info-wrapper {
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
max-width: 0;
|
||||
animation: infoWrapperGrow 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__info-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: translateX(100%);
|
||||
animation: infoSlideIn 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__separator {
|
||||
color: var(--text-white);
|
||||
font-size: 49px;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
padding: 0 17px;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__info-text {
|
||||
color: var(--text-white);
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
max-width: 422px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 5 — Quai OU icône bus (~6.5 % largeur)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
/* Colonne 5 : Quai / Voie */
|
||||
.aff-classiques-departs__col-platform {
|
||||
width: 125px;
|
||||
flex-shrink: 0;
|
||||
width: 90px;
|
||||
min-width: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
/* Boîte quai — bordure blanche */
|
||||
.aff-classiques-departs__platform-box {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.88);
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 3.5px solid var(--white);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__platform-text {
|
||||
color: var(--text-white);
|
||||
color: var(--white);
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
font-size: 49px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
HORLOGE — superposée en bas à droite (z-index élevé)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__footer {
|
||||
position: absolute;
|
||||
right: 23px;
|
||||
bottom: 9px;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__clock-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__clock-box {
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.88);
|
||||
background: rgba(0, 51, 102, 0.93);
|
||||
border-radius: 8px;
|
||||
padding: 4px 21px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.aff-classiques-departs__clock-main {
|
||||
color: var(--text-white);
|
||||
font-weight: 800;
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__clock-seconds {
|
||||
color: var(--yellow);
|
||||
font-weight: 800;
|
||||
font-size: 29px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* masqué */
|
||||
.aff-classiques-departs__station-box { display: none; }
|
||||
font-family: "Achemine", sans-serif;
|
||||
}
|
||||
Reference in new issue
Block a user