simple-image-label
Version:
Javascript image annotate, use in deep learning
111 lines (94 loc) • 2.35 kB
CSS
.__simple-image-label__ {
width: 100%;
height: 100%;
margin: 0 auto;
}
.__simple-image-label__ .s-image-content {
width: 100%;
font-size: 0;
position: relative;
overflow: hidden;
}
.__simple-image-label__ .s-image-content img {
pointer-events: none;
width: 100%;
}
.__simple-image-label__ .s-image-content .label-content {
cursor: crosshair;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.__simple-image-label__ .s-image-content .label-content .label-item {
box-sizing: border-box;
}
.__simple-image-label__ .s-image-content .label-content .label-item-active {
border-color: 1px #ccc solid ;
background-color: #52525280 ;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot {
opacity: .8;
z-index: 100;
background-color: #fff;
width: 6px;
height: 6px;
position: absolute;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-n {
cursor: n-resize;
margin-left: -4px;
top: -4px;
left: 50%;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-s {
cursor: s-resize;
margin-left: -4px;
bottom: -4px;
left: 50%;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-e {
cursor: e-resize;
margin-top: -4px;
top: 50%;
right: -4px;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-w {
cursor: w-resize;
margin-top: -4px;
top: 50%;
left: -4px;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-nw {
cursor: nw-resize;
margin-top: -4px;
margin-left: -4px;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-ne {
cursor: ne-resize;
margin-top: -4px;
margin-right: -4px;
right: 0;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-sw {
cursor: sw-resize;
margin-bottom: -4px;
margin-left: -4px;
bottom: 0;
}
.__simple-image-label__ .s-image-content .label-content .label-item .resize-dot-se {
cursor: se-resize;
margin-bottom: -4px;
bottom: 0;
right: -4px;
}
.__simple-image-label__ .s-image-content .label-content .label-item .label-text {
color: #fff;
padding: 2px;
font-size: 12px;
display: none;
position: absolute;
bottom: 0;
left: 0;
}