Claudio Ortolina
87 lines
1.8 KiB
CSS
87 lines
1.8 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 &);
|
|
|
|
/* Make LiveView wrapper divs transparent for layout */
|
|
[data-phx-session],
|
|
[data-phx-teleported-src] {
|
|
display: contents;
|
|
}
|
|
|
|
@layer base {
|
|
a,
|
|
button,
|
|
[role="button"],
|
|
input,
|
|
select,
|
|
textarea,
|
|
label {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@theme {
|
|
--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 linear 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% {
|
|
background-position: 200% center;
|
|
}
|
|
100% {
|
|
background-position: -200% center;
|
|
}
|
|
}
|
|
|
|
@keyframes equalizer-bar {
|
|
0%,
|
|
100% {
|
|
height: 20%;
|
|
}
|
|
50% {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|