Template:Stonecutting/styles.css: Difference between revisions

From I-Pixelmon
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; }


/* 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;
}
}

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;
}