mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
d03363a03f
Avoid pointer events on container. Add filter drop shadow. Simplify CSS. Do not render navigation buttons for panoramas.
67 lines
1.3 KiB
CSS
67 lines
1.3 KiB
CSS
.NavigationComponent {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.Direction {
|
|
position: absolute;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: block;
|
|
background: url(./arrow-up-white.svg);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.DirectionForward {
|
|
top: 5px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.DirectionBackward {
|
|
bottom: 5px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0) rotate(180deg);
|
|
filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.DirectionLeft {
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translate(0, -50%) rotate(-90deg);
|
|
filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.DirectionRight {
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translate(0, -50%) rotate(90deg);
|
|
filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.DirectionTurnleft {
|
|
left: 5px;
|
|
top: 5px;
|
|
transform: rotate(-45deg);
|
|
filter: drop-shadow(-1px 1px 0 rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.DirectionTurnright {
|
|
right: 5px;
|
|
top: 5px;
|
|
transform: rotate(45deg);
|
|
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.DirectionTurnaround {
|
|
left: 5px;
|
|
bottom: 5px;
|
|
transform: rotate(-135deg);
|
|
filter: drop-shadow(-1px -1px 0 rgba(0, 0, 0, 1));
|
|
}
|