feat: highlight new optimized items with background color tint animation

Author: civilblur

assets/css/style.css

@@ -1006,6 +1006,7 @@ body:not(.subpage--output):not(.subpage--settings) .image-options-container {
 }
 
 .image-output__item {
+  position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -1018,6 +1019,18 @@ body:not(.subpage--output):not(.subpage--settings) .image-options-container {
   overflow: hidden;
 }
 
+.image-output__item-tint {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-color: var(--color-primary);
+  opacity: 0;
+}
+
 .image-output__item-thumbnail {
   width: 70px;
   height: 70px;
@@ -1606,6 +1619,18 @@ body:not(.compressing--is-active) .drop-zone.drop-zone--is-dragging .drop-zone__
   }
 }
 
+@keyframes fade-tint-in-out {
+	0% {
+    opacity: 0;
+  }
+	50% {
+    opacity: 0.25;
+  }
+	100% {
+    opacity: 0;
+  }
+}
+
 
 /****************************************************
  *  Media queries
@@ -2283,6 +2308,10 @@ body:not(.compressing--is-active) .drop-zone.drop-zone--is-dragging .drop-zone__
   animation: fade-out-shrink var(--duration-600) ease-in-out forwards;
 }
 
+.fade-tint-in-out {
+  animation: fade-tint-in-out var(--duration-1400) ease-in-out forwards;
+}
+
 .mask-b {
   mask-repeat: no-repeat;
   mask-image: linear-gradient(#fff, #0000);

assets/js/helpers.js

@@ -21,6 +21,7 @@ function buildOutputItemHTML({
   const itemId = Math.random().toString(36).substring(2, 6).toUpperCase();
   return `
     <div id="output_item__${itemId}" class="image-output__item file-format--${outputFileExtension} fade-in-up" data-elevation="3">
+      <div class="image-output__item-tint fade-tint-in-out"></div>
       <img src="${thumbnailDataURL}" class="image-output__item-thumbnail" loading="lazy">
       <div class="image-output__item-text">
         <div class="image-output__item-filename">