MediaWiki:Common.css - Revision history

Admin at 21:40, 7 December 2025

2025-12-07T21:40:55Z

← Older revision		Revision as of 21:40, 7 December 2025
Line 58:		Line 58:
	}		}

	/* --- THE CARD CONTAINER (~~SQUARED & GRAY~~) --- */		/* --- THE CARD CONTAINER (Layout Only - Invisible) --- */
	.eld-card {		.eld-card {
	/* ~~1. The Gray Background~~ */		/* Make the wrapper transparent so we don't see a "double box" */
	background-~~color~~: ~~var(--eld-card-bg)~~;		background: none !important;
			border: none !important;
			box-shadow: none !important;
			padding: 0 !important;

	/* ~~2. Sharp Corners (Squares)~~ */		/* Set the size here */
	~~border-radius: 0px;~~

	~~border: 1px solid var(--eld-border);~~
	~~padding: 0;~~
	height: 200px;		height: 200px;
	position: relative;		position: relative;
	~~transition: all 0.2s ease;~~ /* ~~Faster~~ transition ~~for button feel~~ */		/* Move transition to the link */
	~~box-shadow: 0 4px 6px rgba(0,0,0,0.2);~~
	}		}

	/* Hover ~~Effect~~ on the ~~Container~~ */		/* Hover effects now happen on the LINK, not the wrapper div */
	.eld-card:hover {		.eld-card:hover {
	transform: ~~translateY(-5px);~~		transform: none; /* Disable transform on wrapper to prevent jitter */
	~~border-color: var(--eld-gold);~~
	~~box-shadow: 0 10px 20px rgba(246, 206, 104, 0.15)~~;
	}		}

	/* --- THE CLICKABLE LINK (~~Fills~~ the card) --- */		/* --- THE CLICKABLE LINK (This becomes the visible card) --- */
	.eld-card a,		.eld-card a,
	.eld-card a:visited,		.eld-card a:visited,
	.eld-card a:active {		.eld-card a:active {
			/* 1. Visuals moved here */
			background-color: var(--eld-card-bg) !important;
			border: 1px solid var(--eld-border) !important;
			border-radius: 0px !important; /* Squared corners */

			/* 2. Layout */
	display: flex !important;		display: flex !important;
	flex-direction: column;		flex-direction: column;
Line 91:		Line 93:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
			box-sizing: border-box; /* Ensures padding doesn't expand size */

			/* 3. Text Styles */
	text-decoration: none !important;		text-decoration: none !important;
	color: var(--eld-text) !important;		color: var(--eld-text) !important;
	padding: 20px;		padding: 20px;
	box-~~sizing~~: border-box;
			/* 4. Animation */
			transition: all 0.2s ease;
			box-shadow: 0 4px 6px rgba(0,0,0,0.2);
			}

			/* HOVER STATE (Applied to the link) */
			.eld-card a:hover {
			transform: translateY(-5px);
			background-color: #1a1c29 !important; /* Slightly lighter gray on hover */
			border-color: var(--eld-gold) !important;
			box-shadow: 0 10px 20px rgba(246, 206, 104, 0.15);
			z-index: 10; /* Bring to front */
	}		}

Line 106:		Line 123:
	}		}

	.eld-card:hover .eld-card-icon {		/* Scale icon on hover */
			.eld-card a:hover .eld-card-icon {
	transform: scale(1.1);		transform: scale(1.1);
	}		}
Line 120:		Line 138:
	}		}

			/* Remove default image borders */
	.eld-card a img {		.eld-card a img {
	border: none !important;		border: none !important;

Admin at 21:39, 7 December 2025

2025-12-07T21:39:01Z

← Older revision		Revision as of 21:39, 7 December 2025
Line 51:		Line 51:
	.eld-grid {		.eld-grid {
	display: grid;		display: grid;
	~~/* This creates the responsive layout */~~
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;		gap: 20px;
Line 59:		Line 58:
	}		}

	/* --- THE CARD CONTAINER --- */		/* --- THE CARD CONTAINER (SQUARED & GRAY) --- */
	.eld-card {		.eld-card {
			/* 1. The Gray Background */
			background-color: var(--eld-card-bg);

			/* 2. Sharp Corners (Squares) */
			border-radius: 0px;

	border: 1px solid var(--eld-border);		border: 1px solid var(--eld-border);
	~~border-radius: 16px;~~
	~~/* Remove padding here so the link can fill the edge */~~
	padding: 0;		padding: 0;
	height: 200px; ~~/* Force a consistent height for alignment */~~		height: 200px;
	position: relative;		position: relative;
	transition: all 0.3s ease;		transition: all 0.2s ease; /* Faster transition for button feel */
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);		box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	}		}
Line 79:		Line 82:

	/* --- THE CLICKABLE LINK (Fills the card) --- */		/* --- THE CLICKABLE LINK (Fills the card) --- */
	~~/* We target the 'a' tag specifically to make it the flex container */~~
	.eld-card a,		.eld-card a,
	.eld-card a:visited,		.eld-card a:visited,
Line 89:		Line 91:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	text-decoration: none !important; ~~/* Kill the underline */~~		text-decoration: none !important;
	color: var(--eld-text) !important; ~~/* Force white text */~~		color: var(--eld-text) !important;
	padding: 20px; ~~/* Add padding inside the link */~~		padding: 20px;
	box-sizing: border-box;		box-sizing: border-box;
	}		}
Line 99:		Line 101:
	font-size: 3rem;		font-size: 3rem;
	margin-bottom: 15px;		margin-bottom: 15px;
	display: block; ~~/* Ensure it sits on its own line */~~		display: block;
	filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));		filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
	transition: transform 0.3s ease;		transition: transform 0.3s ease;
Line 105:		Line 107:

	.eld-card:hover .eld-card-icon {		.eld-card:hover .eld-card-icon {
	transform: scale(1.1~~) rotate(5deg~~);		transform: scale(1.1);
	}		}

Admin at 21:37, 7 December 2025

2025-12-07T21:37:29Z

← Older revision		Revision as of 21:37, 7 December 2025
Line 61:		Line 61:
	/* --- THE CARD CONTAINER --- */		/* --- THE CARD CONTAINER --- */
	.eld-card {		.eld-card {
	~~background-color: var(--eld-card-bg);~~
	border: 1px solid var(--eld-border);		border: 1px solid var(--eld-border);
	border-radius: 16px;		border-radius: 16px;
Line 119:		Line 118:
	}		}

	~~/* If you use images instead of emoji, this removes the ugly default border */~~
	.eld-card a img {		.eld-card a img {
	border: none !important;		border: none !important;

Admin at 21:36, 7 December 2025

2025-12-07T21:36:00Z

← Older revision		Revision as of 21:36, 7 December 2025
Line 48:		Line 48:
	}		}

	/* ~~4. The Grid~~ */		/* --- THE GRID --- */
	.eld-grid {		.eld-grid {
	display: grid;		display: grid;
	/* ~~Cards are smaller now since they have no text, allowing more per row~~ */		/* This creates the responsive layout */
	grid-template-columns: repeat(auto-fill, minmax(~~220px~~, 1fr));		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;		gap: 20px;
	max-width: ~~1000px~~;		max-width: 1200px;
	margin: 0 auto 60px auto;		margin: 0 auto 60px auto;
	padding: 0 20px;		padding: 0 20px;
	}		}

	/* ~~5. Minimalist Tile Cards~~ */		/* --- THE CARD CONTAINER --- */
	.eld-card {		.eld-card {
	~~display: flex;~~
	~~flex-direction: column;~~
	~~align-items: center;~~
	~~justify-content: center;~~
	background-color: var(--eld-card-bg);		background-color: var(--eld-card-bg);
	border: 1px solid var(--eld-border);		border: 1px solid var(--eld-border);
	border-radius: ~~12px~~;		border-radius: 16px;
	padding: ~~30px 20px~~;		/* Remove padding here so the link can fill the edge */
	~~text-decoration~~: ~~none !important~~; /* ~~Remove link underline~~ */		padding: 0;
	~~transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);~~		height: 200px; /* Force a consistent height for alignment */
	position: relative;		position: relative;
	~~height~~: ~~100%~~;		transition: all 0.3s ease;
			box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	}		}

	/* Hover ~~Effects~~ */		/* Hover Effect on the Container */
	.eld-card:hover {		.eld-card:hover {
	transform: translateY(-5px);		transform: translateY(-5px);
	~~background-color: #1a1c29;~~
	border-color: var(--eld-gold);		border-color: var(--eld-gold);
	box-shadow: 0 ~~0 15px~~ rgba(246, 206, 104, 0.15);		box-shadow: 0 10px 20px rgba(246, 206, 104, 0.15);
			}

			/* --- THE CLICKABLE LINK (Fills the card) --- */
			/* We target the 'a' tag specifically to make it the flex container */
			.eld-card a,
			.eld-card a:visited,
			.eld-card a:active {
			display: flex !important;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			text-decoration: none !important; /* Kill the underline */
			color: var(--eld-text) !important; /* Force white text */
			padding: 20px; /* Add padding inside the link */
			box-sizing: border-box;
	}		}

			/* --- ICONS & TEXT --- */
	.eld-card-icon {		.eld-card-icon {
	font-size: ~~2.5rem~~;		font-size: 3rem;
	margin-bottom: 15px;		margin-bottom: 15px;
			display: block; /* Ensure it sits on its own line */
			filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
	transition: transform 0.3s ease;		transition: transform 0.3s ease;
	}		}

	.eld-card:hover .eld-card-icon {		.eld-card:hover .eld-card-icon {
	transform: scale(1.1);		transform: scale(1.1) rotate(5deg);
	}		}

	.eld-card-title {		.eld-card-title {
	font-family: 'Cinzel', serif;		font-family: 'Cinzel', serif;
	~~color: var(--eld-text);~~
	font-size: 1.1rem;		font-size: 1.1rem;
	font-weight: 700;		font-weight: 700;
Line 101:		Line 116:
	letter-spacing: 0.05em;		letter-spacing: 0.05em;
	text-align: center;		text-align: center;
			line-height: 1.2;
	}		}

	/* ~~Make~~ the ~~whole card clickable link color fix~~ */		/* If you use images instead of emoji, this removes the ugly default border */
	.eld-card a {		.eld-card a img {
	~~color~~: ~~inherit~~;		border: none !important;
	~~text-decoration~~: none;		background: none !important;
			margin: 0 auto !important;
	}		}

Admin at 21:33, 7 December 2025

2025-12-07T21:33:45Z

Show changes

Admin at 21:29, 7 December 2025

2025-12-07T21:29:06Z

Show changes

Admin at 21:26, 7 December 2025

2025-12-07T21:26:06Z

Show changes

Admin: Created page with "/* --- ELDRASIL WIKI MAIN PAGE THEME --- / :root { --eld-bg: #0a0b10; --eld-card-bg: #13151f; --eld-border: rgba(255, 255, 255, 0.1); --eld-gold: #f6ce68; --eld-purple: #9056c6; --eld-text: #f3f0f7; --eld-text-muted: #d8c4f8; } / Hide the default "Main Page" title and site tagline / .page-Main_Page #firstHeading, .page-Main_Page #siteSub, .page-Main_Page #contentSub { display: none !important; } / Main Container */ .eld-main-contain..."

2025-12-07T21:23:55Z

Created page with "--- ELDRASIL WIKI MAIN PAGE THEME ---: :root { --eld-bg: #0a0b10; --eld-card-bg: #13151f; --eld-border: rgba(255, 255, 255, 0.1); --eld-gold: #f6ce68; --eld-purple: #9056c6; --eld-text: #f3f0f7; --eld-text-muted: #d8c4f8; } Hide the default "Main Page" title and site tagline: .page-Main_Page #firstHeading, .page-Main_Page #siteSub, .page-Main_Page #contentSub { display: none !important; } Main Container: .eld-main-contain..."

New page

/* --- ELDRASIL WIKI MAIN PAGE THEME --- */

:root {
--eld-bg: #0a0b10;
--eld-card-bg: #13151f;
--eld-border: rgba(255, 255, 255, 0.1);
--eld-gold: #f6ce68;
--eld-purple: #9056c6;
--eld-text: #f3f0f7;
--eld-text-muted: #d8c4f8;
}

/* Hide the default "Main Page" title and site tagline */
.page-Main_Page #firstHeading,
.page-Main_Page #siteSub,
.page-Main_Page #contentSub {
display: none !important;
}

/* Main Container */
.eld-main-container {
font-family: 'Inter', sans-serif;
color: var(--eld-text);
max-width: 1200px;
margin: 0 auto;
}

/* Hero Section */
.eld-hero {
text-align: center;
padding: 4rem 2rem;
background: radial-gradient(circle at center, rgba(144, 86, 198, 0.15) 0%, rgba(10, 11, 16, 0) 70%);
border-bottom: 1px solid var(--eld-border);
margin-bottom: 2rem;
}

.eld-hero h1 {
font-family: 'Cinzel', serif; /* Fallback if not loaded, standard serif */
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.5rem;
background: linear-gradient(to bottom, #ffffff, #9ca3af);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
border: none; /* Remove default MW h1 border */
}

.eld-hero p {
color: var(--eld-gold);
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.9rem;
font-weight: bold;
}

/* Grid Layout */
.eld-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}

/* Card Styling */
.eld-card {
background-color: var(--eld-card-bg);
border: 1px solid var(--eld-border);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
text-decoration: none; /* For links */
display: block;
position: relative;
overflow: hidden;
}

.eld-card:hover {
transform: translateY(-5px);
border-color: var(--eld-gold);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
text-decoration: none;
}

.eld-card h2 {
font-family: serif;
color: var(--eld-gold);
font-size: 1.5rem;
border-bottom: none;
margin-top: 0;
}

.eld-card p {
color: var(--eld-text-muted);
font-size: 0.9rem;
line-height: 1.5;
}

/* Feature Icons in Cards */
.eld-icon-box {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.05);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.5rem;
}

/* Quick Links Section (Row of buttons) */
.eld-links {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}

.eld-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--eld-border);
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: var(--eld-text);
font-weight: bold;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.1em;
transition: all 0.2s;
text-decoration: none;
}

.eld-btn:hover {
background: var(--eld-gold);
color: #000;
text-decoration: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
.eld-hero h1 { font-size: 2rem; }
.eld-grid { grid-template-columns: 1fr; }
}