simple-image-label/libs/simpleImageLabel.css

Javascript image annotate, use in deep learning

.__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 !important;
  background-color: #52525280 !important;
}

.__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;
}