mirror of
https://github.com/mapillary/mapillary-js.git
synced 2026-01-25 14:07:28 +00:00
a579107523
Use viewport coords for calculations in create tag. Use CSS transform for pixel translations. Round pixel translations to ensure that DOM rendered elements are not blurred. Move static CSS to style sheet.
93 lines
1.2 KiB
CSS
93 lines
1.2 KiB
CSS
.mapillary-js.component-tag-create .mapillary-js-interactive {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.TagCompleter,
|
|
.TagInteractor,
|
|
.TagMover,
|
|
.TagResizer,
|
|
.TagSpotInteractor,
|
|
.TagSymbol,
|
|
.TagVertex {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.TagSymbol {
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.TagMover,
|
|
.TagResizer {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.TagMover {
|
|
border-radius: 7px;
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0.2;
|
|
cursor: move;
|
|
}
|
|
|
|
.TagMover:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.TagResizer {
|
|
border-radius: 7px;
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.TagResizer:hover {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.TagVertex {
|
|
pointer-events: none;
|
|
border-radius: 3px;
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.TagInteractor,
|
|
.TagCompleter,
|
|
.TagSpotInteractor {
|
|
pointer-events: auto;
|
|
border-radius: 7px;
|
|
width: 14px;
|
|
height: 14px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.TagInteractor,
|
|
.TagCompleter {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.TagSpotInteractor {
|
|
cursor: move;
|
|
}
|
|
|
|
.TagCompleter {
|
|
background: limegreen;
|
|
}
|
|
|
|
.TagInteractor {
|
|
background: orangered;
|
|
}
|
|
|
|
.TagCompleter:hover,
|
|
.TagInteractor:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.TagSpotInteractor:hover {
|
|
opacity: 0.3;
|
|
}
|