MrPatator230 committed
commit
3fcdf7e5ef
172 files changed
+52525
No files matched your search
@@ -0,0 +1,488 @@
|
||||
/* Partie gauche strictement comme l'image */
|
||||
.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_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: #fff;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Apply blue color specifically for departures container only (avoid being overridden by arrivées stylesheet)
|
||||
Use :not(.aff-quais__container--arrivees) to scope to departures */
|
||||
.aff-quais__container--strict:not(.aff-quais__container--arrivees) .aff-quais__left--strict,
|
||||
.aff-quais__container--strict:not(.aff-quais__container--arrivees) .aff-quais__left--strict * {
|
||||
color: #0d4a87;
|
||||
}
|
||||
|
||||
/* Strong override for departures container: ensure destination title isn't black/green due to other styles */
|
||||
.aff-quais__container--depart .aff-quais__left--strict,
|
||||
.aff-quais__container--depart .aff-quais__left--strict * {
|
||||
color: #0d4a87 !important;
|
||||
}
|
||||
.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: rgba(23,55,113,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: #0d4a87;
|
||||
font-weight: 800;
|
||||
/* police agrandie de 200% */
|
||||
font-size: 112px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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__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__time-status-wrapper .hidden { opacity: 0; pointer-events: none; }
|
||||
.aff-quais__time-status-wrapper .visible { opacity: 1; }
|
||||
.aff-quais__time-status--strict {
|
||||
color: #0d4a87;
|
||||
/* 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: #0d4a87;
|
||||
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: #0d4a87;
|
||||
font-weight: 700;
|
||||
/* police agrandie de 200% */
|
||||
font-size: 44px;
|
||||
letter-spacing: 0.5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.aff-quais__train-number--strict {
|
||||
color: #0d4a87;
|
||||
font-weight: 400;
|
||||
/* police agrandie de 200% */
|
||||
font-size: 44px;
|
||||
}
|
||||
.aff-quais__quai{
|
||||
margin-top: 8px;
|
||||
color:#0d4a87;
|
||||
font-weight:800;
|
||||
background: rgba(23,55,113,0.08);
|
||||
padding:6px 10px;
|
||||
border-radius:6px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* central divider */
|
||||
.aff-quais__divider{
|
||||
width:18px;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255, 255, 255, 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;
|
||||
}
|
||||
|
||||
/* Right panel with stops */
|
||||
.aff-quais__right{
|
||||
flex:1;
|
||||
background: linear-gradient(180deg,#205aa1 0%, #144b85 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;
|
||||
}
|
||||
|
||||
/* --- STRICT STYLES FOR RIGHT PANEL --- */
|
||||
|
||||
.aff-quais__right--strict {
|
||||
flex: 1;
|
||||
background: #205aa1; /* fond bleu uniforme */
|
||||
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__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;
|
||||
}
|
||||
|
||||
/* é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: #b6d2f7;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.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: #b9d25a;
|
||||
box-shadow: 0 0 0 4px rgba(255,230,102,0.06) inset;
|
||||
}
|
||||
|
||||
.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__stop-bullet--strict {
|
||||
/* bullets individuels masqués : on utilise une barre verticale */
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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__status--alert{
|
||||
color: #ffe600;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.aff-quais__stop-text--strict {
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.aff-quais__stop--strict-dest {
|
||||
font-weight: 800;
|
||||
background: #b6d2f7;
|
||||
color: #205aa1;
|
||||
border-radius: 6px;
|
||||
padding: 2px 32px 2px 0;
|
||||
margin-left: -45px;
|
||||
width: auto;
|
||||
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
/* Ensure the highlighted destination stop text is always white for readability */
|
||||
.aff-quais__stop--strict-dest .aff-quais__stop-text--strict {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.aff-quais__container--strict {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
/* Palette locale pour l'afficheur départs : évite la palette arrivées importée ailleurs */
|
||||
--blue: #205aa1;
|
||||
--blue-dark: #144b85;
|
||||
--accent-yellow: #e1c14c;
|
||||
--white: #ffffff;
|
||||
--watermark-blue: rgba(23,55,113,0.07);
|
||||
background: var(--blue);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
/* make container positioned so the absolute footer can be placed relative to it */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aff-quais__separator--strict {
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
max-width: 14px;
|
||||
background: #205aa1;
|
||||
/* align separator with the panels which leave room for footer */
|
||||
height: calc(100vh - 86px);
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 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: rgba(23,55,113,0.9);
|
||||
color:#fff;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 4px solid #ffffff;
|
||||
}
|
||||
.aff-quais__clock-main{
|
||||
font-size:18px;
|
||||
font-weight:800;
|
||||
}
|
||||
|
||||
/* 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}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user