geopf-extensions-openlayers/src/packages/CSS/Controls/Legends/DSFRlegendsStyle.css

French Geoportal Extensions for OpenLayers libraries

.gpf-btn-icon-legends::after {
    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTMgNGg4djJoLTh6bTAgN2g4djJoLTh6bTAgN2g4djJoLTh6bS02LjUgMWEyIDIgMCAxIDEgMC00YTIgMiAwIDAgMSAwIDRtMCAyYTQgNCAwIDEgMCAwLThhNCA0IDAgMCAwIDAgOE01IDZ2M2gzVjZ6TTMgNGg3djdIM3oiLz4KPC9zdmc+Cg==') center no-repeat;
    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTMgNGg4djJoLTh6bTAgN2g4djJoLTh6bTAgN2g4djJoLTh6bS02LjUgMWEyIDIgMCAxIDEgMC00YTIgMiAwIDAgMSAwIDRtMCAyYTQgNCAwIDEgMCAwLThhNCA0IDAgMCAwIDAgOE01IDZ2M2gzVjZ6TTMgNGg3djdIM3oiLz4KPC9zdmc+Cg==') center no-repeat;
}

.gpf-btn-header-legends {
    z-index: 2;
    position: absolute;
    width: 26px;
    height: 26px;
}

.gpf-btn-icon-header-legends {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbD0iIzEwMTA5MiIgZD0iTTEzIDRoOHYyaC04em0wIDdoOHYyaC04em0wIDdoOHYyaC04em0tNi41IDFhMiAyIDAgMSAxIDAtNGEyIDIgMCAwIDEgMCA0bTAgMmE0IDQgMCAxIDAgMC04YTQgNCAwIDAgMCAwIDhNNSA2djNoM1Y2ek0zIDRoN3Y3SDN6Ii8+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: center center;
}

.gpf-panel__body_legends {
    overflow: auto;
    max-height: 300px !important;
}

.gpf-panel__title_legends {
    color: #101092;
    padding: 12px 15px;
    position: relative;
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    right: -16px;
}
.gpf-panel__header_legends {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    background: #E3E3FD;
    height: 48px;
}

button[id^=GPcollapseLegend_ID_] {
    position: absolute;
    top: 8px;
    right: 0;
}

.gpf-btn-icon-legends-collapse {
    box-shadow: none;
}

.gpf-btn-icon-legends-collapse::after {
    -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTk5OTMgOS43ODA5NUwxMi4yOTk4IDYuNDgxMTRMMTMuMjQyNiA3LjQyMzk1TDguOTk5OTMgMTEuNjY2Nkw0Ljc1NzMyIDcuNDIzOTVMNS43MDAxMyA2LjQ4MTE0TDguOTk5OTMgOS43ODA5NVoiIGZpbGw9IiMwMDAwOTEiLz4KPC9zdmc+Cg==') center no-repeat;
    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTk5OTMgOS43ODA5NUwxMi4yOTk4IDYuNDgxMTRMMTMuMjQyNiA3LjQyMzk1TDguOTk5OTMgMTEuNjY2Nkw0Ljc1NzMyIDcuNDIzOTVMNS43MDAxMyA2LjQ4MTE0TDguOTk5OTMgOS43ODA5NVoiIGZpbGw9IiMwMDAwOTEiLz4KPC9zdmc+Cg==') center no-repeat;
    transition: transform 0.2s ease-out 0s;
}

.gpf-btn-icon-legends-collapse[aria-pressed="true"]::after {
    box-shadow: none;
    transform: rotate(180deg);
}

.legend-entry-container {
    position: relative;
    top: 0;
    border-bottom: 1px solid var(--border-default-grey);
    overflow: hidden;
}

.legend-entry-container {
    background-color: var(--background-overlap-grey);
}

.gpf-label-legends-name {
    width: calc(100% - 40px);
    line-height: 56px;
    overflow: hidden;
    white-space:  nowrap;
    text-overflow: ellipsis;
    padding-left: 4px;
}

button[id^=GPcollapseLegend_ID_][aria-pressed="true"] + .legend-entry-image {
    opacity: 1;
}

button[id^=GPcollapseLegend_ID_][aria-pressed="true"] + .legend-entry-image {
    max-height: 300px;
    overflow: auto;
    border-top: 1px solid var(--border-default-grey);
    padding: 10px 0;
}

.legend-entry-image {
    display: block;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease-out 0s, opacity 0.5s ease-out 0s;
}

.legends-entries {
  padding: 0 16px;
}