mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-18 13:56:53 +00:00
ad659bc4de
Render adaptable div within domRenderer element. Hide overflow to avoid showing things outside of viewer in fill mode. Use offset to set position of adaptable element. Clear adaptable render when clearing.
109 lines
1.8 KiB
CSS
109 lines
1.8 KiB
CSS
.domRenderer {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.Directions {
|
|
display: block;
|
|
position: absolute;
|
|
width: 165px;
|
|
height: 165px;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
margin-left: -82px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.DirectionsWrapper {
|
|
display: block;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100px;
|
|
bottom: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.DirectionsArrowStep,
|
|
.DirectionsArrowPano,
|
|
.DirectionsArrowDisabled {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -27px;
|
|
margin-top: -27px;
|
|
width: 54px;
|
|
height: 54px;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.DirectionsArrowStep,
|
|
.DirectionsArrowPano {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.DirectionsArrowStep,
|
|
.DirectionsArrowDisabled {
|
|
background: url(./arrow-up-white.svg);
|
|
background-size: contain;
|
|
}
|
|
|
|
.DirectionsArrowDisabled {
|
|
opacity: 0.2;
|
|
z-index: -10;
|
|
}
|
|
|
|
.DirectionsArrowPano {
|
|
background: url(./arrow-up-wheat.svg);
|
|
background-size: contain;
|
|
}
|
|
|
|
.DirectionsArrowStep:hover,
|
|
.DirectionsArrowPano:hover {
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
|
|
.TurnLeft,
|
|
.TurnRight,
|
|
.TurnAround {
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
height: 54px;
|
|
width: 54px;
|
|
bottom: 40px;
|
|
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
}
|
|
|
|
.TurnLeft:hover,
|
|
.TurnRight:hover,
|
|
.TurnAround:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.TurnLeft {
|
|
left: 10px;
|
|
background: url(./arrow-left.svg);
|
|
background-size: contain;
|
|
}
|
|
|
|
.TurnRight {
|
|
right: 10px;
|
|
background: url(./arrow-left.svg);
|
|
background-size: contain;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.TurnAround {
|
|
left: 10px;
|
|
bottom: 0px;
|
|
background: url(./arrow-left.svg);
|
|
background-size: contain;
|
|
}
|