140 lines
2.7 KiB
CSS
140 lines
2.7 KiB
CSS
/* Make the default zoom control align with the pan control.
|
|
This is ugly.
|
|
The parent box (class="leaflet-top leaflet-left")
|
|
should make all the child boxes be center-aligned instead.
|
|
Not sure if that is possible though.
|
|
*/
|
|
.leaflet-bar {
|
|
position: relative;
|
|
left:23px;
|
|
}
|
|
/*
|
|
Make the zoomSlider control
|
|
(https://github.com/mattiasbengtsson/Leaflet.zoomslider)
|
|
align with the pan control.
|
|
*/
|
|
.leaflet-control-zoomslider {
|
|
position: relative;
|
|
left:22px;
|
|
}
|
|
|
|
/*
|
|
override the scale bar and push it over
|
|
*/
|
|
.leaflet-control-scale {
|
|
left: 63px !important;
|
|
}
|
|
|
|
.leaflet-control-pan {
|
|
/*
|
|
.leaflet-control-pan-right-wrap: right
|
|
+ .leaflet-control-pan a: width
|
|
= 52 + 24 = 76
|
|
*/
|
|
width: 76px;
|
|
/*
|
|
.leaflet-control-pan-down-wrap: top
|
|
+ .leaflet-control-pan a: height
|
|
= 52 + 24 = 76
|
|
*/
|
|
height: 76px;
|
|
}
|
|
|
|
.leaflet-control-pan > div {
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
.leaflet-control-pan > div {
|
|
border: 1px solid #888;
|
|
box-shadow: 0 0 8px rgba(0,0,0,0.4);
|
|
}
|
|
.leaflet-control-pan a {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.leaflet-control-pan a{
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
}
|
|
.leaflet-control-pan a {
|
|
-moz-border-radius: 4px;
|
|
-webkit-border-radius: 4px;
|
|
border-radius: 4px;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
.leaflet-control-pan a:hover {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.leaflet-control-pan-up-wrap {
|
|
position:absolute;
|
|
left:26px;
|
|
}
|
|
.leaflet-control-pan-left-wrap {
|
|
position:absolute;
|
|
top:26px;
|
|
}
|
|
.leaflet-control-pan-right-wrap {
|
|
position:absolute;
|
|
left:52px;
|
|
top:26px;
|
|
}
|
|
.leaflet-control-pan-down-wrap {
|
|
position:absolute;
|
|
left:26px;
|
|
top:52px;
|
|
}
|
|
|
|
.leaflet-control-pan-up {
|
|
background-image: url(@@INCLUDEIMAGE:images/pan-up.png@@);
|
|
}
|
|
.leaflet-control-pan-left {
|
|
background-image: url(@@INCLUDEIMAGE:images/pan-left.png@@);
|
|
}
|
|
.leaflet-control-pan-right {
|
|
background-image: url(@@INCLUDEIMAGE:images/pan-right.png@@);
|
|
}
|
|
.leaflet-control-pan-down {
|
|
background-image: url(@@INCLUDEIMAGE:images/pan-down.png@@);
|
|
}
|
|
|
|
/****** Touch Alterations ******/
|
|
.leaflet-touch .leaflet-control-pan div {
|
|
border: 4px solid rgba(0, 0, 0, 0.3);
|
|
box-shadow: none;
|
|
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.leaflet-touch .leaflet-control-pan {
|
|
width: 89px;
|
|
height: 119px;
|
|
}
|
|
|
|
.leaflet-touch .leaflet-control-pan a {
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.leaflet-touch .leaflet-control-pan-up-wrap {
|
|
left:26px;
|
|
}
|
|
|
|
.leaflet-touch .leaflet-control-pan-left-wrap {
|
|
top:40px;
|
|
}
|
|
|
|
.leaflet-touch .leaflet-control-pan-right-wrap {
|
|
left:52px;
|
|
top:40px;
|
|
}
|
|
|
|
.leaflet-touch .leaflet-control-pan-down-wrap {
|
|
left:26px;
|
|
top:80px;
|
|
}
|