mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
d11f278d43
Interactive (e.g. navigation, attribution) element have z-index 10. Overlayed elements (slider, route bubble) have z-index 20. Filling elements have z-index -1 to 9. Cover have z-index 100. Special elements (debug) have z-index 50. Do not change z-index in server cssnano plugin (z-index are not changed when built from npm script).
68 lines
1.3 KiB
CSS
68 lines
1.3 KiB
CSS
.NavigationComponent {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.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));
|
|
}
|