V2.0.0 : VOICI LES MODIFICATIONS MAJEURS APPRTÉES DANS CETTE VERSION :
-> REFONTE DU DESIGN DES AFFICHEURS CLASSIQUES (GÉNÉRAL + QUAIS) -> IMPLÉMENTATION DU DESIGN AFL : GÉNÉRAL ET QUAIS -> CHOIX DE LA SÉLECTION DES TYPES D'AFFICHEURS (GÉNÉRAL / QUAIS) UNE FOIS LE TYPE D'AFFICHEUR SÉLECTIONNÉS EN COURS DE DÉVELOPPEMENT : -> IMPLÉMENTATION DES PERTURBATION DU LANDEMAIN POUR LES HORAIRES DU LANDEMAIN AFFICHÉS AVANT MINUIT. -> IMPLÉMENTATION DES AFFICHEURS D'INFORMATIONS / INFOS TRAVAUX, etc... (AFFICHEURS AFL)
This commit is contained in:
Ferrovia committed
1 parent
f0d9ed9ee7
commit
f06ebbaf48
43 files changed
+10519
-3813
No files matched your search
@@ -1,475 +1,337 @@
|
||||
|
||||
|
||||
.achemine-font-face {
|
||||
/* helper placeholder (no output) */
|
||||
@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_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;
|
||||
}
|
||||
.aff-quais__left--strict {
|
||||
width: 100%;
|
||||
max-width: 0;
|
||||
min-width: 700px;
|
||||
background: var(--white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
/* Remonter l'ensemble du contenu vers le bas pour laisser la place au logo en haut */
|
||||
padding: 140px 32px 24px 32px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
/* leave space at bottom for the footer (height 86px) */
|
||||
height: calc(100vh - 86px);
|
||||
overflow: hidden;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.aff-quais__left--strict,
|
||||
.aff-quais__left--strict * {
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
/* Ensure the left strict zone text uses the intended color (fallback to green-dark) */
|
||||
color: #2d522c;
|
||||
}
|
||||
.aff-quais__type-logo--strict{
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
/* positionné à gauche dans la zone blanche (à droite du logo opérateur) */
|
||||
/* tout à gauche de la zone blanche */
|
||||
left: 32px;
|
||||
width: 120px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.aff-quais__sncf-logo--strict {
|
||||
width: 86px;
|
||||
height: auto;
|
||||
margin-bottom: 18px;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
/* placé à droite du logo du type */
|
||||
left: 140px;
|
||||
z-index: 4;
|
||||
}
|
||||
.aff-quais__watermark {
|
||||
position: absolute;
|
||||
/* move watermark further to the right */
|
||||
right: -180px;
|
||||
top: 70%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
/* police agrandie de 200% */
|
||||
font-size: 200px;
|
||||
color: var(--watermark-green);
|
||||
opacity: 0.07;
|
||||
font-weight: 800;
|
||||
letter-spacing: 6px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.aff-quais__row--time-status {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
z-index: 1;
|
||||
}
|
||||
.aff-quais__time--strict {
|
||||
color: var(--green-dark);
|
||||
font-weight: 800;
|
||||
/* police agrandie de 200% */
|
||||
font-size: 112px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
margin-right: 12px;
|
||||
font-family: 'Achemine';
|
||||
src: url('/public/fonts/achemine_bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Wrapper that contains both the big time and the smaller status when alternating.
|
||||
Keeps the layout width/height stable so alternating does not reflow the surrounding text. */
|
||||
.aff-quais__time-status-wrapper {
|
||||
position: relative;
|
||||
display: inline-block; /* width is determined by the time element in normal flow */
|
||||
height: 112px; /* match .aff-quais__time font-size so status can be aligned at bottom */
|
||||
vertical-align: bottom;
|
||||
overflow: visible;
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #006330; /* Green theme */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aff-quais__time-status-wrapper .aff-quais__time--strict {
|
||||
position: relative; /* keep in flow to define wrapper width */
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 180ms linear;
|
||||
.aff-quais-arrivees-redesign__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #006330;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aff-quais__time-status-wrapper .aff-quais__time-status--strict {
|
||||
position: absolute; /* overlay on the same horizontal position */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0; /* align to bottom similar to previous align-self:flex-end */
|
||||
transition: opacity 180ms linear;
|
||||
.aff-quais-arrivees-redesign__empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aff-quais__time-status-wrapper .hidden { opacity: 0; pointer-events: none; }
|
||||
.aff-quais__time-status-wrapper .visible { opacity: 1; }
|
||||
.aff-quais__time-status--strict {
|
||||
color: var(--accent-yellow);
|
||||
/* police agrandie de 200% */
|
||||
font-size: 44px;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.aff-quais__destination--strict {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
color: var(--green-dark);
|
||||
z-index: 1;
|
||||
}
|
||||
.aff-quais__destination-line1--strict {
|
||||
/* police agrandie de 200% */
|
||||
font-size: 76px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.aff-quais__destination-line2--strict {
|
||||
/* police agrandie de 200% */
|
||||
font-size: 76px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.aff-quais__train-id--strict {
|
||||
margin-top: 12px;
|
||||
color: var(--green-dark);
|
||||
font-weight: 700;
|
||||
/* police agrandie de 200% */
|
||||
font-size: 44px;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.aff-quais__train-number--strict {
|
||||
color: var(--green-dark);
|
||||
font-weight: 400;
|
||||
/* police agrandie de 200% */
|
||||
font-size: 44px;
|
||||
}
|
||||
.aff-quais__quai{
|
||||
margin-top: 8px;
|
||||
color: var(--green-dark);
|
||||
font-weight:800;
|
||||
background: rgba(255,255,255,0.08);
|
||||
padding:6px 10px;
|
||||
border-radius:6px;
|
||||
display:inline-block;
|
||||
.aff-quais-arrivees-redesign__empty-text {
|
||||
font-size: 6rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* central divider */
|
||||
.aff-quais__divider{
|
||||
width:18px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.18));
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:flex-start;
|
||||
padding-top:36px;
|
||||
}
|
||||
.aff-quais__divider:before{
|
||||
content:'';
|
||||
width:6px;
|
||||
background: transparent;
|
||||
box-shadow: 0 18px 0 0 #f0e34f, 0 54px 0 0 #f0e34f, 0 90px 0 0 #f0e34f, 0 126px 0 0 #f0e34f, 0 162px 0 0 #f0e34f, 0 198px 0 0 #f0e34f;
|
||||
display:block;
|
||||
border-radius:4px;
|
||||
/* =========================================================
|
||||
LEFT PANEL
|
||||
========================================================= */
|
||||
.aff-quais-arrivees-redesign__left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 35%;
|
||||
bottom: 80px;
|
||||
background-color: #f3eef4; /* Lilac/Light Grey background */
|
||||
box-sizing: border-box;
|
||||
padding: 30px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Right panel with stops */
|
||||
.aff-quais__right{
|
||||
flex:1;
|
||||
background: linear-gradient(180deg,var(--green) 0%, var(--green-dark) 100%);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
box-sizing:border-box;
|
||||
padding: 24px 36px;
|
||||
}
|
||||
.aff-quais__stops-box{
|
||||
width:100%;
|
||||
max-width:820px;
|
||||
margin-left:24px;
|
||||
}
|
||||
.aff-quais__stops-list{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
width:100%;
|
||||
}
|
||||
.aff-quais__stop{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:18px;
|
||||
padding: 10px 16px;
|
||||
color:#fff;
|
||||
font-size:30px;
|
||||
line-height:1.1;
|
||||
}
|
||||
.aff-quais__bullet{
|
||||
width:14px;
|
||||
height:14px;
|
||||
background: #bbd258; /* yellow bullet */
|
||||
border-radius:50%;
|
||||
display:inline-block;
|
||||
box-shadow: 0 0 0 4px rgba(240,227,79,0.06) inset;
|
||||
}
|
||||
.aff-quais__stop--active{
|
||||
background: rgba(155,123,224,0.15);
|
||||
border-radius:6px;
|
||||
}
|
||||
.aff-quais__stop--active .aff-quais__bullet{
|
||||
background:#9b7be0; /* purple for final */
|
||||
}
|
||||
.aff-quais__stop-text{
|
||||
flex:1;
|
||||
padding-left:6px;
|
||||
.aff-quais-arrivees-redesign__sncf-logo {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
margin-bottom: 25px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* --- STRICT STYLES FOR RIGHT PANEL --- */
|
||||
|
||||
.aff-quais__right--strict {
|
||||
flex: 1;
|
||||
/* use arrivals green gradient */
|
||||
background: linear-gradient(180deg, var(--green) -100%, var(--green-dark) 100%);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 48px 0 48px 0;
|
||||
min-width: 0;
|
||||
/* leave space for footer */
|
||||
height: calc(100vh - 86px);
|
||||
box-sizing: border-box;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
box-shadow: none;
|
||||
position: relative; /* anchor for the stops rail */
|
||||
.aff-quais-arrivees-redesign__time-status {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 15px;
|
||||
margin-bottom: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.aff-quais__stops-list--strict {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
/* variables pour contrôler la colonne de pastilles */
|
||||
--rail-gap: 72px; /* espacement vertical entre pastilles (ajuster si nécessaire) */
|
||||
--rail-offset: 24px; /* décalage vertical initial pour aligner la première pastille */
|
||||
--rail-left: 28px; /* position X du rail inside right panel */
|
||||
--rail-width: 12px; /* largeur du rail/pastille */
|
||||
--ul-padding: 56px; /* padding-left actuel de la liste */
|
||||
/* laisser un espace modéré à gauche pour la colonne de points */
|
||||
padding: 0 0 0 var(--ul-padding);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
position: relative;
|
||||
.aff-quais-arrivees-redesign__time {
|
||||
color: #006330; /* Green theme text */
|
||||
font-weight: 700;
|
||||
font-size: 7.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* élément rail explicite (utilisé pour afficher la colonne de pastilles) */
|
||||
.aff-quais__stops-rail{
|
||||
position: absolute;
|
||||
/* position relative to the right panel container */
|
||||
left: calc(var(--rail-left) - 8px);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* make rail clearly visible and wide enough */
|
||||
width: 30px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
/* base color: same as destination rectangle */
|
||||
background-color: rgba(255,255,255,0.06);
|
||||
overflow: visible;
|
||||
.aff-quais-arrivees-redesign__status {
|
||||
color: #006330; /* Green theme status */
|
||||
font-weight: 700;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aff-quais__rail-dot{
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/* size is set dynamically from JS to match rail width */
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-yellow);
|
||||
box-shadow: 0 0 0 4px rgba(255,230,102,0.06) inset;
|
||||
.aff-quais-arrivees-redesign__destination {
|
||||
color: #006330; /* Green theme destination (origin) */
|
||||
font-weight: 700;
|
||||
font-size: 5.5rem; /* Slightly smaller to fit 2 lines if needed */
|
||||
line-height: 1.1;
|
||||
margin-bottom: 5px;
|
||||
z-index: 2;
|
||||
white-space: normal; /* Allow wrapping */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 13rem; /* Prevent overflowing panel */
|
||||
}
|
||||
|
||||
.aff-quais__stop--strict {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* agrandi de 150% */
|
||||
font-size: calc(2.1rem * 1.5);
|
||||
color: #fff;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
/* espacement augmenté entre les noms des gares */
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.18;
|
||||
padding: 0 0 0 0;
|
||||
position: relative; /* each li is positioned so its ::before aligns with the rail */
|
||||
.aff-quais-arrivees-redesign__train-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.aff-quais__stop-bullet--strict {
|
||||
/* bullets individuels masqués : on utilise une barre verticale */
|
||||
display: none;
|
||||
.aff-quais-arrivees-redesign__train-type {
|
||||
color: #006330; /* Green theme train type */
|
||||
font-weight: 700;
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* pastille positionnée pour chaque item, alignée sur la colonne (rail) */
|
||||
.aff-quais__stop--strict::before{
|
||||
/* disable per-item pseudo pastille — rail handles the dots */
|
||||
display: none;
|
||||
.aff-quais-arrivees-redesign__train-number {
|
||||
color: #7e8a80; /* Grey/Green train number */
|
||||
font-weight: 400;
|
||||
font-size: 2.2rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* barre verticale de points jaunes pour la liste des gares */
|
||||
/* removed ::before — using explicit .aff-quais__stops-rail element instead */
|
||||
|
||||
.aff-quais__stop-text--strict{ /* ensure text doesn't overlap the rail */
|
||||
padding-left: 6px;
|
||||
.aff-quais-arrivees-redesign__icons {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.aff-quais__status--alert{
|
||||
color: #ffe600;
|
||||
font-weight: 800;
|
||||
.aff-quais-arrivees-redesign__watermark {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: right center;
|
||||
font-size: 17rem; /* Massive size */
|
||||
color: #dbebdf; /* Light green/grey watermark */
|
||||
font-weight: 700;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
letter-spacing: 1.5rem;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aff-quais__stop-text--strict {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
/* =========================================================
|
||||
RIGHT PANEL
|
||||
========================================================= */
|
||||
.aff-quais-arrivees-redesign__right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 65%;
|
||||
bottom: 80px;
|
||||
background-color: #006330; /* Green theme */
|
||||
box-sizing: border-box;
|
||||
padding: 30px 0 30px 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aff-quais__stop--strict-dest {
|
||||
font-weight: 800;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: var(--green-dark);
|
||||
border-radius: 6px;
|
||||
padding: 2px 32px 2px 0;
|
||||
margin-left: -45px;
|
||||
width: auto;
|
||||
|
||||
padding-left: 45px;
|
||||
.aff-quais-arrivees-redesign__provenance-title {
|
||||
font-size: 3.4rem;
|
||||
color: #dbeb1a; /* Yellow provenance header */
|
||||
margin-left: 60px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Ensure the highlighted destination stop text is white for readability */
|
||||
.aff-quais__stop--strict-dest .aff-quais__stop-text--strict {
|
||||
color: #ffffff !important;
|
||||
.aff-quais-arrivees-redesign__stops-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 60px; /* Space from left edge */
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px; /* Closer spacing between stops */
|
||||
}
|
||||
|
||||
.aff-quais__container--strict.aff-quais__container--arrivees {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
background: var(--green-dark);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/* make container positioned so the absolute footer can be placed relative to it */
|
||||
position: relative;
|
||||
.aff-quais-arrivees-redesign__stop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 3.4rem;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
min-height: 42px;
|
||||
padding-left: 50px; /* Space for rail and bullet */
|
||||
}
|
||||
|
||||
.aff-quais__separator--strict {
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
max-width: 14px;
|
||||
background: var(--green-dark);
|
||||
/* align separator with the panels which leave room for footer */
|
||||
height: calc(100vh - 86px);
|
||||
display: block;
|
||||
z-index: 2;
|
||||
/* Bullet styling */
|
||||
.aff-quais-arrivees-redesign__stop-bullet {
|
||||
position: absolute;
|
||||
left: 0; /* Centered on 24px rail: (24-16)/2 = 4 */
|
||||
margin-left: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px; /* Slightly larger bullet */
|
||||
height: 16px;
|
||||
background-color: #fbec22;
|
||||
border-radius: 50%;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.aff-quais__right--strict {
|
||||
padding: 18px 0 18px 0;
|
||||
}
|
||||
/* moins d'espace en haut sur petits écrans */
|
||||
.aff-quais__left--strict { padding-top: 80px; }
|
||||
.aff-quais__stops-list--strict {
|
||||
padding-left: 12px;
|
||||
}
|
||||
.aff-quais__stop--strict {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.aff-quais__stop-bullet--strict {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.aff-quais__stop--strict-dest {
|
||||
padding: 1px 6px 1px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.aff-quais-arrivees-redesign__stop-text {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.5px;
|
||||
padding-left: 10px; /* Space from bullet */
|
||||
}
|
||||
|
||||
/* --- END STRICT STYLES FOR RIGHT PANEL --- */
|
||||
|
||||
.aff-quais__footer{
|
||||
position:absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
height:86px;
|
||||
pointer-events:none;
|
||||
}
|
||||
.aff-quais__footer-inner{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
height:100%;
|
||||
padding: 0 28px;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
|
||||
}
|
||||
.aff-quais__footer-left{
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
font-size:20px;
|
||||
}
|
||||
/* CLOCK BOX - unified */
|
||||
.aff-quais__clock-box{
|
||||
background: var(--green-dark);
|
||||
color:#fff;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 4px solid #ffffff;
|
||||
}
|
||||
.aff-quais__clock-main{
|
||||
font-size:18px;
|
||||
font-weight:800;
|
||||
/* The vertical rail segments drawn behind each bullet */
|
||||
.aff-quais-arrivees-redesign__stop::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 24px; /* Much wider rail */
|
||||
background-color: #8fa993; /* Light green-grey rail color */
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* position the clock bottom-right inside a small white rounded box like on the image */
|
||||
.aff-quais__footer-right{
|
||||
position:relative;
|
||||
}
|
||||
.aff-quais__clock{
|
||||
position:relative;
|
||||
}
|
||||
@media (max-width: 900px){
|
||||
.aff-quais__left{width:42%;}
|
||||
.aff-quais__destination-line1{font-size:36px}
|
||||
.aff-quais__destination-line2{font-size:28px}
|
||||
.aff-quais__time{font-size:48px}
|
||||
/* Rail starts at the first bullet's center */
|
||||
.aff-quais-arrivees-redesign__stop:first-child::before {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
/* Last stop has no rail continuing below */
|
||||
.aff-quais-arrivees-redesign__stop:last-child::before {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
FOOTER
|
||||
========================================================= */
|
||||
.aff-quais-arrivees-redesign__footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #006330; /* Green theme */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__footer-left {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
font-style: italic;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__clock {
|
||||
border: 2px solid #ffffff;
|
||||
padding: 4px 14px;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__clock-s {
|
||||
color: #f5a623;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__time--long-text {
|
||||
font-size: 3.5rem !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__time--suppressed,
|
||||
.aff-quais-arrivees-redesign__status--suppressed {
|
||||
color: #ff4c5b !important;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__time--delayed,
|
||||
.aff-quais-arrivees-redesign__status--delayed {
|
||||
color: #ff9e43 !important;
|
||||
}
|
||||
|
||||
/* Disrupted Stop styling */
|
||||
.aff-quais-arrivees-redesign__stop-text--suppressed {
|
||||
text-decoration: line-through;
|
||||
color: #ff4c5b;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__stop-text--delayed {
|
||||
color: #ff9e43;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__stop-status-badge {
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__stop-status-badge--suppressed {
|
||||
color: #ff4c5b;
|
||||
}
|
||||
|
||||
.aff-quais-arrivees-redesign__stop-status-badge--delayed {
|
||||
color: #ff9e43;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user