MediaWiki:Common.css: Difference between revisions

From The Fifth City Wiki
Basic styles for cite gen.
 
m Forgot to ensure it only targeted direct descendants, rather than all descendants, lol. Also add a comment on a mistake the error parser is making.
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap');
/* Orders element above others if specific child elements hovered */
/* This next line will throw an error... ignore it? I have no clue why it's doing so. */
/* You can check with the official css validator, it is completely valid css */
.frontOnChildHover:has(.hoverChild:hover) {
z-index: 10;
}


/* Rules for the citation generator */
/* Rules for the citation generator */
Line 8: Line 16:
#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;
z-index: 1;
}
/*
Remove all <p> tags that are a direct decendant of this class
*/
.removeP > p {
display: none;
}
}

Latest revision as of 07:00, 4 July 2025

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* Orders element above others if specific child elements hovered */
/* This next line will throw an error... ignore it? I have no clue why it's doing so. */
/* You can check with the official css validator, it is completely valid css */
.frontOnChildHover:has(.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;
}

/*
Remove all <p> tags that are a direct decendant of this class
*/
.removeP > p {
	display: none;
}