wikimedia/mediawiki-core

/*!
 * Styles for Special:Contribute page.
 */
@import 'mediawiki.skin.variables.less';

.mw-special-Contribute {
    .mw-contribute-wrapper {
        // Ensure this is user's specified font size.
        // This works around the fact that Vector skin uses 14px rather than 16px.
        font-size: 1rem;
    }

    .mw-contribute-tab {
        display: inline-block;
    }

    .mw-contribute-tabs-content {
        background-color: @background-color-neutral-subtle;
    }

    .mw-contribute-content-area {
        display: flex;
        flex-flow: row wrap;
        column-gap: 24px;
        row-gap: 24px;
    }

    .mw-contribute-card {
        background-color: @background-color-base;
        border: @border-subtle;
        border-radius: @border-radius-base;
        box-shadow: 0 1px 2px 0 rgba( 0, 0, 0, 0.1 );
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }

        &:last-of-type .mw-contribute-card-content {
            margin-bottom: 0;
        }
    }

    .mw-contribute-card-content {
        color: @color-base;
        padding: 12px;
    }

    .mw-contribute-card-title {
        font-weight: bold;
    }

    .mw-contribute-card-icon {
        padding-right: 8px;

        &--article {
            .cdx-mixin-css-icon(@cdx-icon-article);
        }

        &--language {
            .cdx-mixin-css-icon(@cdx-icon-language);
        }

        &--upload {
            .cdx-mixin-css-icon(@cdx-icon-upload);
        }

        &--lightbulb {
            // This is required by the design but not available in the codex icon set
            // so we use the info icon instead and override teh svg with the correct one
            // we can replace the below with the correct icon once it is available in the codex set
            // remove and replace with the below, when T346320 is resolved
            //.cdx-mixin-css-icon(@cdx-icon-lightbulb);
            .cdx-mixin-css-icon(@cdx-icon-info);
            background-image: url( data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="%23202122"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7z"/></svg> );
        }
    }

    .mw-contribute-card-description {
        padding-left: 28px;
        font-size: @font-size-base * 0.875;
    }

    .mw-contribute-card-action {
        color: @color-progressive;
        padding-left: 28px;
        padding-top: 4px;
        font-size: @font-size-base * 0.875;
        font-weight: bold;
    }

    // Narrow screens
    @media only screen and ( max-width: @max-width-breakpoint-mobile ) {
        /* stylelint-disable-next-line selector-class-pattern */
        .content {
            margin: 0;
        }

        .mw-contribute-content-area {
            padding: 24px 16px;
        }

        .mw-contribute-card {
            width: 100%;
        }
    }

    // Wide screens
    @media only screen and ( min-width: @min-width-breakpoint-tablet ) {
        .mw-contribute-content-area {
            padding: 32px;
        }

        .mw-contribute-card {
            // We need 2 cards per row. that is 50% width.
            // Then reduce 24px for column gap and 2px for border margins
            width: ~'calc(50% - (1/2)*24px - 2px)';
        }
    }
}