MediaWiki:Common.css - Revision history

Bane: Fix up image stretching issue

2025-05-21T02:09:08Z

Fix up image stretching issue

← Older revision		Revision as of 22:09, 20 May 2025
Line 124:		Line 124:
	height: 64px;		height: 64px;
	display: block;		display: block;
			object-fit: contain;
	}		}
	}		}

Bane: Improve the image rendering on the Infobox (bye-bye, blurry images!

2024-10-31T05:12:31Z

Improve the image rendering on the Infobox (bye-bye, blurry images!

← Older revision		Revision as of 01:12, 31 October 2024
Line 331:		Line 331:
	text-align: center;		text-align: center;
	padding: 7.5px 0;		padding: 7.5px 0;

			image-rendering: pixelated;
	}		}

Bane: Make em override

2024-10-25T12:43:18Z

Make em override

← Older revision		Revision as of 08:43, 25 October 2024
Line 52:		Line 52:
	/* Start to put some generic alignments here... */		/* Start to put some generic alignments here... */
	.left-align {		.left-align {
	justify-content: flex-start;		justify-content: flex-start !important;
	justify-content: start;		justify-content: start !important;
	}		}
	.right-align {		.right-align {
	justify-content: flex-end;		justify-content: flex-end !important;
	justify-content: end;		justify-content: end !important;
	}		}

Bane: Some generic classes for customising other elements

2024-10-25T12:38:58Z

Some generic classes for customising other elements

@@ Line 48: / Line 48: @@
 	--navbox-tertiary-header-color: #222;
 	--navbox-section-color: #222;
+}

Bane: Hopefully a fix on overflow for Character Cards

2024-08-07T01:34:13Z

Hopefully a fix on overflow for Character Cards

← Older revision		Revision as of 21:34, 6 August 2024
Line 139:		Line 139:
	border-radius: 15px;		border-radius: 15px;
	width: 250px;		width: 250px;
	height: 300px;		height: fit-content;
			min-height: 300px;
	overflow: hidden;		overflow: hidden;
	display: flex;		display: flex;

Bane: Add capitalise to pills

2024-07-16T08:08:44Z

Add capitalise to pills

← Older revision		Revision as of 04:08, 16 July 2024
Line 248:		Line 248:
	border-radius: 5px;		border-radius: 5px;
	display: inline-block;		display: inline-block;

			text-transform: capitalize;
	}		}

Bane: Complete replacement for Item cards (I hope)

2024-07-16T08:04:30Z

Complete replacement for Item cards (I hope)

← Older revision		Revision as of 04:04, 16 July 2024
Line 64:		Line 64:
	border: 1px solid #ccc;		border: 1px solid #ccc;
	border-radius: 8px;		border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 73:		Line 73:
	overflow: hidden;		overflow: hidden;
	margin: 5px;		margin: 5px;
	}

	~~/* Card title */~~		--rarityColour: #000000;
	~~.card-title {~~
	~~font-size: 1.2em;~~
	~~font~~-~~weight: bold;~~
	~~padding: 5px;~~
	~~background~~-~~color~~: #~~transparent~~;
	}

	/* ~~Card image container~~ */		/* set variables based on .rarity-RARITY on .card */
	.~~card~~-~~image~~ {		&.rarity-common {
	~~flex~~: 1; ~~/* Take remaining space */~~		--rarityColour: hsl(var(--commonColour));
	~~display: flex;~~		}
	~~justify~~-~~content: center;~~		&.rarity-uncommon {
	~~align~~-~~items~~: ~~center~~;		--rarityColour: hsl(var(--uncommonColour));
	~~padding: 5px; /* Add padding to keep distance from edges */~~		}
	}		&.rarity-rare {
			--rarityColour: hsl(var(--rareColour));
	~~/* Card image */~~		}
	.~~card~~-~~image img~~ {		&.rarity-legendary {
	~~width~~: ~~64px~~;		--rarityColour: hsl(var(--legendaryColour));
	~~height: 64px;~~		}
	~~display~~: ~~block~~;		&.rarity-mythic {
	}		--rarityColour: hsl(var(--mythicColour));
			}
	~~/* Rarity categories for .card class */~~
	.rarity-~~common~~ {
	~~background~~-~~color~~: ~~#58bd7d~~;
	~~color: #000;~~
	}

	.~~rarity~~-~~uncommon~~ {		/* Card title */
	~~background~~-~~color~~: ~~#3b71fe~~;		.card-title {
	color: ~~#fff~~;		font-size: 1.2em;
	}		font-weight: bold;
			padding: 5px;
			background-color: transparent;
			}

	.~~rarity~~-~~rare~~ {		/* Card image container */
	~~background~~-~~color~~: ~~#9f73e6~~;		.card-image {
	~~color~~: ~~#fff~~;		flex: 1; /* Take remaining space */
	}		display: flex;
			justify-content: center;
			align-items: center;
			padding: 5px; /* Add padding to keep distance from edges */

	~~.rarity-legendary~~ {		/* Card image */
	~~background-color~~: ~~#e85929~~;		img {
	~~color~~: ~~#fff~~;		width: 64px;
	}		height: 64px;
			display: block;
			}
			}

	.rarity-~~mythic {~~		/* Card Rarity */
	~~background~~-~~color~~: ~~#4bc9f0~~;		.card-rarity {
	~~color~~: ~~#fff~~;		padding: 5px;
	}		font-size: 1em;
			font-weight: bold;
			width: 100%;
			text-align: center;
			text-transform: capitalize; /* Capitalize the first letter */

	~~/* Rarity section for .card class */~~		color: #ffffff;
	~~.card-rarity {~~		background-color: var(--rarityColour);
	~~padding~~: ~~5px~~;		}
	~~font~~-~~size~~: ~~1em;~~
	~~font~~-~~weight: bold;~~
	~~color: #fff;~~
	~~width: 100%;~~
	~~text~~-~~align: center~~;
	~~text-transform: capitalize; /* Capitalize the first letter */~~
	}		}

Bane: Add BG fade to character card

2024-07-16T08:01:36Z

Add BG fade to character card

← Older revision		Revision as of 04:01, 16 July 2024
Line 178:		Line 178:

	border-color: var(--rarityColour);		border-color: var(--rarityColour);
			background: linear-gradient(to bottom right, white 0 50%, var(--rarityColourFade) 50% 100%);

	/* Card top border */		/* Card top border */

Bane: Spelling

2024-07-16T07:59:58Z

Spelling

← Older revision		Revision as of 03:59, 16 July 2024
Line 152:		Line 152:
	background-color: #fff;		background-color: #fff;

	--~~rarityColor~~: #FFFFFF;		--rarityColour: #FFFFFF;
	--~~rarityColorFade~~: #fffFFF;		--rarityColourFade: #fffFFF;

	/* set variables based on .rarity-RARITY on .card */		/* set variables based on .rarity-RARITY on .card */

Bane: Full replacement of Character Card CSS (I hope)

2024-07-16T07:52:59Z

Full replacement of Character Card CSS (I hope)

Show changes