UNPKG

@geoapify/geocoder-autocomplete

Version:

A JavaScript address autocomplete input, compatible with Leaflet, MapLibre, OpenLayers, and other map libraries for efficient location search and geocoding.

98 lines (85 loc) 1.84 kB
.autocomplete-panel { position: absolute; top: 10px; left: 10px; width: 400px; z-index: 1002; } .autocomplete-container { position: relative; } /* Theme selector styling */ .theme-selector { position: absolute; top: 70px; left: 10px; z-index: 1001; display: flex; align-items: center; background: white; border: 1px solid #ccc; border-radius: 6px; padding: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .theme-label { font-size: 12px; color: #666; font-weight: 500; padding: 4px 8px 4px 12px; border-right: 1px solid #eee; background: #f8f9fa; border-radius: 4px 0 0 4px; white-space: nowrap; } .theme-selector select { padding: 4px 8px; border: none; background: transparent; color: #333; font-size: 12px; cursor: pointer; min-width: 100px; border-radius: 0 4px 4px 0; } .theme-selector select:focus { outline: none; } .theme-selector:hover { border-color: #007bff; box-shadow: 0 2px 12px rgba(0, 123, 255, 0.15); } /* Dark theme styles for the demo page */ body.theme-minimal-dark, body.theme-round-borders-dark { background-color: #1a1a1a; color: #e0e0e0; } body.theme-minimal-dark .theme-selector, body.theme-round-borders-dark .theme-selector { background: #333; border-color: #555; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.theme-minimal-dark .theme-label, body.theme-round-borders-dark .theme-label { color: #bbb; background: #444; border-right-color: #555; } body.theme-minimal-dark .theme-selector select, body.theme-round-borders-dark .theme-selector select { color: #e0e0e0; } body.theme-minimal-dark .theme-selector:hover, body.theme-round-borders-dark .theme-selector:hover { border-color: #007bff; box-shadow: 0 2px 12px rgba(0, 123, 255, 0.2); } html, body, #map { width: 100%; height: 100%; margin: 0; }