MediaWiki:Gadget-ReferenceTooltips.css

/* See [[mw:Reference Tooltips]] 
 * Original source: https://en.wikipedia.org/wiki/MediaWiki:Gadget-ReferenceTooltips.css
 * with modifications
 */

.rt-tooltip {
	position: absolute;
	z-index: 100;
	max-width: 350px;
	background: var(--body-light);
	color: var(--text-color);
	font-size: 0.8125em;
	line-height: 1.5em;
	border: 1px solid var(--body-border);
	border-radius: 2px;
	box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3);
	overflow-wrap: break-word;
}

.rt-tooltip.rt-tooltip-insideWindow {
	z-index: 110;
}

.rt-tooltipContent {
	padding: 8px 11px;
}

.rt-tooltip-above .rt-tooltipContent {
	margin-bottom: -8px;
	padding-bottom: 16px;
}

.rt-tooltip-below .rt-tooltipContent {
	margin-top: -10px;
	padding-top: 18px;
}

.rt-tooltipTail,
.rt-tooltipTail:after {
	position: absolute;
	width: 12px;
	height: 12px;
}

.rt-tooltipTail {
	background: linear-gradient(to top right, var(--body-border) 50%, rgba(0, 0, 0, 0) 50%);
}

.rt-tooltipTail:after {
	content: "";
	background: var(--body-light);
	bottom: 1px;
	left: 1px;
}

.rt-tooltip-above .rt-tooltipTail {
	transform: rotate(-45deg);
	transform-origin: 100% 100%;
	bottom: 0;
	left: 15px;
}

.rt-tooltip-below .rt-tooltipTail {
	transform: rotate(135deg);
	transform-origin: 0 0;
	top: 0;
	left: 27px;
}

.rt-settingsLink {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Esettings%3C/title%3E%3Cg transform='translate(10 10)'%3E%3Cpath id='a' d='M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3'/%3E%3Cuse xlink:href='%23a' transform='rotate(45)'/%3E%3Cuse xlink:href='%23a' transform='rotate(90)'/%3E%3Cuse xlink:href='%23a' transform='rotate(135)'/%3E%3C/g%3E%3Cpath d='M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7'/%3E%3C/svg%3E");
	float: right;
	cursor: pointer;
	margin: -4px -4px 0 8px;
	height: 24px;
	width: 24px;
	border-radius: 2px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 16px 16px;

	transition: background-color 100ms;
	opacity: 0.67;
}

.rt-settingsLink:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

.rt-target {
	background-color: var(--body-light);
}

.rt-enableSelect {
	font-weight: bold;
}

.rt-settingsFormSeparator {
	margin: 0.85714286em 0;
}

.rt-numberInput.rt-numberInput {
	width: 150px;
}

.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField {
	margin-top: 1.64285714em;
}

.rt-disabledHelp {
	border-collapse: collapse;
}

.rt-disabledHelp td {
	padding: 0;
}

.rt-disabledNote.rt-disabledNote {
	vertical-align: bottom;
	padding-left: 0.36em;
	font-weight: bold;
}

@keyframes rt-fade-in-up {
	0% {
		opacity: 0;
		transform: translate(0, 20px)
	}
	100% {
		opacity: 1;
		transform: translate(0, 0)
	}
}

@keyframes rt-fade-in-down {
	0% {
		opacity: 0;
		transform: translate(0, -20px)
	}
	100% {
		opacity: 1;
		transform: translate(0, 0)
	}
}

@keyframes rt-fade-out-down {
	0% {
		opacity: 1;
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		transform: translate(0, 20px)
	}
}

@keyframes rt-fade-out-up {
	0% {
		opacity: 1;
		transform: translate(0, 0)
	}
	100% {
		opacity: 0;
		transform: translate(0, -20px)
	}
}

.rt-fade-in-up {
	animation: rt-fade-in-up 0.2s ease forwards
}

.rt-fade-in-down {
	animation: rt-fade-in-down 0.2s ease forwards
}

.rt-fade-out-down {
	animation: rt-fade-out-down 0.2s ease forwards
}

.rt-fade-out-up {
	animation: rt-fade-out-up 0.2s ease forwards
}

/* invert gear icon in dark mode */
body.wgl-theme-dark .rt-settingsLink,
body.wgl-theme-browntown .rt-settingsLink{
	filter: invert(1);
}

/* blends with tabber bg */
.tabber .rt-target {
	background-color: rgb(255, 255, 255, 30%);
}

body.wgl-theme-dark .tabber .rt-target,
body.wgl-theme-browntown .tabber .rt-target {
	background-color: rgb(0, 0, 0, 10%);
}