fistmas 2022: lights: add

files/events/assets/css/blizzard.css

@@ -256,25 +256,30 @@ textarea, input[type=textbox], input[type=search] {
     cursor: url(/assets/images/event/pointer.png), auto !important;
 }
 
-.navbar:after {
-    content: "";
-    background-image: url('/assets/images/event/lights.png');
-    position: fixed;
-    top: 60px;
-    left: 0;
-    width: 100%;
-    height: 74px;
-    /* Prevents clicks, to simulate an "overlay", see @nekobit's CSS */
-    pointer-events: none;
-    background-repeat: repeat-x;
-    background-size: 220px 70px;
-}
+/* lights */
 
-@media (max-width: 767.98px) {
-    .navbar:after {
-        top: 40px;
-    }
-}
+.navbar::after, .lights::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 57px;
+	width: 100%;
+	background: url(https://i.imgur.com/Lhfdgx5.png);
+	animation: lights 1s infinite steps(2);
+	pointer-events: none;
+  }
+  
+  @keyframes lights {
+	0% {
+	  /*Two zeros, not one !!*/
+	  /*[0] is equivalent to [0 50%] and will create a different animation */
+	  background-position: 0 0;
+	}
+	100% {
+	  background-position: 0 -138px;
+	}
+  }
 
 /* snowcaps */