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- | .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-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;
}