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