RELEASE V5.5.0 : Voici les modifications apportées :
-> REFONTE TOTALE DE TOUS LES AFFICHEURS CLASSIQUES + QUAIS FONCTIONNALITÉS EN COURS DE DÉVELOPPEMENT : -> ADAPTABILITÉ EN FONCTION DES SITUATIONS
This commit is contained in:
mathis committed
1 parent
b90c699302
commit
9c6ac798f1
26 files changed
+3040
-2190
No files matched your search
@@ -1,344 +1,315 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #0b376d;
|
||||
background-color: #00337f;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #0b376d;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__empty-text {
|
||||
font-size: 6rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
LEFT PANEL
|
||||
CONTAINER (1920x1080)
|
||||
========================================================= */
|
||||
.aff-quais-departs-redesign__left {
|
||||
.aff-classique-quai-dep__container {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-color: #00337f;
|
||||
color: #ffffff;
|
||||
font-family: 'Achemine', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
LEFT PANEL (BLANC - Conforme Image 1)
|
||||
========================================================= */
|
||||
.aff-classique-quai-dep__left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 35%;
|
||||
bottom: 80px;
|
||||
width: 672px;
|
||||
bottom: 85px;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 40px;
|
||||
padding: 42px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__sncf-logo {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
margin-bottom: 25px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__time-status {
|
||||
/* Logo Dynamique */
|
||||
.aff-classique-quai-dep__brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.aff-classique-quai-dep__brand-logo {
|
||||
height: 50px;
|
||||
max-width: 220px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aff-classique-quai-dep__sncf-voyageurs {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #00337f;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Ligne Heure + Statut */
|
||||
.aff-classique-quai-dep__time-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 15px;
|
||||
margin-bottom: 5px;
|
||||
z-index: 2;
|
||||
margin-bottom: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__time {
|
||||
color: #0b376d;
|
||||
.aff-classique-quai-dep__time {
|
||||
color: #00337f;
|
||||
font-weight: 700;
|
||||
font-size: 7.5rem;
|
||||
font-size: 105px;
|
||||
line-height: 0.92;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.aff-classique-quai-dep__status {
|
||||
color: #00337f;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__status {
|
||||
color: #0b376d;
|
||||
.aff-classique-quai-dep__time--suppressed,
|
||||
.aff-classique-quai-dep__status--suppressed {
|
||||
color: #d32f2f !important;
|
||||
}
|
||||
|
||||
.aff-classique-quai-dep__time--delayed,
|
||||
.aff-classique-quai-dep__status--delayed {
|
||||
color: #f5a623 !important;
|
||||
}
|
||||
|
||||
/* Grande Destination */
|
||||
.aff-classique-quai-dep__destination {
|
||||
color: #00337f;
|
||||
font-weight: 700;
|
||||
font-size: 2.4rem;
|
||||
line-height: 1;
|
||||
font-size: 82px;
|
||||
line-height: 1.05;
|
||||
margin-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
z-index: 3;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__destination {
|
||||
color: #0b376d;
|
||||
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-departs-redesign__train-info {
|
||||
/* Info Train (Type + Numéro) */
|
||||
.aff-classique-quai-dep__train-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 2;
|
||||
align-items: baseline;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__train-type {
|
||||
color: #0b376d;
|
||||
.aff-classique-quai-dep__train-type {
|
||||
color: #00337f;
|
||||
font-weight: 700;
|
||||
font-size: 2.2rem;
|
||||
font-size: 38px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__train-number {
|
||||
color: #929bb0;
|
||||
.aff-classique-quai-dep__train-number {
|
||||
color: #7e859b;
|
||||
font-weight: 400;
|
||||
font-size: 2.2rem;
|
||||
font-size: 38px;
|
||||
letter-spacing: 0.5px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__icons {
|
||||
/* Filigrane Vertical "départ" géant (orienté bas vers haut) */
|
||||
.aff-classique-quai-dep__watermark {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
bottom: 20px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__watermark {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: right center;
|
||||
font-size: 17rem; /* Massive size */
|
||||
color: #e5e8ed;
|
||||
font-weight: 700;
|
||||
z-index: 1;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
letter-spacing: 1.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aff-classique-quai-dep__watermark span {
|
||||
display: inline-block;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 0 100%;
|
||||
font-size: 168px;
|
||||
font-weight: 700;
|
||||
color: #e2e8f2;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
RIGHT PANEL
|
||||
RIGHT PANEL (BLEU NUIT - Conforme Image 1)
|
||||
========================================================= */
|
||||
.aff-quais-departs-redesign__right {
|
||||
.aff-classique-quai-dep__right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 672px;
|
||||
right: 0;
|
||||
width: 65%;
|
||||
bottom: 80px;
|
||||
background-color: #0b376d;
|
||||
bottom: 85px;
|
||||
background-color: #00337f;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 0 30px 0;
|
||||
padding: 42px 0 20px 42px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stops-list {
|
||||
.aff-classique-quai-dep__stops-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aff-classique-quai-dep__stops-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 60px; /* Space from left edge */
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px; /* Closer spacing between stops */
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop {
|
||||
.aff-classique-quai-dep__stop-item {
|
||||
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 */
|
||||
min-height: 56px;
|
||||
padding-left: 65px;
|
||||
}
|
||||
|
||||
/* Bullet styling */
|
||||
.aff-quais-departs-redesign__stop-bullet {
|
||||
/* Rail vertical violet/indigo (#5c538f) */
|
||||
.aff-classique-quai-dep__stop-item::before {
|
||||
content: '';
|
||||
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;
|
||||
left: 20px;
|
||||
width: 28px;
|
||||
background-color: #5c538f;
|
||||
top: -15px;
|
||||
bottom: -15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Le rail monte jusqu'en haut au 1er arrêt */
|
||||
.aff-classique-quai-dep__stop-item:first-child::before {
|
||||
top: -600px;
|
||||
}
|
||||
|
||||
/* Le dernier arrêt n'a pas de rail qui continue en dessous */
|
||||
.aff-classique-quai-dep__stop-item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Pastille Jaune (#ffe500 / #fbec22) */
|
||||
.aff-classique-quai-dep__bullet {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #ffe500;
|
||||
border-radius: 50%;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop-text {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
/* Nom de la station */
|
||||
.aff-classique-quai-dep__stop-name {
|
||||
font-size: 42px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.5px;
|
||||
padding-left: 10px; /* Space from bullet */
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
/* The vertical rail segments drawn behind each bullet */
|
||||
.aff-quais-departs-redesign__stop::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 24px; /* Much wider rail */
|
||||
background-color: #5c538f;
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Rail extends all the way to the top */
|
||||
.aff-quais-departs-redesign__stop:first-child::before {
|
||||
top: -1000px;
|
||||
}
|
||||
|
||||
/* Last stop has no rail continuing below */
|
||||
.aff-quais-departs-redesign__stop:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Highlighted Destination Stop */
|
||||
.aff-quais-departs-redesign__stop--dest {
|
||||
/* Gare terminus / mise en avant */
|
||||
.aff-classique-quai-dep__stop-item--dest {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop--dest .aff-quais-departs-redesign__stop-text {
|
||||
.aff-classique-quai-dep__stop-item--dest .aff-classique-quai-dep__stop-name {
|
||||
background-color: #5c538f;
|
||||
padding: 4px 20px 4px 60px; /* Increased left padding to cover bullet */
|
||||
margin-left: -60px; /* Pull back to exactly align with left:0 */
|
||||
border-radius: 4px;
|
||||
padding: 8px 32px 8px 65px;
|
||||
margin-left: -65px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
z-index: 3; /* Behind the bullet (z-index 4) */
|
||||
z-index: 3;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
FOOTER
|
||||
FOOTER & HORLOGE (Conforme Image 1)
|
||||
========================================================= */
|
||||
.aff-quais-departs-redesign__footer {
|
||||
.aff-classique-quai-dep__footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #0b376d;
|
||||
width: 1920px;
|
||||
height: 85px;
|
||||
background-color: #00337f;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 40px;
|
||||
z-index: 10;
|
||||
padding: 0 35px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__footer-left {
|
||||
font-size: 3rem;
|
||||
.aff-classique-quai-dep__footer-track {
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
font-style: italic;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__footer-right {
|
||||
.aff-classique-quai-dep__footer-clock {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__clock {
|
||||
border: 2px solid #ffffff;
|
||||
padding: 4px 14px;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
.aff-classique-quai-dep__clock {
|
||||
background-color: #00337f;
|
||||
border: 2.5px solid #ffffff;
|
||||
padding: 4px 16px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__clock-s {
|
||||
color: #f5a623;
|
||||
.aff-classique-quai-dep__clock-hm {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__time--long-text {
|
||||
font-size: 3.5rem !important;
|
||||
line-height: 1.2 !important;
|
||||
.aff-classique-quai-dep__clock-s {
|
||||
color: #ff8c00;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__time--suppressed,
|
||||
.aff-quais-departs-redesign__status--suppressed {
|
||||
color: #ff4c5b !important;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__time--delayed,
|
||||
.aff-quais-departs-redesign__status--delayed {
|
||||
color: #ff9e43 !important;
|
||||
}
|
||||
|
||||
/* Disrupted Stop styling */
|
||||
.aff-quais-departs-redesign__stop-text--suppressed {
|
||||
text-decoration: line-through;
|
||||
color: #ff4c5b;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop-text--delayed {
|
||||
color: #ff9e43;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop-status-badge {
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop-status-badge--suppressed {
|
||||
color: #ff4c5b;
|
||||
}
|
||||
|
||||
.aff-quais-departs-redesign__stop-status-badge--delayed {
|
||||
color: #ff9e43;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user