npmcomment/lib/components/ImagePreviewer/ImagePreviewer.less

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