@import 'mediawiki.skin.variables.less'; @import '../../mobile.less/mobile.variables.less'; @import '../../mobile.less/mobile.mixins.less'; /* stylelint-disable no-descending-specificity */ .overlay-enabled { // stylelint-disable-next-line selector-max-id #mw-mf-page-center { overflow: hidden; // FIXME: override old overlay styles, remove when old overlays gone display: block; } // stylelint-disable-next-line selector-max-id .overlay, #mw-mf-page-center { // use height instead of bottom 0 so that overlay expands when there's // more content, don't use min-height because of // http://stackoverflow.com/questions/3808512/the-inherited-height-of-a-child-div-from-a-parent-with-a-min-height-attribute height: 100%; } } .hidden { display: none !important; } // Overlays // Overlays (read only) // // Read-only overlays should be used when no user interaction is required. // They should only be used to convey information to the user, such as // warning him or her when an event occurs. // // Markup: // //
//
//
//
    //
    • //
//

Overlay

//
//
//
Overlay with no icon.
//
// // Overlays (primary) // // Primary overlays should be used when user interaction is required in a chain // of actions. For example, when editing a page in MobileFrontend, the user will // edit the page, and then enter an edit message on the next overlay, displayed // after pressing the "Next" button. // // Markup: // //
//
//
//
    //
    • //
//

Overlay

//
    //
    • //
//
//
//
Overlay with progressive action.
//
// // Overlays // // Overlays should be used when user interaction is required in the // form of, well, a form. These overlays should NOT be set up as a chain (see // above for those), but rather as a single action that is completed once the user // presses the "Submit" button. // // Markup: // //
//
//
//
    //
    • //
//

Overlay

//
//
//
//
Overlay with completion action.
//
// .overlay { position: absolute; top: 0; left: 0; width: 100%; background: @background-color-base; z-index: @z-indexOverlay; display: none; .cdx-button { border-radius: 0; } &.visible { display: block; } input, textarea { // Without declaring a minimum font-size of 16px, iOS will autozoom in on textareas when clicked (T215619) // https://blog.osmosys.asia/2017/01/05/prevent-ios-from-zooming-in-on-input-fields/ font-size: 16px; } .summary.oo-ui-textInputWidget { max-width: none; textarea { width: 100%; } } .captcha-word { margin: 0 0 0.7em; width: 100%; } .wikitext-editor { min-height: 50%; line-height: 1.5; border: 0; } .panel { padding-top: 12px; padding-bottom: 12px; border-bottom: @border-width-base @border-style-base @border-color-muted; } } .overlay-header { .overlay-title { // Expand the title as wide as possible to limit the size of the // header-action. width: 100%; } .header-action { // TODO: Remove these styles once Codex icons are fully implemented a, button { &[ disabled ] { opacity: 0.5; } } // Some overlays e.g. NotificationOverlay use an OOUI icon as the header action. .oo-ui-widget { margin-right: @width-icon-gutter; } } .submit { background-color: @background-color-progressive; color: @color-inverted; } h2 { display: table; width: 100%; // reset default headings. Overide default font size. font-size: 1em; > * { width: 1em; display: table-cell; // padding instead of spaces between words padding-right: 0.4em; } span { width: auto; // required for text-overflow to work max-width: 1em; } } > ul { li { display: block; } } } .overlay-header-container, .overlay-footer-container { width: 100%; background: @background-color-base; // prevent .mw-mf-page-list or VE surface overlaping the header when scrolling z-index: @z-indexOverOverlay; &.position-fixed { position: fixed; // both top and left required for Android 2 for the element to be visible left: 0; // the following right: 0 is converted to left: 0 for RTL languages // (for unknown reasons left: 0 is mandatory in Android 2 for the // element to be visible, right: 0 doesn't work) right: 0; } } .overlay-header-container { top: 0; } .overlay-footer-container { background-color: @background-color-base; bottom: 0; border-top: @border-width-base @border-style-base @border-color-subtle; a { display: block; // The 1em bottom whitespace is applied as padding since Chrome and Safari ignore // it otherwise. The 10px padding corresponds with the icon margin. padding: 1em 1em 1em 10px; line-height: 1em; text-align: center; } } // Bottom Overlays // // A overlay that is docked to the bottom of the screen. // // Markup: //
//
//
//
    //
    • //
//

Overlay

//
    //
    • //
//
//
//
//
.overlay-bottom { border-top: @border-width-base @border-style-base @border-color-subtle; top: auto; bottom: 0; height: auto !important; background: @background-color-interactive-subtle; .overlay-header-container { background: @background-color-interactive-subtle; } } @media all and ( min-width: @min-width-breakpoint-tablet ) { .overlay { .panel { padding-top: 12px; padding-bottom: 12px; } } }