Template:Grid/Crafting Table/Styles.css: Difference between revisions

From I-Pixelmon
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 3: Line 3:
}
}


/* Animation for rotating slot ingredients */
.slot-frame {
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 32px;
  opacity: 0;
  visibility: hidden;
  animation-name: slot-cycle;
  animation-timing-function: step-start;
  animation-iteration-count: infinite;
}
/* If only one frame (static), override to show it without animation */
/* If only one frame (static), override to show it without animation */
.slot-static {
.slot-static {
Line 20: Line 9:
   animation: none !important;
   animation: none !important;
}
}
/* Keyframes for cycling slot images (each frame visible 4s) */
/* ───────── animated tag-slot frames ───────── */
@keyframes slot-cycle {
.slot-frame{
   0% { opacity:1; visibility:visible; }
  position:absolute;
   49.999% { opacity:1; visibility:visible; }
  top:0; left:0;
   50% { opacity:0; visibility:hidden; }
  width:32px; height:32px;
   100% { opacity:0; visibility:hidden; }
  opacity:0; visibility:hidden;
  animation-name:slot-cycle;
  animation-timing-function:step-start;
  animation-iteration-count:infinite;
}
 
@keyframes slot-cycle{
   0%     {opacity:1; visibility:visible;}
   49.999% {opacity:1; visibility:visible;}
   50%     {opacity:0; visibility:hidden;}
   100%   {opacity:0; visibility:hidden;}
}
}

Latest revision as of 22:55, 15 June 2025

.craft-grid p {
  margin: 0;
}

/* If only one frame (static), override to show it without animation */
.slot-static {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}
/* ───────── animated tag-slot frames ───────── */
.slot-frame{
  position:absolute;
  top:0; left:0;
  width:32px; height:32px;
  opacity:0; visibility:hidden;
  animation-name:slot-cycle;
  animation-timing-function:step-start;
  animation-iteration-count:infinite;
}

@keyframes slot-cycle{
  0%      {opacity:1; visibility:visible;}
  49.999% {opacity:1; visibility:visible;}
  50%     {opacity:0; visibility:hidden;}
  100%    {opacity:0; visibility:hidden;}
}