npmcomment/src/components/ImagePreviewer/ImagePreviewer.less

.comment-image-preview-container {
  .toolbar {
    border-bottom: 1px solid #f2f2f2;
    margin: 0 5px;
    padding-bottom: 10px;
    .button {
      padding: 5px 10px;
      cursor: pointer;
      &.reversal i {
        transform: rotate3d(0, 1, 0, 180deg);
      }
    }
  }
  .pictureWrapper {
    position: relative; // width: 100%;
    // padding-bottom: 68%;
    // height: 0;
    text-align: center;
    margin-top: 15px;
    padding: 0 5px;
    .tools {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      .item {
        width: 33%;
        display: inline-block;
        height: 100%;
        &.left {
          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
            auto;
        }
        &.shrink {
          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
            auto;
        }
        &.right {
          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
            auto;
        }
      }
    }
    .picture {
      max-width: 100%;
      max-height: 400px;
    }
    .tool() {
      position: absolute;
      width: 50px;
      background-color: transparent;
      z-index: 100;
      opacity: 0.5;
      font-size: 50px;
      text-align: left;
      cursor: pointer;
      &:hover {
        background-color: #fff;
      }
    }
    .prev {
      .tool();
      left: 5px;
      top: 0;
      bottom: 0;
    }
    .next {
      .tool();
      right: 5px;
      top: 0;
      bottom: 0;
    }
    .middle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    } // .picture {
    //     position: absolute;
    //     bottom: 0;
    //     top: 0;
    //     left: 5px;
    //     right: 5px;
    //     background-size: contain;
    //     background-position: center;
    // }
  }
  .list {
    font-size: 0;
    margin-top: 25px;
    .wrapper {
      width: 11.1%;
      height: 0;
      padding-bottom: 11.1%;
      position: relative;
      display: inline-block;
      border-radius: 5px;
      border: 1px solid transparent;
      opacity: 0.5;
      &.active {
        border: 1px solid #fc4747;
        opacity: 1;
      }
      .thumbnail {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
        background-size: cover;
        background-position: center;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
}