From 5c81b54ca125b4a2943587eb99d18b8efe13ce53 Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Thu, 12 Mar 2026 14:57:24 +0000 Subject: [PATCH] Bring staiton info modal into style with rest of site --- src/lib/assets/global.css | 16 ++- src/lib/components/StationInfo.svelte | 184 +++++++++++++------------- static/stations/nby.yaml | 30 ++--- 3 files changed, 123 insertions(+), 107 deletions(-) diff --git a/src/lib/assets/global.css b/src/lib/assets/global.css index dd525e1..6530c39 100644 --- a/src/lib/assets/global.css +++ b/src/lib/assets/global.css @@ -16,6 +16,18 @@ font-style: normal; } -[id] { - scroll-margin-top: 100px; +:root { + /* Brand Colours */ + --color-brand: #4fd1d1; + --color-brand-light: #5af5f5; + --color-accent: #3c6f79; + --color-accent-light: #5094a2; + --color-title: #ebebeb; + --color-bg-light: #404c55; + --color-bg-dark: #2b343c; + + /* Shadows */ + --color-shadow: hsla(210, 20%, 5%, 0.35); + --shadow-std: 0 4px 12px var(--color-shadow); + --shadow-up: 0 -4px 12px var(--color-shadow); } diff --git a/src/lib/components/StationInfo.svelte b/src/lib/components/StationInfo.svelte index 56f4971..1cce787 100644 --- a/src/lib/components/StationInfo.svelte +++ b/src/lib/components/StationInfo.svelte @@ -103,9 +103,8 @@ ({direction}) {/if} -{platform.platformLength}m + {platform.platformLength}m
- {#if platform.stepFree} {/if}
- {#if platform.dispatchNote} - {platform.dispatchNote} - {/if} - {#if platform.stepFreeNote} - {platform.stepFreeNote} - {/if} + {#if platform.dispatchNote} + {platform.dispatchNote} + {/if} + {#if platform.stepFreeNote} + {platform.stepFreeNote} + {/if}
{#each platform.doorPattern as pattern} @@ -185,14 +184,14 @@ } header { - background: #f8fafc; + background: var(--color-accent); padding: 1rem 1.5rem; - margin-bottom: 50px; + margin-bottom: 50px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; - z-index: 500; + z-index: 500; } .title-group { @@ -202,8 +201,8 @@ } .crs-badge { - background: #1e293b; - color: white; + background: var(--color-bg-light); + color: var(--color-title); font-family: monospace; font-weight: bold; padding: 0.2rem 0.5rem; @@ -214,11 +213,15 @@ h2 { margin: 0; font-size: 1.1rem; - color: #0f172a; + color: var(--color-title); } .close-icon { - background: #ef4444; + background: var(--color-brand); + display: flex; + align-items: center; + justify-content: center; + line-height: 0; border-radius: 50%; width: 32px; height: 32px; @@ -226,14 +229,14 @@ border: none; font-size: 1.5rem; cursor: pointer; - color: #ebebeb; + color: var(--color-bg-light); transition: all 0.2s; } .close-icon:hover { - background: #dc2626; + background: var(--color-brand-light); transform: scale(1.05); - transform: rotate(180deg); + transform: rotate(90deg); } .content { padding: 1.5rem; @@ -255,13 +258,13 @@ border-radius: 10px; } - .platform-card:first-child { - margin-top: 20px; - } + .platform-card:first-child { + margin-top: 20px; + } .platform-card { display: flex; - flex-direction: column; + flex-direction: column; justify-content: space-between; align-items: center; background: #ffffff; @@ -308,7 +311,8 @@ .length-tag { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.85rem; - background: #f1f5f9; + background: var(--color-bg-light); + color: var(--color-title); padding: 0.25rem 0.6rem; border-radius: 4px; border: 1px solid #e2e8f0; @@ -320,80 +324,80 @@ justify-content: center; } - .train-visualiser { - margin-top: 1.25rem; - width: 100%; - padding: 1rem; - background: #f8fafc; - border-radius: 6px; - border: 1px solid #e2e8f0; - display: flex; - flex-direction: column; - gap: 1rem; - } + .train-visualiser { + margin-top: 1.25rem; + width: 100%; + padding: 1rem; + background: #f8fafc; + border-radius: 6px; + border: 1px solid #e2e8f0; + display: flex; + flex-direction: column; + gap: 1rem; + } - .train-row { - display: flex; - flex-direction: column; - gap: 0.5rem; - } + .train-row { + display: flex; + flex-direction: column; + gap: 0.5rem; + } - .door-pattern-kind { - font-size: 0.7rem; - font-weight: 800; - color: #101316; - text-transform: uppercase; - letter-spacing: 0.05em; - } + .door-pattern-kind { + font-size: 0.7rem; + font-weight: 800; + color: #101316; + text-transform: uppercase; + letter-spacing: 0.05em; + } - .coach-row { - display: flex; - gap: 4px; - overflow-x: auto; - padding-bottom: 4px; - } + .coach-row { + display: flex; + gap: 4px; + overflow-x: auto; + padding-bottom: 4px; + } - .coach-unit { - flex: 0 0 32px; - display: flex; - flex-direction: column; - gap: 4px; - } + .coach-unit { + flex: 0 0 32px; + display: flex; + flex-direction: column; + gap: 4px; + } - .coach-body { - height: 20px; - background: #334155; - color: #f8fafc; - font-size: 0.65rem; - font-weight: 700; - display: flex; - align-items: center; - justify-content: center; - border-radius: 2px; - } + .coach-body { + height: 20px; + background: var(--color-accent-light); + color: #f8fafc; + font-size: 0.65rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + } - .coach-unit:first-child .coach-body { - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - background: #0f172a; - } + .coach-unit:first-child .coach-body { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + background: var(--color-accent); + } - .door-status { - display: flex; - justify-content: space-around; - padding: 0 4px; - } + .door-status { + display: flex; + justify-content: space-around; + padding: 0 4px; + } - .dot { - width: 6px; - height: 6px; - background: #b65151; - border-radius: 50%; - transition: all 0.2s ease; - } + .dot { + width: 6px; + height: 6px; + background: #b65151; + border-radius: 50%; + transition: all 0.2s ease; + } - .dot.open { - background: #22c55e; - box-shadow: 0 0 8px #22c55e; - } + .dot.open { + background: #22c55e; + box-shadow: 0 0 5px #22c55e; + } diff --git a/static/stations/nby.yaml b/static/stations/nby.yaml index fa778a1..18beeff 100644 --- a/static/stations/nby.yaml +++ b/static/stations/nby.yaml @@ -11,11 +11,11 @@ platforms: stepFree: true doorPattern: - kind: IET5 - doors: [1,10] + doors: [1, 10] - kind: IET9 - doors: [1,18] + doors: [1, 18] - kind: IET10 - doors: [1,20] + doors: [1, 20] - kind: DMU max-car: 12 - platformId: 1Up @@ -26,11 +26,11 @@ platforms: stepFree: true doorPattern: - kind: IET5 - doors: [1,10] + doors: [1, 10] - kind: IET9 - doors: [1,18] + doors: [1, 18] - kind: IET10 - doors: [1,20] + doors: [1, 20] - kind: DMU max-car: 12 - platformId: 2Dn @@ -41,11 +41,11 @@ platforms: stepFree: true doorPattern: - kind: IET5 - doors: [1,10] + doors: [1, 10] - kind: IET9 - doors: [1,18] + doors: [1, 18] - kind: IET10 - doors: [1,20] + doors: [1, 20] - kind: DMU max-car: 14 - platformId: 2Up @@ -56,11 +56,11 @@ platforms: stepFree: true doorPattern: - kind: IET5 - doors: [1,10] + doors: [1, 10] - kind: IET9 - doors: [1,18] + doors: [1, 18] - kind: IET10 - doors: [1,20] + doors: [1, 20] - kind: DMU max-car: 14 - platformId: 3 @@ -71,10 +71,10 @@ platforms: stepFree: true doorPattern: - kind: IET5 - doors: [1,10] + doors: [1, 10] - kind: IET9 - doors: [0,0] + doors: [0, 0] - kind: IET10 - doors: [0,0] + doors: [0, 0] - kind: DMU max-car: 5