skinStyles/mobile.startup/vector.less
@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;
}