Template:Stonecutting/styles.css: Difference between revisions

From I-Pixelmon
Jump to navigation Jump to search
No edit summary
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
.stonecutting-carousel {
/* layout wrapper */
   position: relative;
.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;
}
}


/* every frame sits on top of each other */
/* single-recipe carousels never animate */
.sc-frame {
.sc-static{
   position: absolute;
   opacity:1 !important;
  top: 0;
   visibility:visible !important;
  right: 0;
   animation:none !important;
   bottom: 0;
  left: 0;
 
  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    */
}
}


/* delay offsets for the first three frames ─ add more if you need them */
/* same key-frames for every invocation
.sc-frame:nth-child(1) { animation-delay: 0s;  }
  0-49.999 % → visible
.sc-frame:nth-child(2) { animation-delay: 4s; }
  50-100 %    → hidden
.sc-frame:nth-child(3) { animation-delay: 8s;  }
*/
 
@keyframes sc-cycle{
/* instant on/off – no cross-fade */
   0%     {opacity:1; visibility:visible;}
@keyframes sc-cycle {
   49.999% {opacity:1; visibility:visible;}
   0%   { opacity: 1; }   /* visible for the first step-interval      */
   50%     {opacity:0; visibility:hidden;}
   33% { opacity: 1; }   /* stays visible until its time slot ends    */
   100%   {opacity:0; visibility:hidden;}
   34% { opacity: 0; }   /* then snaps off                          */
   100% { opacity: 0; }   /* stays hidden while the other frames show */
}
}


/* slots are placed absolutely by the Lua module */
/* slot positioning */
.sc-slot {
.sc-slot{
   position: absolute;
   position:absolute;
   width: 32px;
   width:32px; height: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;
}
Retrieved from "http://pixelmonwiki.snowbirdmv.com/index.php?title=Template:Stonecutting/styles.css&oldid=52324"