geopf-extensions-openlayers/src/packages/CSS/Controls/ControlList/DSFRcontrolListStyle.css

French Geoportal Extensions for OpenLayers libraries

button[id^="GPshowControlListPicto-"][aria-pressed="true"] + dialog {
  width: 370px;
}

div[id^="GPcontrolList-"] {
  position: relative;
}

div[id^="GPcontrolList-"] .GPshowOpen > span {
  font-size: 32px;
  position: absolute;
  transform: translate(-5px, -2px);
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content {
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem;
  overflow: auto;
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content:not(:has(~ .gpf-panel__footer)) {
  padding-bottom: 2rem;
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  align-items: center;
  padding: 0.5rem 0.5rem;
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div:hover {
  background-color: var(--hover);
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div:hover > button {
  background-color: var(--hover);
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div > button {
  height: 40px;
  width: 40px;
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div > button::after {
  background-color: var(--text-default-grey);
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div > div {
  display: flex;
  flex-direction: column;
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div > div > span:nth-child(2) {
  color: var(--text-mention-grey);
  font-size: 0.75rem;
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__footer {
  padding: 1rem 2rem 2rem 2rem;
  background-color: var(--background-lifted-grey);
}

dialog[id^="GPcontrolListPanel-"] .gpf-panel__footer > button {
  width: 100%;
  justify-content: center;
}

.gpf-button-no-gutter + [id^="GPcontrolList-"] > .gpf-btn-icon-controllist > span::before {
    display: block;
    content: "";
    height: 1px;
    width: 32px;
    background-color: var(--border-default-grey);
    position: absolute;
    transform: translate(-7px, -7px);
}