@import "../ms-admin/4.7.0/less/app.less";
.ms-admin-picture {
    height: 100%;
}

//图片列表
.ms-admin-picture-list {
    background: #fff;
    .ms-margin-padding(12px, 14px);
    display: flex;
    //单个素材
    .ms-admin-picture-item {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: ~'calc(100% - 220px)' !important;
        &>div {
            .ms-margin-padding(0 24px 0 0, 10px 10px 0 10px);
            width: 230px;
            display: flex;
            flex-direction: column;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            .body {
                display: flex;
                flex-direction: column;
                line-height: 2em;
                div {
                    margin-top: 0.5em;
                    display: flex;
                    align-items: center;
                    span {
                        .ms-ellipsis;
                        .ms-hover;
                    }
                }
                img {
                    .ms-width-height(100%, 130px);
                    object-fit: cover;
                }
            }
            .footer {
                display: flex;
                padding: 14px 0;
                i {
                    color: @contentColor;
                    margin: auto;
                    .ms-hover;
                }
                em {
                    .ms-width-height(1px, 1em);
                    background: #e6e6e6;
                }
            }
        }
    }
    .ms-admin-picture-show {
        min-width: 220px;
        height: 100%;
        .ms-margin-padding(-14px 0, 14px);
        border-left: 1px solid #e6e6e6;
        &>span {
            padding: 10px;
            display: flex;
            background: #f2f2f6;
            font-weight: bold;
        }
        &>div {
            .ms-align-center;
            padding: 10px;
            font-size: 14px;
            span {
                margin-right: auto;
            }
            i {
                .ms-hover;
                margin-left: 10px;
                cursor: pointer;
            }
        }
        &>p {
            margin: 0;
            padding: 10px;
            border: 1px solid #e6e6e6;
            .ms-flex(center);
            align-items: center;
            .ms-hover;
        }
    }
}