mediawiki-extensions-Popups/resources/ext.popups.main/styles/ext.popups.settings.less
jdlrobson deaaf0961b Remove popups from critical rendering path
Instead load it via mw.loader.using

We retain the module name ext.popups as this will be present
in cached HTML, however now it will load the bulk of the code
inside ext.popups.main

Bug: T176211
Change-Id: Ibe212721807d3698dc45ef46b2dbde15ca9d2f70
2018-03-13 08:44:31 -07:00

139 lines
2.3 KiB
Plaintext

@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;
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 {
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;
}