MediaWiki:Gadget-Tooltip.css - Revision history

Kuhlau at 16:48, 14 July 2026

2026-07-14T16:48:26Z

← Older revision		Revision as of 16:48, 14 July 2026
Line 1:		Line 1:
	/* For [[Template:Tt]] */		/* For [[Template:Tt]] */
	/* Force disable default hover tooltip on mobile and enable the toggle */		/* Force disable default hover tooltip on mobile and enable the toggle */
	.skin-~~fandommobile~~ .hover-tooltip { display: none; }		.skin-minerva .hover-tooltip { display: none; }
	.skin-~~fandommobile~~ .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: inline !important; }		.skin-minerva .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: inline !important; }

	/ Text styling /		/ Text styling /
Line 32:		Line 32:
	/ Desktop: enabled through gadget /		/ Desktop: enabled through gadget /
	/* Container */		/* Container */
	.skin-~~fandomdesktop~~ .mw-collapsible-content.custom-tt {		.skin-vector-legacy .mw-collapsible-content.custom-tt {
	position: absolute;		position: absolute;
	z-index: 10005;		z-index: 10005;
Line 51:		Line 51:
	}		}
	/* Arrow */		/* Arrow */
	.skin-~~fandomdesktop~~ .mw-collapsible-content.custom-tt:before {		.skin-vector-legacy .mw-collapsible-content.custom-tt:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 67:		Line 67:
	/ Mobile: enabled by default (attr:title does not work) /		/ Mobile: enabled by default (attr:title does not work) /
	/* Container */		/* Container */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt {
	position: fixed;		position: fixed;
	z-index: 10005;		z-index: 10005;
Line 86:		Line 86:
	}		}
	/* Container header */		/* Container header */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt:before {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt:before {
	content: "ⓘ Tooltip content:";		content: "ⓘ Tooltip content:";
	display: block;		display: block;
Line 95:		Line 95:
	}		}
	/* Tooltip surrogate toggle on container header */		/* Tooltip surrogate toggle on container header */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded:after {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded:after {
	content: "x" !important;		content: "x" !important;
	position: fixed;		position: fixed;
Line 104:		Line 104:
	}		}
	/* Tooltip surrogate toggle on backdrop overlay */		/* Tooltip surrogate toggle on backdrop overlay */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded:before {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded:before {
	background: black;		background: black;
	position: fixed;		position: fixed;
Line 117:		Line 117:

	/* For [[Template:Extra Effect]] */		/* For [[Template:Extra Effect]] */
	:root .~~theme-fandomdesktop~~-~~dark~~, :root .theme~~-fandommobile~~-dark {		:root .wgl-darkmode, :root .wgl-theme-dark {
	--extra-effect-bg: #0c0c0cd6;		--extra-effect-bg: #0c0c0cd6;
	}		}

	:root .~~theme-fandomdesktop~~-~~light~~, :root .theme~~-fandommobile~~-light {		:root .wgl-lightmode, :root .wgl-theme-light {
	--extra-effect-bg: #ecececd6;		--extra-effect-bg: #ecececd6;
	}		}
Line 167:		Line 167:
	}		}

	.skin-~~fandommobile~~ .hnaw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.hnaw-extra-effect {		.skin-minerva .hnaw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.hnaw-extra-effect {
	position: fixed;		position: fixed;
	z-index: 10005;		z-index: 10005;

Raven.Familiar at 11:28, 14 July 2026

2026-07-14T11:28:31Z

← Older revision		Revision as of 11:28, 14 July 2026
Line 2:		Line 2:
	/* Force disable default hover tooltip on mobile and enable the toggle */		/* Force disable default hover tooltip on mobile and enable the toggle */
	.skin-fandommobile .hover-tooltip { display: none; }		.skin-fandommobile .hover-tooltip { display: none; }
	.skin-fandommobile .custom-tt-wrapper.~~srw~~-collapsible .mw-collapsible-toggle { display: inline !important; }		.skin-fandommobile .custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle { display: inline !important; }

	/ Text styling /		/ Text styling /
	/* Override collapsible stylings */		/* Override collapsible stylings */
	.custom-tt-wrapper.~~srw~~-collapsible .mw-collapsible-toggle {		.custom-tt-wrapper.hnaw-collapsible .mw-collapsible-toggle {
	padding: 0;		padding: 0;
	border: none;		border: none;
Line 17:		Line 17:
	font-weight: inherit;		font-weight: inherit;
	}		}
	.custom-tt-wrapper.~~srw~~-collapsible .mw-collapsible-content {		.custom-tt-wrapper.hnaw-collapsible .mw-collapsible-content {
	font-weight: normal;		font-weight: normal;
	}		}
Line 23:		Line 23:

	/* The tooltip's toggle version */		/* The tooltip's toggle version */
	.toggle-tooltip.~~srw~~-collapsible, .text-tooltip {		.toggle-tooltip.hnaw-collapsible, .text-tooltip {
	position: relative;		position: relative;
	border-bottom-color: rgb(128, 128, 128);		border-bottom-color: rgb(128, 128, 128);
Line 136:		Line 136:
	}		}

	.~~srw~~-extra-effect-wrapper.~~srw~~-collapsible.mw-collapsible {		.hnaw-extra-effect-wrapper.hnaw-collapsible.mw-collapsible {
	padding: 0;		padding: 0;
	border-bottom-style: solid;		border-bottom-style: solid;
Line 142:		Line 142:
	}		}

	.mw-collapsible-content.~~srw~~-extra-effect {		.mw-collapsible-content.hnaw-extra-effect {
	font-size: 16px;		font-size: 16px;
	position: absolute;		position: absolute;
Line 160:		Line 160:
	}		}

	.~~srw~~-extra-effect .~~srw~~-extra-effect-header {		.hnaw-extra-effect .hnaw-extra-effect-header {
	display: block;		display: block;
	font-weight: bold;		font-weight: bold;
Line 167:		Line 167:
	}		}

	.skin-fandommobile .~~srw~~-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.~~srw~~-extra-effect {		.skin-fandommobile .hnaw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.hnaw-extra-effect {
	position: fixed;		position: fixed;
	z-index: 10005;		z-index: 10005;

Raven.Familiar at 11:24, 14 July 2026

2026-07-14T11:24:59Z

Show changes

Raven.Familiar: Changing mentions of Genshin Impact Wiki, that shouldn't break anything not currently being worked on

2026-07-14T07:35:30Z

Changing mentions of Genshin Impact Wiki, that shouldn't break anything not currently being worked on

← Older revision		Revision as of 07:35, 14 July 2026
Line 35:		Line 35:
	/ Desktop: enabled through gadget /		/ Desktop: enabled through gadget /
	/* Container */		/* Container */
	.skin-vector-legacy .custom-tt-wrapper:not(.~~giw~~-extra-effect-wrapper) {		.skin-vector-legacy .custom-tt-wrapper:not(.hnaw-extra-effect-wrapper) {
	.oo-ui-popupWidget-popup {		.oo-ui-popupWidget-popup {
	background: var(--theme-page-background-color);		background: var(--theme-page-background-color);
Line 130:		Line 130:
	}		}

	.mediawiki .~~giw~~-extra-effect-wrapper:not(.mw-collapsible) {		.mediawiki .hnaw-extra-effect-wrapper:not(.mw-collapsible) {
	padding:0;		padding:0;
	border-bottom-style:solid;		border-bottom-style:solid;
	border-bottom-width:1px		border-bottom-width:1px
	}		}
	.~~giw~~-extra-effect.oo-ui-popupWidget-popup {		.hnaw-extra-effect.oo-ui-popupWidget-popup {
	font-size:16px;		font-size:16px;
	border-radius:5px;		border-radius:5px;
Line 157:		Line 157:
	}		}

	.~~giw~~-extra-effect .~~giw~~-extra-effect-header {		.hnaw-extra-effect .hnaw-extra-effect-header {
	display: block;		display: block;
	font-weight: bold;		font-weight: bold;
Line 164:		Line 164:
	}		}

	.skin-minerva .~~giw~~-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.~~giw~~-extra-effect {		.skin-minerva .hnaw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.hnaw-extra-effect {
	position: fixed;		position: fixed;
	z-index: 10005;		z-index: 10005;
Line 182:		Line 182:
	}		}

	.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded.~~giw~~-extra-effect:after {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded.hnaw-extra-effect:after {
	bottom: 265px;		bottom: 265px;
	}		}

	.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded.~~giw~~-extra-effect:before {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded.hnaw-extra-effect:before {
	height: calc(100% - 300px);		height: calc(100% - 300px);
	}		}

Kuhlau: udpate skins

2026-07-13T21:10:54Z

udpate skins

← Older revision		Revision as of 21:10, 13 July 2026
Line 1:		Line 1:
	/* For [[Template:Tt]] */		/* For [[Template:Tt]] */
	/* Force disable default hover tooltip on mobile and enable the toggle */		/* Force disable default hover tooltip on mobile and enable the toggle */
	.skin-~~fandommobile~~ .hover-tooltip { display: none; }		.skin-minerva .hover-tooltip { display: none; }
	.skin-~~fandommobile~~ .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { display: inline !important; }		.skin-minerva .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { display: inline !important; }

	/ Text styling /		/ Text styling /
Line 35:		Line 35:
	/ Desktop: enabled through gadget /		/ Desktop: enabled through gadget /
	/* Container */		/* Container */
	.skin-~~fandomdesktop~~ .custom-tt-wrapper:not(.giw-extra-effect-wrapper) {		.skin-vector-legacy .custom-tt-wrapper:not(.giw-extra-effect-wrapper) {
	.oo-ui-popupWidget-popup {		.oo-ui-popupWidget-popup {
	background: var(--theme-page-background-color);		background: var(--theme-page-background-color);
Line 49:		Line 49:
	}		}

	.skin-~~fandomdesktop~~ .mw-collapsible-content.custom-tt-toright { border-radius: 0 5px 5px 5px; }		.skin-vector-legacy .mw-collapsible-content.custom-tt-toright { border-radius: 0 5px 5px 5px; }
	.skin-~~fandomdesktop~~ .mw-collapsible-content.custom-tt-toright:before {		.skin-vector-legacy .mw-collapsible-content.custom-tt-toright:before {
	border-top:0 solid transparent;		border-top:0 solid transparent;
	border-bottom:10px solid var(--theme-link-color);		border-bottom:10px solid var(--theme-link-color);
Line 61:		Line 61:
	/ Mobile: enabled by default (attr:title does not work) /		/ Mobile: enabled by default (attr:title does not work) /
	/* Container */		/* Container */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt {
	position: fixed;		position: fixed;
	z-index: 10005;		z-index: 10005;
Line 80:		Line 80:
	}		}
	/* Container header */		/* Container header */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt:before {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt:before {
	content: "ⓘ Tooltip content:";		content: "ⓘ Tooltip content:";
	display: block;		display: block;
Line 89:		Line 89:
	}		}
	/* Tooltip surrogate toggle on container header */		/* Tooltip surrogate toggle on container header */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded:after {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded:after {
	content: "x" !important;		content: "x" !important;
	position: fixed;		position: fixed;
Line 98:		Line 98:
	}		}
	/* Tooltip surrogate toggle on backdrop overlay */		/* Tooltip surrogate toggle on backdrop overlay */
	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded:before {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded:before {
	background: black;		background: black;
	position: fixed;		position: fixed;
Line 111:		Line 111:

	/ For [[Template:Extra Effect]] /		/ For [[Template:Extra Effect]] /
	:root .~~theme-fandomdesktop~~-~~dark~~, :root .theme~~-fandommobile~~-dark {		:root .wgl-darkmode, :root .wgl-theme-dark {
	--extra-effect-bg: #0c0c0cd6;		--extra-effect-bg: #0c0c0cd6;
	}		}

	:root .~~theme-fandomdesktop~~-~~light~~, :root .theme~~-fandommobile~~-light {		:root .wgl-lightmode, :root .wgl-theme-light {
	--extra-effect-bg: #ecececd6;		--extra-effect-bg: #ecececd6;
	}		}
Line 164:		Line 164:
	}		}

	.skin-~~fandommobile~~ .giw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.giw-extra-effect {		.skin-minerva .giw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.giw-extra-effect {
	position: fixed;		position: fixed;
	z-index: 10005;		z-index: 10005;
Line 182:		Line 182:
	}		}

	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded.giw-extra-effect:after {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded.giw-extra-effect:after {
	bottom: 265px;		bottom: 265px;
	}		}

	.skin-~~fandommobile~~ .custom-tt-wrapper .mw-collapsible-toggle-expanded.giw-extra-effect:before {		.skin-minerva .custom-tt-wrapper .mw-collapsible-toggle-expanded.giw-extra-effect:before {
	height: calc(100% - 300px);		height: calc(100% - 300px);
	}		}

Kuhlau: Kuhlau moved page MediaWiki:Tooltip.css to MediaWiki:Gadget-Tooltip.css: improved page loading, tooltip is already a gadget so why we import it separately

2026-07-13T21:06:41Z

Kuhlau moved page MediaWiki:Tooltip.css to MediaWiki:Gadget-Tooltip.css: improved page loading, tooltip is already a gadget so why we import it separately

← Older revision		Revision as of 21:06, 13 July 2026
(No difference)

ReinDevildom: Created page with "/* For Template:Tt / / Force disable default hover tooltip on mobile and enable the toggle / .skin-fandommobile .hover-tooltip { display: none; } .skin-fandommobile .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { display: inline !important; } / Text styling / / Override collapsible stylings / .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { padding: 0; border: none; position: relative; / Allow text selection */ -moz-user-sel..."

2025-08-29T16:49:42Z

Created page with "** For [[Template:Tt]] **: Force disable default hover tooltip on mobile and enable the toggle: .skin-fandommobile .hover-tooltip { display: none; } .skin-fandommobile .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { display: inline !important; } * Text styling *: Override collapsible stylings: .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { padding: 0; border: none; position: relative; Allow text selection: -moz-user-sel..."

New page

/*** For [[Template:Tt]] ***/
/* Force disable default hover tooltip on mobile and enable the toggle */
.skin-fandommobile .hover-tooltip { display: none; }
.skin-fandommobile .custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle { display: inline !important; }

/** Text styling **/
/* Override collapsible stylings */
.custom-tt-wrapper.giw-collapsible .mw-collapsible-toggle {
padding: 0;
border: none;
position: relative;
/* Allow text selection */
-moz-user-select: inherit;
-webkit-user-select: inherit;
-ms-user-select: inherit;
user-select: inherit;
font-weight: inherit;
}
.custom-tt-wrapper.giw-collapsible .mw-collapsible-content,
.custom-tt-wrapper.giw-collapsible .mw-collapsible-content ul,
.custom-tt-wrapper.giw-collapsible .mw-collapsible-content ol {
font-weight: normal;
}

.text-tooltip { cursor: help; }

/*** The tooltip's toggle version ***/
.toggle-tooltip.giw-collapsible, .text-tooltip {
border-bottom-color: rgb(128, 128, 128);
border-bottom-width: 2px;
border-bottom-style: dotted;
> .toggle-tooltip.custom-tt { cursor: pointer; }
}

/** Desktop: enabled through gadget **/
/* Container */
.skin-fandomdesktop .custom-tt-wrapper:not(.giw-extra-effect-wrapper) {
.oo-ui-popupWidget-popup {
background: var(--theme-page-background-color);
color: var(--theme-page-text-color);
border-radius: 5px 0 5px 5px;
border: 1px solid var(--theme-link-color);
padding: 6px;
text-align: center;
}
.oo-ui-popupWidget-anchor {
--theme-page-background-color--secondary: var(--theme-link-color);
}
}

.skin-fandomdesktop .mw-collapsible-content.custom-tt-toright { border-radius: 0 5px 5px 5px; }
.skin-fandomdesktop .mw-collapsible-content.custom-tt-toright:before {
border-top:0 solid transparent;
border-bottom:10px solid var(--theme-link-color);
border-right:10px solid transparent;
border-left:0 solid transparent;
left:-1px;
right: unset;
}

/** Mobile: enabled by default (attr:title does not work) **/
/* Container */
.skin-fandommobile .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt {
position: fixed;
z-index: 10005;
width: 100%;
height: 125px;
background: var(--theme-page-background-color);
color: var(--theme-page-text-color);
border-radius: 0 0 5px 5px;
border: 1px solid var(--theme-link-color);
min-width: 150px;
min-height: 25px;
padding: 6px;
text-align: center;
bottom: 0;
left: 0;
margin: 0;
overflow-y: scroll;
}
/* Container header */
.skin-fandommobile .custom-tt-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.custom-tt:before {
content: "ⓘ Tooltip content:";
display: block;
text-align: left;
margin: 2px 0;
width: 100%;
border-bottom: 1px solid var(--theme-link-color);
}
/* Tooltip surrogate toggle on container header */
.skin-fandommobile .custom-tt-wrapper .mw-collapsible-toggle-expanded:after {
content: "x" !important;
position: fixed;
z-index: 10006;
bottom: 90px;
right: 15px;
font-size: 30px;
}
/* Tooltip surrogate toggle on backdrop overlay */
.skin-fandommobile .custom-tt-wrapper .mw-collapsible-toggle-expanded:before {
background: black;
position: fixed;
height: calc(100% - 125px);
width: 100%;
top: 0;
left: 0;
opacity: 0.6;
z-index: 10004;
}

/** For [[Template:Extra Effect]] **/
:root .theme-fandomdesktop-dark, :root .theme-fandommobile-dark {
--extra-effect-bg: #0c0c0cd6;
}

:root .theme-fandomdesktop-light, :root .theme-fandommobile-light {
--extra-effect-bg: #ecececd6;
}

@keyframes extra-effect-appear {
from {
transform: translate(0px, 15px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}

.mediawiki .giw-extra-effect-wrapper:not(.mw-collapsible) {
padding:0;
border-bottom-style:solid;
border-bottom-width:1px
}
.giw-extra-effect.oo-ui-popupWidget-popup {
font-size:16px;
border-radius:5px;
background:var(--extra-effect-bg, #0c0c0cd6);
backdrop-filter:blur(3px);
border:1px solid var(--theme-border-color);
animation:extra-effect-appear 0.25s;
}
.custom-tt + .oo-ui-floatableElement-floatable {
margin: 5px 0px;
.oo-ui-popupWidget-popup {
padding: 10px;
}
.oo-ui-clippableElement-clippable {
overflow: visible !important;
overflow-y: visible !important;
max-width: unset !important;
width: fit-content !important;
height: fit-content !important;
}
}

.giw-extra-effect .giw-extra-effect-header {
display: block;
font-weight: bold;
border-bottom: 1px solid var(--theme-border-color);
margin-bottom: 2px;
}

.skin-fandommobile .giw-extra-effect-wrapper .mw-collapsible-toggle-expanded + .mw-collapsible-content.giw-extra-effect {
position: fixed;
z-index: 10005;
width: 100%;
height: 300px;
background: var(--extra-effect-bg, #0c0c0cd6);
color: var(--theme-page-text-color);
border-radius: 0 0 5px 5px;
border: 1px solid var(--theme-border-color);
min-width: 150px;
min-height: 25px;
bottom: 0;
left: 0;
margin: 0;
overflow-y: scroll;
max-width: 100vw;
}

.skin-fandommobile .custom-tt-wrapper .mw-collapsible-toggle-expanded.giw-extra-effect:after {
bottom: 265px;
}

.skin-fandommobile .custom-tt-wrapper .mw-collapsible-toggle-expanded.giw-extra-effect:before {
height: calc(100% - 300px);
}