Template:NavCard/styles.css - Revision history

Guinevere at 23:30, 13 November 2026

2026-11-13T23:30:00Z

← Older revision		Revision as of 23:30, 13 November 2026
Line 4:		Line 4:
	* MediaWiki 1.46 / Vector 2022		* MediaWiki 1.46 / Vector 2022
	*		*
	* Full-card clickable navigation.		* Full-card clickable navigation using
	* ~~Designed for MediaWiki TemplateStyles~~.		* a stretched title link.
	*/		*/

Line 14:		Line 14:
	.lumi-navcard {		.lumi-navcard {
	position: relative;		position: relative;

	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 74:		Line 73:
	filter 0.35s ease;		filter 0.35s ease;
	}		}

	~~/* Image zoom and brightness */~~

	.lumi-navcard:hover .lumi-navcard-image img {		.lumi-navcard:hover .lumi-navcard-image img {
Line 100:		Line 97:

	.lumi-navcard-title {		.lumi-navcard-title {
	~~color: #f5f7fa;~~
	font-size: 1.12em;		font-size: 1.12em;
	font-weight: 700;		font-weight: 700;
	letter-spacing: -0.02em;		letter-spacing: -0.02em;
	line-height: 1.3;		line-height: 1.3;
			}

			.lumi-navcard-title a {
			color: #f5f7fa;
			text-decoration: none;
			}

			/*
			* Stretch the title link across the card.
			* The card is the positioning container.
			*/

			.lumi-navcard-title a::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			}

			.lumi-navcard:hover .lumi-navcard-title a {
			color: #55c8ff;
	}		}

Line 132:		Line 152:

	/* ==========================================		/* ==========================================
	8. ~~FULL-CARD CLICKABLE OVERLAY~~		8. KEYBOARD NAVIGATION
	========================================== */		========================================== */

	.lumi-navcard-~~overlay~~ {		.lumi-navcard-title a:focus {
	~~position: absolute;~~		outline: 2px solid #55c8ff;
	~~top: 0;~~		outline-offset: 2px;
	~~right~~: 0;
	~~bottom: 0;~~
	~~left: 0;~~

	z-~~index~~: 2;
	}		}

	.lumi-navcard-~~overlay~~ a {		.lumi-navcard-title a:focus::after {
	~~display~~: ~~block;~~
	~~width: 100%;~~
	~~height: 100%;~~

	~~text-decoration: none;~~
	~~cursor: pointer;~~
	}

	/*
	* Visually hide the link label while keeping
	* it available to screen readers.
	*/

	~~.lumi-navcard-overlay-label {~~
	~~position: absolute;~~
	~~width: 1px;~~
	~~height: 1px;~~
	~~overflow: hidden;~~
	~~clip: rect(0, 0, 0, 0);~~
	~~white-space~~: ~~nowrap;~~
	}

	~~/* ==========================================~~
	~~9. KEYBOARD NAVIGATION~~
	~~========================================== */~~

	~~.lumi-navcard-overlay a~~:~~focus~~ {
	outline: 2px solid #55c8ff;		outline: 2px solid #55c8ff;
	outline-offset: -3px;		outline-offset: -3px;
Line 179:		Line 167:

	/* ==========================================		/* ==========================================
	10. REDUCED MOTION ACCESSIBILITY		9. REDUCED MOTION ACCESSIBILITY
	========================================== */		========================================== */

Guinevere at 23:26, 13 November 2026

2026-11-13T23:26:20Z

← Older revision		Revision as of 23:26, 13 November 2026
Line 4:		Line 4:
	* MediaWiki 1.46 / Vector 2022		* MediaWiki 1.46 / Vector 2022
	*		*
	* ~~Modern dark gaming~~-~~wiki styling~~.		* Full-card clickable navigation.
	* Designed for MediaWiki TemplateStyles.		* Designed for MediaWiki TemplateStyles.
	*/		*/
Line 13:		Line 13:

	.lumi-navcard {		.lumi-navcard {
			position: relative;

	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 59:		Line 61:
	#202834		#202834
	);		);
	}

	~~.lumi-navcard-image a {~~
	~~display: block;~~
	~~width: 100%;~~
	~~height: 100%;~~
	}		}

Line 104:		Line 100:

	.lumi-navcard-title {		.lumi-navcard-title {
			color: #f5f7fa;
	font-size: 1.12em;		font-size: 1.12em;
	font-weight: 700;		font-weight: 700;
	letter-spacing: -0.02em;		letter-spacing: -0.02em;
	line-height: 1.3;		line-height: 1.3;
	}

	~~.lumi-navcard-title a {~~
	~~color: #f5f7fa;~~
	~~text-decoration: none;~~
	}

	~~.lumi-navcard-title a:hover {~~
	~~color: #55c8ff;~~
	~~text-decoration: none;~~
	}		}

Line 131:		Line 118:

	/* ==========================================		/* ==========================================
	7. BOTTOM NAVIGATION ~~LINK~~		7. BOTTOM NAVIGATION LABEL
	========================================== */		========================================== */

Line 138:		Line 125:
	padding-top: 12px;		padding-top: 12px;

			color: #55c8ff;
	font-size: 0.8em;		font-size: 0.8em;
	font-weight: 700;		font-weight: 700;
Line 143:		Line 131:
	}		}

	.lumi-navcard-~~link~~ a {		/* ==========================================
	~~color~~: ~~#55c8ff~~;		8. FULL-CARD CLICKABLE OVERLAY
			========================================== */

			.lumi-navcard-overlay {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			z-index: 2;
			}

			.lumi-navcard-overlay a {
			display: block;
			width: 100%;
			height: 100%;

	text-decoration: none;		text-decoration: none;
			cursor: pointer;
	}		}

	.lumi-navcard-~~link a~~:~~hover {~~		/*
	~~color~~: ~~#a6e5ff~~;		* Visually hide the link label while keeping
	~~text~~-~~decoration~~: ~~underline~~;		* it available to screen readers.
			*/

			.lumi-navcard-overlay-label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
	}		}

	/* ==========================================		/* ==========================================
	8. KEYBOARD NAVIGATION		9. KEYBOARD NAVIGATION
	========================================== */		========================================== */

	.lumi-navcard a:focus {		.lumi-navcard-overlay a:focus {
	outline: 2px solid #55c8ff;		outline: 2px solid #55c8ff;
	outline-offset: ~~2px~~;		outline-offset: -3px;
			border-radius: 12px;
	}		}

	/* ==========================================		/* ==========================================
	9. REDUCED MOTION ACCESSIBILITY		10. REDUCED MOTION ACCESSIBILITY
	========================================== */		========================================== */

Guinevere at 22:49, 13 November 2026

2026-11-13T22:49:51Z

← Older revision		Revision as of 22:49, 13 November 2026
Line 3:		Line 3:
	* LumiWiki Navigation Cards		* LumiWiki Navigation Cards
	* MediaWiki 1.46 / Vector 2022		* MediaWiki 1.46 / Vector 2022
			*
			* Modern dark gaming-wiki styling.
			* Designed for MediaWiki TemplateStyles.
	*/		*/

Line 51:		Line 54:
	overflow: hidden;		overflow: hidden;

	background: #303b4b;		background: linear-gradient(
			to bottom,
			#303b4b,
			#202834
			);
	}		}

Line 67:		Line 74:
	object-fit: cover;		object-fit: cover;

	transition: transform 0.35s ease;		transition:
			transform 0.35s ease,
			filter 0.35s ease;
	}		}

	/* ~~Subtle image~~ zoom */		/* Image zoom and brightness */

	.lumi-navcard:hover .lumi-navcard-image img {		.lumi-navcard:hover .lumi-navcard-image img {
	transform: scale(1.045);		transform: scale(1.045);
			filter: brightness(1.08);
	}		}

Line 169:		Line 179:
	.lumi-navcard:hover .lumi-navcard-image img {		.lumi-navcard:hover .lumi-navcard-image img {
	transform: none;		transform: none;
			filter: none;
	}		}
	}		}

Guinevere at 22:48, 13 November 2026

2026-11-13T22:48:14Z

Show changes

Guinevere at 18:47, 13 November 2026

2026-11-13T18:47:21Z

← Older revision		Revision as of 18:47, 13 November 2026
Line 9:		Line 9:
	background: #20242b;		background: #20242b;
	color: #f5f5f5;		color: #f5f5f5;
	transition: border-color 0.2s ease, transform 0.2s ease;		transition: border-color 0.2s ease,
			transform 0.2s ease;
	}		}

Line 17:		Line 18:
	}		}

	.lumi-navcard-image~~-link~~ {		.lumi-navcard-image {
	~~display~~: ~~block~~;		width: 100%;
	aspect-ratio: 16 / 9;		aspect-ratio: 16 / 9;
			overflow: hidden;
	background: #303640;		background: #303640;
	~~overflow: hidden;~~
	}		}

	.lumi-navcard-image {		.lumi-navcard-image a {
			display: block;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	}		}

	.lumi-navcard-img {		.lumi-navcard-image img {
			display: block;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
Line 61:		Line 64:
	margin-top: auto;		margin-top: auto;
	padding-top: 12px;		padding-top: 12px;
			font-size: 0.8em;
			font-weight: 700;
	}		}

	.lumi-navcard-link a {		.lumi-navcard-link a {
	color: #36a9d6;		color: #36a9d6;
	~~font-size: 0.8em;~~
	~~font-weight: 700;~~
	text-decoration: none;		text-decoration: none;
	}		}

Guinevere at 18:42, 13 November 2026

2026-11-13T18:42:36Z

← Older revision		Revision as of 18:42, 13 November 2026
Line 9:		Line 9:
	background: #20242b;		background: #20242b;
	color: #f5f5f5;		color: #f5f5f5;
	~~text-decoration: none !important;~~		transition: border-color 0.2s ease, transform 0.2s ease;
	transition: border-color 0.2s ease,
	transform 0.2s ease;
	}		}

Line 17:		Line 15:
	border-color: #36a9d6;		border-color: #36a9d6;
	transform: translateY(-3px);		transform: translateY(-3px);
	~~text~~-~~decoration~~: ~~none !important~~;		}

			.lumi-navcard-image-link {
			display: block;
			aspect-ratio: 16 / 9;
			background: #303640;
			overflow: hidden;
	}		}

	.lumi-navcard-image {		.lumi-navcard-image {
	width: 100%;		width: 100%;
	~~aspect-ratio~~: ~~16 / 9;~~		height: 100%;
	~~overflow: hidden~~;
	}		}

Line 43:		Line 46:
	font-size: 1.15em;		font-size: 1.15em;
	font-weight: 700;		font-weight: 700;
			}

			.lumi-navcard-title a {
			color: #f5f5f5;
			text-decoration: none;
	}		}

Line 53:		Line 61:
	margin-top: auto;		margin-top: auto;
	padding-top: 12px;		padding-top: 12px;
			}

			.lumi-navcard-link a {
	color: #36a9d6;		color: #36a9d6;
	font-size: 0.8em;		font-size: 0.8em;
	font-weight: 700;		font-weight: 700;
			text-decoration: none;
	}		}

Guinevere: Created page with " .lumi-navcard { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #444; border-radius: 8px; background: #20242b; color: #f5f5f5; text-decoration: none !important; transition: border-color 0.2s ease, transform 0.2s ease; } .lumi-navcard:hover { border-color: #36a9d6; transform: translateY(-3px); text-decoration: none !important; } .lumi-navcard-image { width:..."

2026-11-13T18:23:49Z

Created page with " .lumi-navcard { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid #444; border-radius: 8px; background: #20242b; color: #f5f5f5; text-decoration: none !important; transition: border-color 0.2s ease, transform 0.2s ease; } .lumi-navcard:hover { border-color: #36a9d6; transform: translateY(-3px); text-decoration: none !important; } .lumi-navcard-image { width:..."

New page

.lumi-navcard {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid #444;
border-radius: 8px;
background: #20242b;
color: #f5f5f5;
text-decoration: none !important;
transition: border-color 0.2s ease,
transform 0.2s ease;
}

.lumi-navcard:hover {
border-color: #36a9d6;
transform: translateY(-3px);
text-decoration: none !important;
}

.lumi-navcard-image {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}

.lumi-navcard-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.lumi-navcard-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 16px;
gap: 8px;
}

.lumi-navcard-title {
font-size: 1.15em;
font-weight: 700;
}

.lumi-navcard-description {
color: #b9c0c9;
font-size: 0.9em;
}

.lumi-navcard-link {
margin-top: auto;
padding-top: 12px;
color: #36a9d6;
font-size: 0.8em;
font-weight: 700;
}