cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve shine animations

Browse Source
This commit is contained in:
Claudio Ortolina
2026-05-07 14:19:42 +01:00
parent c6115f05f9
commit 10a24da49c
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+5 -8
View File
@@ -42,7 +42,7 @@
--font-sans: "InterVariable", sans-serif;
--font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
--animate-shine: shine 3s ease infinite;
--animate-shine: shine 3s linear infinite;
--animate-equalizer-bar: equalizer-bar 1.2s ease-in-out infinite;
@keyframes shake {
@@ -66,14 +66,11 @@
}
@keyframes shine {
0%,
100% {
background-size: 100% 100%;
background-position: left center;
0% {
background-position: 200% center;
}
50% {
background-size: 200% 200%;
background-position: right center;
100% {
background-position: -200% center;
}
}
lib/music_library_web/components/stats_components.ex
+3 -3
View File
@@ -300,7 +300,7 @@ defmodule MusicLibraryWeb.StatsComponents do
:if={@years && same_year?(@years)}
class={[
"text-xs/5",
"animate-shine bg-linear-to-r from-red-500 via-red-200 to-red-700 bg-clip-text font-semibold text-transparent"
"animate-shine bg-linear-to-br from-red-700 via-red-300 to-red-700 bg-clip-text font-semibold text-transparent bg-[length:200%_100%]"
]}
>
{gettext("Today")}
@@ -311,9 +311,9 @@ defmodule MusicLibraryWeb.StatsComponents do
"text-xs/5",
normal_year?(@years) && "text-zinc-500 dark:text-zinc-400",
gold_year?(@years) &&
"animate-shine bg-linear-to-r from-yellow-500 via-yellow-200 to-yellow-700 bg-clip-text font-semibold text-transparent",
"animate-shine bg-linear-to-br from-yellow-700 via-yellow-300 to-yellow-700 bg-clip-text font-semibold text-transparent bg-[length:200%_100%]",
silver_year?(@years) &&
"animate-shine bg-linear-to-r from-gray-500 via-gray-200 to-gray-700 bg-clip-text font-semibold text-transparent"
"animate-shine bg-linear-to-br from-gray-600 via-gray-300 to-gray-600 bg-clip-text font-semibold text-transparent bg-[length:200%_100%]"
]}
>
{ngettext(