MediaWiki:Common.css: Difference between revisions

From Age of Dungeons Wiki
(Cooler title for the infobox)
(Fancy filigree pseudo-elements for legendary infoboxes, class tweak to support non-legendary infobox templates later)
Line 11: Line 11:
box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
}
}
.infobox-title {
.infobox.legendary::before {
font-size: 1.0em;
  content: url('/wiki/images/d/dd/Legendary_filigree.png');
  position:absolute;
  top: calc((-226px * 0.17) - 2.0em - 0.75em - 40px);
  left: calc(-150% - 2.0em);
  transform:scale(0.25, 0.17);
}
.infobox.legendary::after {
  content: url('/wiki/images/d/dd/Legendary_filigree.png');
  position:absolute;
  top: calc(100% - (226px * 0.17) - 2.0em - 0.75em - 30px);
  left: calc(-150% - 2.0em);
  transform:scale(0.25, -0.17);
}
.legendary .infobox-title {
font-family: serif;
font-family: serif;
font-weight: 800;
font-weight: 800;
text-transform: uppercase;
text-transform: uppercase;
}
.infobox-title {
font-size: 1.0em;
font-family: sans-serif;
font-weight: 600;
text-transform: none;
text-align: center;
text-align: center;
}
}

Revision as of 19:34, 6 June 2025

/* CSS placed here will be applied to all skins */
.infobox {
	width: 300px;
	float: right;
	
	padding: 0.75em;
	margin: 0 0 1.5em 2.0em;
	background: #f8f9fa;
	border: solid #eaecf0;
	border-width: 1px 1px 0.2em;
	box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
}
.infobox.legendary::before {
  content: url('/wiki/images/d/dd/Legendary_filigree.png');
  position:absolute;
  top: calc((-226px * 0.17) - 2.0em - 0.75em - 40px);
  left: calc(-150% - 2.0em);
  transform:scale(0.25, 0.17);
}
.infobox.legendary::after {
  content: url('/wiki/images/d/dd/Legendary_filigree.png');
  position:absolute;
  top: calc(100% - (226px * 0.17) - 2.0em - 0.75em - 30px);
  left: calc(-150% - 2.0em);
  transform:scale(0.25, -0.17);
}
.legendary .infobox-title {
	font-family: serif;
	font-weight: 800;
	text-transform: uppercase;
}
.infobox-title {
	font-size: 1.0em;
	font-family: sans-serif;
	font-weight: 600;
	text-transform: none;
	text-align: center;
}
.infobox-image {
	text-align: center;
}
.infobox-table th {
	text-align: left;
	vertical-align: top;
	width: 150px;
}
.infobox-table td {
	vertical-align: top;
}

h1 {
	clear: right;
}

h2 {
	clear: right;
}

h3 {
	clear: right;
}