AdminGit
8f00da0896
-> Conversion du temps de retard pour >=60 Min -> Amélioration du rendu EVA (AFFICHEUR ABANDONNÉ PAR SNCF, Abandon possible) -> AFFICHAGE DE TOUTES LES DONNÉES EN MÊME TEMPS
508 lines
13 KiB
CSS
508 lines
13 KiB
CSS
/* ==========================================================================
|
|
EVA ARRIVEES (AFFICHEUR VOYAGEURS EVA) - CSS
|
|
========================================================================== */
|
|
|
|
/* Container Principal */
|
|
.eva-arr-container {
|
|
font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
background-color: #000824 !important; /* Bleu nuit très profond EVA */
|
|
overflow: hidden !important;
|
|
color: #ffffff !important;
|
|
margin: 0 !important;
|
|
padding: 13px 35px !important;
|
|
box-sizing: border-box !important;
|
|
user-select: none !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
HEADER (En-tête EVA)
|
|
========================================================================== */
|
|
.eva-arr-header {
|
|
height: 103px !important;
|
|
min-height: 103px !important;
|
|
max-height: 103px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
padding: 0 10px !important;
|
|
margin-bottom: 11px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.eva-arr-header-left {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 19px !important;
|
|
}
|
|
|
|
.eva-arr-header-icon {
|
|
width: 59px !important;
|
|
height: 59px !important;
|
|
flex-shrink: 0 !important;
|
|
color: #00d68f !important;
|
|
}
|
|
|
|
.eva-arr-header-titles {
|
|
display: flex !important;
|
|
align-items: baseline !important;
|
|
gap: 12px !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.eva-arr-header-title-main {
|
|
font-size: 56px !important;
|
|
font-weight: 900 !important;
|
|
color: #ffffff !important;
|
|
letter-spacing: 0.77px !important;
|
|
line-height: 1 !important;
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
.eva-arr-header-slash {
|
|
font-size: 41px !important;
|
|
font-weight: 700 !important;
|
|
color: #00d68f !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.eva-arr-header-title-sub {
|
|
font-size: 35px !important;
|
|
font-weight: 700 !important;
|
|
color: #00d68f !important;
|
|
letter-spacing: 0.38px !important;
|
|
line-height: 1 !important;
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
.eva-arr-header-right {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
/* Horloge EVA */
|
|
.eva-arr-clock-box {
|
|
border: 2.2px solid #00d68f !important;
|
|
background-color: #000824 !important;
|
|
border-radius: 8px !important;
|
|
padding: 5px 19px !important;
|
|
display: flex !important;
|
|
align-items: baseline !important;
|
|
gap: 10px !important;
|
|
box-shadow: 0 0 10px rgba(0, 214, 143, 0.15) !important;
|
|
}
|
|
|
|
.eva-arr-clock-main {
|
|
font-size: 52px !important;
|
|
font-weight: 800 !important;
|
|
color: #ffffff !important;
|
|
line-height: 1 !important;
|
|
letter-spacing: 0.38px !important;
|
|
}
|
|
|
|
.eva-arr-clock-seconds {
|
|
font-size: 41px !important;
|
|
font-weight: 800 !important;
|
|
color: #00d68f !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
LISTE DES HORAIRES (Cartes)
|
|
========================================================================== */
|
|
.eva-arr-list {
|
|
flex: 1 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: flex-start !important;
|
|
gap: 13px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
list-style: none !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.eva-arr-row {
|
|
background-color: #e9eef6 !important;
|
|
border-radius: 10px !important;
|
|
display: flex !important;
|
|
align-items: stretch !important;
|
|
height: calc((100% - 39px) / 4) !important;
|
|
min-height: 130px !important;
|
|
box-sizing: border-box !important;
|
|
overflow: hidden !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
COLONNE GAUCHE : HEURE & STATUT
|
|
-------------------------------------------------------------------------- */
|
|
.eva-arr-col-time {
|
|
width: 278px !important;
|
|
min-width: 278px !important;
|
|
max-width: 278px !important;
|
|
background-color: #d7e1f0 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
padding: 9px 12px !important;
|
|
box-sizing: border-box !important;
|
|
border-top-left-radius: 10px !important;
|
|
border-bottom-left-radius: 10px !important;
|
|
}
|
|
|
|
.eva-arr-time-value {
|
|
font-size: 60px !important;
|
|
font-weight: 900 !important;
|
|
color: #000c2f !important;
|
|
line-height: 1 !important;
|
|
margin-bottom: 6px !important;
|
|
letter-spacing: -0.38px !important;
|
|
}
|
|
|
|
/* Pastilles de statut */
|
|
.eva-arr-status-pill {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 8px !important;
|
|
padding: 3px 17px !important;
|
|
border-radius: 20px !important;
|
|
box-sizing: border-box !important;
|
|
height: 41px !important;
|
|
}
|
|
|
|
.eva-arr-status-pill--ontime {
|
|
background-color: #d7e1f0 !important;
|
|
border: 1.8px solid #7d95b5 !important;
|
|
color: #1a2b4c !important;
|
|
}
|
|
|
|
.eva-arr-status-pill--approaching {
|
|
background-color: #d7e1f0 !important;
|
|
border: 1.8px solid #7d95b5 !important;
|
|
color: #1a2b4c !important;
|
|
}
|
|
|
|
.eva-arr-status-pill--atplatform {
|
|
background-color: #1a2b4c !important;
|
|
border: none !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.eva-arr-status-pill--delayed {
|
|
background-color: #ffa74f !important;
|
|
color: #000c2f !important;
|
|
}
|
|
|
|
.eva-arr-status-pill--suppressed {
|
|
background-color: #ff4d6d !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.eva-arr-status-icon {
|
|
width: 27px !important;
|
|
height: 27px !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
.eva-arr-status-text {
|
|
font-size: 24px !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1 !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
SECTION CENTRALE : PROVENANCE & GARES DESSERVIES (VIAS)
|
|
-------------------------------------------------------------------------- */
|
|
.eva-arr-col-center {
|
|
flex: 1 !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
padding: 6px 35px !important;
|
|
box-sizing: border-box !important;
|
|
overflow: hidden !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.eva-arr-origin-row {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 15px !important;
|
|
overflow: hidden !important;
|
|
white-space: nowrap !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.eva-arr-origin-name {
|
|
font-size: 60px !important;
|
|
font-weight: 900 !important;
|
|
color: #000c2f !important;
|
|
line-height: 1.1 !important;
|
|
letter-spacing: -0.38px !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
|
|
/* Badge Motif de Perturbation */
|
|
.eva-arr-perturb-badge {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
gap: 8px !important;
|
|
padding: 4px 15px !important;
|
|
border-radius: 6px !important;
|
|
height: 38px !important;
|
|
box-sizing: border-box !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
.eva-arr-perturb-badge--delayed {
|
|
background-color: #ffa74f !important;
|
|
color: #000c2f !important;
|
|
}
|
|
|
|
.eva-arr-perturb-badge--suppressed {
|
|
background-color: #d63031 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.eva-arr-perturb-badge-icon {
|
|
width: 26px !important;
|
|
height: 26px !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
.eva-arr-perturb-badge-text {
|
|
font-size: 22px !important;
|
|
font-weight: 700 !important;
|
|
line-height: 1.1 !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.eva-arr-vias-direct {
|
|
font-size: 38px !important;
|
|
font-weight: 700 !important;
|
|
color: #00c284 !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.eva-arr-vias-stop--cancelled {
|
|
color: #8b9bb4 !important;
|
|
}
|
|
|
|
/* Section Vias */
|
|
.eva-arr-vias-container {
|
|
display: flex !important;
|
|
align-items: baseline !important;
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.eva-arr-vias-label {
|
|
font-size: 38px !important;
|
|
font-weight: 700 !important;
|
|
color: #00c284 !important;
|
|
margin-right: 10px !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
.eva-arr-vias-scroll-wrapper {
|
|
flex: 1 !important;
|
|
overflow: hidden !important;
|
|
white-space: nowrap !important;
|
|
position: relative !important;
|
|
display: flex !important;
|
|
align-items: baseline !important;
|
|
}
|
|
|
|
.eva-arr-vias-inner {
|
|
display: inline-flex !important;
|
|
align-items: baseline !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.eva-arr-vias-inner--animating {
|
|
animation-name: eva-arr-vias-marquee !important;
|
|
animation-timing-function: linear !important;
|
|
animation-iteration-count: infinite !important;
|
|
padding-left: 20% !important;
|
|
}
|
|
|
|
@keyframes eva-arr-vias-marquee {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
.eva-arr-vias-stop {
|
|
font-size: 38px !important;
|
|
font-weight: 500 !important;
|
|
color: #2c3b57 !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.eva-arr-vias-bullet {
|
|
color: #00c284 !important;
|
|
font-weight: 800 !important;
|
|
margin: 0 10px !important;
|
|
font-size: 30px !important;
|
|
display: inline-block !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
SECTION DROITE : MODE DE TRANSPORT / VOIE & OPERATEUR / NUMERO
|
|
-------------------------------------------------------------------------- */
|
|
.eva-arr-col-right {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
height: 100% !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Boîte Picto Autocar/Bus */
|
|
.eva-arr-bus-box {
|
|
background-color: #000c2f !important;
|
|
border-radius: 8px !important;
|
|
width: 134px !important;
|
|
height: 80% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
margin-right: 15px !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
|
}
|
|
|
|
.eva-arr-bus-icon {
|
|
width: 65px !important;
|
|
height: 65px !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Boîte Voie (si applicable pour train) */
|
|
.eva-arr-voie-box {
|
|
background-color: #000c2f !important;
|
|
border-radius: 8px !important;
|
|
width: 134px !important;
|
|
height: 80% !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
margin-right: 15px !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.eva-arr-voie-label {
|
|
font-size: 19px !important;
|
|
font-weight: 600 !important;
|
|
text-transform: uppercase !important;
|
|
opacity: 0.8 !important;
|
|
}
|
|
|
|
.eva-arr-voie-val {
|
|
font-size: 49px !important;
|
|
font-weight: 900 !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
/* Bloc Opérateur & Numéro Vert Émeraude */
|
|
.eva-arr-train-block {
|
|
background-color: #00d68f !important;
|
|
width: 192px !important;
|
|
min-width: 192px !important;
|
|
height: 100% !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
border-top-right-radius: 10px !important;
|
|
border-bottom-right-radius: 10px !important;
|
|
padding: 0 10px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.eva-arr-train-op {
|
|
font-size: 30px !important;
|
|
font-weight: 700 !important;
|
|
color: #000c2f !important;
|
|
line-height: 1 !important;
|
|
margin-bottom: 3px !important;
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
.eva-arr-train-num {
|
|
font-size: 45px !important;
|
|
font-weight: 900 !important;
|
|
color: #000c2f !important;
|
|
line-height: 1 !important;
|
|
letter-spacing: 0.38px !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
BANDEAU TRAVAUX / ALERTES (Pied de page)
|
|
========================================================================== */
|
|
.eva-arr-bottom-alert {
|
|
background-color: #fca758 !important;
|
|
border-radius: 10px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
padding: 9px 35px !important;
|
|
margin-top: 11px !important;
|
|
gap: 27px !important;
|
|
box-sizing: border-box !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
|
flex-shrink: 0 !important;
|
|
height: 117px !important;
|
|
min-height: 117px !important;
|
|
max-height: 117px !important;
|
|
}
|
|
|
|
.eva-arr-bottom-alert-icon-wrapper {
|
|
flex-shrink: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.eva-arr-bottom-alert-icon {
|
|
width: 63px !important;
|
|
height: 63px !important;
|
|
color: #000c2f !important;
|
|
}
|
|
|
|
.eva-arr-bottom-alert-container {
|
|
flex: 1 !important;
|
|
overflow: hidden !important;
|
|
position: relative !important;
|
|
height: 97px !important;
|
|
max-height: 97px !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.eva-arr-bottom-alert-content {
|
|
color: #000c2f !important;
|
|
font-size: 26px !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.25 !important;
|
|
white-space: normal !important;
|
|
word-break: break-word !important;
|
|
will-change: transform, opacity !important;
|
|
}
|