X-Git-Url: https://git.openstreetmap.org./nominatim.git/blobdiff_plain/016815eda29fcd4a858921f6cefc467d20952bab..67b6f6350d783d2078274e26b07136b37ea20f46:/website/css/leaflet.css?ds=inline diff --git a/website/css/leaflet.css b/website/css/leaflet.css index c161c313..c6d920a0 100644 --- a/website/css/leaflet.css +++ b/website/css/leaflet.css @@ -1,16 +1,12 @@ /* required styles */ -.leaflet-map-pane, +.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, -.leaflet-tile-pane, .leaflet-tile-container, -.leaflet-overlay-pane, -.leaflet-shadow-pane, -.leaflet-marker-pane, -.leaflet-popup-pane, -.leaflet-overlay-pane svg, +.leaflet-pane > svg, +.leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer { @@ -20,8 +16,6 @@ } .leaflet-container { overflow: hidden; - -ms-touch-action: none; - touch-action: none; } .leaflet-tile, .leaflet-marker-icon, @@ -29,20 +23,43 @@ -webkit-user-select: none; -moz-user-select: none; user-select: none; - -webkit-user-drag: none; + -webkit-user-drag: none; + } +/* Safari renders non-retina tile on retina better with this, but Chrome is worse */ +.leaflet-safari .leaflet-tile { + image-rendering: -webkit-optimize-contrast; + } +/* hack that prevents hw layers "stretching" when loading new tiles */ +.leaflet-safari .leaflet-tile-container { + width: 1600px; + height: 1600px; + -webkit-transform-origin: 0 0; } .leaflet-marker-icon, .leaflet-marker-shadow { display: block; } -/* map is broken in FF if you have max-width: 100% on tiles */ -.leaflet-container img { +/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ +/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ +.leaflet-container .leaflet-overlay-pane svg, +.leaflet-container .leaflet-marker-pane img, +.leaflet-container .leaflet-shadow-pane img, +.leaflet-container .leaflet-tile-pane img, +.leaflet-container img.leaflet-image-layer { max-width: none !important; } -/* stupid Android 2 doesn't understand "max-width: none" properly */ -.leaflet-container img.leaflet-image-layer { - max-width: 15000px !important; + +.leaflet-container.leaflet-touch-zoom { + -ms-touch-action: pan-x pan-y; + touch-action: pan-x pan-y; } +.leaflet-container.leaflet-touch-drag { + -ms-touch-action: pinch-zoom; + } +.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { + -ms-touch-action: none; + touch-action: none; +} .leaflet-tile { filter: inherit; visibility: hidden; @@ -53,18 +70,26 @@ .leaflet-zoom-box { width: 0; height: 0; + -moz-box-sizing: border-box; + box-sizing: border-box; + z-index: 800; } /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ .leaflet-overlay-pane svg { -moz-user-select: none; } -.leaflet-tile-pane { z-index: 2; } -.leaflet-objects-pane { z-index: 3; } -.leaflet-overlay-pane { z-index: 4; } -.leaflet-shadow-pane { z-index: 5; } -.leaflet-marker-pane { z-index: 6; } -.leaflet-popup-pane { z-index: 7; } +.leaflet-pane { z-index: 400; } + +.leaflet-tile-pane { z-index: 200; } +.leaflet-overlay-pane { z-index: 400; } +.leaflet-shadow-pane { z-index: 500; } +.leaflet-marker-pane { z-index: 600; } +.leaflet-tooltip-pane { z-index: 650; } +.leaflet-popup-pane { z-index: 700; } + +.leaflet-map-pane canvas { z-index: 100; } +.leaflet-map-pane svg { z-index: 200; } .leaflet-vml-shape { width: 1px; @@ -81,7 +106,8 @@ .leaflet-control { position: relative; - z-index: 7; + z-index: 800; + pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ pointer-events: auto; } .leaflet-top, @@ -125,7 +151,9 @@ /* zoom and fade animations */ -.leaflet-fade-anim .leaflet-tile, +.leaflet-fade-anim .leaflet-tile { + will-change: opacity; + } .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; @@ -133,11 +161,17 @@ -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } -.leaflet-fade-anim .leaflet-tile-loaded, .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { opacity: 1; } - +.leaflet-zoom-animated { + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + } +.leaflet-zoom-anim .leaflet-zoom-animated { + will-change: transform; + } .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); @@ -145,8 +179,7 @@ transition: transform 0.25s cubic-bezier(0,0,0.25,1); } .leaflet-zoom-anim .leaflet-tile, -.leaflet-pan-anim .leaflet-tile, -.leaflet-touching .leaflet-zoom-animated { +.leaflet-pan-anim .leaflet-tile { -webkit-transition: none; -moz-transition: none; -o-transition: none; @@ -160,24 +193,44 @@ /* cursors */ -.leaflet-clickable { +.leaflet-interactive { cursor: pointer; } -.leaflet-container { +.leaflet-grab { cursor: -webkit-grab; cursor: -moz-grab; } +.leaflet-crosshair, +.leaflet-crosshair .leaflet-interactive { + cursor: crosshair; + } .leaflet-popup-pane, .leaflet-control { cursor: auto; } -.leaflet-dragging .leaflet-container, -.leaflet-dragging .leaflet-clickable { +.leaflet-dragging .leaflet-grab, +.leaflet-dragging .leaflet-grab .leaflet-interactive, +.leaflet-dragging .leaflet-marker-draggable { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; } +/* marker & overlays interactivity */ +.leaflet-marker-icon, +.leaflet-marker-shadow, +.leaflet-image-layer, +.leaflet-pane > svg path, +.leaflet-tile-container { + pointer-events: none; + } + +.leaflet-marker-icon.leaflet-interactive, +.leaflet-image-layer.leaflet-interactive, +.leaflet-pane > svg path.leaflet-interactive { + pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ + pointer-events: auto; + } /* visual tweaks */ @@ -304,6 +357,10 @@ color: #333; background: #fff; } +.leaflet-control-layers-scrollbar { + overflow-y: scroll; + padding-right: 5px; + } .leaflet-control-layers-selector { margin-top: 2px; position: relative; @@ -318,6 +375,11 @@ margin: 5px -10px 5px -6px; } +/* Default icon URLs */ +.leaflet-default-icon-path { + background-image: url(images/marker-icon.png); + } + /* attribution and scale controls */ @@ -355,8 +417,8 @@ font-size: 11px; white-space: nowrap; overflow: hidden; - -moz-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: border-box; + box-sizing: border-box; background: #fff; background: rgba(255, 255, 255, 0.5); @@ -387,6 +449,7 @@ .leaflet-popup { position: absolute; text-align: center; + margin-bottom: 20px; } .leaflet-popup-content-wrapper { padding: 1px; @@ -401,11 +464,13 @@ margin: 18px 0; } .leaflet-popup-tip-container { - margin: 0 auto; width: 40px; height: 20px; - position: relative; + position: absolute; + left: 50%; + margin-left: -20px; overflow: hidden; + pointer-events: none; } .leaflet-popup-tip { width: 17px; @@ -423,7 +488,7 @@ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: white; - + color: #333; box-shadow: 0 3px 14px rgba(0,0,0,0.4); } .leaflet-container a.leaflet-popup-close-button { @@ -431,6 +496,7 @@ top: 0; right: 0; padding: 4px 4px 0 0; + border: none; text-align: center; width: 18px; height: 14px; @@ -477,3 +543,82 @@ background: #fff; border: 1px solid #666; } + + +/* Tooltip */ +/* Base styles for the element that has a tooltip */ +.leaflet-tooltip { + position: absolute; + padding: 6px; + background-color: #fff; + border: 1px solid #fff; + border-radius: 3px; + color: #222; + white-space: nowrap; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + pointer-events: none; + box-shadow: 0 1px 3px rgba(0,0,0,0.4); + } +.leaflet-tooltip.leaflet-clickable { + cursor: pointer; + pointer-events: auto; + } +.leaflet-tooltip-top:before, +.leaflet-tooltip-bottom:before, +.leaflet-tooltip-left:before, +.leaflet-tooltip-right:before { + position: absolute; + pointer-events: none; + border: 6px solid transparent; + background: transparent; + content: ""; + } + +/* Directions */ + +.leaflet-tooltip-bottom { + margin-top: 6px; +} +.leaflet-tooltip-top { + margin-top: -6px; +} +.leaflet-tooltip-bottom:before, +.leaflet-tooltip-top:before { + left: 50%; + margin-left: -6px; + } +.leaflet-tooltip-top:before { + bottom: 0; + margin-bottom: -12px; + border-top-color: #fff; + } +.leaflet-tooltip-bottom:before { + top: 0; + margin-top: -12px; + margin-left: -6px; + border-bottom-color: #fff; + } +.leaflet-tooltip-left { + margin-left: -6px; +} +.leaflet-tooltip-right { + margin-left: 6px; +} +.leaflet-tooltip-left:before, +.leaflet-tooltip-right:before { + top: 50%; + margin-top: -6px; + } +.leaflet-tooltip-left:before { + right: 0; + margin-right: -12px; + border-left-color: #fff; + } +.leaflet-tooltip-right:before { + left: 0; + margin-left: -12px; + border-right-color: #fff; + }