openlayers_plus_behavior_popup.css in OpenLayers Plus 7
/*
There are 3 main groups of openlayers maps on the site
- The big Solr powered maps on the search pages. Currently only ftritem/site visits is implemented.
-- These maps have a filter on the left, a hover using openlayers_plus in the right top corner and a
popup at the same place. There is also a layerswitcher in the same position. On the homepage there is
a counter on the right lower side.
We are working on making switch buttons between these.
- The small maps on node/user pages.
-- These have a hoover & popup with only the title of the feature (eg. Location, District etc) this title might
be a link, but doesnt have to.
*/
/* Pop Up Detail Pages
Preface second
and the sidebar second
*/
#region-preface-second .openlayers-popupbox,
#region-sidebar-second .openlayers-popupbox{
background-color: #000;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1015;
width: 100%;
}
.openlayers-popupbox a.popup-close{
display: block;
float: right;
color: #fff;
padding: 4px 8px 0 0;
text-decoration: none;
}
/*
We do not use the grouping function of openlayers_plus, so we hide it in css
adding body to be more specific than the default css
*/
body .openlayers-popupbox .popup-pager {
display: none;
}
body .openlayers-popupbox .popup-count{
display: none;
}
/*.openlayers-popupbox h2{
margin-bottom: 10px;
}*/
/*.openlayers-popupbox h2.popup-title {
font-size: 18px;
line-height: 1;
margin-bottom: 5px;
padding: 8px 0 2px 10px;
width: 100%;
}*/
.openlayers-popupbox h2.popup-title a{
letter-spacing: 0.02em;
font-size: 0.8em;
font-weight: normal;
}
.region-content .openlayers-popupbox a{
text-decoration: none;
color: #ECECEC;
}
.region-content .openlayers-popupbox a:hover{
text-decoration: none;
color: #fff;
}
.region-content .openlayers-popupbox .field-name-field-ftritem-images img {
float: left;
margin-right: 8px;
}
.openlayers-popupbox .popup-content{
color: #fff;
letter-spacing: 0.02em;
font-size: 0.9em;
font-weight: normal;
padding: 0 0 0 10px;
}
/*......POP UP.........*/
.openlayers-popup div.field{
clear: left;
float: left;
}
.openlayers-popup h3.hiddentitle-done-processed{
color: #FFFFFF;
font-size: 1.2em;
font-weight: normal;
}
.page-places .openlayers-popup .field-label,
.openlayers-popupbox .popup-content .field-label{
text-shadow: none;/*color: #989898;*/
}
.openlayers-popupbox .popup-content{
background-image: url("../images/popup_bkgd.png");
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 5px;
color: #fff;
letter-spacing: 0.02em;
font-size: 0.9em;
font-weight: normal;
text-shadow: 0 1px 0px #000000;
}
.openlayers-popupbox .popup-content .field-name-node-link {
background-color: #000000;
line-height: 12px;
margin-bottom: -5px;
margin-left: -10px;
padding: 8px 10px 1px;
}
/*.openlayers-popupbox .popup-content .field-name-node-link a:before{
content: "> ";
}*/
.openlayers-popup div.field-items{
clear: right;
}
/*.openlayers-popup .ctools-dropbutton{display: none;}*/
.page-places .openlayers-popup.openlayers-tooltip-name a{
position: absolute;
right: 0;
top: 30px;
border-color: #DDDDDD #BBBBBB #999999;
border-radius: 0px;
border-style: solid;
border-width: 1px;
color: #ffffff;
cursor: pointer;
font: bold 10px Arial,sans-serif;
outline: 0 none;
overflow: visible;
padding: 3px 6px;
text-shadow: 0 1px 1px #000000;
background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,0,0)),
color-stop(1, rgb(234,0,0))
);
}
.page-places .openlayers-popup.openlayers-tooltip-name a:hover{
background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,0,0)),
color-stop(1, rgb(152,152,152))
);
}
.popup-content h3.report{ display: none;}
/* from eve.css ends */
.openlayers-popupbox .popup-pager{
display:block;
float: right;
color: #fff;
letter-spacing: 0.02em;
font-size: 0.6em;
font-weight: normal;
padding: 10px;
}
/* Overrides/replaces kim.css line 224 */
div.openlayers-map .openlayers_plus-blockswitcher{
background-color: #000;
opacity: 0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
width: 15%;
padding: 10px 5%;
}
/* Overrides/replaces kim.css line 231 */
#block-openlayers-plus-blockswitcher h2.block-title {
font-size: 1.2em;
color: #FFFFFF;
letter-spacing: 0.02em;
padding: 5px 5% 2px;
background-color: #000;
width: 90%;
}
/* Overrides/replaces kim.css line 666 */
.openlayers-popupbox h2.popup-title {
font-size: 18px;
line-height: 1;
margin-bottom: 5px;
padding: 8px 5% 2px;
width: 90%;
}
/* Overrides/replaces kim.css line 626 */
.openlayers-popupbox{
background-color: #000;
display: block;
position: absolute;
top: 300px;
right: 0px;
z-index: 1015;
width: 25%;
float: right;
/* little trick to make sure we at least overlap the layerswitcher, until we can just flip that */
/*min-height: 105px;*/
opacity: 0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
/* less height on node+ user pages for the title */
#region-preface-second .openlayers-popupbox,
#region-sidebar-second .openlayers-popupbox {
min-height: 0px;
}
File
behaviors/openlayers_plus_behavior_popup.css
View source
- /*
-
- There are 3 main groups of openlayers maps on the site
-
- - The big Solr powered maps on the search pages. Currently only ftritem/site visits is implemented.
- -- These maps have a filter on the left, a hover using openlayers_plus in the right top corner and a
- popup at the same place. There is also a layerswitcher in the same position. On the homepage there is
- a counter on the right lower side.
- We are working on making switch buttons between these.
- - The small maps on node/user pages.
- -- These have a hoover & popup with only the title of the feature (eg. Location, District etc) this title might
- be a link, but doesnt have to.
- */
-
-
- /* Pop Up Detail Pages
- Preface second
- and the sidebar second
- */
- #region-preface-second .openlayers-popupbox,
- #region-sidebar-second .openlayers-popupbox{
- background-color: #000;
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1015;
- width: 100%;
- }
- .openlayers-popupbox a.popup-close{
- display: block;
- float: right;
- color: #fff;
- padding: 4px 8px 0 0;
- text-decoration: none;
- }
-
- /*
- We do not use the grouping function of openlayers_plus, so we hide it in css
- adding body to be more specific than the default css
- */
- body .openlayers-popupbox .popup-pager {
- display: none;
- }
-
- body .openlayers-popupbox .popup-count{
- display: none;
- }
-
-
- /*.openlayers-popupbox h2{
- margin-bottom: 10px;
- }*/
- /*.openlayers-popupbox h2.popup-title {
- font-size: 18px;
- line-height: 1;
- margin-bottom: 5px;
- padding: 8px 0 2px 10px;
- width: 100%;
- }*/
- .openlayers-popupbox h2.popup-title a{
- letter-spacing: 0.02em;
- font-size: 0.8em;
- font-weight: normal;
-
- }
-
- .region-content .openlayers-popupbox a{
- text-decoration: none;
- color: #ECECEC;
- }
- .region-content .openlayers-popupbox a:hover{
- text-decoration: none;
- color: #fff;
- }
-
- .region-content .openlayers-popupbox .field-name-field-ftritem-images img {
- float: left;
- margin-right: 8px;
- }
-
- .openlayers-popupbox .popup-content{
- color: #fff;
- letter-spacing: 0.02em;
- font-size: 0.9em;
- font-weight: normal;
- padding: 0 0 0 10px;
- }
- /*......POP UP.........*/
- .openlayers-popup div.field{
- clear: left;
- float: left;
- }
- .openlayers-popup h3.hiddentitle-done-processed{
- color: #FFFFFF;
- font-size: 1.2em;
- font-weight: normal;
- }
- .page-places .openlayers-popup .field-label,
- .openlayers-popupbox .popup-content .field-label{
- text-shadow: none;/*color: #989898;*/
- }
-
- .openlayers-popupbox .popup-content{
- background-image: url("../images/popup_bkgd.png");
- background-repeat: repeat-x;
- padding-top: 10px;
- padding-bottom: 5px;
- color: #fff;
- letter-spacing: 0.02em;
- font-size: 0.9em;
- font-weight: normal;
- text-shadow: 0 1px 0px #000000;
- }
- .openlayers-popupbox .popup-content .field-name-node-link {
- background-color: #000000;
- line-height: 12px;
- margin-bottom: -5px;
- margin-left: -10px;
- padding: 8px 10px 1px;
- }
- /*.openlayers-popupbox .popup-content .field-name-node-link a:before{
- content: "> ";
- }*/
- .openlayers-popup div.field-items{
- clear: right;
- }
- /*.openlayers-popup .ctools-dropbutton{display: none;}*/
- .page-places .openlayers-popup.openlayers-tooltip-name a{
- position: absolute;
- right: 0;
- top: 30px;
- border-color: #DDDDDD #BBBBBB #999999;
- border-radius: 0px;
- border-style: solid;
- border-width: 1px;
- color: #ffffff;
- cursor: pointer;
- font: bold 10px Arial,sans-serif;
- outline: 0 none;
- overflow: visible;
- padding: 3px 6px;
- text-shadow: 0 1px 1px #000000;
- background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
- background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
- background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
- background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
- background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(234,0,0) 100%);
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, rgb(0,0,0)),
- color-stop(1, rgb(234,0,0))
- );
- }
- .page-places .openlayers-popup.openlayers-tooltip-name a:hover{
- background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
- background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
- background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
- background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
- background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(152,152,152) 100%);
-
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0, rgb(0,0,0)),
- color-stop(1, rgb(152,152,152))
- );
- }
- .popup-content h3.report{ display: none;}
- /* from eve.css ends */
- .openlayers-popupbox .popup-pager{
- display:block;
- float: right;
- color: #fff;
- letter-spacing: 0.02em;
- font-size: 0.6em;
- font-weight: normal;
- padding: 10px;
- }
-
-
- /* Overrides/replaces kim.css line 224 */
- div.openlayers-map .openlayers_plus-blockswitcher{
- background-color: #000;
- opacity: 0.8;
- filter:alpha(opacity=80); /* For IE8 and earlier */
- width: 15%;
- padding: 10px 5%;
- }
-
- /* Overrides/replaces kim.css line 231 */
- #block-openlayers-plus-blockswitcher h2.block-title {
- font-size: 1.2em;
- color: #FFFFFF;
- letter-spacing: 0.02em;
- padding: 5px 5% 2px;
- background-color: #000;
- width: 90%;
- }
-
- /* Overrides/replaces kim.css line 666 */
- .openlayers-popupbox h2.popup-title {
- font-size: 18px;
- line-height: 1;
- margin-bottom: 5px;
- padding: 8px 5% 2px;
- width: 90%;
- }
-
- /* Overrides/replaces kim.css line 626 */
- .openlayers-popupbox{
- background-color: #000;
- display: block;
- position: absolute;
- top: 300px;
- right: 0px;
- z-index: 1015;
- width: 25%;
- float: right;
- /* little trick to make sure we at least overlap the layerswitcher, until we can just flip that */
- /*min-height: 105px;*/
- opacity: 0.8;
- filter:alpha(opacity=80); /* For IE8 and earlier */
- }
-
- /* less height on node+ user pages for the title */
- #region-preface-second .openlayers-popupbox,
- #region-sidebar-second .openlayers-popupbox {
- min-height: 0px;
- }