From 5b813d4780fb2d6b9a99ab618557b23589915e24 Mon Sep 17 00:00:00 2001
From: Tanvir <tanvir.ahmed.tonoy@proton.me>
Date: Tue, 16 Jul 2024 15:42:43 +0600
Subject: [PATCH] sidebery: add audio animation in audio playing tabs

---
 addons/sidebery-styles.css | 23 +++++++++++++++++++++++
 readme.md                  |  1 +
 2 files changed, 24 insertions(+)

diff --git a/addons/sidebery-styles.css b/addons/sidebery-styles.css
index 086b51a..d6bebb3 100644
--- a/addons/sidebery-styles.css
+++ b/addons/sidebery-styles.css
@@ -64,6 +64,29 @@
   --toolbar-bg: #202020;
 }
 
+/* Add animation to icon shown when playing audio in a tab */
+.Tab .-loud {
+  animation: audio-animation 1.2s infinite ease-in-out;
+}
+
+@keyframes audio-animation {
+  0% {
+    transform: scale(0.9);
+  }
+  25% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(0.9);
+  }
+}
+
 /* Based on: https://raw.githubusercontent.com/mgastonportillo/gale-for-ff/main/sidebery.css */
 #root {
   --tabs-height: 34px;
diff --git a/readme.md b/readme.md
index 42a6dd6..f6f7b68 100644
--- a/readme.md
+++ b/readme.md
@@ -36,6 +36,7 @@ My tailor-fitted, highly customized, and advanced [Firefox](https://www.mozilla.
 - Compact about:config list
 - Compact items and menus (e.g., context menu)
 - Various sidebar (Sidebery, Tree Style Tab) tweaks, including auto-hide
+- Animations in tabs that's playing audio
 - Consistent and matching colors across various elements and the UI
 - Glow and scale effect on hover on toolbar buttons
 - Findbar as floating box at the top