Merge pull request #1453 from mtmail/add-boundingbox-to-lookup-results

[nominatim.git] / website / css / leaflet.css

diff --git a/website/css/leaflet.css b/website/css/leaflet.css
index c161c3134aaaefd75709f74998696362483eeec1..230e5bad14f3494ce152dc69634b24c232f76462 100644 (file)
--- a/website/css/leaflet.css
+++ b/website/css/leaflet.css
@@ -1,16 +1,12 @@
 /* required styles */\r
 \r
 /* required styles */\r
 \r

-.leaflet-map-pane,\r
+.leaflet-pane,\r

 .leaflet-tile,\r
 .leaflet-marker-icon,\r
 .leaflet-marker-shadow,\r
 .leaflet-tile,\r
 .leaflet-marker-icon,\r
 .leaflet-marker-shadow,\r

-.leaflet-tile-pane,\r

 .leaflet-tile-container,\r
 .leaflet-tile-container,\r

-.leaflet-overlay-pane,\r
-.leaflet-shadow-pane,\r
-.leaflet-marker-pane,\r
-.leaflet-popup-pane,\r
-.leaflet-overlay-pane svg,\r
+.leaflet-pane > svg,\r
+.leaflet-pane > canvas,\r

 .leaflet-zoom-box,\r
 .leaflet-image-layer,\r
 .leaflet-layer {\r
 .leaflet-zoom-box,\r
 .leaflet-image-layer,\r
 .leaflet-layer {\r


@@ -20,8 +16,6 @@
        }\r
 .leaflet-container {\r
        overflow: hidden;\r
        }\r
 .leaflet-container {\r
        overflow: hidden;\r

-       -ms-touch-action: none;\r
-       touch-action: none;\r

        }\r
 .leaflet-tile,\r
 .leaflet-marker-icon,\r
        }\r
 .leaflet-tile,\r
 .leaflet-marker-icon,\r


@@ -29,20 +23,53 @@
        -webkit-user-select: none;\r
           -moz-user-select: none;\r
                user-select: none;\r
        -webkit-user-select: none;\r
           -moz-user-select: none;\r
                user-select: none;\r

-       -webkit-user-drag: none;\r
+         -webkit-user-drag: none;\r
+       }\r
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */\r
+.leaflet-safari .leaflet-tile {\r
+       image-rendering: -webkit-optimize-contrast;\r
+       }\r
+/* hack that prevents hw layers "stretching" when loading new tiles */\r
+.leaflet-safari .leaflet-tile-container {\r
+       width: 1600px;\r
+       height: 1600px;\r
+       -webkit-transform-origin: 0 0;\r

        }\r
 .leaflet-marker-icon,\r
 .leaflet-marker-shadow {\r
        display: block;\r
        }\r
        }\r
 .leaflet-marker-icon,\r
 .leaflet-marker-shadow {\r
        display: block;\r
        }\r

-/* map is broken in FF if you have max-width: 100% on tiles */\r
-.leaflet-container img {\r
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */\r
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */\r
+.leaflet-container .leaflet-overlay-pane svg,\r
+.leaflet-container .leaflet-marker-pane img,\r
+.leaflet-container .leaflet-shadow-pane img,\r
+.leaflet-container .leaflet-tile-pane img,\r
+.leaflet-container img.leaflet-image-layer {\r

        max-width: none !important;\r
        max-width: none !important;\r

+       max-height: none !important;\r

        }\r
        }\r

-/* stupid Android 2 doesn't understand "max-width: none" properly */\r
-.leaflet-container img.leaflet-image-layer {\r
-       max-width: 15000px !important;\r
+\r
+.leaflet-container.leaflet-touch-zoom {\r
+       -ms-touch-action: pan-x pan-y;\r
+       touch-action: pan-x pan-y;\r

        }\r
        }\r

+.leaflet-container.leaflet-touch-drag {\r
+       -ms-touch-action: pinch-zoom;\r
+       /* Fallback for FF which doesn't support pinch-zoom */\r
+       touch-action: none;\r
+       touch-action: pinch-zoom;\r
+}\r
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {\r
+       -ms-touch-action: none;\r
+       touch-action: none;\r
+}\r
+.leaflet-container {\r
+       -webkit-tap-highlight-color: transparent;\r
+}\r
+.leaflet-container a {\r
+       -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);\r
+}\r

 .leaflet-tile {\r
        filter: inherit;\r
        visibility: hidden;\r
 .leaflet-tile {\r
        filter: inherit;\r
        visibility: hidden;\r


@@ -53,18 +80,26 @@
 .leaflet-zoom-box {\r
        width: 0;\r
        height: 0;\r
 .leaflet-zoom-box {\r
        width: 0;\r
        height: 0;\r

+       -moz-box-sizing: border-box;\r
+            box-sizing: border-box;\r
+       z-index: 800;\r

        }\r
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */\r
 .leaflet-overlay-pane svg {\r
        -moz-user-select: none;\r
        }\r
 \r
        }\r
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */\r
 .leaflet-overlay-pane svg {\r
        -moz-user-select: none;\r
        }\r
 \r

-.leaflet-tile-pane    { z-index: 2; }\r
-.leaflet-objects-pane { z-index: 3; }\r
-.leaflet-overlay-pane { z-index: 4; }\r
-.leaflet-shadow-pane  { z-index: 5; }\r
-.leaflet-marker-pane  { z-index: 6; }\r
-.leaflet-popup-pane   { z-index: 7; }\r
+.leaflet-pane         { z-index: 400; }\r
+\r
+.leaflet-tile-pane    { z-index: 200; }\r
+.leaflet-overlay-pane { z-index: 400; }\r
+.leaflet-shadow-pane  { z-index: 500; }\r
+.leaflet-marker-pane  { z-index: 600; }\r
+.leaflet-tooltip-pane   { z-index: 650; }\r
+.leaflet-popup-pane   { z-index: 700; }\r
+\r
+.leaflet-map-pane canvas { z-index: 100; }\r
+.leaflet-map-pane svg    { z-index: 200; }\r

 \r
 .leaflet-vml-shape {\r
        width: 1px;\r
 \r
 .leaflet-vml-shape {\r
        width: 1px;\r


@@ -81,7 +116,8 @@
 \r
 .leaflet-control {\r
        position: relative;\r
 \r
 .leaflet-control {\r
        position: relative;\r

-       z-index: 7;\r
+       z-index: 800;\r
+       pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */\r

        pointer-events: auto;\r
        }\r
 .leaflet-top,\r
        pointer-events: auto;\r
        }\r
 .leaflet-top,\r


@@ -125,7 +161,9 @@
 \r
 /* zoom and fade animations */\r
 \r
 \r
 /* zoom and fade animations */\r
 \r

-.leaflet-fade-anim .leaflet-tile,\r
+.leaflet-fade-anim .leaflet-tile {\r
+       will-change: opacity;\r
+       }\r

 .leaflet-fade-anim .leaflet-popup {\r
        opacity: 0;\r
        -webkit-transition: opacity 0.2s linear;\r
 .leaflet-fade-anim .leaflet-popup {\r
        opacity: 0;\r
        -webkit-transition: opacity 0.2s linear;\r


@@ -133,11 +171,17 @@
             -o-transition: opacity 0.2s linear;\r
                transition: opacity 0.2s linear;\r
        }\r
             -o-transition: opacity 0.2s linear;\r
                transition: opacity 0.2s linear;\r
        }\r

-.leaflet-fade-anim .leaflet-tile-loaded,\r

 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
        opacity: 1;\r
        }\r
 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {\r
        opacity: 1;\r
        }\r

-\r
+.leaflet-zoom-animated {\r
+       -webkit-transform-origin: 0 0;\r
+           -ms-transform-origin: 0 0;\r
+               transform-origin: 0 0;\r
+       }\r
+.leaflet-zoom-anim .leaflet-zoom-animated {\r
+       will-change: transform;\r
+       }\r

 .leaflet-zoom-anim .leaflet-zoom-animated {\r
        -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
           -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r
 .leaflet-zoom-anim .leaflet-zoom-animated {\r
        -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);\r
           -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);\r


@@ -145,8 +189,7 @@
                transition:         transform 0.25s cubic-bezier(0,0,0.25,1);\r
        }\r
 .leaflet-zoom-anim .leaflet-tile,\r
                transition:         transform 0.25s cubic-bezier(0,0,0.25,1);\r
        }\r
 .leaflet-zoom-anim .leaflet-tile,\r

-.leaflet-pan-anim .leaflet-tile,\r
-.leaflet-touching .leaflet-zoom-animated {\r
+.leaflet-pan-anim .leaflet-tile {\r

        -webkit-transition: none;\r
           -moz-transition: none;\r
             -o-transition: none;\r
        -webkit-transition: none;\r
           -moz-transition: none;\r
             -o-transition: none;\r


@@ -160,24 +203,44 @@
 \r
 /* cursors */\r
 \r
 \r
 /* cursors */\r
 \r

-.leaflet-clickable {\r
+.leaflet-interactive {\r

        cursor: pointer;\r
        }\r
        cursor: pointer;\r
        }\r

-.leaflet-container {\r
+.leaflet-grab {\r

        cursor: -webkit-grab;\r
        cursor:    -moz-grab;\r
        }\r
        cursor: -webkit-grab;\r
        cursor:    -moz-grab;\r
        }\r

+.leaflet-crosshair,\r
+.leaflet-crosshair .leaflet-interactive {\r
+       cursor: crosshair;\r
+       }\r

 .leaflet-popup-pane,\r
 .leaflet-control {\r
        cursor: auto;\r
        }\r
 .leaflet-popup-pane,\r
 .leaflet-control {\r
        cursor: auto;\r
        }\r

-.leaflet-dragging .leaflet-container,\r
-.leaflet-dragging .leaflet-clickable {\r
+.leaflet-dragging .leaflet-grab,\r
+.leaflet-dragging .leaflet-grab .leaflet-interactive,\r
+.leaflet-dragging .leaflet-marker-draggable {\r

        cursor: move;\r
        cursor: -webkit-grabbing;\r
        cursor:    -moz-grabbing;\r
        }\r
 \r
        cursor: move;\r
        cursor: -webkit-grabbing;\r
        cursor:    -moz-grabbing;\r
        }\r
 \r

+/* marker & overlays interactivity */\r
+.leaflet-marker-icon,\r
+.leaflet-marker-shadow,\r
+.leaflet-image-layer,\r
+.leaflet-pane > svg path,\r
+.leaflet-tile-container {\r
+       pointer-events: none;\r
+       }\r
+\r
+.leaflet-marker-icon.leaflet-interactive,\r
+.leaflet-image-layer.leaflet-interactive,\r
+.leaflet-pane > svg path.leaflet-interactive {\r
+       pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */\r
+       pointer-events: auto;\r
+       }\r

 \r
 /* visual tweaks */\r
 \r
 \r
 /* visual tweaks */\r
 \r


@@ -250,7 +313,14 @@
        height: 30px;\r
        line-height: 30px;\r
        }\r
        height: 30px;\r
        line-height: 30px;\r
        }\r

-\r
+.leaflet-touch .leaflet-bar a:first-child {\r
+       border-top-left-radius: 2px;\r
+       border-top-right-radius: 2px;\r
+       }\r
+.leaflet-touch .leaflet-bar a:last-child {\r
+       border-bottom-left-radius: 2px;\r
+       border-bottom-right-radius: 2px;\r
+       }\r

 \r
 /* zoom control */\r
 \r
 \r
 /* zoom control */\r
 \r


@@ -259,16 +329,10 @@
        font: bold 18px 'Lucida Console', Monaco, monospace;\r
        text-indent: 1px;\r
        }\r
        font: bold 18px 'Lucida Console', Monaco, monospace;\r
        text-indent: 1px;\r
        }\r

-.leaflet-control-zoom-out {\r
-       font-size: 20px;\r
-       }\r

 \r
 \r

-.leaflet-touch .leaflet-control-zoom-in {\r
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {\r

        font-size: 22px;\r
        }\r
        font-size: 22px;\r
        }\r

-.leaflet-touch .leaflet-control-zoom-out {\r
-       font-size: 24px;\r
-       }\r

 \r
 \r
 /* layers control */\r
 \r
 \r
 /* layers control */\r


@@ -304,6 +368,11 @@
        color: #333;\r
        background: #fff;\r
        }\r
        color: #333;\r
        background: #fff;\r
        }\r

+.leaflet-control-layers-scrollbar {\r
+       overflow-y: scroll;\r
+       overflow-x: hidden;\r
+       padding-right: 5px;\r
+       }\r

 .leaflet-control-layers-selector {\r
        margin-top: 2px;\r
        position: relative;\r
 .leaflet-control-layers-selector {\r
        margin-top: 2px;\r
        position: relative;\r


@@ -318,6 +387,11 @@
        margin: 5px -10px 5px -6px;\r
        }\r
 \r
        margin: 5px -10px 5px -6px;\r
        }\r
 \r

+/* Default icon URLs */\r
+.leaflet-default-icon-path {\r
+       background-image: url(images/marker-icon.png);\r
+       }\r
+\r

 \r
 /* attribution and scale controls */\r
 \r
 \r
 /* attribution and scale controls */\r
 \r


@@ -355,8 +429,8 @@
        font-size: 11px;\r
        white-space: nowrap;\r
        overflow: hidden;\r
        font-size: 11px;\r
        white-space: nowrap;\r
        overflow: hidden;\r

-       -moz-box-sizing: content-box;\r
-            box-sizing: content-box;\r
+       -moz-box-sizing: border-box;\r
+            box-sizing: border-box;\r

 \r
        background: #fff;\r
        background: rgba(255, 255, 255, 0.5);\r
 \r
        background: #fff;\r
        background: rgba(255, 255, 255, 0.5);\r


@@ -387,6 +461,7 @@
 .leaflet-popup {\r
        position: absolute;\r
        text-align: center;\r
 .leaflet-popup {\r
        position: absolute;\r
        text-align: center;\r

+       margin-bottom: 20px;\r

        }\r
 .leaflet-popup-content-wrapper {\r
        padding: 1px;\r
        }\r
 .leaflet-popup-content-wrapper {\r
        padding: 1px;\r


@@ -401,11 +476,13 @@
        margin: 18px 0;\r
        }\r
 .leaflet-popup-tip-container {\r
        margin: 18px 0;\r
        }\r
 .leaflet-popup-tip-container {\r

-       margin: 0 auto;\r

        width: 40px;\r
        height: 20px;\r
        width: 40px;\r
        height: 20px;\r

-       position: relative;\r
+       position: absolute;\r
+       left: 50%;\r
+       margin-left: -20px;\r

        overflow: hidden;\r
        overflow: hidden;\r

+       pointer-events: none;\r

        }\r
 .leaflet-popup-tip {\r
        width: 17px;\r
        }\r
 .leaflet-popup-tip {\r
        width: 17px;\r


@@ -423,7 +500,7 @@
 .leaflet-popup-content-wrapper,\r
 .leaflet-popup-tip {\r
        background: white;\r
 .leaflet-popup-content-wrapper,\r
 .leaflet-popup-tip {\r
        background: white;\r

-\r
+       color: #333;\r

        box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
        }\r
 .leaflet-container a.leaflet-popup-close-button {\r
        box-shadow: 0 3px 14px rgba(0,0,0,0.4);\r
        }\r
 .leaflet-container a.leaflet-popup-close-button {\r


@@ -431,6 +508,7 @@
        top: 0;\r
        right: 0;\r
        padding: 4px 4px 0 0;\r
        top: 0;\r
        right: 0;\r
        padding: 4px 4px 0 0;\r

+       border: none;\r

        text-align: center;\r
        width: 18px;\r
        height: 14px;\r
        text-align: center;\r
        width: 18px;\r
        height: 14px;\r


@@ -477,3 +555,82 @@
        background: #fff;\r
        border: 1px solid #666;\r
        }\r
        background: #fff;\r
        border: 1px solid #666;\r
        }\r

+\r
+\r
+/* Tooltip */\r
+/* Base styles for the element that has a tooltip */\r
+.leaflet-tooltip {\r
+       position: absolute;\r
+       padding: 6px;\r
+       background-color: #fff;\r
+       border: 1px solid #fff;\r
+       border-radius: 3px;\r
+       color: #222;\r
+       white-space: nowrap;\r
+       -webkit-user-select: none;\r
+       -moz-user-select: none;\r
+       -ms-user-select: none;\r
+       user-select: none;\r
+       pointer-events: none;\r
+       box-shadow: 0 1px 3px rgba(0,0,0,0.4);\r
+       }\r
+.leaflet-tooltip.leaflet-clickable {\r
+       cursor: pointer;\r
+       pointer-events: auto;\r
+       }\r
+.leaflet-tooltip-top:before,\r
+.leaflet-tooltip-bottom:before,\r
+.leaflet-tooltip-left:before,\r
+.leaflet-tooltip-right:before {\r
+       position: absolute;\r
+       pointer-events: none;\r
+       border: 6px solid transparent;\r
+       background: transparent;\r
+       content: "";\r
+       }\r
+\r
+/* Directions */\r
+\r
+.leaflet-tooltip-bottom {\r
+       margin-top: 6px;\r
+}\r
+.leaflet-tooltip-top {\r
+       margin-top: -6px;\r
+}\r
+.leaflet-tooltip-bottom:before,\r
+.leaflet-tooltip-top:before {\r
+       left: 50%;\r
+       margin-left: -6px;\r
+       }\r
+.leaflet-tooltip-top:before {\r
+       bottom: 0;\r
+       margin-bottom: -12px;\r
+       border-top-color: #fff;\r
+       }\r
+.leaflet-tooltip-bottom:before {\r
+       top: 0;\r
+       margin-top: -12px;\r
+       margin-left: -6px;\r
+       border-bottom-color: #fff;\r
+       }\r
+.leaflet-tooltip-left {\r
+       margin-left: -6px;\r
+}\r
+.leaflet-tooltip-right {\r
+       margin-left: 6px;\r
+}\r
+.leaflet-tooltip-left:before,\r
+.leaflet-tooltip-right:before {\r
+       top: 50%;\r
+       margin-top: -6px;\r
+       }\r
+.leaflet-tooltip-left:before {\r
+       right: 0;\r
+       margin-right: -12px;\r
+       border-left-color: #fff;\r
+       }\r
+.leaflet-tooltip-right:before {\r
+       left: 0;\r
+       margin-left: -12px;\r
+       border-right-color: #fff;\r
+       }\r