geopf-extensions-openlayers/src/packages/CSS/Controls/Export/GPFexportStyle.css

French Geoportal Extensions for OpenLayers libraries

/* main container */
div[id^=GPexportContainer-] {
    padding: 5px;
}

div[id^=GPexportContainer-] > button.GPsubmit {
    color: white;
}

/* bouton */
button[id^=GPexportButton-] {
    width: fit-content;
    min-width: fit-content;
    padding-left: 5px;
    padding-right: 5px;
}

button[id^=GPexportButton-].GPexportButtonExportIcon {
    padding-left: 25px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMy43MDM5OTk4bW0iCiAgIGhlaWdodD0iMy43MDA5OTk3bW0iCiAgIHZpZXdCb3g9Ii0xIC0xIDUuNzA0NjIgNS42OTk5OTk2IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc0MTciCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnMKICAgICBpZD0iZGVmczQxNCIgLz48ZwogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM4LjcwNDI5OSwtNTYuNDk2NzQ0KSI+PGcKICAgICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgICAgICBzdHJva2U9IiNmZmZmZmYiCiAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgICBzdHJva2Utd2lkdGg9IjMiCiAgICAgICBmaWxsPSJub25lIgogICAgICAgaWQ9Imc2MDQiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLDM2LjU4NjYsNTQuMzkzNjkpIj48cGF0aAogICAgICAgICBkPSJtIDY4OCwzMjYuNCB2IDggaCAyMCB2IC04IG0gLTEwLC0xNCB2IDE0IgogICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjYwODYsMCwwLDAuNTU5NSwtNDA5LjgsLTE2NikiCiAgICAgICAgIGlkPSJwYXRoNjAwIiAvPjxwYXRoCiAgICAgICAgIGQ9Im0gNjkzLDMyMS40IDUsNSA1LC01IgogICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjYwODYsMCwwLDAuNTU5NSwtNDA5LjgsLTE2NikiCiAgICAgICAgIGlkPSJwYXRoNjAyIiAvPjwvZz48L2c+PC9zdmc+Cg==');
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: left;
}

button[id^=GPexportButton-].GPexportButtonSaveIcon {
    padding-left: 25px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwxKSI+PHBhdGggZD0iTTcgMTlWMTNIMTdWMTlIMTlWNy44Mjg0M0wxNi4xNzE2IDVINVYxOUg3Wk00IDNIMTdMMjEgN1YyMEMyMSAyMC41NTIzIDIwLjU1MjMgMjEgMjAgMjFINEMzLjQ0NzcyIDIxIDMgMjAuNTUyMyAzIDIwVjRDMyAzLjQ0NzcyIDMuNDQ3NzIgMyA0IDNaTTkgMTVWMTlIMTVWMTVIOVoiPjwvcGF0aD48L3N2Zz4=');
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: left;
}

/* menu */
.GPexportMenuHidden {
    display: none;
}

.GPexportMenuContainer {
    position: relative;
    display: inline-block;
}

.GPexportMenuContent {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 80px;
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* 
.GPexportMenuContent a:hover { background-color: #f1f1f1; }
.GPexportMenuContainer:hover .GPexportMenuContent { display: block; } 
*/

/* menu des formats */
.GPexportMenuContent .container {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
.GPexportMenuContent .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
.GPexportMenuContent .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 12px;
    width: 12px;
    background-color: #eee;
    border-radius: 50%;
}
  
.GPexportMenuContent .container:hover input ~ .checkmark {
    background-color: #ccc;
}

.GPexportMenuContent .container input:checked ~ .checkmark {
    background-color: #366291;
}
  
.GPexportMenuContent .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.GPexportMenuContent .container input:checked ~ .checkmark:after {
    display: block;
}
  
.GPexportMenuContent .container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
}

.GPexportMenuContent .GPexportMenuFormat {
    display: flex;
    align-items: baseline;
    flex-direction: row;
}