krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(gem icon in menu): add hover animation

Browse Source
This commit is contained in:
Matteo Pagliazzi
2020-09-22 15:53:05 +02:00
parent 58a73dd62a
commit 74428d0727
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
website/client/src/components/header/menu.vue
View File

@@ -679,8 +679,31 @@ body.modal-open #habitica-menu {
margin-left: 24px; margin-left: 24px;
} }
@keyframes rotateGemColors {
/* Gems are green by default, so we rotate through ROYGBIV starting with green. */
20% {
fill: #46A7D9; /* Blue */
}
40% {
fill: #925CF3; /* Purple */
}
60% {
fill: #DE3F3F; /* Red */
}
80% {
fill: #FA8537; /* Orange */
}
100% {
fill: #FFB445; /* Yellow */
}
}
.gem:hover { .gem:hover {
cursor: pointer; cursor: pointer;
& ::v-deep path:nth-child(1) {
animation: rotateGemColors 3s linear infinite alternate;
}
} }
.message-count { .message-count {