mediawiki-extensions-Popups/src/ui/templates/referencePreview/referencePreview.less

// Don't do any event bubbling on childs like <a><span>[</span>2]</a>, see T214693
#mw-content-text .reference a[ href*='#' ] * {
	pointer-events: none;
}

.mwe-popups.mwe-popups-type-reference {
	.mwe-popups-title {
		margin: 0 0 @popupPadding;

		.mw-ui-icon {
			// Since 6bc3aada (T277663) this is @min-size-icon = 20px upstream in
			// …/mediawiki.ui/components/icons.less, too small for us
			min-height: @size-icon;
			vertical-align: middle;

			&.mw-ui-icon-element {
				// This is @width-icon--legacy = 3.5em upstream in
				// …/mediawiki.ui/components/icons.less, way to wide for us
				min-width: @size-icon;
				width: @size-icon;

				&:before {
					margin: 0;
				}
			}
		}

		.mw-ui-icon-reference-generic {
			/* align narrow icon with the text */
			margin-left: -2px;
		}

		// There is currently no "reference-note" icon specified in extension.json
		.mw-ui-icon-reference-note {
			display: none;
		}
	}

	.mwe-popups-extract {
		margin-right: 0;
		max-height: inherit;

		.mwe-popups-scroll {
			// This is how the `margin-bottom: 47px` in popup.less is calculated
			@marginBottom: 2 * @lineHeight + 7px;
			// Same as the --pointer-height in popup.less
			@pointerHeight: 8px;
			max-height: 403px - @popupPadding - @marginBottom + @pointerHeight;
			overflow: auto;
			padding-right: @popupPadding;
		}

		.mw-parser-output {
			overflow-wrap: break-word;
		}

		// Remove the default fade-out effect set by popup.less
		&:after {
			display: none;
		}

		.mwe-popups-fade {
			position: absolute;
			width: 100%;
			height: @lineHeight;
			background-color: transparent;
			background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
			background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
			opacity: 0;
			pointer-events: none; // Allows clicking "through" the element
			.transition( opacity 250ms ease );
		}

		&.mwe-popups-fade-out .mwe-popups-fade {
			opacity: 1;
		}
	}

	.mwe-collapsible-placeholder {
		font-weight: bold;
		margin: 1em 0;
		position: relative;

		// This mirrors .oo-ui-iconElement-icon
		.mw-ui-icon {
			margin-left: -@width-icon-gutter;
			min-height: @size-icon;
			position: absolute;
		}

		// This mirrors .oo-ui-messageWidget > .oo-ui-labelElement-label
		.mwe-collapsible-placeholder-label {
			margin-left: @size-icon + 0.5em;
		}
	}
}