MediaWiki:Common.less/pagepreviews.less

// Page preview popups
.mwe-popups {
	background: var(--body-light);
	
	.mwe-popups-container {
		color: var(--text-color);
		background: var(--body-light);

		// arrow pointing to link
		// seems to be a different class for each possible position and img combination
		&.flipped-x-y:before,
		&.flipped-y:before {
			border-top: none;
		}

		&.mwe-popups-no-image-tri:before {
			border-bottom: none;
		}

		&.flipped-x-y:after,
		&.flipped-y:after {
			border-top-color: var(--body-light);
		}

		&.mwe-popups-no-image-tri:after {
			border-bottom-color: var(--body-light);
		}
	}
	
	.mwe-popups-settings-icon:hover,
	.mwe-popups-settings-icon:active {
		background-color: var(--ooui-normal--hover);
	}
	
	// the following cancelled out the brightness adjustment by above
	// and also was added to the preview-generic icon
	.mw-ui-icon-element:not(.disabled):hover {
		background: none;
	}

	// text section
	.mwe-popups-extract {
		color: var(--text-color);

		// fade for text overflow
		&[dir='ltr']:after {
			background-image: linear-gradient(to right, rgba(49, 62, 89, 0), var(--body-light) 50%);
		}
	}
}

// Anon preferences popup
.mwe-popups-overlay {
	background-color: var(--ooui-window-background);
}

#mwe-popups-settings {
	background: var(--ooui-interface);
	border-color: var(--ooui-interface-border);
	color: var(--text-color);
	
	header {
		border-color: var(--ooui-interface-border);
	}
	
	main#mwe-popups-settings-form {
		p {
			color: var(--byline-color);
		}
		// text beside radio button
		form label > span {
			color: var(--ooui-text);
		}
	}
}