Claudio Ortolina
102 lines
2.1 KiB
CSS
102 lines
2.1 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 {
|
|
html, body {
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
button:not(:disabled),
|
|
[role="button"]:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Pull-to-search indicator */
|
|
.ptr--ptr {
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ptr--box {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.ptr--icon,
|
|
.ptr--text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ptr--text {
|
|
display: none;
|
|
}
|
|
|
|
.ptr-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--color-zinc-400);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.ptr--release .ptr-icon {
|
|
color: var(--color-zinc-700);
|
|
}
|
|
}
|
|
|
|
@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;
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|