@import 'mediawiki.mixins.less'; @import 'mediawiki.ui/variables'; #mwe-popups-settings { position: fixed; z-index: 1000; background: #fff; width: 420px; border: 1px solid #a2a9b1; box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); border-radius: @borderRadius; font-size: 14px; header { .box-sizing( border-box ); border-bottom: 1px solid #c8ccd1; position: relative; display: table; width: 100%; padding: 5px 7px 5px 0; > div { display: table-cell; width: @iconSize + ( 2 * @iconGutterWidth ); vertical-align: middle; cursor: pointer; } h1 { margin-bottom: 0.6em; padding-top: 0.5em; border: 0; width: 100%; font-family: sans-serif; font-size: 18px; font-weight: bold; text-align: center; } } .mwe-ui-icon-popups-close { opacity: 0.87; // = `#222` on `background-color: #fff` .transition( opacity 100ms ); &:hover { opacity: 0.73; // = `#454545` on `background-color: #fff`, closest to `#444` } &:active { opacity: 1; } } main { display: block; width: 350px; padding: 32px 0 24px; margin: 0 auto; p { color: #54595d; font-size: 17px; margin: 16px 0 0; &:first-child { margin-top: 0; } } form { img, input, label { vertical-align: top; } img { margin-right: 60px; } input { display: inline-block; margin: 0 10px 0 0; padding: 0; } label { font-size: 13px; display: inline-block; line-height: 16px; width: 300px; > span { color: #000; font-size: 18px; font-weight: bold; display: block; margin-bottom: 5px; line-height: 18px; } } } } } .mwe-popups-settings-help { @imageWidth: 180px; @imageHeight: 140px; .background-image-svg( '../images/footer-ltr.svg', '../images/footer-ltr.png' ); background-position: top left; background-repeat: no-repeat; background-size: @imageWidth @imageHeight; font-size: 13px; font-weight: 800; height: @imageHeight; margin: 40px; position: relative; p { left: @imageWidth; bottom: 20px; position: absolute; } } .mwe-popups-overlay { background-color: rgba( 255, 255, 255, 0.9 ); z-index: 999; position: fixed; height: 100%; width: 100%; top: 0; bottom: 0; left: 0; right: 0; // flexbox to vertically/horizontally center children display: flex; justify-content: center; align-items: center; }