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

style: modernize interface spacing and corners

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-07 20:10:51 +02:00
parent 465b214da4
commit e094745cd9
1 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,14 +63,17 @@ function htmlPage(): string {
<style>
:root {
color-scheme: light;
--bg: #f3efe6;
--panel: rgba(255, 255, 255, 0.82);
--border: rgba(15, 23, 42, 0.12);
--text: #16202a;
--muted: #5b6472;
--accent: #2d6cdf;
--accent-strong: #1f56c2;
--shadow: 0 18px 50px rgba(23, 31, 45, 0.14);
--bg: #eef2f7;
--panel: rgba(255, 255, 255, 0.84);
--border: rgba(15, 23, 42, 0.11);
--text: #0f172a;
--muted: #5f6b7a;
--accent: #2563eb;
--accent-strong: #1d4ed8;
--shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
--radius-xl: 16px;
--radius-lg: 12px;
--radius-md: 10px;
}
* {
@@ -89,8 +92,8 @@ function htmlPage(): string {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(45, 108, 223, 0.16), transparent 30%),
radial-gradient(circle at bottom right, rgba(220, 167, 47, 0.18), transparent 28%),
radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 28%),
radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.08), transparent 26%),
var(--bg);
}
@@ -122,8 +125,8 @@ function htmlPage(): string {
min-height: 0;
display: grid;
grid-template-columns: 360px 1fr;
gap: 16px;
padding: 0 16px 16px;
gap: 14px;
padding: 0 14px 14px;
}
aside,
@@ -132,20 +135,20 @@ function htmlPage(): string {
background: var(--panel);
backdrop-filter: blur(14px);
border: 1px solid var(--border);
border-radius: 20px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
}
aside {
min-height: 0;
padding: 18px;
padding: 16px;
display: grid;
gap: 16px;
gap: 14px;
}
.card {
padding: 16px;
border-radius: 16px;
padding: 15px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.72);
}
@@ -170,8 +173,8 @@ function htmlPage(): string {
input {
width: 100%;
border: 1px solid rgba(15, 23, 42, 0.18);
border-radius: 12px;
padding: 12px 14px;
border-radius: var(--radius-md);
padding: 11px 13px;
font: inherit;
background: white;
}
@@ -185,8 +188,8 @@ function htmlPage(): string {
button {
border: 0;
border-radius: 999px;
padding: 10px 14px;
border-radius: var(--radius-md);
padding: 10px 13px;
font: inherit;
cursor: pointer;
display: inline-flex;
@@ -212,6 +215,7 @@ function htmlPage(): string {
.primary {
background: var(--accent);
color: white;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}
.primary:hover {
@@ -219,17 +223,17 @@ function htmlPage(): string {
}
.secondary {
background: rgba(15, 23, 42, 0.08);
background: rgba(15, 23, 42, 0.06);
color: var(--text);
}
.danger {
background: rgba(157, 23, 77, 0.12);
color: #9d174d;
background: rgba(157, 23, 77, 0.1);
color: #b91c1c;
}
.danger:hover {
background: rgba(157, 23, 77, 0.18);
background: rgba(157, 23, 77, 0.16);
}
.status {
@@ -276,9 +280,9 @@ function htmlPage(): string {
.progress-bar {
height: 10px;
border-radius: 999px;
border-radius: var(--radius-md);
overflow: hidden;
background: rgba(15, 23, 42, 0.1);
background: rgba(15, 23, 42, 0.08);
}
.progress-fill {
@@ -310,8 +314,8 @@ function htmlPage(): string {
grid-template-columns: 52px 1fr;
gap: 12px;
align-items: center;
padding: 10px;
border-radius: 14px;
padding: 11px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 23, 42, 0.06);
}
@@ -320,7 +324,7 @@ function htmlPage(): string {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 10px;
border-radius: 8px;
}
.photo strong {
@@ -340,7 +344,7 @@ function htmlPage(): string {
.empty-state {
padding: 14px;
border-radius: 14px;
border-radius: var(--radius-md);
border: 1px dashed rgba(15, 23, 42, 0.16);
color: var(--muted);
background: rgba(255, 255, 255, 0.45);
@@ -360,7 +364,7 @@ function htmlPage(): string {
position: relative;
min-height: 0;
overflow: hidden;
border-radius: 20px;
border-radius: var(--radius-xl);
border: 1px solid var(--border);
background: var(--panel);
backdrop-filter: blur(14px);
@@ -379,7 +383,7 @@ function htmlPage(): string {
top: 16px;
left: 16px;
padding: 10px 12px;
border-radius: 999px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
@@ -403,6 +407,7 @@ function htmlPage(): string {
.overlay-card {
width: min(1120px, 100%);
overflow: hidden;
border-radius: var(--radius-xl);
}
.overlay-card header {
@@ -436,12 +441,12 @@ function htmlPage(): string {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
border-radius: 8px;
}
.thumb button {
border: 0;
border-radius: 10px;
border-radius: 8px;
padding: 8px 10px;
background: var(--accent);
color: white;
@@ -457,7 +462,7 @@ function htmlPage(): string {
}
.timeline {
padding: 16px;
padding: 15px;
display: grid;
gap: 12px;
}
@@ -484,7 +489,7 @@ function htmlPage(): string {
position: relative;
min-height: 170px;
padding: 14px 12px 10px;
border-radius: 16px;
border-radius: var(--radius-lg);
border: 1px solid rgba(148, 163, 184, 0.18);
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88)),
@@ -592,7 +597,7 @@ function htmlPage(): string {
position: absolute;
top: 14px;
bottom: 34px;
border-radius: 10px;
border-radius: 8px;
border: 1px solid rgba(56, 189, 248, 0.55);
background:
linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(14, 165, 233, 0.08)),
@@ -613,7 +618,7 @@ function htmlPage(): string {
position: absolute;
top: 14px;
bottom: 34px;
border-radius: 10px;
border-radius: 8px;
border: 1px dashed rgba(56, 189, 248, 0.9);
background: rgba(56, 189, 248, 0.16);
pointer-events: none;
@@ -632,7 +637,7 @@ function htmlPage(): string {
}
.timeline-footer span:last-child {
color: rgba(51, 65, 85, 0.92);
color: rgba(30, 41, 59, 0.92);
}
@media (max-width: 920px) {