From 92320f80e0aaac44f9aef163bc570a471dc75248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Sun, 24 Dec 2023 02:07:20 +0100
Subject: [PATCH] Added bell animation

---
 TangerineUI-cherry.css | 21 +++++++++++++++++++++
 TangerineUI-purple.css | 21 +++++++++++++++++++++
 TangerineUI.css        | 21 +++++++++++++++++++++
 3 files changed, 63 insertions(+)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index a56fcfc..5828c42 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -4454,6 +4454,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-bg);
     color: var(--color-accent);
 }
+@keyframes bell-ring {
+    0% {
+        transform: rotate(0);
+    }
+    40% {
+        transform: rotate(15deg);
+    }
+    70% {
+        transform: rotate(-15deg);
+    }
+    100% {
+        transform: rotate(0);
+    }
+}
+.app-body .account__header__tabs__buttons .icon-button.active .icon-bell {
+    animation: bell-ring .4s ease-in 1;
+    transform-origin: top center;
+}
+.app-body .account__header__tabs__buttons .icon-button.active:is(:active, :focus) {
+    background-color: var(--color-content-secondary-bg);
+}
 .app-body .language-dropdown__dropdown {
     background-color: var(--color-content-bg);
     border-radius: 8px;
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index f0347d0..6e72855 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -4454,6 +4454,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-bg);
     color: var(--color-accent);
 }
+@keyframes bell-ring {
+    0% {
+        transform: rotate(0);
+    }
+    40% {
+        transform: rotate(15deg);
+    }
+    70% {
+        transform: rotate(-15deg);
+    }
+    100% {
+        transform: rotate(0);
+    }
+}
+.app-body .account__header__tabs__buttons .icon-button.active .icon-bell {
+    animation: bell-ring .4s ease-in 1;
+    transform-origin: top center;
+}
+.app-body .account__header__tabs__buttons .icon-button.active:is(:active, :focus) {
+    background-color: var(--color-content-secondary-bg);
+}
 .app-body .language-dropdown__dropdown {
     background-color: var(--color-content-bg);
     border-radius: 8px;
diff --git a/TangerineUI.css b/TangerineUI.css
index ecaba91..f14a286 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -4455,6 +4455,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-color: var(--color-accent-bg);
     color: var(--color-accent);
 }
+@keyframes bell-ring {
+    0% {
+        transform: rotate(0);
+    }
+    40% {
+        transform: rotate(15deg);
+    }
+    70% {
+        transform: rotate(-15deg);
+    }
+    100% {
+        transform: rotate(0);
+    }
+}
+.app-body .account__header__tabs__buttons .icon-button.active .icon-bell {
+    animation: bell-ring .4s ease-in 1;
+    transform-origin: top center;
+}
+.app-body .account__header__tabs__buttons .icon-button.active:is(:active, :focus) {
+    background-color: var(--color-content-secondary-bg);
+}
 .app-body .language-dropdown__dropdown {
     background-color: var(--color-content-bg);
     border-radius: 8px;