13b4ca6560
In current Webkit browsers, having translate3d on svg child elements causes the positioning from the layer not to be inherited by the vector layer content.
183 lines
4.6 KiB
CSS
183 lines
4.6 KiB
CSS
html, body, #map {
|
||
margin: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
#map {
|
||
cursor: move;
|
||
background-color: #CCCCCC;
|
||
/* no highlighting of the map area when tapping the map on touch devices */
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
#title, #tags, #shortdesc {
|
||
display: none;
|
||
}
|
||
|
||
/* Turn on GPU support where available */
|
||
.olMapViewport, .olMapViewport * {
|
||
-webkit-transform: translate3d(0,0,0);
|
||
-moz-transform: translate3d(0,0,0);
|
||
-o-transform: translate3d(0,0,0);
|
||
-ms-transform: translate3d(0,0,0);
|
||
transform: translate3d(0,0,0);
|
||
}
|
||
.olLayerDiv svg * {
|
||
-webkit-transform: 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;
|
||
}
|
||
div.olControlAttribution {
|
||
position: absolute;
|
||
font-size: 10px;
|
||
text-align: right;
|
||
color: #BFEFFF;
|
||
bottom: 0;
|
||
right: 0;
|
||
background: rgba(0,0,100,0.2);
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-weight: bold;
|
||
padding: 2px 4px;
|
||
border-radius: 5px 0 0 0;
|
||
}
|
||
.olControlAttribution a {
|
||
font-weight: bold;
|
||
color: #BFEFFF;
|
||
text-decoration: none;
|
||
}
|
||
div.olControlZoomPanel {
|
||
height: 108px;
|
||
width: 36px;
|
||
position: absolute;
|
||
top: 20px;
|
||
left: inherit;
|
||
right: 20px;
|
||
}
|
||
div.olControlZoomPanel div {
|
||
cursor: pointer;
|
||
width: 36px;
|
||
height: 36px;
|
||
left: 0;
|
||
background-color: #ccc;
|
||
background-image: none;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomInItemInactive,
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||
top: 0;
|
||
background: rgba(0,0,100,0.4);
|
||
position: absolute;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomInItemInactive {
|
||
border-radius: 5px 5px 0 0;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive {
|
||
border-radius: 0 0 5px 5px;
|
||
top: 37px;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive:after,
|
||
div.olControlZoomPanel .olControlZoomInItemInactive:after {
|
||
font-weight: bold;
|
||
content: '+';
|
||
font-size: 36px;
|
||
padding: 7px;
|
||
z-index: 2000;
|
||
color: #BFEFFF;
|
||
line-height: 1em;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomOutItemInactive:after {
|
||
content: '–';
|
||
line-height: 0.9em;
|
||
padding: 0 8px;
|
||
}
|
||
div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
|
||
display: none;
|
||
}
|
||
div.olControlZoomPanel div.olControlGeolocateItemInactive,
|
||
div.olControlZoomPanel div.olControlGeolocateItemActive {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 98px;
|
||
border-radius: 5px 5px 5px 5px;
|
||
background: #ccc url(img/locate.png) center no-repeat;
|
||
background-color: rgba(0,0,100,0.4);
|
||
}
|
||
div.olControlZoomPanel div.olControlGeolocateItemActive {
|
||
background-color: rgba(0,0,100,0.2);
|
||
}
|
||
div.olControlGeolocateItemInactive:after {
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
padding: 7px;
|
||
z-index: 2000;
|
||
color: #BFEFFF;
|
||
line-height: 1em;
|
||
background: none;
|
||
}
|
||
.layerPanel {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 82px;
|
||
}
|
||
div.layerPanel div {
|
||
display: inline;
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
}
|
||
div.layerPanel div:after {
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
font-family: arial;
|
||
padding: 8px;
|
||
color: #BFEFFF;
|
||
line-height: 36px;
|
||
border-radius: 5px 5px 5px 5px;
|
||
background-color: #ccc;
|
||
background: rgba(0,0,100,0.4);
|
||
}
|
||
div.layerPanel div.labelButtonItemInactive:after,
|
||
div.layerPanel div.labelButtonItemActive:after {
|
||
content: 'Labels';
|
||
}
|
||
:lang(de) div.layerPanel div.labelButtonItemInactive:after,
|
||
:lang(de) div.layerPanel div.labelButtonItemActive:after {
|
||
content: 'Text';
|
||
}
|
||
div.layerPanel div.labelButtonItemActive:after {
|
||
text-decoration: underline;
|
||
background: rgba(0,0,100,0.2);
|
||
}
|
||
div.layerPanel div.aerialButtonItemInactive:after,
|
||
div.layerPanel div.aerialButtonItemActive:after {
|
||
content: 'Aerial';
|
||
border-radius: 5px 0 0 5px;
|
||
}
|
||
:lang(de) div.layerPanel div.aerialButtonItemInactive:after,
|
||
:lang(de) div.layerPanel div.aerialButtonItemActive:after {
|
||
content: 'Luftbild';
|
||
}
|
||
div.layerPanel div.aerialButtonItemActive:after {
|
||
text-decoration: underline;
|
||
background: rgba(0,0,100,0.2);
|
||
}
|
||
div.layerPanel div.mapButtonItemInactive:after,
|
||
div.layerPanel div.mapButtonItemActive:after {
|
||
content: 'Map';
|
||
border-radius: 0 5px 5px 0;
|
||
}
|
||
:lang(de) div.layerPanel div.mapButtonItemInactive:after,
|
||
:lang(de) div.layerPanel div.mapButtonItemActive:after {
|
||
content: 'Karte';
|
||
}
|
||
div.layerPanel div.mapButtonItemActive:after {
|
||
text-decoration: underline;
|
||
background: rgba(0,0,100,0.2);
|
||
}
|
||
div.layerPanel div.mapButtonItemInactive,
|
||
div.layerPanel div.mapButtonItemActive {
|
||
margin-left: 1px;
|
||
}
|