| div.olControlZoom { |
| position: absolute; |
| top: 8px; |
| left: 8px; |
| background: rgba(255,255,255,0.4); |
| border-radius: 4px; |
| padding: 2px; |
| } |
| * { |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
| } |
| div.olControlZoom a { |
| display: block; |
| margin: 1px; |
| padding: 0; |
| color: white; |
| font-size: 28px; |
| font-family: sans-serif; |
| font-weight: bold; |
| text-decoration: none; |
| text-align: center; |
| height: 32px; |
| width: 32px; |
| line-height: 28px; |
| text-shadow: 0 0 3px rgba(0,0,0,0.8); |
| background: #130085; /* fallback for IE - IE6 requires background shorthand*/ |
| background: rgba(0, 60, 136, 0.5); |
| filter: alpha(opacity=80); |
| } |
| a.olControlZoomIn { |
| border-radius: 4px 4px 0 0; |
| } |
| a.olControlZoomOut { |
| border-radius: 0 0 4px 4px; |
| } |
| div.olControlZoom a:hover { |
| background: #130085; /* fallback for IE */ |
| background: rgba(0, 60, 136, 0.7); |
| filter: alpha(opacity=100); |
| } |
| @media only screen and (max-width: 600px) { |
| div.olControlZoom a:hover { |
| background: rgba(0, 60, 136, 0.5); |
| } |
| } |
| div.olMapViewport { |
| -ms-touch-action: none; |
| } |
| .olLayerGrid .olTileImage { |
| -webkit-transition: opacity 0.2s linear; |
| -moz-transition: opacity 0.2s linear; |
| -o-transition: opacity 0.2s linear; |
| transition: opacity 0.2s linear; |
| } |
| /* Turn on GPU support where available */ |
| .olTileImage { |
| -webkit-transform: translateZ(0); |
| -moz-transform: translateZ(0); |
| -o-transform: translateZ(0); |
| -ms-transform: translateZ(0); |
| transform: translateZ(0); |
| -webkit-backface-visibility: hidden; |
| -moz-backface-visibility: hidden; |
| -ms-backface-visibility: hidden; |
| backface-visibility: hidden; |
| -webkit-perspective: 1000; |
| -moz-perspective: 1000; |
| -ms-perspective: 1000; |
| perspective: 1000; |
| } |
