style: calm palette and square surfaces
This commit is contained in:
@@ -62,90 +62,90 @@ function htmlPage(): string {
|
|||||||
/>
|
/>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--radius-xl: 16px;
|
--radius-xl: 0;
|
||||||
--radius-lg: 12px;
|
--radius-lg: 0;
|
||||||
--radius-md: 10px;
|
--radius-md: 0;
|
||||||
--shadow: 0 16px 42px rgba(2, 6, 23, 0.24);
|
--shadow: 0 12px 30px rgba(2, 6, 23, 0.14);
|
||||||
--shadow-soft: 0 10px 24px rgba(2, 6, 23, 0.14);
|
--shadow-soft: 0 8px 18px rgba(2, 6, 23, 0.1);
|
||||||
--chart-grid: rgba(255, 255, 255, 0.04);
|
--chart-grid: rgba(255, 255, 255, 0.035);
|
||||||
--chart-band: rgba(59, 130, 246, 0.18);
|
--chart-band: rgba(100, 116, 139, 0.16);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="dark"] {
|
body[data-theme="dark"] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--bg: #0b1220;
|
--bg: #0f172a;
|
||||||
--bg-accent-a: rgba(37, 99, 235, 0.16);
|
--bg-accent-a: rgba(71, 85, 105, 0.1);
|
||||||
--bg-accent-b: rgba(14, 116, 144, 0.12);
|
--bg-accent-b: rgba(30, 41, 59, 0.08);
|
||||||
--panel: rgba(15, 23, 42, 0.82);
|
--panel: rgba(15, 23, 42, 0.84);
|
||||||
--panel-strong: rgba(15, 23, 42, 0.92);
|
--panel-strong: rgba(15, 23, 42, 0.96);
|
||||||
--surface: rgba(15, 23, 42, 0.62);
|
--surface: rgba(15, 23, 42, 0.6);
|
||||||
--surface-strong: rgba(30, 41, 59, 0.84);
|
--surface-strong: rgba(30, 41, 59, 0.88);
|
||||||
--border: rgba(148, 163, 184, 0.16);
|
--border: rgba(148, 163, 184, 0.14);
|
||||||
--border-strong: rgba(148, 163, 184, 0.24);
|
--border-strong: rgba(148, 163, 184, 0.2);
|
||||||
--text: #e5eefb;
|
--text: #e2e8f0;
|
||||||
--muted: #93a3b8;
|
--muted: #94a3b8;
|
||||||
--accent: #60a5fa;
|
--accent: #94a3b8;
|
||||||
--accent-strong: #3b82f6;
|
--accent-strong: #cbd5e1;
|
||||||
--input-bg: rgba(15, 23, 42, 0.88);
|
--input-bg: rgba(15, 23, 42, 0.9);
|
||||||
--button-secondary-bg: rgba(148, 163, 184, 0.12);
|
--button-secondary-bg: rgba(148, 163, 184, 0.1);
|
||||||
--button-secondary-hover: rgba(148, 163, 184, 0.18);
|
--button-secondary-hover: rgba(148, 163, 184, 0.16);
|
||||||
--danger-bg: rgba(239, 68, 68, 0.12);
|
--danger-bg: rgba(239, 68, 68, 0.1);
|
||||||
--danger-hover: rgba(239, 68, 68, 0.18);
|
--danger-hover: rgba(239, 68, 68, 0.14);
|
||||||
--danger-text: #fca5a5;
|
--danger-text: #fca5a5;
|
||||||
--status-tint: rgba(96, 165, 250, 0.16);
|
--status-tint: rgba(148, 163, 184, 0.14);
|
||||||
--progress-track: rgba(148, 163, 184, 0.16);
|
--progress-track: rgba(148, 163, 184, 0.14);
|
||||||
--photo-bg: rgba(15, 23, 42, 0.55);
|
--photo-bg: rgba(15, 23, 42, 0.56);
|
||||||
--photo-active-bg: rgba(37, 99, 235, 0.22);
|
--photo-active-bg: rgba(71, 85, 105, 0.22);
|
||||||
--photo-active-border: rgba(96, 165, 250, 0.44);
|
--photo-active-border: rgba(148, 163, 184, 0.28);
|
||||||
--empty-border: rgba(148, 163, 184, 0.22);
|
--empty-border: rgba(148, 163, 184, 0.18);
|
||||||
--map-label-bg: rgba(15, 23, 42, 0.92);
|
--map-label-bg: rgba(15, 23, 42, 0.94);
|
||||||
--map-label-border: rgba(148, 163, 184, 0.16);
|
--map-label-border: rgba(148, 163, 184, 0.14);
|
||||||
--overlay-bg: rgba(3, 7, 18, 0.84);
|
--overlay-bg: rgba(2, 6, 23, 0.84);
|
||||||
--card-border: rgba(148, 163, 184, 0.14);
|
--card-border: rgba(148, 163, 184, 0.12);
|
||||||
--leaflet-popup-bg: rgba(15, 23, 42, 0.96);
|
--leaflet-popup-bg: rgba(15, 23, 42, 0.96);
|
||||||
--leaflet-popup-text: #e5eefb;
|
--leaflet-popup-text: #e2e8f0;
|
||||||
--timeline-bg:
|
--timeline-bg:
|
||||||
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)),
|
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)),
|
||||||
radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 42%);
|
radial-gradient(circle at top left, rgba(71, 85, 105, 0.14), transparent 42%);
|
||||||
--chart-grid: rgba(255, 255, 255, 0.04);
|
--chart-grid: rgba(255, 255, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme="light"] {
|
body[data-theme="light"] {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--bg: #eef2f7;
|
--bg: #eef2f6;
|
||||||
--bg-accent-a: rgba(37, 99, 235, 0.12);
|
--bg-accent-a: rgba(100, 116, 139, 0.08);
|
||||||
--bg-accent-b: rgba(15, 118, 110, 0.08);
|
--bg-accent-b: rgba(148, 163, 184, 0.06);
|
||||||
--panel: rgba(255, 255, 255, 0.84);
|
--panel: rgba(255, 255, 255, 0.86);
|
||||||
--panel-strong: rgba(255, 255, 255, 0.94);
|
--panel-strong: rgba(255, 255, 255, 0.96);
|
||||||
--surface: rgba(255, 255, 255, 0.72);
|
--surface: rgba(255, 255, 255, 0.8);
|
||||||
--surface-strong: rgba(255, 255, 255, 0.88);
|
--surface-strong: rgba(241, 245, 249, 0.96);
|
||||||
--border: rgba(15, 23, 42, 0.11);
|
--border: rgba(15, 23, 42, 0.1);
|
||||||
--border-strong: rgba(15, 23, 42, 0.18);
|
--border-strong: rgba(15, 23, 42, 0.16);
|
||||||
--text: #0f172a;
|
--text: #111827;
|
||||||
--muted: #5f6b7a;
|
--muted: #667085;
|
||||||
--accent: #2563eb;
|
--accent: #64748b;
|
||||||
--accent-strong: #1d4ed8;
|
--accent-strong: #475569;
|
||||||
--input-bg: white;
|
--input-bg: white;
|
||||||
--button-secondary-bg: rgba(15, 23, 42, 0.06);
|
--button-secondary-bg: rgba(15, 23, 42, 0.05);
|
||||||
--button-secondary-hover: rgba(15, 23, 42, 0.1);
|
--button-secondary-hover: rgba(15, 23, 42, 0.08);
|
||||||
--danger-bg: rgba(157, 23, 77, 0.1);
|
--danger-bg: rgba(120, 53, 15, 0.08);
|
||||||
--danger-hover: rgba(157, 23, 77, 0.16);
|
--danger-hover: rgba(120, 53, 15, 0.14);
|
||||||
--danger-text: #b91c1c;
|
--danger-text: #b91c1c;
|
||||||
--status-tint: rgba(37, 99, 235, 0.12);
|
--status-tint: rgba(100, 116, 139, 0.12);
|
||||||
--progress-track: rgba(15, 23, 42, 0.08);
|
--progress-track: rgba(15, 23, 42, 0.08);
|
||||||
--photo-bg: rgba(255, 255, 255, 0.72);
|
--photo-bg: rgba(255, 255, 255, 0.76);
|
||||||
--photo-active-bg: rgba(45, 108, 223, 0.12);
|
--photo-active-bg: rgba(100, 116, 139, 0.12);
|
||||||
--photo-active-border: rgba(45, 108, 223, 0.42);
|
--photo-active-border: rgba(100, 116, 139, 0.3);
|
||||||
--empty-border: rgba(15, 23, 42, 0.16);
|
--empty-border: rgba(15, 23, 42, 0.16);
|
||||||
--map-label-bg: rgba(255, 255, 255, 0.92);
|
--map-label-bg: rgba(255, 255, 255, 0.94);
|
||||||
--map-label-border: rgba(15, 23, 42, 0.08);
|
--map-label-border: rgba(15, 23, 42, 0.08);
|
||||||
--overlay-bg: rgba(8, 12, 18, 0.82);
|
--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);
|
--leaflet-popup-bg: rgba(255, 255, 255, 0.97);
|
||||||
--leaflet-popup-text: #0f172a;
|
--leaflet-popup-text: #0f172a;
|
||||||
--timeline-bg:
|
--timeline-bg:
|
||||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92)),
|
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92)),
|
||||||
radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 42%);
|
radial-gradient(circle at top left, rgba(100, 116, 139, 0.08), transparent 42%);
|
||||||
--chart-grid: rgba(15, 23, 42, 0.06);
|
--chart-grid: rgba(15, 23, 42, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -300,7 +300,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);
|
box-shadow: 0 6px 14px rgba(100, 116, 139, 0.16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary:hover {
|
.primary:hover {
|
||||||
@@ -413,7 +413,7 @@ function htmlPage(): string {
|
|||||||
width: 52px;
|
width: 52px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photo strong {
|
.photo strong {
|
||||||
@@ -472,7 +472,7 @@ function htmlPage(): string {
|
|||||||
top: 16px;
|
top: 16px;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
border-radius: var(--radius-md);
|
border-radius: 0;
|
||||||
background: var(--map-label-bg);
|
background: var(--map-label-bg);
|
||||||
border: 1px solid var(--map-label-border);
|
border: 1px solid var(--map-label-border);
|
||||||
box-shadow: var(--shadow-soft);
|
box-shadow: var(--shadow-soft);
|
||||||
@@ -496,7 +496,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);
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay-card header {
|
.overlay-card header {
|
||||||
@@ -531,12 +531,12 @@ function htmlPage(): string {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 4 / 3;
|
aspect-ratio: 4 / 3;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumb button {
|
.thumb button {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 8px;
|
border-radius: 0;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: white;
|
color: white;
|
||||||
@@ -581,7 +581,7 @@ function htmlPage(): string {
|
|||||||
position: relative;
|
position: relative;
|
||||||
min-height: 170px;
|
min-height: 170px;
|
||||||
padding: 14px 12px 10px;
|
padding: 14px 12px 10px;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: 0;
|
||||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||||
background: var(--timeline-bg);
|
background: var(--timeline-bg);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -621,7 +621,7 @@ function htmlPage(): string {
|
|||||||
display: grid;
|
display: grid;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 6px 6px 3px 3px;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-bar-fill {
|
.timeline-bar-fill {
|
||||||
@@ -687,7 +687,7 @@ function htmlPage(): string {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
bottom: 34px;
|
bottom: 34px;
|
||||||
border-radius: 8px;
|
border-radius: 0;
|
||||||
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)),
|
||||||
@@ -708,7 +708,7 @@ function htmlPage(): string {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
bottom: 34px;
|
bottom: 34px;
|
||||||
border-radius: 8px;
|
border-radius: 0;
|
||||||
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;
|
||||||
@@ -751,7 +751,7 @@ function htmlPage(): string {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body data-theme="dark">
|
<body data-theme="light">
|
||||||
<header>
|
<header>
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<h1>mapy-mg</h1>
|
<h1>mapy-mg</h1>
|
||||||
@@ -968,7 +968,7 @@ function htmlPage(): string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const storedTheme = localStorage.getItem("theme");
|
const storedTheme = localStorage.getItem("theme");
|
||||||
setTheme(storedTheme === "light" ? "light" : "dark");
|
setTheme(storedTheme === "dark" ? "dark" : "light");
|
||||||
themeToggle.addEventListener("click", () => {
|
themeToggle.addEventListener("click", () => {
|
||||||
setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
|
setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user