Useful CSS snippets
Jump to navigation
Jump to search
Let tables wrap & fix some other display oddities
table {
display: table;
white-space: unset;
}
/* Copyright CC-BY-NC-SA icon */
/* Copied from Terraria wiki */
#footer{
/* self */
padding: 12px;
box-sizing: border-box;
position: relative;
/* grid */
display: grid;
grid-template-columns: [l] 1fr 0fr [r];
grid-template-rows: [t] auto auto [b];
z-index: 0;
}
#footer-info{
font-size: 11px;
display: contents;
}
#footer ul li{
font-size: inherit;
line-height: 1.5;
padding: 0;
}
#footer-icons{
grid-column: span 1 / r;
grid-row: t / b;
place-self: end;
}
#footer #footer-info-lastmod{
grid-column: l / span 1;
grid-row: t / span 1;
place-self: start;
margin-bottom: 1em;
}
#footer #footer-info-copyright{
grid-column: l / span 1;
grid-row: span 1 / b;
place-self: end stretch;
position: relative;
padding-right: 100px;
}
#footer-info-copyright img{
position: absolute;
right: 0;
/* mediawiki logo is 31px height, and this image has a 1px black border,
a small tweak to make them visually matched on size and position */
bottom: -1px;
height: 33px;
width: auto;
}
Invert some things in dark mode
White bullet points
ul {
list-style-type: disc;
list-style-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%225%22%20height%3D%2213%22%3E%0A%3Ccircle%20cx%3D%222.5%22%20cy%3D%229.5%22%20r%3D%222.5%22%20fill%3D%22%23FFFFFF%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
White help icon
#mw-indicator-mw-helplink a { background: none; }
#mw-indicator-mw-helplink a:before {
content: '';
display: block;
background-image: url(/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
background-position: left center;
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
left: 0px;
filter: invert(1);
}
White math
.mwe-math-fallback-image-inline {
filter:invert(100%);
}