geopf-extensions-openlayers/src/packages/CSS/Controls/Drawing/GPFdrawing.css

French Geoportal Extensions for OpenLayers libraries

/* MOUSE POSITION */

div[id^=GPdrawing-] {
  top: 48px;
  right: 8px;
}

/* Showing/hiding drawing panel */

button[id^="GPshowDrawingPicto-"] {}

button[id^="GPshowDrawingPicto-"][aria-pressed="false"] + dialog {
  display: none;
  visibility: hidden;
  opacity: 0%;
}

button[id^="GPshowDrawingPicto-"][aria-pressed="true"] + dialog {
  display: flex;
  flex-direction: column;
  visibility: visible;
  opacity: 100%;
}

/* General panels */

[id^=GPdrawingPanel-] {
  top: 0px;
  left: -276px;
  position: absolute;
  height: inherit;
  overflow: hidden;
  bottom: unset; /* fix dsfr */
}

/* Basic infos */

div[id^=GPdrawingBasicPanel-] {
  padding: 10px 15px;
}

.drawing-tool-section {
  padding: 2px 5px 5px;
}


.drawing-tools-flex-display {
  align-items: center;
  display: flex;
}

.drawing-tool:not(:last-child) {
  margin-right: 10px;
}

.gpf-draw-linestring-tooltip {
  transform: translate(calc(100% + 35px), -14px);
}

.gpf-draw-linestring-tooltip::before {
  content: "";
  display: block;
  width: calc(100% + 2em);
  height: 3em;
  background-color: white;
  position: absolute;
  z-index: -1;
  opacity: 0.8;
  border-radius: 4px;
  transform: translate(-1em, -0.75em);
}

.gpf-custom-dropdown-toggle {
  display: none;
}

.gpf-custom-dropdown-display {
  display: none;
}

.gpf-custom-dropdown-options {
  position: absolute;
  width: calc(100% - 3rem);
  display: none;
  z-index: 1000;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: -48px;
}

.gpf-custom-dropdown-option {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gpf-custom-dropdown-options .gpf-custom-dropdown-option {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.gpf-custom-dropdown-options .gpf-custom-dropdown-option img {
  max-width: 25px;
  max-height: 25px;
}

.gpf-custom-dropdown-display + label {
  display: none;
}

.gpf-custom-dropdown-display:checked + label {
  display: flex;
}

.gpf-custom-dropdown-toggle:checked ~ .gpf-custom-dropdown-options {
  display: flex;
}

/* Update the selected image when an option is clicked */
.gpf-custom-dropdown-option img {
  pointer-events: none;
}