wikimedia/mediawiki-extensions-UniversalLanguageSelector

View on GitHub
resources/css/ext.uls.dialog.less

Summary

Maintainability
Test Coverage
// TODO: Replace with @import 'mediawiki.skin.variables.less'; with MW core LTS v1.42 dependency.
@import '../../lib/codex-design-tokens/theme-wikimedia-ui-legacy.less';
@uls-dialog-width: 480px;

.uls-dialog {
    position: fixed;
    z-index: 500;
    display: none;
    background-color: @background-color-base;
    border: @border-width-base @border-style-base @border-color-subtle;
    border-color: rgba( 0, 0, 0, 0.2 );
    box-shadow: 0 5px 10px rgba( 0, 0, 0, 0.2 );
    background-clip: padding-box;
    width: @uls-dialog-width;
    top: 30%;
    left: 50%;
    margin-left: -( @uls-dialog-width / 2 );
    margin-top: -40px;
    padding: 16px;

    @media screen and ( max-width: 599px ) {
        width: 100%;
        left: 0;
        margin-left: 0;
        box-sizing: border-box;
    }
}

.uls-overlay {
    height: 100vh;
    width: 100vw;
    background-color: #54595d;
    opacity: 0.87;
    display: none;
    z-index: 300;
    position: fixed;
    top: 0;
}

.uls-no-overflow {
    overflow: hidden;
}