OwlBoard/route-maps
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bring staiton info modal into style with rest of site

Browse Source
This commit is contained in:
Fred Boniface
2026-03-12 14:57:24 +00:00
parent 1add69b0eb
commit 5c81b54ca1
3 changed files with 123 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/assets/global.css
View File

@@ -16,6 +16,18 @@
font-style: normal; font-style: normal;
} }
[id] { :root {
scroll-margin-top: 100px; /* 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);
} }

30
src/lib/components/StationInfo.svelte
View File

@@ -105,7 +105,6 @@
</div> </div>
<span class="length-tag">{platform.platformLength}m</span> <span class="length-tag">{platform.platformLength}m</span>
<div class="platform-meta"> <div class="platform-meta">
{#if platform.stepFree} {#if platform.stepFree}
<span class="icon-tag" title="Step-free access" <span class="icon-tag" title="Step-free access"
><IconDisabled color="#2563eb" /></span ><IconDisabled color="#2563eb" /></span
@@ -185,7 +184,7 @@
} }
header { header {
background: #f8fafc; background: var(--color-accent);
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
margin-bottom: 50px; margin-bottom: 50px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
@@ -202,8 +201,8 @@
} }
.crs-badge { .crs-badge {
background: #1e293b; background: var(--color-bg-light);
color: white; color: var(--color-title);
font-family: monospace; font-family: monospace;
font-weight: bold; font-weight: bold;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
@@ -214,11 +213,15 @@
h2 { h2 {
margin: 0; margin: 0;
font-size: 1.1rem; font-size: 1.1rem;
color: #0f172a; color: var(--color-title);
} }
.close-icon { .close-icon {
background: #ef4444; background: var(--color-brand);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: 50%; border-radius: 50%;
width: 32px; width: 32px;
height: 32px; height: 32px;
@@ -226,14 +229,14 @@
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
cursor: pointer; cursor: pointer;
color: #ebebeb; color: var(--color-bg-light);
transition: all 0.2s; transition: all 0.2s;
} }
.close-icon:hover { .close-icon:hover {
background: #dc2626; background: var(--color-brand-light);
transform: scale(1.05); transform: scale(1.05);
transform: rotate(180deg); transform: rotate(90deg);
} }
.content { .content {
padding: 1.5rem; padding: 1.5rem;
@@ -308,7 +311,8 @@
.length-tag { .length-tag {
font-family: 'JetBrains Mono', 'Fira Code', monospace; font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.85rem; font-size: 0.85rem;
background: #f1f5f9; background: var(--color-bg-light);
color: var(--color-title);
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
@@ -362,7 +366,7 @@
.coach-body { .coach-body {
height: 20px; height: 20px;
background: #334155; background: var(--color-accent-light);
color: #f8fafc; color: #f8fafc;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
@@ -375,7 +379,7 @@
.coach-unit:first-child .coach-body { .coach-unit:first-child .coach-body {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
background: #0f172a; background: var(--color-accent);
} }
.door-status { .door-status {
@@ -394,6 +398,6 @@
.dot.open { .dot.open {
background: #22c55e; background: #22c55e;
box-shadow: 0 0 8px #22c55e; box-shadow: 0 0 5px #22c55e;
} }
</style> </style>