Useful CSS snippets

From Support Wiki
Jump to navigation Jump to search

Let tables wrap & fix some other display oddities

table {
    display: table;
    white-space: unset;

Adjust copyright display in the footer

/* Copyright CC-BY-NC-SA icon */
/* Copied from Terraria wiki */
	/* 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;
	font-size: 11px;
	display: contents;
#footer ul li{
	font-size: inherit;
	line-height: 1.5;
	padding: 0;
	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,;

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 {