Template:Stonecutting/styles.css

From I-Pixelmon
Revision as of 21:14, 13 June 2025 by NewAdmin (talk | contribs) (Created page with ".stonecutting-carousel { position: relative; } .sc-frame { position: absolute; top: 0; →‎instead of inset:0: right: 0; bottom: 0; left: 0; opacity: 0; animation: sc-cycle 12s linear infinite; } .sc-frame:nth-child(1) { animation-delay: 0s; } .sc-frame:nth-child(2) { animation-delay: 4s; } .sc-frame:nth-child(3) { animation-delay: 8s; } →‎add more nth-child rules if you expect >3 outputs: @keyframes sc-cycle { 0%,20% { opacity: 1; } 30%...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
.stonecutting-carousel {
  position: relative;
}

.sc-frame {
  position: absolute;
  top: 0;     /* instead of inset:0 */
  right: 0;
  bottom: 0;
  left: 0;

  opacity: 0;
  animation: sc-cycle 12s linear infinite;
}

.sc-frame:nth-child(1) { animation-delay: 0s; }
.sc-frame:nth-child(2) { animation-delay: 4s; }
.sc-frame:nth-child(3) { animation-delay: 8s; }
/* add more nth-child rules if you expect >3 outputs */

@keyframes sc-cycle {
  0%,20%   { opacity: 1; }
  30%,100% { opacity: 0; }
}

/* slot coordinates are set in the Lua module */
.sc-slot {
  position: absolute;
  width: 32px;
  height: 32px;
}