wikimedia/mediawiki-core

@import 'mediawiki.skin.variables';
@import 'content.variables.less';

figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ] {
    border: @border-subtle;
    border-bottom: 0;  // No border to figcaption
    background-color: @background-color-interactive-subtle;

    > :not( figcaption ) .mw-file-element {
        border: @border-subtle;
        background: @background-color-interactive-subtle;
    }

    > figcaption {
        border: @border-subtle;
        border-top: 0;
        background-color: @background-color-interactive-subtle;

        /* In mw-core the font-size is duplicated, 94% in thumbinner
         * and again 94% in thumbcaption. 88.4% for font size of the
         * caption results in the same behavior. */
        font-size: 88.4%;  // @font-size-thumbinner-screen * @font-size-thumbcaption-screen
    }
}

.mw-image-border .mw-file-element {
    border: @border-width-base @border-style-base #eaecf0;
}

figure[ typeof~='mw:File/Thumb' ] {
    > figcaption::before {
        content: '';
        width: 15px;
        height: 11px;

        // Default where page content language is not set
        // Allow to flip
        margin: 0 0 0 3px;
        float: right;

        // Defaults for page content language

        .mw-content-ltr & {
            /* @noflip */
            margin: 0 0 0 3px;
            /* @noflip */
            float: right;
        }

        .mw-content-rtl & {
            /* @noflip */
            margin: 0 3px 0 0;
            /* @noflip */
            float: left;
        }
    }

    > .mw-file-description,
    > .mw-file-magnify {
        display: block;
        position: relative;

        &::after {
            content: '';
            width: 15px;
            height: 11px;
            position: absolute;
            bottom: -11px;

            // Default where page content language is not set
            // Allow to flip
            right: 6px;
            background-image: @background-image-magnify-ltr;

            // Defaults for page content language

            .mw-content-ltr & {
                /* @noflip */
                right: 6px;
                /* @noflip */
                left: auto;
                /* @noflip */
                background-image: @background-image-magnify-ltr;
            }

            .mw-content-rtl & {
                /* @noflip */
                right: auto;
                /* @noflip */
                left: 6px;
                /* @noflip */
                background-image: @background-image-magnify-rtl;
            }
        }
    }
}