css animations are not stopped when window is out of focus

src/renderer/index.js

@@ -3270,11 +3270,13 @@ const app = new Vue({
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {
                     el.play()
                 })
+                document.querySelector("body").classList.remove("stopanimation")
                 this.animateBackground = true
             } else {
                 document.querySelectorAll(".animated-artwork-video").forEach(el => {
                     el.pause()
                 })
+                document.querySelector("body").classList.add("stopanimation")
                 this.animateBackground = false
             }
         },

src/renderer/style.less

@@ -83,6 +83,10 @@ body.notransparency::before {
   background-image: url(data:image/png;base64,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);
 }
 
+body.stopanimation * {
+  animation: unset !important;
+}
+
 *,
 *:before,
 *:after {
@@ -159,6 +163,7 @@ body.notransparency::before {
       z-index: 1;
     }
   }
+
   //&::before {
   //  position: absolute;
   //  top: -50%;
@@ -1107,15 +1112,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .app-playback-controls:hover .marquee {
   animation: unset;
+
   &.song-artist {
     overflow: hidden;
   }
+
   .song-artist {
     overflow: hidden;
   }
+
   &.song-name {
     overflow: hidden;
   }
+
   &::after {
     content: none !important;
     display: none;
@@ -1125,23 +1134,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .marquee {
   animation: marquee 15s linear infinite;
+
   &.song-artist {
     overflow: unset;
   }
+
   .song-artist {
     overflow: unset;
   }
+
   &.song-name {
     overflow: unset;
   }
+
   &::after {
     content: attr(data-value);
   }
 }
 
 
-
-
 .app-chrome .app-chrome-item > .app-playback-controls .song-progress {
   @bgColor: transparent;
   //height: 16px;
@@ -1241,13 +1252,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     &:focus {
       outline: none;
     }
+
     &:hover {
       background: var(--hover);
     }
+
     &:active {
       background: var(--selected-click);
       transform: scale(0.95);
     }
+
     .svg-icon {
       --url: url('views/svg/more.svg') !important;
     }
@@ -1275,6 +1289,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   display: flex;
   position: relative;
 }
+
 .app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album {
   font-weight: 400;
   font-size: 12px;
@@ -1382,7 +1397,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
 
-
   .display--large {
     display: none !important;
   }
@@ -2776,6 +2790,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       top: 0;
       z-index: 2;
     }
+
     .close-btn {
       width: 50px;
       height: 42px;
@@ -2852,7 +2867,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 
-
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;
@@ -3072,6 +3086,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     opacity: 0.7;
   }
 }
+
 // Collection Page
 .collection-page {
   padding-bottom: 128px;
@@ -3264,6 +3279,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
     }
   }
+
   .artist-title {
 
     .artist-play {
@@ -3417,6 +3433,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     padding: 6px;
     display: flex;
     background: rgb(200 200 200 / 10%);
+
     .menu-option-header {
       width: 40px;
       height: 40px;
@@ -3443,6 +3460,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
     }
   }
+
   .menu-panel-body {
     display: flex;
     flex-flow: column;
@@ -3540,6 +3558,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 32px;
     width: 32px;
   }
+
   .infinity {
     content: url("./assets/infinity.svg");
     margin: auto;
@@ -3720,15 +3739,33 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   /* CSS.gg
   */
   @keyframes load-bar {
-    10% {box-shadow: inset 0 -4px 0}
+    10% {
-    20% {box-shadow: inset 0 -10px 0}
+      box-shadow: inset 0 -4px 0
-    30% {box-shadow: inset 0 -12px 0}
+    }
-    40% {box-shadow: inset 0 -8px 0}
+    20% {
-    50% {box-shadow: inset 0 -4px 0}
+      box-shadow: inset 0 -10px 0
-    60% {box-shadow: inset 0 -6px 0}
+    }
-    80% {box-shadow: inset 0 -12px 0}
+    30% {
-    90% {box-shadow: inset 0 -6px 0}
+      box-shadow: inset 0 -12px 0
-    to {box-shadow: inset 0 -2px 0}
+    }
+    40% {
+      box-shadow: inset 0 -8px 0
+    }
+    50% {
+      box-shadow: inset 0 -4px 0
+    }
+    60% {
+      box-shadow: inset 0 -6px 0
+    }
+    80% {
+      box-shadow: inset 0 -12px 0
+    }
+    90% {
+      box-shadow: inset 0 -6px 0
+    }
+    to {
+      box-shadow: inset 0 -2px 0
+    }
   }
 
   .loadbar-sound,
@@ -3740,6 +3777,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 28px;
     box-shadow: inset 0 -12px 0;
   }
+
   .loadbar-sound {
     margin-left: 22px;
     margin-top: -16px;
@@ -3748,16 +3786,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     color: var(--keyColor);
     display: block;
   }
+
   .loadbar-sound::after,
   .loadbar-sound::before {
     content: "";
     position: absolute;
     bottom: 0
   }
+
   .loadbar-sound::before {
     left: -4.5px;
     animation-delay: -2.4s
   }
+
   .loadbar-sound::after {
     right: -4.2px;
     animation-delay: -3.7s
@@ -5105,6 +5146,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       z-index: 3;
       opacity: 0;
       padding: 3%;
+
       &:hover {
         opacity: 1;
       }
@@ -5250,6 +5292,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 300px;
   display: flex;
   align-items: center;
+
   .grid-body {
     display: grid;
     grid-auto-flow: column dense;
@@ -5286,6 +5329,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     font-size: 1.0em;
     background: rgb(255 255 255 / 3%);
   }
+
   .settings-option-body {
     margin: 16px;
   }
@@ -5799,6 +5843,7 @@ body.no-gpu {
         }
       }
     }
+
     .modal-content {
       display: block;
 
@@ -5812,12 +5857,14 @@ body.no-gpu {
         justify-items: center;
         font-size: 0.7em;
       }
+
       .input-container.mini {
         display: inline-grid;
         width: 43px;
         justify-items: center;
         font-size: 0.7em;
       }
+
       .freq-header {
         margin-bottom: 2px;
       }
@@ -5827,14 +5874,17 @@ body.no-gpu {
         margin-left: 25%;
         text-align: center;
       }
+
       input.eq-slider {
         -webkit-appearance: slider-vertical;
         width: 5%;
       }
+
       input[type="number"] {
         padding: unset;
         width: 55px;
       }
+
       .header input.eq-slider {
         -webkit-appearance: slider-vertical;
         width: 5%;