.ol-control.ol-bookmark { top: 0.5em; left: 3em; background-color: rgba(255,255,255,.5); } .ol-control.ol-bookmark button { position: relative; } .ol-control.ol-bookmark > button::before { content: ""; position: absolute; border-width: 10px 5px 4px; border-style: solid; border-color: currentColor; border-bottom-color: transparent; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 0; } .ol-control.ol-bookmark > div { display: block; min-width: 5em; } .ol-control.ol-bookmark.ol-collapsed > div { display: none; } .ol-control.ol-bookmark input { font-size: 0.9em; margin: 0 0.5em 0.5em; padding: 0 0.5em; } .ol-control.ol-bookmark ul { margin: 0 0 0.5em; padding: 0; list-style: none; min-width: 10em; } .ol-control.ol-bookmark li { color: rgba(0,60,136,0.8); font-size: 0.9em; padding: 0 0.2em 0 0.5em; cursor: default; clear:both; } .ol-control.ol-bookmark li:hover { background-color: rgba(0,60,136,.5); color: #fff; } .ol-control.ol-bookmark > div button { width: 1em; height: 0.8em; float: right; background-color: transparent; cursor: pointer; border-radius: 0; } .ol-control.ol-bookmark > div button:before { content: "\2A2F"; color: #936; font-size: 1.2em; line-height: 1em; border-radius: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ol-bookmark ul li button, .ol-bookmark input { display: none; } .ol-bookmark.ol-editable ul li button, .ol-bookmark.ol-editable input { display: block; }