mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-12-22 12:02:46 +00:00
90b787ed9c
We already use pixels to define font sizes in the pixels so rather fight Vector's styles explicitly declare the font size in the header (which it controls) instead for more readable code. Also copy across several rules that are implied by Vector but needed for the settings dialog so that this renders nicely in Monobook and Minerva. Change-Id: I196b8af23fe6ebcdb472c059cf1536d251a5b978
142 lines
2.3 KiB
Plaintext
142 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;
|
|
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;
|
|
}
|