Claudio Ortolina
9775f192a4
Swap the static colored squares on record show pages for an animated equalizer where each bar is tinted with a dominant color, adding a music-themed visual.
75 lines
1.7 KiB
CSS
75 lines
1.7 KiB
CSS
@import "tailwindcss" source(none);
|
|
@source "../css";
|
|
@source "../js";
|
|
@source "../../lib/music_library_web";
|
|
@source "../../deps/fluxon/**/*.*ex";
|
|
@import "../../deps/fluxon/priv/static/theme";
|
|
@source "../../deps/live_toast/lib/**/*.*ex";
|
|
|
|
/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
|
|
The heroicons installation itself is managed by your mix.exs */
|
|
@plugin "../vendor/heroicons";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
|
|
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
|
|
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
|
|
|
|
@layer base {
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--font-sans:
|
|
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
--animate-shine: shine 3s ease infinite;
|
|
--animate-equalizer-bar: equalizer-bar 1.2s ease-in-out infinite;
|
|
|
|
@keyframes shake {
|
|
10%,
|
|
90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
20%,
|
|
80% {
|
|
transform: translate3d(2px, 0, 0);
|
|
}
|
|
30%,
|
|
50%,
|
|
70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
40%,
|
|
60% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes shine {
|
|
0%,
|
|
100% {
|
|
background-size: 100% 100%;
|
|
background-position: left center;
|
|
}
|
|
50% {
|
|
background-size: 200% 200%;
|
|
background-position: right center;
|
|
}
|
|
}
|
|
|
|
@keyframes equalizer-bar {
|
|
0%,
|
|
100% {
|
|
height: 20%;
|
|
}
|
|
50% {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|