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

Revision as of 03:56, 14 June 2025

.stonecutting-carousel { position:relative; }

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

/* frame of a single-recipe carousel – no animation */
.sc-static{
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
}

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