apps/mapix
4
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(ui): share timeline palette

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-12 14:42:35 +02:00
parent 18f566c892
commit fe7787d1ef
1 changed files with 78 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/server/request-handler.ts
View File

@@ -127,16 +127,21 @@ function htmlPage(): string {
--empty-border: rgba(148, 163, 184, 0.18);
--overlay-bg: rgba(2, 6, 23, 0.84);
--card-border: rgba(148, 163, 184, 0.12);
--leaflet-popup-bg: rgba(15, 23, 42, 0.96);
--leaflet-popup-text: #e2e8f0;
--timeline-bg: #f0f0f0c0;
--timeline-bar-border: rgba(55, 65, 81, 0.92);
--timeline-bar-fill: rgba(156, 163, 175, 0.78);
--timeline-bar-hover: rgba(203, 213, 225, 0.9);
--timeline-bar-selected: rgba(209, 213, 219, 0.92);
--timeline-surface: #f0f0f0c0;
--timeline-surface-soft: rgba(255, 255, 255, 0.76);
--timeline-surface-strong: rgba(255, 255, 255, 0.94);
--timeline-border: rgba(75, 85, 99, 0.24);
--timeline-border-strong: rgba(75, 85, 99, 0.36);
--timeline-text: #303030;
--timeline-text-muted: rgba(48, 48, 48, 0.7);
--timeline-bar-border: rgba(64, 64, 64, 0.96);
--timeline-bar-fill: rgba(128, 128, 128, 0.92);
--timeline-bar-fill-hover: rgba(144, 144, 144, 0.96);
--timeline-bar-fill-selected: rgba(160, 160, 160, 0.96);
--timeline-bar-fill-selected-active: rgba(176, 176, 176, 0.98);
--timeline-axis-color: rgba(156, 163, 175, 0.55);
--timeline-axis-label: rgba(156, 163, 175, 0.72);
--timeline-meta: rgba(156, 163, 175, 0.68);
--timeline-axis-label: #303030;
--timeline-meta: var(--timeline-axis-label);
--timeline-selection-border: rgba(107, 114, 128, 0.42);
--timeline-selection-bg: rgba(107, 114, 128, 0.08);
--timeline-brush-border: rgba(107, 114, 128, 0.62);
@@ -175,16 +180,21 @@ function htmlPage(): string {
--empty-border: rgba(15, 23, 42, 0.16);
--overlay-bg: rgba(8, 12, 18, 0.78);
--card-border: rgba(15, 23, 42, 0.11);
--leaflet-popup-bg: rgba(255, 255, 255, 0.97);
--leaflet-popup-text: #0f172a;
--timeline-bg: #f0f0f0c0;
--timeline-bar-border: rgba(75, 85, 99, 0.9);
--timeline-bar-fill: rgba(156, 163, 175, 0.74);
--timeline-bar-hover: rgba(209, 213, 219, 0.88);
--timeline-bar-selected: rgba(220, 224, 230, 0.92);
--timeline-surface: #f0f0f0c0;
--timeline-surface-soft: rgba(255, 255, 255, 0.76);
--timeline-surface-strong: rgba(255, 255, 255, 0.94);
--timeline-border: rgba(75, 85, 99, 0.24);
--timeline-border-strong: rgba(75, 85, 99, 0.36);
--timeline-text: #303030;
--timeline-text-muted: rgba(48, 48, 48, 0.7);
--timeline-bar-border: rgba(64, 64, 64, 0.96);
--timeline-bar-fill: rgba(128, 128, 128, 0.92);
--timeline-bar-fill-hover: rgba(144, 144, 144, 0.96);
--timeline-bar-fill-selected: rgba(160, 160, 160, 0.96);
--timeline-bar-fill-selected-active: rgba(176, 176, 176, 0.98);
--timeline-axis-color: rgba(107, 114, 128, 0.52);
--timeline-axis-label: rgba(107, 114, 128, 0.7);
--timeline-meta: rgba(107, 114, 128, 0.66);
--timeline-axis-label: #303030;
--timeline-meta: var(--timeline-axis-label);
--timeline-selection-border: rgba(107, 114, 128, 0.3);
--timeline-selection-bg: rgba(107, 114, 128, 0.08);
--timeline-brush-border: rgba(107, 114, 128, 0.52);
@@ -249,8 +259,8 @@ function htmlPage(): string {
overflow: hidden;
z-index: 700;
backdrop-filter: blur(16px);
background: var(--panel-float);
border-color: rgba(255, 255, 255, 0.08);
background: var(--timeline-surface-soft);
border-color: var(--timeline-border);
transition: width 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
}
@@ -283,8 +293,9 @@ function htmlPage(): string {
min-width: 0;
padding: 10px;
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
background: var(--surface-float);
border: 1px solid var(--timeline-border);
background: var(--timeline-surface-soft);
color: var(--timeline-text);
backdrop-filter: blur(16px);
}
@@ -301,7 +312,7 @@ function htmlPage(): string {
.card p,
.card small {
color: var(--muted);
color: var(--timeline-text-muted);
}
label {
@@ -500,8 +511,9 @@ function htmlPage(): string {
align-items: center;
padding: 8px;
border-radius: var(--radius-md);
background: var(--photo-bg);
border: 1px solid var(--card-border);
background: var(--timeline-surface-soft);
border: 1px solid var(--timeline-border);
color: var(--timeline-text);
min-width: 0;
}
@@ -521,7 +533,7 @@ function htmlPage(): string {
}
.photo span {
color: var(--muted);
color: var(--timeline-text-muted);
font-size: 0.7rem;
display: block;
overflow: hidden;
@@ -530,16 +542,16 @@ function htmlPage(): string {
}
.photo.active {
border-color: var(--photo-active-border);
background: var(--photo-active-bg);
border-color: var(--timeline-border-strong);
background: var(--timeline-surface-strong);
}
.empty-state {
padding: 10px;
border-radius: var(--radius-md);
border: 1px dashed var(--empty-border);
color: var(--muted);
background: var(--surface);
border: 1px dashed var(--timeline-border);
color: var(--timeline-text-muted);
background: var(--timeline-surface);
text-align: center;
}
@@ -586,15 +598,19 @@ function htmlPage(): string {
width: min(1120px, 100%);
overflow: hidden;
border-radius: 0;
background: var(--timeline-surface-soft);
border-color: var(--timeline-border);
color: var(--timeline-text);
}
.overlay-card header {
padding: 16px 18px;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--timeline-border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--panel-strong);
background: var(--timeline-surface-strong);
color: var(--timeline-text);
}
.overlay-card img {
@@ -602,12 +618,12 @@ function htmlPage(): string {
width: 100%;
max-height: 78vh;
object-fit: contain;
background: #111;
background: var(--timeline-surface-strong);
}
.close {
background: var(--surface-strong);
color: var(--text);
background: var(--timeline-surface);
color: var(--timeline-text);
}
.thumb {
@@ -615,6 +631,13 @@ function htmlPage(): string {
padding: 8px;
display: grid;
gap: 8px;
background: var(--timeline-surface-soft);
border: 1px solid var(--timeline-border);
color: var(--timeline-text);
}
.thumb small {
color: var(--timeline-text-muted);
}
.thumb img {
@@ -626,8 +649,8 @@ function htmlPage(): string {
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: var(--leaflet-popup-bg);
color: var(--leaflet-popup-text);
background: var(--timeline-surface-strong);
color: var(--timeline-text);
}
.leaflet-popup-content-wrapper {
@@ -637,7 +660,11 @@ function htmlPage(): string {
.leaflet-popup-content {
margin: 10px 12px;
color: var(--leaflet-popup-text);
color: var(--timeline-text);
}
.leaflet-popup-content small {
color: var(--timeline-text-muted);
}
.photo-map-marker {
@@ -678,7 +705,7 @@ function htmlPage(): string {
backdrop-filter: none;
background: transparent;
opacity: 1;
border-color: rgba(255, 255, 255, 0.08);
border-color: var(--timeline-border);
transition: height 180ms ease, transform 180ms ease, opacity 180ms ease, padding 180ms ease;
}
@@ -700,7 +727,7 @@ function htmlPage(): string {
}
.timeline-summary {
color: var(--muted);
color: var(--timeline-text-muted);
font-size: 0.72rem;
}
@@ -717,7 +744,7 @@ function htmlPage(): string {
padding: 4px 6px 4px;
border-radius: 0;
border: 0;
background: var(--timeline-bg);
background: var(--timeline-surface);
overflow: hidden;
touch-action: none;
user-select: none;
@@ -755,8 +782,8 @@ function htmlPage(): string {
width: 100%;
border-radius: inherit;
min-height: 3px;
background: #808080;
border: 1px solid #404040;
background: var(--timeline-bar-fill);
border: 1px solid var(--timeline-bar-border);
transition: transform 140ms ease, background 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
transform-origin: bottom;
box-shadow: none;
@@ -765,11 +792,11 @@ function htmlPage(): string {
.timeline-bar:hover .timeline-bar-fill,
.timeline-bar.active .timeline-bar-fill {
background: #909090;
background: var(--timeline-bar-fill-hover);
}
.timeline-bar.selected .timeline-bar-fill {
background: #a0a0a0;
background: var(--timeline-bar-fill-selected);
}
.timeline-bar.active .timeline-bar-fill {
@@ -777,7 +804,7 @@ function htmlPage(): string {
}
.timeline-bar.selected.active .timeline-bar-fill {
background: #b0b0b0;
background: var(--timeline-bar-fill-selected-active);
}
.timeline-bar-meta {
@@ -787,7 +814,7 @@ function htmlPage(): string {
transform: translateX(-50%);
white-space: nowrap;
font-size: 0.62rem;
color: var(--timeline-meta);
color: var(--timeline-axis-label);
font-variant-numeric: tabular-nums;
pointer-events: none;
}
@@ -806,10 +833,10 @@ function htmlPage(): string {
height: 28px;
padding: 0;
justify-content: center;
background: rgba(255, 255, 255, 0.42);
color: var(--text);
background: var(--timeline-surface-soft);
color: var(--timeline-text);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(75, 85, 99, 0.24);
border: 1px solid var(--timeline-border);
}
@media (max-width: 920px) {