static/css/devhub/listing.less

@import '../impala/lib';

.items:first-child .item:first-child {
    .info, .action {
        border: 0;
     }
}

.dashboard .listing .item {
    h3 img {
        height: auto;
        width: auto;
        max-height: 64px;
        max-width: 64px;
    }
    .info {
        padding-left: 102px;
    }
    .item-info,
    .item-details {
        .border-box();
    }
    .item-info {
        border-left: 1px dotted @border-blue;
        float: right;
        margin-left: 2%;
        padding-left: 2%;
        width: 30%;
        .downloads,
        .users,
        .price {
            color: @green;
        }
        .price {
            font-size: 11px;
            line-height: 13px;
        }
        p {
            font-size: 13px;
            line-height: 15px;
            margin: 0;

            + p {
                margin-top: 2px;
            }
        }
    }
    .item-details {
        width: 68%;
        li.distribution-tag-unlisted,
        li.distribution-tag-listed {
            padding-top: 5px;
            border-top: 1px dotted #94bfce;
        }
        span.distribution-tag-listed, span.distribution-tag-unlisted {
            color: white;
            border-radius: 4px;
            padding: 1px 5px;
            font-size: smaller
        }
        span.distribution-tag-listed {
            background-color: #01BDAD;
        }
        span.distribution-tag-unlisted {
            background-color: #7A2F7A;
        }
    }
    &:hover {
        a {
            color: @link;
        }
        h5 {
            color: @dark-gray;
        }
    }
    .info.statictheme {
        padding-left: 148px;
        h3 img {
            left: 10px;
            height: 64px;
            width: auto;
            max-width: 128px;
            object-fit: cover;
            object-position: left;
        }
    }
}

.html-rtl .dashboard .listing .item {
    .info {
        padding-left: 0px;
        padding-right: 102px;
    }
    .info.statictheme {
        padding-left: 0px;
        padding-right: 148px;
    }
    .item-info {
        float: left;
        border: 0;
        border-right: 1px dotted @border-blue;
        margin: 0 2% 0 0;
        padding: 0 2% 0 0;
    }
}

.item-actions {
    clear: both;
    float: none;
    font-size: 11px;
    line-height: 13px;
    margin: 1.75em 0 0;

    a, button.link {
        color: @note-gray;

        &.more-actions {
            position: relative;

            &:after {
                border-color: @note-gray transparent transparent;
                border-style: solid;
                border-width: 3px 3px 0;
                content: "";
                margin: 5px 0 0 4px;
                position: absolute;
                height: 0;
                top: 0;
                width: 0;
            }
            &:hover:after {
                border-top-color: #05e;
            }
        }
    }
    button.link {
        background: transparent none;
        text-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 0;
        font-weight: normal;
        font-size: 11px;
        padding: 0;
    }
    button.link:hover {
        text-decoration: underline;
    }
    h5 {
        font-size: 1em;
        margin-right: 4px;
    }
    h5, > ul, > ul > li {
        color: @note-gray;
        display: inline-block;
    }
    h5:after {
        content: ":";
    }
    ul > li {
        display: inline-block;

        &:not(:first-child):before {
            background-color: @note-gray;
            border-radius: 5em;
            content: "";
            display: inline-block;
            height: 2px;
            margin: 0 2px 4px;
            width: 2px;
        }
    }
}
.html-rtl .item-actions a.more-actions:after {
    margin: 5px 4px 0 0;
}
.html-rtl .item-actions {
    float: none;
}

.item:hover a.delete-addon {
    color: #d33;
}
#addon-delete-listing.item:hover a.delete-addon {
    color: #fff;
}

.item:hover button.link {
    color: #0996F8;
}