127 lines
3.5 KiB
CSS
Executable File
127 lines
3.5 KiB
CSS
Executable File
|
|
/* =========================================================
|
|
maps.css — Page-specific styles for the Maps page
|
|
========================================================= */
|
|
|
|
/* Inputs: match your theme, scoped to this page */
|
|
.input {
|
|
background: #151924;
|
|
color: var(--fg);
|
|
border: 1px solid #2a3246;
|
|
border-radius: 8px;
|
|
padding: 8px 12px;
|
|
min-width: 220px;
|
|
}
|
|
.input::placeholder { color: #8fd8b3; }
|
|
|
|
/* Toolbar layout and small-screen tweaks */
|
|
.map-toolbar { gap: 10px; }
|
|
|
|
@media (max-width: 560px) {
|
|
/* Slightly trim the global content padding on phones so the
|
|
viewer sits closer to the title/tools. This overrides the
|
|
top padding defined in styles.css for small screens only. */
|
|
.content {
|
|
padding: 84px 14px 24px; /* was 96px top in styles.css */
|
|
}
|
|
|
|
.map-toolbar .spacer { display: none; }
|
|
#mapSelect { width: 100%; }
|
|
|
|
.zoom-controls {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
Map Viewer Container
|
|
- Desktop/tablet: comfortable bounded height
|
|
- Phone: fixed height using svh to ignore URL bar growth
|
|
========================================================= */
|
|
.map-viewer {
|
|
position: relative;
|
|
background: #0e131a;
|
|
border: 1px solid rgba(0, 255, 102, 0.18);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
|
|
/* Desktop/tablet defaults */
|
|
min-height: min(78vh, 900px);
|
|
max-height: 82vh;
|
|
|
|
/* Enable smooth gestures */
|
|
touch-action: none; /* allow custom pinch/pan */
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
/* Phone-specific viewer height:
|
|
Use the "small viewport" to avoid oversized containers
|
|
when the mobile URL bar is visible. Provide fallbacks. */
|
|
@media (max-width: 560px) {
|
|
.map-viewer {
|
|
min-height: 0;
|
|
max-height: none;
|
|
height: 65svh; /* preferred: stable with URL bar shown */
|
|
height: 65dvh; /* dynamic viewport fallback */
|
|
height: 65vh; /* legacy fallback */
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
Map Image
|
|
- Centered by default using translate(-50%, -50%)
|
|
- JS appends pan (x,y) + scale() after this base transform
|
|
========================================================= */
|
|
#mapImage {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
|
|
/* Base centering; JS keeps this and adds pan/zoom */
|
|
transform: translate3d(-50%, -50%, 0) scale(1);
|
|
transform-origin: 50% 50%;
|
|
|
|
will-change: transform;
|
|
image-rendering: auto;
|
|
|
|
/* Allow zooming beyond container bounds */
|
|
max-width: none;
|
|
height: auto;
|
|
}
|
|
|
|
/* Optional: subtle grid overlay for orientation while zoomed */
|
|
.map-grid-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(0,255,102,0.06), rgba(0,255,102,0.06)),
|
|
repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(0,255,102,0.06) 30px),
|
|
repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(0,255,102,0.06) 30px);
|
|
opacity: .2;
|
|
}
|
|
|
|
/* Zoom control button states */
|
|
.zoom-controls .btn[disabled] {
|
|
opacity: .5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Accessibility helper (scoped copy in case the global one isn't loaded here) */
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
height: 1px; width: 1px; overflow: hidden;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
white-space: nowrap; clip-path: inset(50%);
|
|
}
|
|
|
|
/* Desktop cursor cues */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.map-viewer { cursor: grab; }
|
|
.map-viewer.is-panning { cursor: grabbing; }
|
|
}
|