You are here

Home » API reference » Openlayers 7.3

autopopup.css in Openlayers 7.3 

.ol-popup {
  display: none;
  position: absolute;
  background-color: white;
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
#popup-content {
  white-space: nowrap;
}

File

src/Plugin/Component/Autopopup/css/autopopup.css
View source 
  1. .ol-popup {

  2.   display: none;

  3.   position: absolute;

  4.   background-color: white;

  5.   -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);

  6.   -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));

  7.   filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));

  8.   padding: 15px;

  9.   border-radius: 10px;

  10.   border: 1px solid #cccccc;

  11.   bottom: 12px;

  12.   left: -50px;

  13. }

  14. .ol-popup:after, .ol-popup:before {

  15.   top: 100%;

  16.   border: solid transparent;

  17.   content: " ";

  18.   height: 0;

  19.   width: 0;

  20.   position: absolute;

  21.   pointer-events: none;

  22. }

  23. .ol-popup:after {

  24.   border-top-color: white;

  25.   border-width: 10px;

  26.   left: 48px;

  27.   margin-left: -10px;

  28. }

  29. .ol-popup:before {

  30.   border-top-color: #cccccc;

  31.   border-width: 11px;

  32.   left: 48px;

  33.   margin-left: -11px;

  34. }

  35. .ol-popup-closer {

  36.   text-decoration: none;

  37.   position: absolute;

  38.   top: 2px;

  39.   right: 8px;

  40. }

  41. .ol-popup-closer:after {

  42.   content: "✖";

  43. }

  44. #popup-content {

  45.   white-space: nowrap;

  46. }