Template:Stonecutting/styles.css - Revision history

NewAdmin at 04:32, 14 June 2025

2025-06-14T04:32:15Z

← Older revision		Revision as of 04:32, 14 June 2025
Line 1:		Line 1:
			/* layout wrapper */
	.stonecutting-carousel { position:relative; }		.stonecutting-carousel { position:relative; }

	/* ~~default: hidden & ignores pointer events~~ */		/* every frame stacked on top of each other */
	.sc-frame{		.sc-frame{
	position:absolute; top:0; right:0; bottom:0; left:0;		position:absolute; top:0; right:0; bottom:0; left:0;
	opacity:0; visibility:hidden;		opacity:0; visibility:hidden;
	animation-name:sc-cycle;		animation-name:sc-cycle;
	animation-timing-function:~~steps(1)~~;		animation-timing-function:step-start; /* instant flip, no fade */
	animation-iteration-count:infinite;		animation-iteration-count:infinite;
	}		}

	/* ~~frame of a~~ single-recipe ~~carousel – no animation~~ */		/* single-recipe carousels never animate */
	.sc-static{		.sc-static{
	opacity:1 !important;		opacity:1 !important;
Line 17:		Line 18:
	}		}

			/* same key-frames for every invocation
			0-49.999 % → visible
			50-100 % → hidden
			*/
	@keyframes sc-cycle{		@keyframes sc-cycle{
	0% {opacity:1;visibility:visible;}		0% {opacity:1; visibility:visible;}
	49.99%{opacity:1;visibility:visible;}		49.999% {opacity:1; visibility:visible;}
	50% {opacity:0;visibility:hidden;}		50% {opacity:0; visibility:hidden;}
	100% {opacity:0;visibility:hidden;}		100% {opacity:0; visibility:hidden;}
	}		}

			/* slot positioning */
	.sc-slot{		.sc-slot{
	position:absolute;		position:absolute;
	width:32px; height:32px;		width:32px; height:32px;
	}		}

2025-06-14T04:15:12Z

2025-06-14T03:56:01Z

← Older revision		Revision as of 03:56, 14 June 2025
Line 1:		Line 1:
	.stonecutting-carousel { position:relative; }		.stonecutting-carousel { position:relative; }

			/* default: hidden & ignores pointer events */
	.sc-frame{		.sc-frame{
	position:absolute;		position:absolute; top:0; right:0; bottom:0; left:0;
	top:0; right:0; bottom:0; left:0;		opacity:0; visibility:hidden;
	opacity:0;
	visibility:hidden;
	animation-name:sc-cycle;		animation-name:sc-cycle;
	animation-timing-function:steps(1);		animation-timing-function:steps(1);
Line 11:		Line 10:
	}		}

	~~@keyframes sc-cycle{~~		/* frame of a single-recipe carousel – no animation */
	~~0% {opacity:1; visibility:visible;}~~ /* ~~← NOW VISIBLE~~ */		.sc-static{
	49.~~99%~~{opacity:1; ~~visibility:visible;} /* keep visible */~~		opacity:1 !important;
	~~50% {opacity:0;~~ visibility:~~hidden~~;~~} /* hide + ignore pointer */~~		visibility:visible !important;
	~~100% {opacity:0; visibility~~:~~hidden~~;}		animation:none !important;
	}		}

	.sc-slot{		.sc-slot{
	position:absolute;		position:absolute;
	width:32px;		width:32px; height:32px;
	height:32px;
	}		}

2025-06-14T03:04:02Z

← Older revision		Revision as of 03:04, 14 June 2025
Line 5:		Line 5:
	top:0; right:0; bottom:0; left:0;		top:0; right:0; bottom:0; left:0;
	opacity:0;		opacity:0;
	visibility:hidden; ~~/* ← NEW */~~		visibility:hidden;
	animation-name:sc-cycle;		animation-name:sc-cycle;
	animation-timing-function:steps(1);		animation-timing-function:steps(1);

2025-06-14T03:03:56Z

← Older revision		Revision as of 03:03, 14 June 2025
Line 13:		Line 13:
	@keyframes sc-cycle{		@keyframes sc-cycle{
	0% {opacity:1; visibility:visible;} /* ← NOW VISIBLE */		0% {opacity:1; visibility:visible;} /* ← NOW VISIBLE */
	99.99%{opacity:1; visibility:visible;} /* keep visible */		49.99%{opacity:1; visibility:visible;} /* keep visible */
	~~100~~% {opacity:0; visibility:hidden;} /* hide + ignore pointer */		50% {opacity:0; visibility:hidden;} /* hide + ignore pointer */
	100% {opacity:0; visibility:hidden;}		100% {opacity:0; visibility:hidden;}
	}		}

2025-06-14T03:03:09Z

← Older revision		Revision as of 03:03, 14 June 2025
Line 13:		Line 13:
	@keyframes sc-cycle{		@keyframes sc-cycle{
	0% {opacity:1; visibility:visible;} /* ← NOW VISIBLE */		0% {opacity:1; visibility:visible;} /* ← NOW VISIBLE */
	49.99%{opacity:1; visibility:visible;} /* keep visible */		99.99%{opacity:1; visibility:visible;} /* keep visible */
	50% {opacity:0; visibility:hidden;} /* hide + ignore pointer */		100% {opacity:0; visibility:hidden;} /* hide + ignore pointer */
	100% {opacity:0; visibility:hidden;}		100% {opacity:0; visibility:hidden;}
	}		}

2025-06-14T03:01:02Z

← Older revision		Revision as of 03:01, 14 June 2025
Line 3:		Line 3:
	.sc-frame{		.sc-frame{
	position:absolute;		position:absolute;
	top:0; right:0; bottom:0; left:0; ~~/* ← replaces inset:0; */~~		top:0; right:0; bottom:0; left:0;
	opacity:0;		opacity:0;
			visibility:hidden; /* ← NEW */
	animation-name:sc-cycle;		animation-name:sc-cycle;
	animation-timing-function:steps(1);		animation-timing-function:steps(1);
Line 11:		Line 12:

	@keyframes sc-cycle{		@keyframes sc-cycle{
	0% {opacity:1;}		0% {opacity:1; visibility:visible;} /* ← NOW VISIBLE */
	49.99%{opacity:1;}		49.99%{opacity:1; visibility:visible;} /* keep visible */
	50% {opacity:0;}		50% {opacity:0; visibility:hidden;} /* hide + ignore pointer */
	100% {opacity:0;}		100% {opacity:0; visibility:hidden;}
	}		}

2025-06-14T02:49:45Z

← Older revision		Revision as of 02:49, 14 June 2025
Line 1:		Line 1:
	.stonecutting-carousel {		.stonecutting-carousel { position:relative; }
	position: relative;
	}

	~~/* every frame sits on top of each other */~~
	~~.sc-frame {~~
	~~position: absolute;~~
	~~top: 0;~~
	~~right: 0;~~
	~~bottom: 0;~~
	~~left: 0;~~

	~~opacity: 0; /* hidden by default */~~

			.sc-frame{
			position:absolute;
			top:0; right:0; bottom:0; left:0; /* ← replaces inset:0; */
			opacity:0;
			animation-name:sc-cycle;
			animation-timing-function:steps(1);
			animation-iteration-count:infinite;
	}		}

	~~/* instant on/off – no cross-fade */~~		@keyframes sc-cycle{
	@keyframes sc-cycle {		0% {opacity:1;}
	0% { opacity: 1; } ~~/* visible for the first step-interval */~~		49.99%{opacity:1;}
	99% { opacity: 1; } ~~/* stays visible until its time slot ends */~~		50% {opacity:0;}
	100% { opacity: 0; } ~~/* then snaps off */~~		100% {opacity:0;}

	}		}

	~~/* slots are placed absolutely by the Lua module */~~		.sc-slot{
	.sc-slot {		position:absolute;
	position: absolute;		width:32px;
	width: 32px;		height:32px;
	height: 32px;
	}		}

2025-06-14T02:48:40Z

← Older revision		Revision as of 02:48, 14 June 2025
Line 12:		Line 12:

	opacity: 0; /* hidden by default */		opacity: 0; /* hidden by default */
	~~animation: sc-cycle 12s steps(1) infinite;~~
	~~/* 12 s = 3 frames × 4 s each; adjust if you add more frames + delays */~~
	}		}

2025-06-14T02:47:34Z

← Older revision		Revision as of 02:47, 14 June 2025
Line 19:		Line 19:
	@keyframes sc-cycle {		@keyframes sc-cycle {
	0% { opacity: 1; } /* visible for the first step-interval */		0% { opacity: 1; } /* visible for the first step-interval */
	33% { opacity: 1; } /* stays visible until its time slot ends */		99% { opacity: 1; } /* stays visible until its time slot ends */
	34% { opacity: 0; } /* then snaps off */		100% { opacity: 0; } /* then snaps off */
	~~100% { opacity: 0; } /* stays hidden while the other frames show */~~
	}		}