@import '../_vars.less';
@import '../bs/variables.less';
@import '../bs/mixins.less';

.comments {
    position: relative;
    padding: 0 5px;

    .navContent {
        margin: 7px 0 0 5px;
    }

    .top-select {
        display: flex;
        align-items: center;

        > h4 {
            padding-right: 15px;
        }
    }

    .topcol {
        margin-top: 2px;
        margin-bottom: 4px;
    }

    .pag {
        margin-top: 2px;
        margin-bottom: 14px;
        text-align: center;
    }

    .brief {
        line-height: 24px;
        white-space: nowrap;

        &.pageLoading {
            padding-right: 75px;
            background: url(/img/misc/load.gif) 100% 50% no-repeat;
        }
    }

    .pagination {
        margin-top: 0;
        margin-bottom: 0;
    }

    .brief,
    .pagination {
        vertical-align: middle;
    }

    .comment {
        position: relative;
        display: block;
        margin: 0 10px 10px 0;
        text-decoration: none;

        &:hover {
            background-color: fade(@MainBlueColor, 10%);
        }

        .photoPreview {
            float: left;
            margin: 2px 8px 3px 3px;

            .img {
                width: 90px;
                height: 60px;
            }

            &.fail::after {
                margin: -17px 0 0 -14px;
                font-size: 28px;
            }

            .status > .glyphicon {
                top: 0;
                left: 0;
            }
        }

        .commentHead {
            line-height: 14px;
            margin-bottom: 1px;
        }

        .photoName {
            display: inline;
            cursor: pointer;
        }

        .photoYear {
            font-size: @font-size-small;
            white-space: nowrap;
        }

        .commentStamp,
        .commentChanged {
            display: inline;
            font-size: @font-size-mini;
            cursor: pointer;
            color: #888;
            white-space: nowrap;
        }

        .commentChanged {
            &:hover {
                color: @MainBlueColor;
            }
        }

        .commentText {
            display: block;
            margin-left: 101px;
            color: @text-color;
            text-decoration: none;
        }

        &.delopen {
            box-shadow: -1px 0 0 0 @MainRedColor;
            background-color: rgba(255, 99, 0, 10%);
        }
    }
}
