Template:Stonecutting/styles.css: Difference between revisions

Revision as of 02:49, 14 June 2025

.stonecutting-carousel { position:relative; }

.sc-frame{
  position:absolute;
  top:0; right:0; bottom:0; left:0;   /* ← replaces inset:0; */
  opacity:0;
  animation-name:sc-cycle;
  animation-timing-function:steps(1);
  animation-iteration-count:infinite;
}

@keyframes sc-cycle{
  0%   {opacity:1;}
  49.99%{opacity:1;}
  50%  {opacity:0;}
  100% {opacity:0;}
}

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

@@ Line 1: / Line 1: @@
-.stonecutting-carousel {
+.stonecutting-carousel { position:relative; }
-  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 */
+.sc-frame{
+  position:absolute;
+  top:0; right:0; bottom:0; left:0;   /* ← replaces inset:0; */
+  opacity:0;
+  animation-name:sc-cycle;
+  animation-timing-function:steps(1);
+  animation-iteration-count:infinite;
 }
-/* instant on/off – no cross-fade */
+@keyframes sc-cycle{
-@keyframes sc-cycle {
+%   {opacity:1;}
-%   { opacity: 1; }   /* visible for the first step-interval       */
+.99%{opacity:1;}
-%  { opacity: 1; }   /* stays visible until its time slot ends    */
+%  {opacity:0;}
-%  { opacity: 0; }   /* then snaps off                           */
+% {opacity:0;}
 }
-/* slots are placed absolutely by the Lua module */
+.sc-slot{
-.sc-slot {
+   position:absolute;
-   position: absolute;
+   width:32px;
-   width: 32px;
+   height:32px;
-   height: 32px;
 }

Template:Stonecutting/styles.css: Difference between revisions

Revision as of 02:49, 14 June 2025

Navigation menu