wikimedia/mediawiki-extensions-MobileFrontend

@import 'mediawiki.skin.variables.less';
@import '../../../mobile.less/mobile.variables.less';
@import 'mediawiki.mixins.less';

@drawerPadding: 20px;

.drawer.references-drawer {
    background-color: #000; // Fixed colors, don't use color design tokens
    color: #c8ccd1; // Fixed colors, don't use color design tokens
    max-height: 50%; // on tablet this will become capped at 400px
    overflow-y: auto;
    padding: @drawerPadding/2 @drawerPadding @drawerPadding @drawerPadding;

    a {
        color: #69f;
    }

    a.new {
        color: @color-link-red;
    }

    img {
        // Invert MathML images to ensure formulas
        // appear as white on dark background T366220
        filter: invert( 1 );
    }

    .references-drawer__header {
        .flex-display();
        align-items: center;
        padding-bottom: @drawerPadding;
    }

    .references-drawer__title {
        color: @color-subtle;
        cursor: default;
        letter-spacing: 0.2em;
        font-size: 0.75em;
        text-transform: uppercase;
        margin-left: 1em;
        flex-grow: 1;
    }

    .main-reference-content {
        display: inline;
        margin-left: 0.2em;
        word-break: break-word;
    }
}

@media all and ( min-width: @min-width-breakpoint-tablet ) {
    .drawer.references-drawer {
        max-height: 400px;
    }
}

.mf-icon-reference {
    .cdx-mixin-css-icon( @cdx-icon-reference, @param-is-button-icon: false,
    @param-fill-color: @color-subtle, @param-size-icon: @size-icon-small );
}

.mf-icon-close-small {
    .cdx-mixin-css-icon( @cdx-icon-close, @param-is-button-icon: false,
    @param-fill-color: #a2a9b1, @param-size-icon: @size-icon-small );
}