auto-sync: 2026-05-05 08:10:01
This commit is contained in:
Stream
@@ -1,13 +1,11 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════
|
||||
Enduro Trails — Design System v5.0
|
||||
Dark (night ride) + Light (day ride) themes
|
||||
Mobile-first, thumb-friendly, adventure style
|
||||
Phase 5: Dual themes, skeleton, swipe, desktop, animations
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Reset ────────────────────────────────────── */
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
|
||||
/* ── CSS Variables — Dark Theme (default) ───── */
|
||||
/* ── Dark Theme (default) ───── */
|
||||
body.theme-dark {
|
||||
--bg: #0D1117;
|
||||
--surface: #161B22;
|
||||
@@ -28,9 +26,10 @@ body.theme-dark {
|
||||
--success: #2EA043;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.6);
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
|
||||
--overlay: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
/* ── CSS Variables — Light Theme ────────────── */
|
||||
/* ── Light Theme ────────────── */
|
||||
body.theme-light {
|
||||
--bg: #F0EFE8;
|
||||
--surface: #FFFFFF;
|
||||
@@ -51,6 +50,7 @@ body.theme-light {
|
||||
--success: #1A6B2A;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.15);
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
|
||||
--overlay: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* ── Base ─────────────────────────────────────── */
|
||||
@@ -62,64 +62,51 @@ html, body {
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
/* ── Map Container ────────────────────────────── */
|
||||
#map {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
#map { position: fixed; inset: 0; z-index: 0; }
|
||||
|
||||
/* ── Search Bar ──────────────────────────────── */
|
||||
#search-bar {
|
||||
position: fixed;
|
||||
top: max(env(safe-area-inset-top, 0px), 12px);
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
left: 12px; right: 12px;
|
||||
height: 50px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex; align-items: center;
|
||||
padding: 0 6px 0 14px;
|
||||
gap: 8px;
|
||||
z-index: 300;
|
||||
gap: 8px; z-index: 300;
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
#search-bar:focus-within {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
#search-bar .sb-icon {
|
||||
color: var(--text3);
|
||||
flex-shrink: 0;
|
||||
width: 18px; height: 18px;
|
||||
transition: background 0.3s, border-color 0.3s;
|
||||
}
|
||||
#search-bar:focus-within { border-color: var(--accent); }
|
||||
#search-bar .sb-icon { color: var(--text3); flex-shrink: 0; width: 18px; height: 18px; }
|
||||
#search-input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
min-width: 0;
|
||||
flex: 1; background: none; border: none;
|
||||
color: var(--text); font-size: 15px; outline: none; min-width: 0;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
#search-input::placeholder { color: var(--text3); }
|
||||
#btn-theme {
|
||||
width: 38px; height: 38px;
|
||||
width: auto; min-width: 38px; height: 38px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s;
|
||||
gap: 3px; cursor: pointer; flex-shrink: 0;
|
||||
transition: all 0.15s; padding: 0 8px;
|
||||
}
|
||||
#btn-theme:active { transform: scale(0.9); background: var(--surface3); }
|
||||
#btn-theme:active { transform: scale(0.94); background: var(--surface3); }
|
||||
#btn-theme svg { width: 16px; height: 16px; }
|
||||
#theme-label {
|
||||
font-size: 9px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
color: var(--text3); line-height: 1;
|
||||
}
|
||||
|
||||
/* Search results */
|
||||
#search-results {
|
||||
@@ -128,11 +115,10 @@ html, body {
|
||||
left: 12px; right: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
z-index: 300;
|
||||
border-radius: 14px; z-index: 300;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
overflow: hidden; display: none;
|
||||
transition: background 0.3s, border-color 0.3s;
|
||||
}
|
||||
.search-result-item {
|
||||
padding: 12px 16px;
|
||||
@@ -143,19 +129,16 @@ html, body {
|
||||
}
|
||||
.search-result-item:last-child { border-bottom: none; }
|
||||
.search-result-item:active { background: var(--surface2); }
|
||||
.search-result-item:hover { background: var(--surface2); }
|
||||
.sri-icon { color: var(--text3); flex-shrink: 0; }
|
||||
.sri-name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.sri-sub { font-size: 12px; color: var(--text2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* ── Map Control Buttons (right side) ─────────── */
|
||||
/* ── Map Control Buttons ──────────────────────── */
|
||||
#map-controls-r {
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
position: fixed; right: 12px;
|
||||
bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
z-index: 200;
|
||||
display: flex; flex-direction: column; gap: 8px; z-index: 200;
|
||||
}
|
||||
.map-btn {
|
||||
width: 48px; height: 48px;
|
||||
@@ -164,565 +147,139 @@ html, body {
|
||||
border-radius: 12px;
|
||||
color: var(--text2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer; box-shadow: var(--shadow-sm);
|
||||
transition: all 0.15s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
.map-btn svg { width: 20px; height: 20px; }
|
||||
.map-btn:active { transform: scale(0.9); background: var(--surface2); }
|
||||
.map-btn:active { transform: scale(0.94); background: var(--surface2); }
|
||||
.map-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||||
|
||||
/* ── Bottom Toolbar ───────────────────────────── */
|
||||
#toolbar {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
height: calc(68px + env(safe-area-inset-bottom, 0px));
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
display: flex; align-items: center; justify-content: space-around;
|
||||
z-index: 300;
|
||||
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
|
||||
transition: background 0.3s, border-color 0.3s;
|
||||
}
|
||||
.tb-btn {
|
||||
flex: 1;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
gap: 3px;
|
||||
height: 56px;
|
||||
gap: 3px; height: 56px;
|
||||
border: none; background: none;
|
||||
color: var(--text3);
|
||||
font-size: 9px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
border-radius: 10px; cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s, transform 0.1s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.tb-btn svg { width: 22px; height: 22px; margin-bottom: 1px; }
|
||||
.tb-btn:active { background: var(--surface2); }
|
||||
.tb-btn.active { color: var(--accent); }
|
||||
.tb-btn.active svg { stroke: var(--accent); }
|
||||
.tb-btn svg { width: 22px; height: 22px; margin-bottom: 1px; transition: transform 0.1s; }
|
||||
.tb-btn:active { background: var(--surface2); transform: scale(0.94); }
|
||||
.tb-btn.active {
|
||||
color: #fff; background: var(--accent); border-radius: 10px;
|
||||
}
|
||||
.tb-btn.active svg { stroke: #fff; }
|
||||
.tb-btn span { line-height: 1; }
|
||||
|
||||
/* ── Bottom Sheet ─────────────────────────────── */
|
||||
.bottom-sheet {
|
||||
position: fixed;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
background: var(--surface);
|
||||
border-radius: 20px 20px 0 0;
|
||||
border-top: 1px solid var(--border);
|
||||
z-index: 400;
|
||||
max-height: 78vh;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
z-index: 400; max-height: 78vh;
|
||||
overflow-y: auto; overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1);
|
||||
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.bottom-sheet.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.bottom-sheet.open { transform: translateY(0); }
|
||||
.bottom-sheet.swiping { transition: none; }
|
||||
.sheet-handle {
|
||||
width: 36px; height: 4px;
|
||||
background: var(--border2);
|
||||
border-radius: 2px;
|
||||
margin: 12px auto 0;
|
||||
cursor: grab;
|
||||
border-radius: 2px; margin: 12px auto 0; cursor: grab;
|
||||
}
|
||||
.sheet-header {
|
||||
display: flex; align-items: center;
|
||||
padding: 14px 16px 12px;
|
||||
gap: 10px;
|
||||
padding: 14px 16px 12px; gap: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.sheet-header svg { width: 20px; height: 20px; stroke: var(--accent); flex-shrink: 0; }
|
||||
.sheet-header h2 {
|
||||
flex: 1;
|
||||
font-size: 15px; font-weight: 700;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.sheet-header h2 { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
|
||||
.sheet-close {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 8px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
width: 32px; height: 32px; border-radius: 8px;
|
||||
background: var(--surface2); border: 1px solid var(--border);
|
||||
color: var(--text2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer; flex-shrink: 0; transition: all 0.15s;
|
||||
}
|
||||
.sheet-close svg { width: 16px; height: 16px; }
|
||||
.sheet-close:active { background: var(--surface3); }
|
||||
.sheet-close:active { background: var(--surface3); color: var(--text); }
|
||||
.sheet-body { padding: 14px 16px; }
|
||||
.sheet-hint {
|
||||
font-size: 13px; color: var(--text2);
|
||||
text-align: center; padding: 16px 0 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.sheet-hint { font-size: 13px; color: var(--text2); text-align: center; padding: 16px 0 8px; line-height: 1.5; }
|
||||
|
||||
/* Sheet backdrop */
|
||||
#sheet-backdrop {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0,0,0,0.45);
|
||||
z-index: 390;
|
||||
opacity: 0; pointer-events: none;
|
||||
background: var(--overlay);
|
||||
z-index: 390; opacity: 0; pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
#sheet-backdrop.visible {
|
||||
opacity: 1; pointer-events: auto;
|
||||
}
|
||||
#sheet-backdrop.visible { opacity: 1; pointer-events: auto; }
|
||||
|
||||
/* ── Section Label ────────────────────────────── */
|
||||
.section-label {
|
||||
font-size: 10px; font-weight: 800;
|
||||
color: var(--text3);
|
||||
text-transform: uppercase; letter-spacing: 0.12em;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.section-label { font-size: 10px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; margin-top: 4px; }
|
||||
|
||||
/* ── Waypoints Row ────────────────────────────── */
|
||||
.waypoints-row {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
overflow-x: auto; padding: 0 0 4px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.waypoints-row { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 0 0 4px; scrollbar-width: none; }
|
||||
.waypoints-row::-webkit-scrollbar { display: none; }
|
||||
.wp-chip {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 7px 10px;
|
||||
flex-shrink: 0;
|
||||
max-width: 140px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.wp-chip { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; flex-shrink: 0; max-width: 140px; cursor: pointer; transition: border-color 0.15s; }
|
||||
.wp-chip:active { border-color: var(--accent); }
|
||||
.wp-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wp-label {
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.wp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.wp-label { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.wp-arrow { color: var(--text3); font-size: 18px; flex-shrink: 0; padding: 0 1px; }
|
||||
.wp-add {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
background: none;
|
||||
border: 1.5px dashed var(--border2);
|
||||
border-radius: 10px;
|
||||
padding: 7px 12px;
|
||||
font-size: 12px; font-weight: 600;
|
||||
color: var(--text2);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.wp-add { display: flex; align-items: center; gap: 6px; background: none; border: 1.5px dashed var(--border2); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--text2); flex-shrink: 0; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
|
||||
.wp-add:active { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
/* ── Waypoints List ───────────────────────────── */
|
||||
#waypoints-list {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.wl-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
#waypoints-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
|
||||
.wl-item { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
|
||||
.wl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.wl-label { flex: 1; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.wl-remove {
|
||||
width: 28px; height: 28px;
|
||||
border: none; background: none;
|
||||
color: var(--text3); cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wl-remove { width: 28px; height: 28px; border: none; background: none; color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; }
|
||||
.wl-remove:active { background: var(--red-bg); color: var(--red); }
|
||||
.wl-remove svg { width: 14px; height: 14px; }
|
||||
|
||||
/* Route action buttons */
|
||||
.route-actions {
|
||||
display: flex; gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.btn-action {
|
||||
flex: 1;
|
||||
height: 38px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--text2);
|
||||
font-size: 12px; font-weight: 600;
|
||||
display: flex; align-items: center; justify-content: center; gap: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
/* Route actions */
|
||||
.route-actions { display: flex; gap: 8px; margin-bottom: 12px; }
|
||||
.btn-action { flex: 1; height: 38px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text2); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; transition: all 0.15s; }
|
||||
.btn-action svg { width: 14px; height: 14px; }
|
||||
.btn-action:active { background: var(--surface3); }
|
||||
.btn-action:active { background: var(--surface3); transform: scale(0.94); }
|
||||
.btn-action.danger:active { background: var(--red-bg); color: var(--red); border-color: var(--red); }
|
||||
.btn-action.primary { border-color: var(--accent); color: var(--accent); }
|
||||
.btn-action.primary:active { background: var(--accent-bg); }
|
||||
|
||||
/* ── Route Status ─────────────────────────────── */
|
||||
#route-status {
|
||||
font-size: 13px; color: var(--text2);
|
||||
padding: 8px 0;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
#route-status { font-size: 13px; color: var(--text2); padding: 8px 0; display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* ── Route Cards ──────────────────────────────── */
|
||||
#route-cards, #link-cards, #scenic-cards {
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
#route-cards, #link-cards, #scenic-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
|
||||
.route-card {
|
||||
background: var(--surface2);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
background: var(--surface2); border: 1.5px solid var(--border);
|
||||
border-radius: 14px; padding: 12px 14px; cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s, opacity 0.2s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
animation: cardFadeIn 0.2s ease-out both;
|
||||
}
|
||||
.route-card.active {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
}
|
||||
.rc-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.rc-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.rc-title { flex: 1; font-size: 13px; font-weight: 700; color: var(--text); }
|
||||
.rc-km { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
|
||||
.rc-time { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
|
||||
.rc-bar {
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: var(--surface3);
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
}
|
||||
.rc-bar-dirt { background: var(--gold); height: 100%; transition: width 0.4s; }
|
||||
.rc-bar-asphalt { background: var(--text3); height: 100%; flex: 1; }
|
||||
.rc-stats { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
|
||||
/* Stat pills */
|
||||
.stat-pill {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
border-radius: 20px;
|
||||
padding: 3px 9px;
|
||||
font-size: 11px; font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.stat-pill.dirt { background: var(--gold-bg); color: var(--gold); }
|
||||
.stat-pill.asphalt { background: var(--surface3); color: var(--text2); }
|
||||
.stat-pill.path { background: var(--red-bg); color: var(--red); }
|
||||
|
||||
/* ── Primary Button ───────────────────────────── */
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
font-size: 15px; font-weight: 700;
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
letter-spacing: 0.02em;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.btn-primary svg { width: 18px; height: 18px; }
|
||||
.btn-primary:active { background: var(--accent-h); transform: scale(0.98); }
|
||||
.btn-primary:disabled { opacity: 0.5; pointer-events: none; }
|
||||
|
||||
/* ── Radius / Dist Selector ───────────────────── */
|
||||
.seg-control {
|
||||
display: flex; gap: 4px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.seg-btn {
|
||||
flex: 1; height: 34px;
|
||||
background: none; border: none;
|
||||
border-radius: 9px;
|
||||
font-size: 13px; font-weight: 600;
|
||||
color: var(--text2);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.seg-btn.active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(255,107,0,0.35);
|
||||
}
|
||||
.seg-btn:not(.active):active { background: var(--surface3); }
|
||||
.dist-custom {
|
||||
height: 34px; width: 70px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
color: var(--text);
|
||||
font-size: 13px; font-weight: 600;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dist-custom:focus { border-color: var(--accent); }
|
||||
|
||||
/* ── Recon Results ────────────────────────────── */
|
||||
.recon-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 8px; margin-bottom: 14px;
|
||||
}
|
||||
.recon-stat {
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.rs-value {
|
||||
font-size: 22px; font-weight: 800;
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.rs-value.gold { color: var(--gold); }
|
||||
.rs-value.red { color: var(--red); }
|
||||
.rs-label { font-size: 11px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
.poi-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.poi-row:last-child { border-bottom: none; }
|
||||
.poi-row-label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; }
|
||||
.poi-row-count {
|
||||
font-size: 16px; font-weight: 800;
|
||||
color: var(--accent);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.poi-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 14px; }
|
||||
|
||||
/* ── Scenic POI items ─────────────────────────── */
|
||||
.scenic-poi-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 12px; color: var(--text2);
|
||||
padding: 3px 0;
|
||||
}
|
||||
.scenic-score-bar {
|
||||
height: 4px; border-radius: 2px;
|
||||
background: var(--surface3); overflow: hidden; margin: 6px 0;
|
||||
}
|
||||
.scenic-score-fill { height: 100%; background: var(--gold); border-radius: 2px; }
|
||||
|
||||
/* ── Link Points ──────────────────────────────── */
|
||||
.link-points { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
|
||||
.link-pt {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: var(--surface2);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.link-pt-num {
|
||||
width: 24px; height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff; font-size: 12px; font-weight: 800;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.link-pt-label { font-size: 13px; color: var(--text); flex: 1; }
|
||||
.link-pt.empty .link-pt-num { background: var(--surface3); color: var(--text3); }
|
||||
.link-pt.empty .link-pt-label { color: var(--text3); }
|
||||
#link-status { font-size: 13px; color: var(--text2); padding: 4px 0 10px; }
|
||||
|
||||
/* ── Scenic Config ───────────────────────────── */
|
||||
#scenic-status { font-size: 13px; color: var(--text2); padding: 6px 0; display: flex; align-items: center; gap: 6px; }
|
||||
.dist-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
|
||||
|
||||
/* ── Marker Popup / Dialog ────────────────────── */
|
||||
#marker-dialog {
|
||||
position: fixed;
|
||||
inset: 0; z-index: 500;
|
||||
display: flex; align-items: flex-end;
|
||||
justify-content: center;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
pointer-events: none; opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#marker-dialog.open { pointer-events: auto; opacity: 1; }
|
||||
.marker-dialog-inner {
|
||||
background: var(--surface);
|
||||
border-radius: 20px 20px 0 0;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0 16px 20px;
|
||||
width: 100%;
|
||||
transform: translateY(30px);
|
||||
transition: transform 0.25s cubic-bezier(0.32, 0, 0.15, 1);
|
||||
}
|
||||
#marker-dialog.open .marker-dialog-inner { transform: translateY(0); }
|
||||
.marker-type-grid {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px; padding: 12px 0;
|
||||
}
|
||||
.marker-type-btn {
|
||||
background: var(--surface2);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 12px 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 5px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.marker-type-btn:active { border-color: var(--accent); background: var(--accent-bg); }
|
||||
.marker-type-btn .mt-icon { font-size: 24px; }
|
||||
.marker-type-btn .mt-label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
|
||||
/* ── No Data Warning ─────────────────────────── */
|
||||
#no-data-warning {
|
||||
display: none;
|
||||
position: fixed; bottom: 80px; left: 12px; right: 12px;
|
||||
background: var(--red-bg);
|
||||
border: 1px solid var(--red);
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px; color: var(--red);
|
||||
z-index: 200;
|
||||
}
|
||||
#no-data-warning.visible { display: block; }
|
||||
|
||||
/* ── Loading Skeleton ────────────────────────── */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-wave 1.4s infinite;
|
||||
border-radius: 8px;
|
||||
height: 14px;
|
||||
}
|
||||
@keyframes skeleton-wave {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
.skeleton-card {
|
||||
background: var(--surface2);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── Ruler ───────────────────────────────────── */
|
||||
#ruler-info {
|
||||
position: fixed;
|
||||
top: calc(max(env(safe-area-inset-top,0px),12px) + 58px);
|
||||
left: 12px; right: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px; color: var(--text);
|
||||
font-weight: 600;
|
||||
z-index: 200;
|
||||
display: none;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
#ruler-info.visible { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* ── Waypoint Markers on Map ─────────────────── */
|
||||
.route-waypoint-marker {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; font-weight: 800;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
||||
border: 2px solid rgba(255,255,255,0.8);
|
||||
}
|
||||
.named-marker-el {
|
||||
font-size: 22px; cursor: pointer;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
|
||||
user-select: none; line-height: 1;
|
||||
}
|
||||
|
||||
/* ── Desktop Layout ──────────────────────────── */
|
||||
@media (min-width: 768px) {
|
||||
#toolbar {
|
||||
flex-direction: column;
|
||||
width: 68px; height: auto;
|
||||
right: auto; left: 0;
|
||||
top: 0; bottom: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
border-top: none;
|
||||
padding: 80px 0 20px;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
.tb-btn {
|
||||
width: 60px; height: 56px;
|
||||
flex: none;
|
||||
}
|
||||
.bottom-sheet {
|
||||
left: 68px; right: auto;
|
||||
width: 340px;
|
||||
max-height: 100vh;
|
||||
border-radius: 0 16px 16px 0;
|
||||
border-top: none;
|
||||
border-right: 1px solid var(--border);
|
||||
top: 0; bottom: 0;
|
||||
transform: translateX(-120%);
|
||||
}
|
||||
.bottom-sheet.open { transform: translateX(0); }
|
||||
#search-bar {
|
||||
left: 80px; right: 12px; max-width: 400px;
|
||||
}
|
||||
#map-controls-r {
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
#sheet-backdrop { display: none; }
|
||||
}
|
||||
|
||||
/* ── Misc ────────────────────────────────────── */
|
||||
.text-accent { color: var(--accent); }
|
||||
.text-gold { color: var(--gold); }
|
||||
.text-red { color: var(--red); }
|
||||
.text-muted { color: var(--text2); }
|
||||
.mt-8 { margin-top: 8px; }
|
||||
.mt-12 { margin-top: 12px; }
|
||||
.mb-8 { margin-bottom: 8px; }
|
||||
|
||||
/* cursor crosshair в режиме выбора точки */
|
||||
.cursor-crosshair .maplibregl-canvas { cursor: crosshair !important; }
|
||||
.route-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var
|
||||
@@ -25,6 +25,7 @@
|
||||
<button id="btn-theme" onclick="toggleTheme()" title="Переключить тему">
|
||||
<svg id="theme-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
|
||||
<svg id="theme-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
|
||||
<span id="theme-label">Авто</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="search-results"></div>
|
||||
@@ -230,6 +231,7 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://unpkg.com/maplibre-gl@4.7.0/dist/maplibre-gl.js"></script>
|
||||
<script src="https://unpkg.com/suncalc@1.9.0/suncalc.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user