2026-01-29 16:27:06 +01:00
|
|
|
.maplibregl-map{-webkit-tap-highlight-color:rgb(0 0 0/0);font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative}.maplibregl-canvas{left:0;position:absolute;top:0}.maplibregl-map:fullscreen{height:100%;width:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:grab;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.maplibregl-ctrl-top-left{left:0;top:0}.maplibregl-ctrl-top-right{right:0;top:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{bottom:0;right:0}.maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}.maplibregl-ctrl-group{background:#fff;border-radius:4px}.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (-ms-high-contrast:active){.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}.maplibregl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}.maplibregl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{backgro
|
|
|
|
|
.map-preview {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
.map-loading {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
.spinner {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border: 4px solid #f3f3f3;
|
|
|
|
|
border-top: 4px solid #3498db;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 1s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
0% {
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom marker outer wrapper - NO transforms here, MapLibre handles positioning */
|
|
|
|
|
.custom-marker {
|
|
|
|
|
/* MapLibre will position this element via transform: translate3d() */
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
.custom-marker:active {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Inner wrapper for visual styling - transforms are isolated here */
|
|
|
|
|
.marker-inner {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.marker-inner::before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
background: #e74c3c;
|
|
|
|
|
border: 3px solid white;
|
|
|
|
|
border-radius: 50% 50% 50% 0;
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
.marker-inner:hover::before {
|
|
|
|
|
background: #c0392b;
|
|
|
|
|
transform: rotate(-45deg) scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
.marker-inner.selected::before {
|
|
|
|
|
background: #3498db;
|
|
|
|
|
border-color: #2980b9;
|
|
|
|
|
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.6);
|
|
|
|
|
}
|
|
|
|
|
.marker-number {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
/* transform removed - was causing positioning issues */
|
|
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom icon marker */
|
|
|
|
|
.custom-marker.custom-icon {
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
.custom-marker.custom-icon:active {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
|
.marker-icon-image {
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
.marker-icon-image:hover {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
|
|
|
|
|
}
|
|
|
|
|
.marker-icon-image.selected {
|
|
|
|
|
filter: drop-shadow(0 4px 12px rgba(52, 152, 219, 0.8));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* MapLibre controls styling */
|
|
|
|
|
.maplibregl-ctrl-group {
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
.maplibregl-ctrl-group button {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.maplibregl-ctrl-attrib {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
|
|
}
|
|
|
|
|
.maplibregl-canvas-container {
|
|
|
|
|
cursor: crosshair;
|
|
|
|
|
}
|
|
|
|
|
.maplibregl-canvas-container.maplibregl-interactive {
|
|
|
|
|
cursor: crosshair;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.geocode-search {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.search-input-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.search-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0.625rem 2.5rem 0.625rem 0.75rem;
|
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
|
border-radius: var(--rounded-sm);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
transition: border-color 0.2s;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: var(--input-color-back);
|
|
|
|
|
}
|
|
|
|
|
.search-input:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
border-color: var(--color-focus);
|
|
|
|
|
box-shadow: 0 0 0 2px var(--color-focus-outline);
|
|
|
|
|
}
|
|
|
|
|
.clear-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0.5rem;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
padding: 0.25rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
transition: color 0.2s;
|
|
|
|
|
}
|
|
|
|
|
.clear-button:hover {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
}
|
|
|
|
|
.search-spinner {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0.75rem;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.spinner-icon {
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
border: 2px solid var(--color-border);
|
|
|
|
|
border-top-color: var(--color-focus);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 0.6s linear infinite;
|
|
|
|
|
}
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.results-dropdown {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
margin-top: 0.25rem;
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
|
border-radius: var(--rounded-sm);
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
|
max-height: 300px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
.error-message {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5rem;
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
color: var(--color-negative);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
}
|
|
|
|
|
.no-results {
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
}
|
|
|
|
|
.results-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.result-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: 0.75rem;
|
|
|
|
|
padding: 0.75rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background-color 0.2s;
|
|
|
|
|
border-bottom: 1px solid var(--color-background);
|
|
|
|
|
}
|
|
|
|
|
.result-item:last-child {
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
}
|
|
|
|
|
.result-item:hover,
|
|
|
|
|
.result-item.active {
|
|
|
|
|
background: var(--color-focus-outline);
|
|
|
|
|
}
|
|
|
|
|
.result-icon {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
padding-top: 0.125rem;
|
|
|
|
|
}
|
|
|
|
|
.result-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
.result-name {
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
margin-bottom: 0.25rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
.result-coords {
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
|
|
|
|
.results-footer {
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
border-top: 1px solid var(--color-border);
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.results-footer small {
|
|
|
|
|
font-size: 0.7rem;
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Sidebar container - uses Kirby's layout system */
|
|
|
|
|
.k-map-markers-sidebar[data-v-fe272968] {
|
|
|
|
|
width: var(--marker-list-width, 280px);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
border-right: 1px solid var(--color-border);
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Header - minimal override of k-section-header */
|
|
|
|
|
.k-section-header[data-v-fe272968] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: var(--spacing-2);
|
|
|
|
|
padding: var(--spacing-3);
|
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
|
background: var(--panel-color-back);
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.k-section-header .k-headline[data-v-fe272968] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Search container */
|
|
|
|
|
.k-map-markers-search[data-v-fe272968] {
|
|
|
|
|
padding: var(--spacing-3);
|
|
|
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
|
background: var(--color-background);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* List container */
|
|
|
|
|
.k-map-markers-list[data-v-fe272968] {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
padding: var(--spacing-2);
|
|
|
|
|
background: var(--color-background);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Marker item - styled like Kirby's k-item */
|
|
|
|
|
.k-map-marker-item[data-v-fe272968] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-2);
|
|
|
|
|
padding: var(--spacing-2);
|
|
|
|
|
margin-bottom: var(--spacing-1);
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
border-radius: var(--rounded);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
background-color: var(--tag-color-back);
|
|
|
|
|
}
|
|
|
|
|
.k-map-marker-item.is-selected[data-v-fe272968] {
|
|
|
|
|
background: var(--color-blue-300);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
.k-map-marker-icon[data-v-fe272968] {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
width: 1.5rem;
|
|
|
|
|
height: 1.5rem;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: var(--input-color-back);
|
|
|
|
|
color: var(--color-white);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.k-map-marker-item.is-selected .k-map-marker-icon[data-v-fe272968] {
|
|
|
|
|
background: var(--color-blue-600);
|
|
|
|
|
}
|
|
|
|
|
.k-map-marker-text[data-v-fe272968] {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-size: var(--text-sm);
|
|
|
|
|
}
|
|
|
|
|
.k-map-marker-options[data-v-fe272968] {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--spacing-1);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Empty state - styled like Kirby's k-empty */
|
|
|
|
|
.k-map-markers-empty[data-v-fe272968] {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: var(--spacing-12) var(--spacing-6);
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: var(--color-gray-600);
|
|
|
|
|
}
|
|
|
|
|
.k-map-markers-empty .k-icon[data-v-fe272968] {
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
margin-bottom: var(--spacing-3);
|
|
|
|
|
opacity: 0.25;
|
|
|
|
|
}
|
|
|
|
|
.k-map-markers-empty-text[data-v-fe272968] {
|
|
|
|
|
margin: 0 0 var(--spacing-2);
|
|
|
|
|
font-size: var(--text-base);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: var(--color-gray-800);
|
|
|
|
|
}
|
|
|
|
|
.k-map-markers-empty-info[data-v-fe272968] {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: var(--text-sm);
|
|
|
|
|
color: var(--color-gray-600);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.k-map-editor-field {
|
|
|
|
|
--marker-list-width: 250px;
|
|
|
|
|
}
|
|
|
|
|
.map-editor-container {
|
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
|
border-radius: var(--rounded);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
.map-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 600px;
|
|
|
|
|
background: var(--color-white);
|
|
|
|
|
}
|
|
|
|
|
.map-content.single-mode {
|
|
|
|
|
height: 400px;
|
|
|
|
|
}
|
|
|
|
|
.map-preview-container {
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
