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;