mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-25 14:07:28 +00:00
fd91d1880c
Use crosshair when creating tags. Use crosshair for editing vertices. Use pointer for icon. No pointer events on container when not creating to be able to fall back to other element cursors.
80 lines
1.1 KiB
CSS
80 lines
1.1 KiB
CSS
.TagContainer {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.TagSymbol {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.TagMover,
|
|
.TagResizer {
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: all;
|
|
}
|
|
|
|
.TagMover {
|
|
border-radius: 7px;
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0.2;
|
|
cursor: move;
|
|
}
|
|
|
|
.TagMover:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.TagResizer {
|
|
border-radius: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 0;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.TagResizer:hover {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.TagVertex {
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
border-radius: 3px;
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.TagInteractor,
|
|
.TagCompleter,
|
|
.TagSpotInteractor {
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: all;
|
|
border-radius: 7px;
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.TagCompleter {
|
|
background: limegreen;
|
|
}
|
|
|
|
.TagInteractor {
|
|
background: orangered;
|
|
}
|
|
|
|
.TagCompleter:hover,
|
|
.TagInteractor:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.TagSpotInteractor:hover {
|
|
opacity: 0.3;
|
|
}
|