Template:Stonecutting/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* layout wrapper */ | |||
.stonecutting-carousel { position:relative; } | .stonecutting-carousel { position:relative; } | ||
/* | /* 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: | animation-timing-function:step-start; /* instant flip, no fade */ | ||
animation-iteration-count:infinite; | animation-iteration-count:infinite; | ||
} | } | ||
/* | /* 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% | 0% {opacity:1; visibility:visible;} | ||
49. | 49.999% {opacity:1; visibility:visible;} | ||
50% | 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; | ||
} | } | ||
Latest revision as of 04:32, 14 June 2025
/* layout wrapper */
.stonecutting-carousel { position:relative; }
/* every frame stacked on top of each other */
.sc-frame{
position:absolute; top:0; right:0; bottom:0; left:0;
opacity:0; visibility:hidden;
animation-name:sc-cycle;
animation-timing-function:step-start; /* instant flip, no fade */
animation-iteration-count:infinite;
}
/* single-recipe carousels never animate */
.sc-static{
opacity:1 !important;
visibility:visible !important;
animation:none !important;
}
/* same key-frames for every invocation
0-49.999 % → visible
50-100 % → hidden
*/
@keyframes sc-cycle{
0% {opacity:1; visibility:visible;}
49.999% {opacity:1; visibility:visible;}
50% {opacity:0; visibility:hidden;}
100% {opacity:0; visibility:hidden;}
}
/* slot positioning */
.sc-slot{
position:absolute;
width:32px; height:32px;
}