// compare-versions.scss
// Styling for the superdesk compare-versions screen
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';

.close-compare-versions {
    position: absolute;
    top: 14px; right: 14px;
    @include opacity(60);
    background: none;
    border: 0;
    padding: 0;
    &:hover {
        @include opacity(80);
    }
}

.compare-versions-screen {
    height: 90%;
    overflow-y: auto;

    .boards-list {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
    }
    .boards-create {
        position: absolute;
        top: 0; bottom: 0; right: 0; width: 0;
        @include border-box();
        i {
            font-size: 48px;
            line-height: 100px;

            position: absolute;
            top: 50%;
            margin-top: -50px;
            left: 50%;
            margin-left: -20px;
        }
        &:hover {
            cursor: pointer;
            background: #d8d8d8;
        }
        .compare-versions-float {
            .dropdown__menu {
                position: fixed;
                left: auto;
                right: auto;
                top: auto;
                bottom: auto;
                max-width: 270px;
                li button {
                    max-width: 250px !important;
                }
            }
        }
    }
    .boards-list {
        .board {
            background: $white;
            float: left;
            height: 100%;
            @include border-box();
            border: 1px solid #cacaca;
            border-width: 0 1px;
            position: relative;

            > .dropdown {
                left: 8px;
                top: 5px;
                border: 0;
                position: absolute;
                z-index: 2;
                width: 4rem;
                .dropdown__toggle {
                    padding: 0 12px;
                    i {
                        @include opacity(40);
                    }
                }
                &.open .dropdown__toggle {
                    box-shadow: -3px -2px 1px -2px #999999, 3px -2px 1px -2px #999999;
                }
                .dropdown__menu {
                    margin-top: -4px;
                }
                &:hover {
                    .dropdown__toggle {
                        i {
                            @include opacity(100);
                        }
                    }
                }
            }

            > .board-article {
                width: 100%;
                height: 100%;
                > .main-article {
                    border: 0;
                    padding: 2.4rem 2.4rem $bottom-view-padding + 2.4rem;

                    &.locked {
                        border-left: 4px solid $state-border--locked;
                    }

                    .editbar {
                        visibility: hidden;
                        overflow: hidden;
                        margin: 0 0 20px;
                    }
                    .board-article-header {
                        margin: 0 0 2.4rem 3.2rem;
                        &__metadata {
                            display: inline-block;
                            margin-right: .6rem;
                            font-size: 12px;
                            font-weight: 500;
                            color: $grayDark;
                            &-label {
                                font-style: italic;
                                font-weight: 400;
                                color: $gray;
                            }
                            &-content {
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
            &__no-article {
                margin: 20px 0 0 60px;
                font-size: 1.2rem;
                color: gray;
                font-style: italic;
            }
            &:hover {
                .editbar {
                    visibility: visible !important;
                }
            }
        }
    }
}