ThreadNet-Web/apps/web/res/css/views/messages/_MImageReplyBody.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 Tulir Asokan <tulir@maunium.net>

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_MImageReplyBody,
.mx_MStickerBody_wrapper {
    .mx_MImageBody_banner {
        position: absolute;
        bottom: var(--cpd-space-1x);
        left: var(--cpd-space-1x);
        padding: var(--cpd-space-1x);
        border-radius: var(--MBody-border-radius);
        font-size: $font-15px;
        user-select: none;
        pointer-events: none;
        max-width: min(100%, 350px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        background-color: rgb(0, 0, 0, 0.6);
        color: #ffffff;
    }

    .mx_MImageBody_placeholder {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: $background;

        .mx_Blurhash > canvas {
            animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
    }

    .mx_MImageBody_thumbnail_container {
        border-radius: var(--MBody-border-radius);
        overflow: hidden;
        contain: paint;
    }

    .mx_MImageBody_thumbnail {
        display: block;
        height: 100%;
        width: 100%;
    }

    .mx_MImageBody_gifLabel {
        position: absolute;
        display: block;
        top: 0px;
        left: 14px;
        padding: 5px;
        border-radius: 5px;
        background: $imagebody-giflabel;
        border: 2px solid $imagebody-giflabel-border;
        color: $imagebody-giflabel-color;
        pointer-events: none;
    }
}

.mx_MImageReplyBody {
    display: flex;
    column-gap: var(--cpd-space-1x);

    .mx_MImageBody_thumbnail_container {
        flex: 1;
        min-width: 0; /* Prevent a blowout */
    }
}