mediawiki-extensions-Popups/resources/ext.popups.core.less

287 lines
4.8 KiB
Plaintext
Raw Normal View History

@import "mediawiki.mixins.less";
/* Code adapted from Yair Rand's NavPopupsRestyled.js
* https://en.wikipedia.org/wiki/User:Yair_rand/NavPopupsRestyled.js
*/
#mwe-popups-svg {
position: absolute;
top: -1000px;
}
.mwe-popups-border-triangle-top(@size, @left, @color, @extra) {
content: '';
position: absolute;
border: ( @size + @extra ) solid transparent;
border-top: 0;
border-bottom: ( @size + @extra ) solid @color;
top: -@size;
/* @noflip */
left: @left;
}
.mwe-popups-border-triangle-bottom(@size, @left, @color, @extra) {
content: '';
position: absolute;
border: ( @size + @extra ) solid transparent;
border-bottom: 0;
border-top: ( @size + @extra ) solid @color;
bottom: -@size;
/* @noflip */
left: @left;
}
.mwe-popups {
position: absolute;
z-index: 110;
background: #fff;
border: 1px solid #bbb;
padding: 0;
display: none;
font-size: 15px;
line-height: 24px;
min-width: 300px;
> div {
display: block;
margin-top: -9px;
padding-top: 9px;
color: #000;
text-decoration: none;
> div {
padding: 0;
margin: 16px;
padding-bottom: 48px;
}
> div.mwe-popups-is-tall {
margin: 0;
height: 250px;
width: 200px;
padding: 0;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
/* @noflip */
float: right;
}
> div.mwe-popups-is-not-tall {
margin: 0;
height: 200px;
width: 300px;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
/* @noflip */
float: right;
}
> div.mwe-popups-timestamp-older, div.mwe-popups-timestamp-recent {
padding: 16px;
margin: 0;
font-size: 13px;
position: absolute;
bottom: 0;
/* @noflip */
left: 0;
}
> div.mwe-popups-timestamp-older {
color: #555;
}
> div.mwe-popups-timestamp-recent {
color: #00af89;
}
.mwe-popups-settings-icon {
display: inline-block;
vertical-align: text-top;
cursor: pointer;
margin-left: 5px;
height: 16px;
width: 16px;
.background-image-svg( "gear_gray.svg", "gear_gray.png" );
}
}
.mwe-popups-extract {
margin: 0;
padding: 16px;
display: block;
color: #000;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
&.mwe-popups-is-tall {
width: 450px;
> div > a > svg {
margin-bottom: -7px;
}
.mwe-popups-extract {
width: 215px;
height: 125px;
overflow: hidden;
/* @noflip */
float: left;
}
div.mwe-popups-timestamp-older, div.mwe-popups-timestamp-recent {
width: 215px;
}
}
&.mwe-popups-is-not-tall {
width: 300px;
.mwe-popups-extract {
max-height: 120px;
overflow: hidden;
margin-bottom: 47px;
padding-bottom: 0;
}
div.mwe-popups-timestamp-older, div.mwe-popups-timestamp-recent {
width: 270px;
}
}
/* Triangles/Pokeys */
&.mwe-popups-no-image-tri {
&:after {
.mwe-popups-border-triangle-top( 7px, 7px, #fff, 4px);
}
&:before {
.mwe-popups-border-triangle-top( 8px, 10px, #bbb, 0px);
}
}
&.flipped_x.mwe-popups-no-image-tri {
&:after {
/* @noflip */
left: auto;
/* @noflip */
right: 7px;
}
&:before {
/* @noflip */
left: auto;
/* @noflip */
right: 10px;
}
}
&.mwe-popups-image-tri {
&:before {
z-index: 111;
.mwe-popups-border-triangle-top(9px, 9px, #bbb, 0px);
}
&:after {
.mwe-popups-border-triangle-top(8px, 6px, #fff, 4px);
z-index: 112;
}
&.flipped_x {
&:before {
z-index: 111;
.mwe-popups-border-triangle-top(9px, 273px, #bbb, 0px);
}
&:after {
.mwe-popups-border-triangle-top(8px, 269px, #fff, 4px);
z-index: 112;
}
}
.mwe-popups-extract {
padding-top: 32px;
margin-top: 190px;
}
> div > a > svg {
margin-top: -8px;
position: absolute;
z-index: 113;
/* @noflip */
left: 0;
}
}
&.flipped_x.mwe-popups-is-tall {
min-height: 242px;
&:before {
z-index: 111;
.mwe-popups-border-triangle-top(9px, 420px, #bbb, 0px);
}
> div > a > svg {
margin: 0;
margin-top: -8px;
margin-bottom: -7px;
position: absolute;
z-index: 113;
/* @noflip */
right: 0;
}
}
&.flipped_x_y {
&:before {
z-index: 111;
.mwe-popups-border-triangle-bottom(9px, 272px, #bbb, 0px);
}
&:after {
.mwe-popups-border-triangle-bottom(8px, 269px, #fff, 4px);
z-index: 112;
}
&.mwe-popups-is-tall {
min-height: 242px;
&:after {
z-index: 112;
.mwe-popups-border-triangle-bottom(8px, 417px, #fff, 4px);
}
&:before {
z-index: 111;
.mwe-popups-border-triangle-bottom(9px, 420px, #bbb, 0px);
}
> div > a > svg {
position: absolute;
z-index: 113;
margin: 0;
margin-bottom: -9px;
/* @noflip */
right: 0;
}
}
}
&.flipped_y {
&:after {
.mwe-popups-border-triangle-bottom( 7px, 7px, #fff, 4px );
}
&:before {
.mwe-popups-border-triangle-bottom( 8px, 10px, #bbb, 0px );
}
}
}