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

.objHist {
    position: relative; // Нужно, чтобы правильно считался position элемента истории
    padding: 8px 0;

    .hists {
        padding-left: 0;
        list-style: none;
    }

    .hist {
        position: relative;
        display: block;
        margin: 3px 0;
        padding: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;

        &.isnew {
            border-left-color: #81df7d;
            border-right-color: #81df7d;
            background-color: rgba(174, 255, 184, 30%);
        }

        &.hl {
            background-color: #d2d7dc;
        }

        .pull-left {
            padding: 2px 0 3px;
        }

        .media-object {
            width: 50px;
            height: 50px;
        }

        .histHead {
            margin-bottom: 4px;
            line-height: 14px;
        }

        .author {
            display: inline-block;
            cursor: pointer;
        }

        .role {
            display: inline-block;
            font-size: @font-size-mini;
            color: #888;
            cursor: default;
        }

        .histStamp {
            display: inline-block;
            font-size: @font-size-mini;
            color: #888;
            cursor: pointer;
        }

        .histCat {
            display: inline;
            font-weight: bold;
        }

        .histDel {
            max-width: 1000px;
            color: @text-color;
        }
    }

    .info,
    .diffSwitch {
        display: inline-block;
        margin-bottom: 2px;
        color: @gray;
        font-size: @font-size-small;
        line-height: 16px;
        border-color: @gray;
    }

    .info {
        margin-right: 7px;
        padding-left: 3px;
        padding-bottom: 1px;
        border-style: solid;
        border-width: 0 0 1px 1px;
    }

    .diffSwitch {
        margin-left: 65px;
        cursor: pointer;
        border-style: dotted;
        border-width: 0 0 1px;

        &:hover {
            color: @MainBlueColor;
            border-color: @MainBlueColor;
        }
    }

    .del {
        color: desaturate(@MainRedColor, 30%);
        font-style: italic;
    }

    .regions > .diffDel,
    .regions > .diffIns,
    .region {
        display: inline-block;
    }

    .value {
        display: table;
        color: @text-color;
        line-height: 18px;

        > .name {
            display: table-cell;
            padding-right: 0.5em;
            font-weight: bold;

            &::after {
                content: ':';
            }
        }
    }

    .iconed {
        padding-left: 1.6em;

        .glyphicon {
            margin-left: -1.3em;
            margin-right: 0.3em;
        }
    }

    .reasonDesc {
        padding-left: 5px;
        font-style: italic;
        border-left: 1px dotted #ccc;

        &::before {
            content: '\201c';
            margin-left: -0.1em;
            margin-right: 0.25em;
            font-family: sans-serif;
            font-size: 2em;
            color: #ccc;
            line-height: 0.1em;
            vertical-align: -0.4em;
        }
    }

    .red {
        color: @MainRedColor;
    }

    .green {
        color: @MainGreenColor;
    }

    .orange {
        color: #d89444;
    }
}
