Template:Stonecutting/styles.css: Difference between revisions

Revision as of 21:33, 13 June 2025

.stonecutting-carousel {
  position: relative;
}

/* every frame sits on top of each other */
.sc-frame {
  position: absolute;
  top: 0;
  right: 0;
  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 */
.sc-frame:nth-child(1) { animation-delay: 0s;  }
.sc-frame:nth-child(2) { animation-delay: 4s;  }
.sc-frame:nth-child(3) { animation-delay: 8s;  }

/* instant on/off – no cross-fade */
@keyframes sc-cycle {
  0%   { opacity: 1; }   /* visible for the first step-interval       */
  33%  { opacity: 1; }   /* stays visible until its time slot ends    */
  34%  { opacity: 0; }   /* then snaps off                           */
  100% { opacity: 0; }   /* stays hidden while the other frames show */
}

/* slots are placed absolutely by the Lua module */
.sc-slot {
  position: absolute;
  width: 32px;
  height: 32px;
}