Add a nice cooldown animation for the 'Reveal Players' text

Author: miredirex

Code/skyrim_ui/src/app/components/root/root.component.html

@@ -48,13 +48,24 @@
         >
           {{ 'COMPONENT.ROOT.PLAYER_MANAGER' | transloco }}
         </button>
-        <button 
-          data-style-ornament="inverted" 
-          (click)="revealPlayers()"
-          [disabled]="revealingInProgress$"
-          [class.reveal-disabled]="revealingInProgress$"
-        >
-          {{ 'COMPONENT.ROOT.REVEAL_PLAYERS' | transloco }}
+        <button data-style-ornament="inverted" (click)="revealPlayers()">
+          <!-- See note in 'root.component.scss' for explanation -->
+          <div style="position: relative;">
+            <span
+              class="cooldown-supporting-text-normal"
+              [class.cooldown-supporting-text-animating]="revealingInProgress$"
+            >
+              {{ 'COMPONENT.ROOT.REVEAL_PLAYERS' | transloco }}
+            </span>
+            <span 
+              style="position: absolute; left: 0; top: 0;"
+              class="text-cooldown-effect" 
+              [class.cooldown-active]="revealingInProgress$"
+              [style.--cooldown-duration]="revealingInProgress$ ? '6s' : '0.3s'"
+            >
+              {{ 'COMPONENT.ROOT.REVEAL_PLAYERS' | transloco }}
+            </span>
+          </div>
         </button>
       </ng-container>
       <button

Code/skyrim_ui/src/app/components/root/root.component.scss

@@ -132,6 +132,33 @@
   }
 }
 
-.reveal-disabled {
-  opacity: 0.25;
+// Note: due to how `-webkit-background-clip` renders clipped text (that's needed for 
+// the cooldown effect), we need to apply a few workarounds to make it look just right. I'm sorry!
+
+.cooldown-supporting-text-normal {
+  color: mod($-color-background, 0.8);
+  transition: color 0.3s linear;
+}
+
+.cooldown-supporting-text-animating {
+  color: mod($-color-background, 0.3);
+}
+
+.text-cooldown-effect {
+  --cooldown-duration: 6s;
+  background: linear-gradient(
+    to left, 
+    mod($-color-background, 0.3) 50%, 
+    mod($-color-background, 1) 50%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  transition: background-position var(--cooldown-duration) linear;
+  color: transparent;
+  background-size: 200%;
+  background-position: 0%;
+
+  &.cooldown-active {
+    background-position: 100%;
+  }
 }