iotmapmanager/css/popup.css

Manage markers, clusters, user marker or paths on IotMaps

/*
* Software Name : Iot Map Component
* SPDX-FileCopyrightText: Copyright (c) Orange SA
* SPDX-License-Identifier: MIT
*
* This software is distributed under the MIT license,
* the text of which is available at https://opensource.org/license/MIT/
* or see the "LICENSE" file for more details.
*
* Software description: web library for interactive maps providing Orange branded reusable markers, tabs, clusters and paths
*/

/* popup.css */

/* POP-UP */
.iotmap-marker-unselected > .iotmap-marker-popup {
  position: absolute;
  bottom:-25px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.90);
  border-radius: 0;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.7);
  opacity: 0;
  overflow: hidden;
  height: 10px;
  width: 10px;
  font-size: 1px;
}

.iotmap-marker-selected > .iotmap-marker-popup {
  position: absolute;
  bottom:-25px;
  left:-100px;
  width: 250px;
  box-sizing: border-box;
  height: auto;
  max-height: 600px;
  border-radius: 10px;
  opacity: 1;

  background-color: white;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.7);
  overflow: hidden;
  padding: 10px 15px 30px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  text-align: left;
  z-index: 0;
}

.iotmap-marker-selected > .iotmap-marker-popup .iotmap-pop-up-title {
  font-size: 20px;
}

.iotmap-marker-selected > .iotmap-marker-popup .iotmap-pop-up-body {
  font-size: 14px;
}


/* CLUSTER POPUP */

.iotmap-cluster-big-popup-table {
  width: 100%;
  text-align: left;
}
.iotmap-cluster-big-popup-body-cell {
  text-align: left;
  font-size: 14px;
}
.iotmap-cluster-big-popup-body-bullet {
  width: 20px;
  text-align: center;
}

.leaflet-container a, .leaflet-container a:visited {
  color: black;
}

.leaflet-container a:hover {
  color: #FF7900;
}

.iotmap-clustericon > .iotmap-cluster-popup, .iotmap-cluster-big-popup {
  position: absolute;
  bottom:0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.90);
  border-radius: 0;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.7);
  opacity: 0;
  overflow: hidden;
  height: 10px;
  width: 10px;
  font-size: 1px;
}


.iotmap-clustericon:hover > .iotmap-cluster-popup {
  position: absolute;
  bottom:-25px;
  left:-75px;
  width: 200px;
  box-sizing: border-box;
  max-height: 600px;
  height: auto;
  border-radius: 10px;
  opacity: 1;

  background-color: white;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.7);
  overflow: hidden;
  padding: 10px 15px 30px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  text-align: left;
  z-index: 0;
}

.iotmap-clustericon:hover > .iotmap-cluster-big-popup {
  position: absolute;
  bottom:-25px;
  left:-115px;
  width: 280px;
  box-sizing: border-box;
  max-height: 600px;
  height: auto;
  border-radius: 10px;
  opacity: 1;

  background-color: white;
  box-shadow: 0 0 8px -1px rgba(42, 42, 42, 0.7);
  overflow: hidden;
  padding: 10px 15px 30px;
  font-family: 'Helvetica Neue', 'helvetica';
  font-weight: bold;
  text-align: left;
  z-index: 0;
}

.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-title, .iotmap-cluster-big-popup .iotmap-pop-up-title {
  font-size: 20px;
}

.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-title-icon, .iotmap-cluster-big-popup .iotmap-pop-up-title-icon {
  font-size: 20px;
  margin-right: 15px;
}

.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-bullet, .iotmap-cluster-big-popup .iotmap-pop-up-bullet {
  font-size: 12px;
  color: transparent;
}

.iotmap-clustericon:hover > .iotmap-cluster-popup .iotmap-pop-up-body, .iotmap-cluster-big-popup .iotmap-pop-up-body {
  font-size: 12px;
}