Template:MLG/styles.css: Difference between revisions

/* Table wrapper forces perfect shrink-wrapping */
.mlg-aligner {
	display: table;
	margin: 20px auto; /* Increased margin slightly so particles don't clip into other text on the wiki */
}

/* Main Box Structure */
.mlg-container {
	position: relative;
	background-color: #333333;
	border: 5px solid #fec837; 
	border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
	border-image-slice: 1;
	padding: 15px 20px;
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	color: #cccccc;
	text-transform: uppercase;
	transition: filter 0.2s;
	/* Intentionally NOT overflow: hidden; so particles can escape the borders */
}

/* 1. Hover Background Image Layers */
.mlg-bg-wrapper {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden; /* Clips the background image to the border exactly */
	z-index: 0;
}

.mlg-bg {
	position: absolute;
	top: -15%; left: -15%; 
	width: 130%; height: 130%;
	opacity: 0;
	transition: opacity 0.2s;
}

/* Force the MediaWiki image tag to fill the area */
.mlg-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 2. Particles Container & Base Class */
.mlg-particles {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: 1;
}

.mlg-p {
	position: absolute;
	opacity: 0; /* Invisible by default */
}

/* 3. Main Content Wrapper */
.mlg-inner {
	position: relative;
	z-index: 2; /* Keeps text above background and particles */
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.mlg-content { text-align: center; }
.mlg-img { flex: 0 0 auto; }

/* Text Formatting & Heavy Meme Stroke */
.mlg-title { font-size: 2em; color: #ffffff; margin-bottom: 5px; letter-spacing: 1px; }
.mlg-subtitle { font-size: 1.1em; color: #cccccc; margin-bottom: 10px; }
.mlg-yellow { color: #ffe43a; }

.mlg-stroke {
	text-shadow: 
		-2px -2px 0 #000,  2px -2px 0 #000,
		-2px  2px 0 #000,  2px  2px 0 #000,
		-3px  0   0 #000,  3px  0   0 #000,
		 0   -3px 0 #000,  0    3px 0 #000,
		 4px  4px 5px rgba(0,0,0,1);
}

.mlg-audio { display: flex; justify-content: center; }


/* =========================================
   HOVER TRIGGERS & ANIMATIONS
========================================= */

.mlg-container:hover {
	animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear;
}
.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }

/* Trigger Background */
.mlg-container:hover .mlg-bg {
	opacity: 1;
	/* Distinct, more violent shake specifically for the background to create parallax */
	animation: mlg-bg-shake 0.12s infinite alternate;
}

/* Trigger Particles */
.mlg-container:hover .mlg-hit { animation: mlg-anim-hit linear infinite; }
.mlg-container:hover .mlg-weed { animation: mlg-anim-weed linear infinite; }
.mlg-container:hover .mlg-spin { animation: mlg-anim-spin linear infinite alternate; }
.mlg-container:hover .mlg-pulse { animation: mlg-anim-pulse linear infinite; }
.mlg-container:hover .mlg-bounce { animation: mlg-anim-bounce linear infinite alternate; }

/* Particle Positions (Staggered around the edges) */
.h1 { top: -5%; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
.h2 { top: 80%; left: 85%; animation-duration: 0.9s; animation-delay: 0.4s; }
.h3 { top: 40%; left: -8%; animation-duration: 1.4s; animation-delay: 0.2s; }
.h4 { top: 15%; left: 95%; animation-duration: 1.1s; animation-delay: 0.7s; }
.h5 { top: -10%; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
.h6 { top: 75%; left: 15%; animation-duration: 0.8s; animation-delay: 0.8s; }
.h7 { top: 50%; left: 50%; animation-duration: 1.3s; animation-delay: 0.3s; }
.h8 { top: -12%; left: -2%; animation-duration: 1.0s; animation-delay: 0.9s; }

.w1 { top: 80%; left: 5%; animation-duration: 3s; animation-delay: 0s; }
.w2 { top: 90%; left: 80%; animation-duration: 4s; animation-delay: 1.5s; }
.w3 { top: 85%; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }

.s1 { top: -15%; left: 35%; animation-duration: 2.5s; animation-delay: 0s; }
.p1 { top: -8%; left: 85%; animation-duration: 1.5s; animation-delay: 0s; }
.s2 { top: 45%; left: -10%; animation-duration: 2s; animation-delay: 0.5s; }
.b1 { top: 85%; left: 90%; animation-duration: 0.5s; animation-delay: 0s; }


/* =========================================
   KEYFRAMES
========================================= */

@keyframes mlg-rainbow {
	0% { filter: hue-rotate(0deg) saturate(200%); }
	100% { filter: hue-rotate(360deg) saturate(200%); }
}

@keyframes mlg-shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes mlg-bg-shake {
	0% { transform: translate(-10px, -5px) scale(1.1); }
	50% { transform: translate(10px, 15px) scale(1.15); }
	100% { transform: translate(-5px, 10px) scale(1.1); }
}

@keyframes mlg-bounce-img {
	0% { transform: scale(1) rotate(-5deg); }
	100% { transform: scale(1.1) rotate(5deg); }
}

/* Hitmarker: Pop fast, hold briefly, fade out slow */
@keyframes mlg-anim-hit {
	0% { transform: scale(0); opacity: 1; }
	10% { transform: scale(1.5); opacity: 1; }
	20% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1); opacity: 0; }
	100% { transform: scale(1); opacity: 0; }
}

/* Weed: Float up and sway */
@keyframes mlg-anim-weed {
	0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(20px, -120px) rotate(15deg); opacity: 0; }
}

/* General Meme Debris Animations */
@keyframes mlg-anim-spin {
	0% { transform: rotate(0deg) scale(0.8); opacity: 1; }
	100% { transform: rotate(360deg) scale(1.2); opacity: 1; }
}

@keyframes mlg-anim-pulse {
	0% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes mlg-anim-bounce {
	0% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(-30px); opacity: 1; }
}