MediaWiki:Common.css: Difference between revisions

From The Fifth City Wiki
m Modify z-indexing of tooltips (-1 when not visible, 10 when visible)
Add class to render element above others if specific child elements are hovered
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* Orders element above others if specific child elements hovered */
.frontOnChildHover .hoverChild:hover {
z-index: 10;
}


/* Rules for the citation generator */
/* Rules for the citation generator */
Line 41: Line 46:
.hastooltip:hover .tooltip {
.hastooltip:hover .tooltip {
visibility: visible;
visibility: visible;
z-index: 10;
z-index: 1;
}
}

Revision as of 07:43, 23 June 2025

/* CSS placed here will be applied to all skins */

/* Orders element above others if specific child elements hovered */
.frontOnChildHover .hoverChild:hover {
	z-index: 10;
}

/* Rules for the citation generator */
#citegen_input_url, #citegen_input_title, #citegen_input_source, #citegen_input_quote {
	width: 60%;
}

#citecont_url, #citecont_title, #citecont_source, #citecont_quote, #citecont_opt, #citecont_output {
	margin: 0 0 1rem 0;
}

/* Basic tooltip css */
/* Used in the following way:
<any_tag class = "hastooltip">
	Stuff That Has Tooltip When You Hover Over It
	<div class = "tooltip">
		Tooltip Content
	</div>
</any_tag>
*/
.hastooltip {
	position: relative;
}

.hastooltip .tooltip {
	visibility: hidden;
	
	/* Tooltip styling */
	border: 2px dashed darkgray;
	background-color: black;
	padding: 5px;
	text-align: center;
	color: white;
	
	/* Tooltip positioning */
	position: absolute;
	z-index: -1;
	bottom: 100%;
}

.hastooltip:hover .tooltip {
	visibility: visible;
	z-index: 1;
}