.ol-control.ol-routing { top: 0.5em; left: 3em; max-height: 90%; overflow-y: auto; } .ol-touch .ol-control.ol-routing { left: 3.5em; } .ol-control.ol-routing.ol-searching { opacity: .5; } .ol-control.ol-routing .ol-car, .ol-control.ol-routing > button { position: relative; } .ol-control.ol-routing .ol-car:after, .ol-control.ol-routing > button:after { content: ""; position: absolute; width: .78em; height: 0.6em; border-radius: 40% 50% 0 0 / 50% 70% 0 0; box-shadow: inset 0 0 0 0.065em, -0.35em 0.14em 0 -0.09em, inset 0 -0.37em, inset -0.14em 0.005em; clip: rect(0 1em .5em -1em); top: .35em; left: .4em; } .ol-control.ol-routing .ol-car:before, .ol-control.ol-routing > button:before { content: ""; position: absolute; width: .28em; height: .28em; border-radius: 50%; box-shadow: inset 0 0 0 1em, 0.65em 0; top: 0.73em; left: .20em; } .ol-control.ol-routing .ol-pedestrian:after { content: ""; position: absolute; width: .3em; height: .4em; top: .25em; left: 50%; transform: translateX(-50%); box-shadow: inset 0.3em 0, 0.1em 0.5em 0 -0.1em, -0.1em 0.5em 0 -0.1em, 0.25em 0.1em 0 -0.1em, -0.25em 0.1em 0 -0.1em; border-top: .2em solid transparent; } .ol-control.ol-routing .ol-pedestrian:before { content: ""; position: absolute; width: .3em; height: .3em; top: .1em; left: 50%; transform: translateX(-50%); border-radius: 50%; background-color: currentColor; } .ol-control.ol-routing .content { margin: .5em; } .ol-control.ol-routing.ol-collapsed .content { display: none; } .ol-routing .ol-search.ol-collapsed ul { display: none; } .ol-routing .ol-search ul .copy { display: none; } .ol-routing .ol-search ul.history { /* display: none; */ } .ol-routing .content .search-input > div > * { display: inline-block; vertical-align: top; } .ol-routing .ol-result ul { list-style: none; display: block; } .ol-routing .ol-result li { position: relative; min-height: 1.65em; } .ol-routing .ol-result li i { display: block; font-size: .8em; font-weight: bold; } .ol-routing .ol-result li:before { content: ""; border: 5px solid transparent; position: absolute; left: -1.75em; border-bottom-color: #369; border-width: .6em .4em .6em; transform-origin: 50% 125%; box-shadow: 0 0.65em 0 -0.25em #369; top: -.8em; } .ol-routing .ol-result li:after { content: ""; position: absolute; width: 0.25em; height: .6em; left: -1.5em; background: #369; top: .6em; border-radius: 0.1em; } .ol-routing .ol-result li.R:before { transform: rotate(90deg); } .ol-routing .ol-result li.FR:before { transform: rotate(45deg); } .ol-routing .ol-result li.L:before { transform: rotate(-90deg); } .ol-routing .ol-result li.FL:before { transform: rotate(-45deg); } .ol-routing .content > i { vertical-align: middle; margin: 0 .3em 0 .1em; font-style: normal; } .ol-routing .ol-button, .ol-routing .ol-button:focus, .ol-routing .ol-pedestrian, .ol-routing .ol-car { font-size: 1.1em; position: relative; display: inline-block; width: 1.4em; height: 1.4em; color: rgba(0,60,136,1); background-color: transparent; margin: 0 .1em; opacity: .5; vertical-align: middle; outline: none; cursor: pointer; } .ol-routing .ol-button:hover, .ol-routing .ol-button.selected, .ol-routing i.selected { opacity: 1; background: transparent; } .ol-control.ol-routing { background-color: rgba(255,255,255,.25); } .ol-control.ol-routing:hover { background-color: rgba(255,255,255,.75); } .search-input > div > button:before { content: '\00b1'; }