Template:3DCube/style.css - Revision history

SomebodyRum at 21:00, 13 April 2026

2026-04-13T21:00:16Z

← Older revision		Revision as of 21:00, 13 April 2026
Line 24:		Line 24:

	background-color: transparent;		background-color: transparent;

	~~/* A subtle outline so you can see the cube's shape.~~
	~~Change this to "none" if you want pure floating images! */~~
	outline: 1px solid rgba(200, 200, 200, 0.5);		outline: 1px solid rgba(200, 200, 200, 0.5);

Line 36:		Line 33:

	/*		/*
	~~THE FIX: Nuke all~~ backgrounds, ~~borders, and shadows from EVERY MediaWiki~~		Target ONLY the standard MediaWiki image wrappers.
	~~wrapper (<span>, <a>, <figure>) that tries to wrap the image.~~		This removes white backgrounds on images, but leaves
			audio/video player buttons safe and visible!
	*/		*/
	.cc-side * {		.cc-side a.image,
			.cc-side figure {
	background: transparent !important;		background: transparent !important;
	background-color: transparent !important;		background-color: transparent !important;
Line 48:		Line 47:
	}		}

	/*		/* Ensures images and videos automatically scale to fit the cube */
	~~'contain' ensures the image scales perfectly~~ to fit ~~inside~~ the		.cc-side img,
	cube ~~without cutting off the edges or leaking outside!~~		.cc-side video {
	*/
	.cc-side img {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;

SomebodyRum at 20:28, 13 April 2026

2026-04-13T20:28:19Z

← Older revision		Revision as of 20:28, 13 April 2026
Line 13:		Line 13:

	.cc-center {		.cc-center {
	animation: cc-3DSpin ~~10s~~ linear infinite;		animation: cc-3DSpin 12s linear infinite;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
Line 24:		Line 24:

	background-color: transparent;		background-color: transparent;

			/* A subtle outline so you can see the cube's shape.
			Change this to "none" if you want pure floating images! */
	outline: 1px solid rgba(200, 200, 200, 0.5);		outline: 1px solid rgba(200, 200, 200, 0.5);

	~~/* PREVENTS LEAKING: Cuts off anything that tries to escape the boundaries */~~
	~~overflow: hidden;~~

	display: flex;		display: flex;
Line 36:		Line 36:

	/*		/*
	~~PREVENTS WHITE BACKGROUNDS~~:		THE FIX: Nuke all backgrounds, borders, and shadows from EVERY MediaWiki
	~~Forces MediaWiki's~~ image ~~links to drop their default wiki skin styles~~		wrapper (<span>, <a>, <figure>) that tries to wrap the image.
	*/		*/
	.cc-side a,		.cc-side * {
	~~.cc-side a.image,~~
	~~.cc-side img~~ {
	background: transparent !important;		background: transparent !important;
	background-color: transparent !important;		background-color: transparent !important;
	border: none !important;		border: none !important;
	~~outline~~: none !important;		box-shadow: none !important;
	padding: 0 !important;		padding: 0 !important;
	margin: 0 !important;		margin: 0 !important;
	}		}

	/* ~~Ensures images~~ perfectly ~~fill~~ the ~~face~~ without ~~stretching~~ */		/*
			'contain' ensures the image scales perfectly to fit inside the
			cube without cutting off the edges or leaking outside!
			*/
	.cc-side img {		.cc-side img {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	object-fit: ~~cover~~;		object-fit: contain;
	}		}

SomebodyRum at 20:25, 13 April 2026

2026-04-13T20:25:30Z

← Older revision		Revision as of 20:25, 13 April 2026
Line 25:		Line 25:
	background-color: transparent;		background-color: transparent;
	outline: 1px solid rgba(200, 200, 200, 0.5);		outline: 1px solid rgba(200, 200, 200, 0.5);

			/* PREVENTS LEAKING: Cuts off anything that tries to escape the boundaries */
			overflow: hidden;

	display: flex;		display: flex;
Line 32:		Line 35:
	}		}

	/* ~~Ensure convenience images scale nicely inside the flexbox~~ */		/*
			PREVENTS WHITE BACKGROUNDS:
			Forces MediaWiki's image links to drop their default wiki skin styles
			*/
			.cc-side a,
			.cc-side a.image,
	.cc-side img {		.cc-side img {
	~~max~~-width: 100%;		background: transparent !important;
	~~max-~~height: 100%;		background-color: transparent !important;
	object-fit: ~~contain~~;		border: none !important;
			outline: none !important;
			padding: 0 !important;
			margin: 0 !important;
			}

			/* Ensures images perfectly fill the face without stretching */
			.cc-side img {
			width: 100%;
			height: 100%;
			object-fit: cover;
	}		}

Line 45:		Line 63:
	}		}

	/* Optional text styling ~~for plain text~~ */		/* Optional text styling */
	.cc-text {		.cc-text {
	margin: 0;		margin: 0;

SomebodyRum at 20:19, 13 April 2026

2026-04-13T20:19:08Z

← Older revision		Revision as of 20:19, 13 April 2026
Line 23:		Line 23:
	height: 100%;		height: 100%;

	~~/* This makes the cube hollow/see-through */~~
	background-color: transparent;		background-color: transparent;

	~~/* A subtle outline to see the edges. Can be removed if you want pure invisible walls */~~
	outline: 1px solid rgba(200, 200, 200, 0.5);		outline: 1px solid rgba(200, 200, 200, 0.5);

	~~/* Flexbox guarantees ANY content (text, image, div) centers perfectly */~~
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
	text-align: center;		text-align: center;
			}

			/* Ensure convenience images scale nicely inside the flexbox */
			.cc-side img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
	}		}

Line 42:		Line 45:
	}		}

	/* Optional text styling for ~~modular~~ plain text */		/* Optional text styling for plain text */
	.cc-text {		.cc-text {
	margin: 0;		margin: 0;

SomebodyRum at 20:14, 13 April 2026

2026-04-13T20:14:47Z

← Older revision		Revision as of 20:14, 13 April 2026
Line 1:		Line 1:
	/* cc: shorthand term for "CSS Cube", ~~now semi-CSS2 compliant!~~ */		/* Template:3DCube/style.css
			cc: shorthand term for "CSS Cube", modular and transparent */

	.cc-scene {		.cc-scene {
	margin: 25px;		margin: 25px auto;
	~~width: 200px;~~
	~~height: 200px~~;
	}		}

	.cc-cube {		.cc-cube {
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	position: relative;		position: relative;
	}		}

	.cc-center {		.cc-center {
	animation: ~~10s linear~~ cc-3DSpin infinite;		animation: cc-3DSpin 10s linear infinite;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	}		}

	.cc-side {		.cc-side {
	position: absolute;		position: absolute;
	background-color: ~~#FFF~~;		width: 100%;
	outline: 1px solid ~~#CCC~~;		height: 100%;
	~~width~~: ~~200px~~;
	~~height~~: ~~200px~~;		/* This makes the cube hollow/see-through */
	~~background~~-~~size~~: ~~cover~~;		background-color: transparent;

			/* A subtle outline to see the edges. Can be removed if you want pure invisible walls */
			outline: 1px solid rgba(200, 200, 200, 0.5);

			/* Flexbox guarantees ANY content (text, image, div) centers perfectly */
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
	}		}

	.cc-~~SNCAText~~ {		/* Spin animation */
	~~margin~~: 0;		@keyframes cc-3DSpin {
	~~position: absolute;~~		from { transform: rotate(0deg); }
	~~text-align: center;~~		to { transform: rotate(360deg); }
	~~font-family: 'Georgia', Georgia, serif;~~
	~~font-size: 130px;~~
	~~line-height: 0.8;~~
	~~left:50%;~~
	~~top:50%;~~
	transform: ~~translateY(-50%) translateX~~(~~-50%~~);
	}		}
	/~~Spin or something~~/
	~~@keyframes~~ cc-~~3DSpin~~ {		/* Optional text styling for modular plain text */
	~~from {~~		.cc-text {
	~~transform~~: ~~rotate(0deg)~~;		margin: 0;
	}		font-family: 'Georgia', serif;
	~~to {~~		font-size: 3em;
	~~transform~~: ~~rotate(360deg)~~;		line-height: 1;
	}		font-weight: bold;
	}		}

SomebodyRum at 20:08, 13 April 2026

2026-04-13T20:08:12Z

Show changes

SomebodyRum at 20:55, 12 April 2026

2026-04-12T20:55:24Z

Show changes

SomebodyRum at 20:29, 12 April 2026

2026-04-12T20:29:44Z

Show changes

SomebodyRum at 16:01, 12 April 2026

2026-04-12T16:01:07Z

Show changes

SomebodyRum at 15:27, 12 April 2026

2026-04-12T15:27:48Z

Show changes