wikimedia/mediawiki-extensions-MobileFrontend

View on GitHub
skinStyles/mobile.startup/vector.less

Summary

Maintainability
Test Coverage
@import 'mediawiki.skin.variables.less';

.overlay-enabled .mw-overlays-container {
    // Show an overlay for the entire page to avoid page interactions.
    // To get the effect of a modal dialogue.
    content: '';
    display: block;
    position: fixed; /* could also be absolute */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    background-color: rgba( 255, 255, 255, 0.5 );
}

.overlay {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: auto;
    max-width: 800px;
    max-height: 500px;
    border: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base;
    box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
    z-index: 11; // Greater than the background layer

    .overlay-content {
        padding: 1em;
        outline: @border-width-base @border-style-base @border-color-subtle;
    }

    .mf-icon-overlay-close {
        border: 0;
        background: none;
    }

    .overlay-header {
        .overlay-title {
            padding: 0 1em;
            cursor: default;
            text-align: center;

            h2 {
                border: 0;
            }
        }
    }
}

.overlay-enabled .mw-overlays-container .overlay {
    height: auto;
}