react-advanced-cropper/dist/themes/compact.css

The react cropper library that gives the possibility to create croppers exactly suited for your website design

.advanced-cropper-simple-line {
  border-color: rgba(255, 255, 255, 0.8); }
  .advanced-cropper-simple-line--hover {
    border-color: white; }

.advanced-cropper-simple-handler-wrapper {
  width: 24px;
  height: 24px; }
  .advanced-cropper-simple-handler-wrapper--west-north {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  .advanced-cropper-simple-handler-wrapper--east-south {
    -webkit-transform: translate(-100%, -100%);
            transform: translate(-100%, -100%); }
  .advanced-cropper-simple-handler-wrapper--west-south {
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%); }
  .advanced-cropper-simple-handler-wrapper--east-north {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0); }

.advanced-cropper-simple-handler {
  display: block;
  position: relative;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  border: none;
  background: currentColor;
  height: 4px;
  width: 4px;
  opacity: 0; }
  .advanced-cropper-simple-handler--west-north, .advanced-cropper-simple-handler--east-south, .advanced-cropper-simple-handler--west-south, .advanced-cropper-simple-handler--east-north {
    display: block;
    height: 16px;
    width: 16px;
    background: none;
    opacity: 0.7; }
  .advanced-cropper-simple-handler--west-north {
    border-left: solid 2px currentColor;
    border-top: solid 2px currentColor; }
  .advanced-cropper-simple-handler--east-south {
    border-right: solid 2px currentColor;
    border-bottom: solid 2px currentColor; }
  .advanced-cropper-simple-handler--west-south {
    border-left: solid 2px currentColor;
    border-bottom: solid 2px currentColor; }
  .advanced-cropper-simple-handler--east-north {
    border-right: solid 2px currentColor;
    border-top: solid 2px currentColor; }
  .advanced-cropper-simple-handler--hover {
    opacity: 1; }

.advanced-cropper-circle-stencil__preview {
  border: solid 2px rgba(255, 255, 255, 0.8); }

.advanced-cropper-circle-stencil .advanced-cropper-simple-line {
  border-color: rgba(255, 255, 255, 0.3); }

.advanced-cropper-circle-stencil .advanced-cropper-simple-handler--west-north, .advanced-cropper-circle-stencil .advanced-cropper-simple-handler--east-south, .advanced-cropper-circle-stencil .advanced-cropper-simple-handler--west-south, .advanced-cropper-circle-stencil .advanced-cropper-simple-handler--east-north {
  opacity: 0.4; }

.advanced-cropper-circle-stencil .advanced-cropper-simple-handler--hover {
  opacity: 1; }

.advanced-cropper-stencil-grid {
  color: rgba(255, 255, 255, 0.7); }