MediaWiki:Common.css: Difference between revisions

From The Fifth City Wiki
Basic styles for cite gen.
 
Add basic tooltip functionality
Line 8: Line 8:
#citecont_url, #citecont_title, #citecont_source, #citecont_quote, #citecont_opt, #citecont_output {
#citecont_url, #citecont_title, #citecont_source, #citecont_quote, #citecont_opt, #citecont_output {
margin: 0 0 1rem 0;
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;
}
}

Revision as of 07:50, 22 June 2025

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

/* 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;
}