MediaWiki:Common.css - Revision history

X5f4k4: Replaced content with "/* CSS placed here will be applied to all skins */"

2025-08-11T22:24:21Z

Replaced content with "CSS placed here will be applied to all skins: "

← Older revision		Revision as of 22:24, 11 August 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	~~/* Ironclad pressable buttons */~~
	~~.ic-btn {~~
	~~display: inline-block;~~
	~~overflow: hidden; /* clips the bottom edge when pressed */~~
	~~border-radius: 10px; /* match button art corners */~~
	~~line-height: 0; /* removes unwanted gap around inline images */~~
	}

	~~/* Link and image inside the button */~~
	~~.ic-btn > a,~~
	~~.ic-btn img {~~
	~~display: block;~~
	~~border-radius: 10px;~~
	}

	~~.ic-btn img {~~
	~~width: 100%;~~
	~~height: auto;~~
	~~pointer-events: none; /* clicks go to the link, not the image */~~
	}

	~~/* Animation target is the link itself */~~
	~~.ic-btn > a {~~
	~~transition: transform 120ms ease;~~
	~~transform-origin: top center;~~
	}

	~~/* Pressed state — moves down and squashes slightly from the top */~~
	~~.ic-btn:active > a,~~
	~~.ic-btn.is-pressed > a {~~
	~~transform: translateY(8px) scaleY(0.94);~~
	}

	~~/* No hover effect at all */~~
	~~.ic-btn:hover,~~
	~~.ic-btn:hover > a {~~
	~~/* intentionally empty to prevent hover animations */~~
	}

	~~/* Row for the social buttons */~~
	~~.ic-btn-row {~~
	~~display: flex;~~
	~~flex-wrap: wrap;~~
	~~gap: 10px;~~
	~~width: 420px; /* same as your design */~~
	~~margin-bottom: 20px;~~
	}

	~~/* Each tile width so they flow 2 per row */~~
	~~.ic-btn-row .ic-btn {~~
	~~width: 200px;~~
	}

X5f4k4 at 21:55, 11 August 2025

2025-08-11T21:55:59Z

@@ Line 37: / Line 37: @@
 .ic-btn:hover > a {
    /* intentionally empty to prevent hover animations */
+}

X5f4k4 at 21:20, 11 August 2025

2025-08-11T21:20:36Z

← Older revision		Revision as of 21:20, 11 August 2025
Line 1:		Line 1:
	/* CSS placed here will be applied to all skins */		/* CSS placed here will be applied to all skins */
	/* Ironclad pressable buttons */		/* Ironclad pressable buttons */
	.ic-btn {		.ic-btn {
	~~--press-depth: 8px; /* how far it moves down on press */~~
	~~--squash: 0.94; /* vertical squish on press */~~
	~~position: relative;~~
	display: inline-block;		display: inline-block;
	border-radius: 10px; /* match ~~your tile~~ corners */		overflow: hidden; /* clips the bottom edge when pressed */
	~~transition~~: ~~transform 120ms ease, filter 120ms ease~~;		border-radius: 10px; /* match button art corners */
			line-height: 0; /* removes unwanted gap around inline images */
	}		}

	/* ~~Make the~~ image ~~fill~~ the button ~~area cleanly~~ */		/* Link and image inside the button */
	.ic-btn > img {		.ic-btn > a,
			.ic-btn img {
	display: block;		display: block;
	~~width: 100%;~~
	~~height: auto;~~
	border-radius: 10px;		border-radius: 10px;
	~~pointer-events: none; /* so clicks hit the anchor */~~
	}		}

	~~/* Bottom “shadow bar” that can slide down out of view */~~		.ic-btn img {
	.ic-btn~~::after~~ {		width: 100%;
	~~content: "";~~		height: auto;
	~~position: absolute;~~		pointer-events: none; /* clicks go to the link, not the image */
	~~left: 6%;~~
	~~right~~: 6%;
	height: ~~12px~~;
	~~bottom~~: ~~-8px~~; /* ~~sits just below~~ the ~~tile~~ */
	~~background: rgba(0, 0, 0, 0.45);~~
	~~border-radius: 8px;~~
	~~filter: blur(0.5px);~~
	~~transition: transform 120ms ease, opacity 120ms ease;~~
	}		}

	/* ~~Press state: move down, squish, and slide~~ the ~~shadow away~~ */		/* Animation target is the link itself */
	.ic-btn~~:active,~~		.ic-btn > a {
	~~.ic-btn.is-pressed~~ {		transition: transform 120ms ease;
	transform~~: translateY(var(--press-depth)) scaleY(var(--squash))~~;		transform-origin: top center;
	transform-origin: top center; ~~/* makes the top “scrunch” */~~
	}		}

	.ic-btn:active~~::after~~,		/* Pressed state — moves down and squashes slightly from the top */
	.ic-btn.is-pressed~~::after~~ {		.ic-btn:active > a,
	transform: translateY(~~18px~~)~~; /* slides shadow out of view */~~		.ic-btn.is-pressed > a {
	~~opacity:~~ 0;		transform: translateY(8px) scaleY(0.94);
	}		}

	/* ~~Optional:~~ hover ~~lift for mouse users~~ */		/* No hover effect at all */
	.ic-btn:hover ~~{ transform: translateY(-1px); }~~		.ic-btn:hover,
	.ic-btn:hover~~::after { opacity: 0.55; }~~		.ic-btn:hover > a {
			/* intentionally empty to prevent hover animations */
	~~.ic-btn~~ {
	~~position: relative;~~
	~~display: inline-block;~~
	~~border-radius: 10px;~~
	~~transition: transform 120ms ease, filter 120ms ease;~~
	}		}

	~~.ic-btn a,~~
	~~.ic-btn img {~~
	~~display: block;~~
	~~border-radius: 10px;~~
	}

	~~.ic-btn img {~~
	~~width: 100%;~~
	~~height: auto;~~
	~~pointer-events: none; /* clicks go to the link */~~
	}

	~~/* keep your ::after shadow + pressed states as before */~~

X5f4k4 at 20:45, 11 August 2025

2025-08-11T20:45:43Z

← Older revision		Revision as of 20:45, 11 August 2025
Line 49:		Line 49:
	.ic-btn:hover { transform: translateY(-1px); }		.ic-btn:hover { transform: translateY(-1px); }
	.ic-btn:hover::after { opacity: 0.55; }		.ic-btn:hover::after { opacity: 0.55; }

			.ic-btn {
			position: relative;
			display: inline-block;
			border-radius: 10px;
			transition: transform 120ms ease, filter 120ms ease;
			}

			.ic-btn a,
			.ic-btn img {
			display: block;
			border-radius: 10px;
			}

			.ic-btn img {
			width: 100%;
			height: auto;
			pointer-events: none; /* clicks go to the link */
			}

			/* keep your ::after shadow + pressed states as before */

X5f4k4: Created page with "/* CSS placed here will be applied to all skins / / Ironclad pressable buttons / .ic-btn { --press-depth: 8px; / how far it moves down on press / --squash: 0.94; / vertical squish on press / position: relative; display: inline-block; border-radius: 10px; / match your tile corners / transition: transform 120ms ease, filter 120ms ease; } / Make the image fill the button area cleanly */ .ic-btn > img { display: block; width: 100%;..."

2025-08-11T20:36:41Z

Created page with "CSS placed here will be applied to all skins: Ironclad pressable buttons: .ic-btn { --press-depth: 8px; how far it moves down on press: --squash: 0.94; vertical squish on press: position: relative; display: inline-block; border-radius: 10px; match your tile corners: transition: transform 120ms ease, filter 120ms ease; } Make the image fill the button area cleanly: .ic-btn > img { display: block; width: 100%;..."

New page

/* CSS placed here will be applied to all skins */
/* Ironclad pressable buttons */
.ic-btn {
--press-depth: 8px; /* how far it moves down on press */
--squash: 0.94; /* vertical squish on press */
position: relative;
display: inline-block;
border-radius: 10px; /* match your tile corners */
transition: transform 120ms ease, filter 120ms ease;
}

/* Make the image fill the button area cleanly */
.ic-btn > img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
pointer-events: none; /* so clicks hit the anchor */
}

/* Bottom “shadow bar” that can slide down out of view */
.ic-btn::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
height: 12px;
bottom: -8px; /* sits just below the tile */
background: rgba(0, 0, 0, 0.45);
border-radius: 8px;
filter: blur(0.5px);
transition: transform 120ms ease, opacity 120ms ease;
}

/* Press state: move down, squish, and slide the shadow away */
.ic-btn:active,
.ic-btn.is-pressed {
transform: translateY(var(--press-depth)) scaleY(var(--squash));
transform-origin: top center; /* makes the top “scrunch” */
}

.ic-btn:active::after,
.ic-btn.is-pressed::after {
transform: translateY(18px); /* slides shadow out of view */
opacity: 0;
}

/* Optional: hover lift for mouse users */
.ic-btn:hover { transform: translateY(-1px); }
.ic-btn:hover::after { opacity: 0.55; }