meanTorrent/modules/collections/client/less/collections.less

@import (reference) "../../../core/client/less/mt-var.less";

.collections-side-overlay {
    top: 50px !important;
    width: 450px;
    .collection-popup {
        background-color: #fdfdfd;
        width: 100%;
        height: ~"calc(100% - 50px)";
        overflow: auto;
        padding: 30px 10px;
        .collection-form {
            margin-top: 20px;
            input {
                width: 100%;
            }
            textarea {
                resize: vertical;
                width: 100%;
                min-height: 200px;
            }
            img {
                margin-top: 10px;
                width: auto;
            }
            .text-muted {
                color: #aaa;
            }
        }
    }
    .bottom-control {
        background-color: #fdfdfd;
        border-top: solid 1px #e6e6e6;
        width: 100%;
        height: 50px;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 8px 10px;
    }
}

.collections-list {
    .pagination-div-bottom {
        margin-top: 20px;
        border-top: 2px solid lighten(@gray-base, 85%);
    }
    .pagination-div-top {
        border-bottom: 2px solid lighten(@gray-base, 85%);
        input {
            @media (max-width: @screen-sm-max) {
                margin-top: 0 !important;
            }
        }
    }
    .collection-items {
        text-align: -webkit-center;
        .collection-item {
            cursor: pointer;
            position: relative;
            margin: 20px 0 0 0;
            overflow: hidden;
            border-radius: 8px;
            max-width: 400px;
            border: solid 1px #666;
            min-height: 160px;
            z-index: 1;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            &:hover {
                img {
                    /* csslint ignore:start */
                    transform: scale(2);
                    /* csslint ignore:end */
                }
            }

            img {
                width: ~"calc(100% + 1px)";
                transition-property: transform, opacity;
                transition-duration: 1s;
                transition-timing-function: ease;
            }
            .item-info {
                color: #ddd;
                position: absolute;
                overflow: hidden;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 20px 10px;
                background-color: #333;
                background-color: rgba(0, 0, 0, 0.3);
                .name {
                    margin-bottom: 2px;
                    font-size: 1.6em;
                    text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
                }
                .collection-data {
                    .item-release {
                        font-size: 1.2em;
                        text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
                    }
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 20px;

                    i {
                        text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
                    }
                }
            }
            &:hover {
                .fa {
                    color: @mt-base-color !important;
                }
                .item-info {
                    background-color: #333;
                    background-color: rgba(0, 0, 0, 0.1);
                    color: #fff;
                }
            }
        }
    }
}

.collection-view-top {
    .h3, h3 {
        margin-top: 5px !important;
    }
    .item-name {
        color: #efefef;
        text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
    }
    .item-release {
        text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
        color: @gray-light;
        @media (max-width: @screen-xs-max) {
            text-align: left !important;
        }
    }
    .item-overview {
        font-size: 16px;
        color: lighten(@gray-light, 20%);
        text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
    }
    .item-data {
        text-shadow: 0 0 0.1em #000,-0 -0 0.1em #000;
        .fa {
            color: @mt-base-color !important;
        }
    }
    .collection-button {
        @media (max-width: @screen-xs-max) {
            text-align: left !important;
        }
    }
}