rverify/src/style/style.less

A lightweight image rotation verification plugin.

.rv-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.rv-wrap {
  position: relative;
  width: 18.5rem;
  background-color: #fff;
  border-radius: 10px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  .rv-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 20px;
    width: 20px;
    margin: 0.625rem 0.625rem 0.625rem auto;
    transition: opacity 0.2s ease-in-out;

    &:hover {
      opacity: 0.5;
    }
  }
  .rv-title {
    text-align: center;
    margin: 0.625rem auto;
    font-size: 14px;
    color: #9b9b9b;
  }

  .rv-content {
    padding: 0.75rem 1rem 1.125rem;
    text-align: center;

    .rv-text {
      font-size: 18px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }

    .rv-image {
      position: relative;
      margin: 1.5625rem auto;
      img,
      .rv-image-mask {
        border-radius: 50%;
        width: 152px;
        height: 152px;
        // max-width: 152px;
        // max-height: 152px;
        user-select: none;
      }
      .rv-image-mask {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 152px;
        height: 152px;
        background-color: rgba(0, 0, 0, 0.5);

        &,
        .rv-image-mask-success,
        .rv-image-mask-error {
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.2s ease-in-out;
        }

        svg {
          margin: auto;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          transition: fill 0.2s ease-in-out;
        }
      }
    }

    .rv-control {
      position: relative;
      width: 95%;
      height: 3.125rem;
      margin: 0 auto 0.9375rem auto;
      user-select: none;

      .rv-bar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 100px;
      }

      .rv-slider {
        position: absolute;
        top: 0;
        left: 0;
        height: 3.125rem;
        width: 3.125rem;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 21px 52px 0 rgba(82,82,82,.2);
        transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out,
          box-shadow 0.2s ease-in-out;

        &.rv-slider-normal {
          background: #4E6EF2;
          border-color: #4E6EF2;
          box-shadow: 0px 7px 18px -5px #4E6EF2;

          svg {
            fill: #fff;
          }
        }

        svg {
          margin: auto;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          fill: #8a8a8a;
          transition: fill 0.2s ease-in-out;
        }
      }
      .rv-slider-error {
        background: #ff7875;
        border-color: #ff7875;
        box-shadow: 0px 7px 18px -5px #ff7875;

        svg {
          fill: #fff;
        }
      }
      .rv-slider-success {
        background: #52c41a;
        border-color: #52c41a;
        box-shadow: 0px 7px 18px -5px #52c41a;

        svg {
          fill: #fff;
        }
      }
    }

    .rv-extra {
      margin-top: 1.4375rem;
      margin-bottom: 0.3125rem;
      font-size: 14px;

      span {
        display: inline-block;
        width: 15px;
        height: 15px;
        vertical-align: middle;
        margin-right: 3px;
        margin-top: -2px;
      }

      a {
        color: inherit;
        cursor: pointer;
        text-decoration: none;
      }
    }
  }
}
@keyframes shake {
  0% {
    left: 0px;
  }
  25% {
    left: 3px;
  }
  50% {
    left: 0px;
  }
  75% {
    left: -3px;
  }
  100% {
    left: 0px;
  }
}