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