The Gold Network: Soyworld | SNCApedia | SoyPlace

If your contributions get rejected for no reason, please contact Editor.

I'm not dead, just inactive for the moment. Faggot (talk) 20:16, 9 April 2026 (UTC)

Template:MLG/styles.css: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
← Older edit
mNo edit summary
mNo edit summary
 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
.mlg-aligner {
.mlg-aligner {
display: table;
display: table;
margin: 20px auto; /* Increased margin slightly so particles don't clip into other text on the wiki */
margin: 40px auto;  
}
}


Line 12: Line 12:
border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
border-image-slice: 1;
border-image-slice: 1;
/* ADDED: Deep outer drop shadow and inner vignette shadow for un-hovered polish */
box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.8);
padding: 15px 20px;
padding: 15px 20px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color: #cccccc;
color: #cccccc;
text-transform: uppercase;
text-transform: uppercase;
transition: filter 0.2s;
transition: filter 0.2s, box-shadow 0.2s;
/* Intentionally NOT overflow: hidden; so particles can escape the borders */
}
}


Line 24: Line 25:
position: absolute;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden; /* Clips the background image to the border exactly */
overflow: hidden;  
z-index: 0;
z-index: 0;
}
}
Line 30: Line 31:
.mlg-bg {
.mlg-bg {
position: absolute;
position: absolute;
top: -15%; left: -15%;  
top: -5%; left: -5%;  
width: 130%; height: 130%;
width: 110%; height: 110%;
opacity: 0;
opacity: 0;
transition: opacity 0.2s;
transition: opacity 0.2s;
}
}


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


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


Line 58: Line 57:
.mlg-inner {
.mlg-inner {
position: relative;
position: relative;
z-index: 2; /* Keeps text above background and particles */
z-index: 2;  
display: flex;
display: flex;
flex-flow: row nowrap;
flex-flow: row nowrap;
Line 90: Line 89:
========================================= */
========================================= */


.mlg-container:hover {
/* Triggers a glowing rainbow shadow when hovering, plus the shakes */
animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear;
.mlg-container:hover {  
animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear;
box-shadow: 0 10px 30px rgba(184, 39, 252, 0.5), inset 0 0 25px rgba(0,0,0,0.8);
}
}
.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }
.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }
.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }


/* Trigger Background */
/* Trigger Particles Safely */
.mlg-container:hover .mlg-bg {
.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
opacity: 1;
.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
/* Distinct, more violent shake specifically for the background to create parallax */
.mlg-container:hover .mlg-chip { animation-name: mlg-anim-weed; }
animation: mlg-bg-shake 0.12s infinite alternate;
.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }
}
.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }
.mlg-container:hover .mlg-bounce { animation-name: mlg-anim-bounce; opacity: 1; }


/* Trigger Particles */
/* Base animation rules */
.mlg-container:hover .mlg-hit { animation: mlg-anim-hit linear infinite; }
.mlg-hit, .mlg-weed, .mlg-chip, .mlg-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }
.mlg-container:hover .mlg-weed { animation: mlg-anim-weed linear infinite; }
.mlg-spin, .mlg-bounce { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }
.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) */
/* Hitmarkers */
.h1 { top: -5%; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
.h1 { top: -20px; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
.h2 { top: 80%; left: 85%; animation-duration: 0.9s; animation-delay: 0.4s; }
.h2 { bottom: -10px; right: 5%; animation-duration: 0.9s; animation-delay: 0.4s; }
.h3 { top: 40%; left: -8%; animation-duration: 1.4s; animation-delay: 0.2s; }
.h3 { top: 40%; left: -25px; animation-duration: 1.4s; animation-delay: 0.2s; }
.h4 { top: 15%; left: 95%; animation-duration: 1.1s; animation-delay: 0.7s; }
.h4 { top: 15%; right: -15px; animation-duration: 1.1s; animation-delay: 0.7s; }
.h5 { top: -10%; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
.h5 { top: -25px; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
.h6 { top: 75%; left: 15%; animation-duration: 0.8s; animation-delay: 0.8s; }
.h6 { bottom: -20px; left: 15%; animation-duration: 0.8s; animation-delay: 0.8s; }
.h7 { top: 50%; left: 50%; animation-duration: 1.3s; animation-delay: 0.3s; }
.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; }
.h8 { top: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }
 
/* Floating Weed */
.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }
.w2 { bottom: -40px; right: 15%; animation-duration: 4s; animation-delay: 1.5s; }
.w3 { bottom: -10px; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }
 
/* Floating Dorito Chips */
.c1 { bottom: -20px; left: 25%; animation-duration: 3.2s; animation-delay: 0.5s; }
.c2 { bottom: -35px; right: 35%; animation-duration: 2.8s; animation-delay: 1.2s; }
.c3 { bottom: -15px; left: 65%; animation-duration: 4.1s; animation-delay: 0.2s; }
 
/* Mountain Dew */
.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }
.s3 { bottom: -20px; right: 25%; animation-duration: 1.8s; animation-delay: 0.7s; }
.s4 { top: -10px; left: 55%; animation-duration: 3.0s; animation-delay: 0.3s; }


.w1 { top: 80%; left: 5%; animation-duration: 3s; animation-delay: 0s; }
/* Illuminati */
.w2 { top: 90%; left: 80%; animation-duration: 4s; animation-delay: 1.5s; }
.p1 { top: -25px; right: -25px; animation-duration: 1.5s; animation-delay: 0s; }
.w3 { top: 85%; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }
.p2 { bottom: -10px; left: -15px; animation-duration: 1.2s; animation-delay: 0.5s; }
.p3 { top: 35%; left: 85%; animation-duration: 1.8s; animation-delay: 0.2s; }


.s1 { top: -15%; left: 35%; animation-duration: 2.5s; animation-delay: 0s; }
/* Dorito Bags */
.p1 { top: -8%; left: 85%; animation-duration: 1.5s; animation-delay: 0s; }
.b1 { bottom: -30px; right: -25px; animation-duration: 0.5s; animation-delay: 0s; }
.s2 { top: 45%; left: -10%; animation-duration: 2s; animation-delay: 0.5s; }
.b2 { top: -40px; left: -5px; animation-duration: 0.6s; animation-delay: 0.2s; }
.b1 { top: 85%; left: 90%; animation-duration: 0.5s; animation-delay: 0s; }
.b3 { top: 25%; left: -35px; animation-duration: 0.4s; animation-delay: 0.1s; }




Line 148: Line 164:


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


Line 158: Line 174:
}
}


/* Hitmarker: Pop fast, hold briefly, fade out slow */
@keyframes mlg-anim-hit {
@keyframes mlg-anim-hit {
0% { transform: scale(0); opacity: 1; }
0% { transform: scale(0); opacity: 1; }
Line 167: Line 182:
}
}


/* Weed: Float up and sway */
@keyframes mlg-anim-weed {
@keyframes mlg-anim-weed {
0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
Line 175: Line 189:
}
}


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


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


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

Latest revision as of 08:38, 23 April 2026

/* Table wrapper forces perfect shrink-wrapping */
.mlg-aligner {
	display: table;
	margin: 40px auto; 
}

/* 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;
	/* ADDED: Deep outer drop shadow and inner vignette shadow for un-hovered polish */
	box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.8);
	padding: 15px 20px;
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	color: #cccccc;
	text-transform: uppercase;
	transition: filter 0.2s, box-shadow 0.2s;
}

/* 1. Hover Background Image Layers */
.mlg-bg-wrapper {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden; 
	z-index: 0;
}

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

.mlg-bg img {
	width: 100%;
	height: 100%;
}

/* 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; 
}

/* 3. Main Content Wrapper */
.mlg-inner {
	position: relative;
	z-index: 2; 
	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
========================================= */

/* Triggers a glowing rainbow shadow when hovering, plus the shakes */
.mlg-container:hover { 
	animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear; 
	box-shadow: 0 10px 30px rgba(184, 39, 252, 0.5), inset 0 0 25px rgba(0,0,0,0.8);
}
.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }
.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }

/* Trigger Particles Safely */
.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
.mlg-container:hover .mlg-chip { animation-name: mlg-anim-weed; }
.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }
.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }
.mlg-container:hover .mlg-bounce { animation-name: mlg-anim-bounce; opacity: 1; }

/* Base animation rules */
.mlg-hit, .mlg-weed, .mlg-chip, .mlg-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }
.mlg-spin, .mlg-bounce { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }

/* Hitmarkers */
.h1 { top: -20px; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
.h2 { bottom: -10px; right: 5%; animation-duration: 0.9s; animation-delay: 0.4s; }
.h3 { top: 40%; left: -25px; animation-duration: 1.4s; animation-delay: 0.2s; }
.h4 { top: 15%; right: -15px; animation-duration: 1.1s; animation-delay: 0.7s; }
.h5 { top: -25px; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
.h6 { bottom: -20px; 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: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }

/* Floating Weed */
.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }
.w2 { bottom: -40px; right: 15%; animation-duration: 4s; animation-delay: 1.5s; }
.w3 { bottom: -10px; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }

/* Floating Dorito Chips */
.c1 { bottom: -20px; left: 25%; animation-duration: 3.2s; animation-delay: 0.5s; }
.c2 { bottom: -35px; right: 35%; animation-duration: 2.8s; animation-delay: 1.2s; }
.c3 { bottom: -15px; left: 65%; animation-duration: 4.1s; animation-delay: 0.2s; }

/* Mountain Dew */
.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }
.s3 { bottom: -20px; right: 25%; animation-duration: 1.8s; animation-delay: 0.7s; }
.s4 { top: -10px; left: 55%; animation-duration: 3.0s; animation-delay: 0.3s; }

/* Illuminati */
.p1 { top: -25px; right: -25px; animation-duration: 1.5s; animation-delay: 0s; }
.p2 { bottom: -10px; left: -15px; animation-duration: 1.2s; animation-delay: 0.5s; }
.p3 { top: 35%; left: 85%; animation-duration: 1.8s; animation-delay: 0.2s; }

/* Dorito Bags */
.b1 { bottom: -30px; right: -25px; animation-duration: 0.5s; animation-delay: 0s; }
.b2 { top: -40px; left: -5px; animation-duration: 0.6s; animation-delay: 0.2s; }
.b3 { top: 25%; left: -35px; animation-duration: 0.4s; animation-delay: 0.1s; }


/* =========================================
   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(-3px, -2px); }
	50% { transform: translate(3px, 3px); }
	100% { transform: translate(-2px, 3px); }
}

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

@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; }
}

@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; }
}

@keyframes mlg-anim-spin {
	0% { transform: rotate(0deg) scale(0.8); }
	100% { transform: rotate(360deg) scale(1.2); }
}

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

@keyframes mlg-anim-bounce {
	0% { transform: translateY(0); }
	100% { transform: translateY(-30px); }
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:MLG/styles.css&oldid=32581"