vue-advanced-cropper/dist/theme.classic.css

The advanced library to create your own croppers suited for any website design

.vue-simple-line {
  border-color: rgba(255, 255, 255, 0.8);
}

.vue-simple-handler {
  display: block;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  border: none;
  background: white;
  height: 8px;
  width: 8px;
  opacity: 0.5;
}
.vue-simple-handler--hover {
  opacity: 1;
}

.vue-circle-stencil__preview {
  border: solid 2px rgba(255, 255, 255, 0.8);
}
.vue-circle-stencil .vue-simple-line {
  border-color: rgba(255, 255, 255, 0.3);
}
.vue-circle-stencil .vue-simple-handler--west-north, .vue-circle-stencil .vue-simple-handler--east-south, .vue-circle-stencil .vue-simple-handler--west-south, .vue-circle-stencil .vue-simple-handler--east-north {
  opacity: 0.5;
}
.vue-circle-stencil .vue-simple-handler--hover {
  opacity: 1;
}

.vue-circle-stencil__preview:after, .vue-circle-stencil__preview:before,
.vue-rectangle-stencil__preview:after,
.vue-rectangle-stencil__preview:before {
  content: "";
  opacity: 0;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.vue-circle-stencil__preview:after,
.vue-rectangle-stencil__preview:after {
  border-left: dashed 1px white;
  border-right: dashed 1px white;
  width: 33%;
  height: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 50%;
  top: 0;
}
.vue-circle-stencil__preview:before,
.vue-rectangle-stencil__preview:before {
  border-top: dashed 1px white;
  border-bottom: dashed 1px white;
  height: 33%;
  width: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.vue-circle-stencil--moving .vue-rectangle-stencil__preview:after, .vue-circle-stencil--moving .vue-rectangle-stencil__preview:before,
.vue-circle-stencil--moving .vue-circle-stencil__preview:after,
.vue-circle-stencil--moving .vue-circle-stencil__preview:before, .vue-circle-stencil--resizing .vue-rectangle-stencil__preview:after, .vue-circle-stencil--resizing .vue-rectangle-stencil__preview:before,
.vue-circle-stencil--resizing .vue-circle-stencil__preview:after,
.vue-circle-stencil--resizing .vue-circle-stencil__preview:before,
.vue-rectangle-stencil--moving .vue-rectangle-stencil__preview:after,
.vue-rectangle-stencil--moving .vue-rectangle-stencil__preview:before,
.vue-rectangle-stencil--moving .vue-circle-stencil__preview:after,
.vue-rectangle-stencil--moving .vue-circle-stencil__preview:before,
.vue-rectangle-stencil--resizing .vue-rectangle-stencil__preview:after,
.vue-rectangle-stencil--resizing .vue-rectangle-stencil__preview:before,
.vue-rectangle-stencil--resizing .vue-circle-stencil__preview:after,
.vue-rectangle-stencil--resizing .vue-circle-stencil__preview:before {
  opacity: 0.7;
}
.vue-circle-stencil--moving .vue-simple-handler, .vue-circle-stencil--resizing .vue-simple-handler,
.vue-rectangle-stencil--moving .vue-simple-handler,
.vue-rectangle-stencil--resizing .vue-simple-handler {
  opacity: 1;
}

.vue-circle-stencil--moving .vue-simple-handler, .vue-circle-stencil--resizing .vue-simple-handler,
.vue-rectangle-stencil--moving .vue-simple-handler,
.vue-rectangle-stencil--resizing .vue-simple-handler {
  opacity: 1;
}