chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added bell animation

Browse source
This commit is contained in:
Niléane 2023-12-24 02:07:20 +01:00
commit 92320f80e0
No known key found for this signature in database
3 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

21
TangerineUI-cherry.css
View file

@ -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;

21
TangerineUI-purple.css
View file

@ -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;

21
TangerineUI.css
View file

@ -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;