Template:Stonecutting/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| 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; | position:absolute; top:0; right:0; bottom:0; left:0; | ||
opacity:0; visibility:hidden; | |||
opacity:0; | |||
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{ | |||
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{ | @keyframes sc-cycle{ | ||
0% | 0% {opacity:1; visibility:visible;} | ||
49.999% {opacity:1; visibility:visible;} | |||
50% {opacity:0; visibility:hidden;} | |||
100% | 100% {opacity:0; visibility:hidden;} | ||
} | } | ||
/* slot positioning */ | |||
.sc-slot{ | .sc-slot{ | ||
position:absolute; | position:absolute; | ||
width: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;
}