openlayers_plus.css in OpenLayers Plus 7
/**
* Legend =============================================================
*/
.openlayers-legends {
position:absolute;
left:5px;
bottom:5px;
z-index:3000;
}
.openlayers-legends .legend {
background:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.openlayers-legends .swatch {
float:left;
display:block;
width:15px;
height:15px;
margin-right:5px;
}
/**
* Blockswitcher ======================================================
*/
.openlayers-blockswitcher span.key {
display:block;
float:left;
height:20px;
width:20px;
margin-right:5px;
}
.openlayers-blockswitcher input.form-radio,
.openlayers-blockswitcher input.form-checkbox { margin-right:5px; }
div.openlayers-map .openlayers_plus-blockswitcher {
position:absolute;
z-index:3000;
background:#fff;
width:auto;
}
div.openlayers-map .openlayers_plus-blockswitcher.ne { top:0px; right:0px; }
div.openlayers-map .openlayers_plus-blockswitcher.nw { top:0px; left:0px; }
div.openlayers-map .openlayers_plus-blockswitcher.se { bottom:0px; right:0px; }
div.openlayers-map .openlayers_plus-blockswitcher.sw { bottom:0px; left:0px; }
.openlayers_plus-blockswitcher h2.block-title { cursor:pointer; }
.openlayers_plus-blockswitcher div.block-content { display:none; }
.openlayers_plus-blockswitcher div.radio {
background: #fff url('inactive.png');
background-repeat: no-repeat;
padding: 3px 0 3px 25px;
}
.openlayers_plus-blockswitcher div.activated {
background: #fff url('active.png');
background-repeat: no-repeat;
padding: 3px 0 3px 25px;
}
/**
* Blocktoggle ========================================================
*/
div.openlayers-map .block-openlayers_plus-blocktoggle {
position:absolute;
z-index:3001;
background:transparent;
width:auto;
padding: 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
div.openlayers-map .block-openlayers_plus-blocktoggle.ne { top:0px; right:0px; }
div.openlayers-map .block-openlayers_plus-blocktoggle.nw { top:0px; left:0px; }
div.openlayers-map .block-openlayers_plus-blocktoggle.se { bottom:0px; right:0px; }
div.openlayers-map .block-openlayers_plus-blocktoggle.sw { bottom:0px; left:0px; }
.block-openlayers_plus-blocktoggle h2.block-title { display:none; }
.block-openlayers_plus-blocktoggle .openlayers-blocktoggle-a,
.block-openlayers_plus-blocktoggle .openlayers-blocktoggle-b {
float:left;
color:#666;
background:url('point-button.png') #fff 5px 50% no-repeat;
padding:0px 5px 0px 20px;
line-height:20px;
width:50px;
cursor:pointer;
}
.block-openlayers_plus-blocktoggle .openlayers-blocktoggle-a {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-right:1px solid #ccc;
}
.block-openlayers_plus-blocktoggle .openlayers-blocktoggle-b {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
background-image:url('point-choro.png');
}
.block-openlayers_plus-blocktoggle .activated {
background-color:#eee;
color:#222;
}
/**
* Sample themeregion css. You probably want to override this *
*/
.openlayers_plus-themeregion {
z-index: 1000; /* this is tricky, the layers are 999, the first OpenLayers control is 1001 */
position: absolute; /* We do this in code, too, as some themes position the region by ID, so we lose */
}
/*
** For sample purposes, place the selected region at the top of the map
** If you select more regions, that wont work too well.
*/
.openlayers_plus-themeregion.olControlNoSelect {
top:0px; right:0px;
}
File
theme/openlayers_plus.css
View source
- /**
- * Legend =============================================================
- */
- .openlayers-legends {
- position:absolute;
- left:5px;
- bottom:5px;
- z-index:3000;
- }
-
- .openlayers-legends .legend {
- background:#fff;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- }
-
- .openlayers-legends .swatch {
- float:left;
- display:block;
- width:15px;
- height:15px;
- margin-right:5px;
- }
-
- /**
- * Blockswitcher ======================================================
- */
- .openlayers-blockswitcher span.key {
- display:block;
- float:left;
- height:20px;
- width:20px;
- margin-right:5px;
- }
-
- .openlayers-blockswitcher input.form-radio,
- .openlayers-blockswitcher input.form-checkbox { margin-right:5px; }
-
- div.openlayers-map .openlayers_plus-blockswitcher {
- position:absolute;
- z-index:3000;
- background:#fff;
- width:auto;
- }
-
- div.openlayers-map .openlayers_plus-blockswitcher.ne { top:0px; right:0px; }
- div.openlayers-map .openlayers_plus-blockswitcher.nw { top:0px; left:0px; }
- div.openlayers-map .openlayers_plus-blockswitcher.se { bottom:0px; right:0px; }
- div.openlayers-map .openlayers_plus-blockswitcher.sw { bottom:0px; left:0px; }
-
- .openlayers_plus-blockswitcher h2.block-title { cursor:pointer; }
- .openlayers_plus-blockswitcher div.block-content { display:none; }
-
- .openlayers_plus-blockswitcher div.radio {
- background: #fff url('inactive.png');
- background-repeat: no-repeat;
- padding: 3px 0 3px 25px;
- }
-
- .openlayers_plus-blockswitcher div.activated {
- background: #fff url('active.png');
- background-repeat: no-repeat;
- padding: 3px 0 3px 25px;
- }
-
- /**
- * Blocktoggle ========================================================
- */
- div.openlayers-map .block-openlayers_plus-blocktoggle {
- position:absolute;
- z-index:3001;
- background:transparent;
- width:auto;
- padding: 0;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- }
-
- div.openlayers-map .block-openlayers_plus-blocktoggle.ne { top:0px; right:0px; }
- div.openlayers-map .block-openlayers_plus-blocktoggle.nw { top:0px; left:0px; }
- div.openlayers-map .block-openlayers_plus-blocktoggle.se { bottom:0px; right:0px; }
- div.openlayers-map .block-openlayers_plus-blocktoggle.sw { bottom:0px; left:0px; }
-
- .block-openlayers_plus-blocktoggle h2.block-title { display:none; }
-
- .block-openlayers_plus-blocktoggle .openlayers-blocktoggle-a,
- .block-openlayers_plus-blocktoggle .openlayers-blocktoggle-b {
- float:left;
- color:#666;
- background:url('point-button.png') #fff 5px 50% no-repeat;
- padding:0px 5px 0px 20px;
- line-height:20px;
- width:50px;
- cursor:pointer;
- }
-
- .block-openlayers_plus-blocktoggle .openlayers-blocktoggle-a {
- -moz-border-radius: 3px 0 0 3px;
- -webkit-border-radius: 3px 0 0 3px;
- border-right:1px solid #ccc;
- }
-
- .block-openlayers_plus-blocktoggle .openlayers-blocktoggle-b {
- -moz-border-radius: 0 3px 3px 0;
- -webkit-border-radius: 0 3px 3px 0;
- background-image:url('point-choro.png');
- }
-
- .block-openlayers_plus-blocktoggle .activated {
- background-color:#eee;
- color:#222;
- }
-
- /**
- * Sample themeregion css. You probably want to override this *
- */
-
- .openlayers_plus-themeregion {
- z-index: 1000; /* this is tricky, the layers are 999, the first OpenLayers control is 1001 */
- position: absolute; /* We do this in code, too, as some themes position the region by ID, so we lose */
- }
-
- /*
- ** For sample purposes, place the selected region at the top of the map
- ** If you select more regions, that wont work too well.
- */
- .openlayers_plus-themeregion.olControlNoSelect {
- top:0px; right:0px;
- }
-