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

@import 'mediawiki.mixins.less';
@import 'mediawiki.ui/variables';

/* Code adapted from Yair Rand's NavPopupsRestyled.js
 * https://en.wikipedia.org/wiki/User:Yair_rand/NavPopupsRestyled.js
 */

@popupPadding: 16px;
@popupWidth: 300px;
@popupTallWidth: 215px;
@cogIconSize: 30px;
@lineHeight: 20px;

#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-settings-icon {
	// For purpose of active and hover states
	border-radius: 2px;
	// Icon sizes are relative to font size. Override any parents.
	font-size: 16px;
	// position icon
	/* stylelint-disable value-keyword-case */
	margin-right: -@iconSize / 2;

	&:hover {
		background-color: @colorGray14;
	}

	&:active {
		background-color: @colorGray12;
	}
}

.mwe-popups-sade-face-icon {
	display: block;
	width: 37px;
	height: 27px;
	margin: 16px 16px 0;
	background-position: center center;
	background-repeat: no-repeat;
	.background-image-svg( '../images/sad-face.svg', '../images/sad-face.png' );
}

.mwe-popups {
	position: absolute;
	z-index: 110;
	background: #fff;

	// FIXME: The .box-shadow mixin provided by mediawiki.mixins doesn't support
	// multiple values.
	-webkit-box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0px 0px 1px rgba( 0, 0, 0, 0.5 );
	box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0px 0px 1px rgba( 0, 0, 0, 0.5 );
	padding: 0;
	display: none;
	font-size: 14px;
	line-height: @lineHeight;
	min-width: 300px;
	border-radius: 2px;

	.mwe-popups-container {
		margin-top: -9px;
		padding-top: 9px;
		color: #000;
		text-decoration: none;

		footer {
			padding: @popupPadding;
			margin: 0;
			font-size: 10px;
			position: absolute;
			bottom: 0;
			/* @noflip */
			left: 0;

			.mwe-popups-settings-icon {
				float: right;
			}
		}
	}

	.mwe-popups-extract {

		// T156800, T139297: "Pad" the extract horizontally using a margin so the
		// SVG element is forced not to occlude the truncating pseudo-element and
		// the settings cog in IE9-11.
		margin: @popupPadding;

		display: block;
		color: #000;
		text-decoration: none;
		position: relative;

		&:hover {
			text-decoration: none;
		}

		&:after {
			content: ' ';
			position: absolute;
			bottom: 0;
			width: 25%;
			height: @lineHeight;
			background-color: transparent;
		}

		/* Stylelint rule broken for vendor prefixes: https://github.com/stylelint/stylelint/issues/1939 */
		/* stylelint-disable function-linear-gradient-no-nonstandard-direction */
		&[dir='ltr']:after {
			/* @noflip */
			right: 0;
			/* @noflip */
			background-image: -webkit-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
			/* @noflip */
			background-image: -moz-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
			/* @noflip */
			background-image: -o-linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
			/* @noflip */
			background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
		}

		&[dir='rtl']:after {
			/* @noflip */
			left: 0;
			/* @noflip */
			background-image: -webkit-linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
			/* @noflip */
			background-image: -moz-linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
			/* @noflip */
			background-image: -o-linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
			/* @noflip */
			background-image: linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% );
		}
		/* stylelint-enable function-linear-gradient-no-nonstandard-direction */
	}

	svg {
		overflow: hidden;
	}

	&.mwe-popups-is-tall {
		width: 450px;

		> div > a > svg {
			vertical-align: middle;
		}

		.mwe-popups-extract {
			width: @popupTallWidth;
			height: 7 * @lineHeight;
			overflow: hidden;
			/* @noflip */
			float: left;
		}

		footer {
			width: @popupTallWidth;
		}
	}

	&.mwe-popups-is-not-tall {
		width: @popupWidth;

		.mwe-popups-extract {
			max-height: 7 * @lineHeight;
			overflow: hidden;
			margin-bottom: 47px;
			padding-bottom: 0;
		}

		footer {
			width: @popupWidth - @cogIconSize;
		}
	}

	&.mwe-popups-is-empty {
		.mwe-popups-extract {
			padding-top: 4px;
			margin-bottom: 60px;
		}

		.mwe-popups-read-link {
			font-weight: bold;
			font-size: 12px;
		}

		// When the user dwells on the "Looks like there isn't..." text, which is a
		// link to the page, then highlight the "Read" link too.
		.mwe-popups-extract:hover + footer .mwe-popups-read-link {
			text-decoration: underline;
		}
	}

	/* 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 );
		}
	}
}