YannAhlgrim
39 lines
894 B
CSS
39 lines
894 B
CSS
@import "tailwindcss";
|
|
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900;
|
|
@apply min-h-screen;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.record-button {
|
|
@apply relative overflow-hidden;
|
|
@apply transition-all duration-300 ease-in-out;
|
|
@apply transform hover:scale-105 active:scale-95;
|
|
@apply shadow-2xl;
|
|
}
|
|
|
|
.record-button::before {
|
|
content: '';
|
|
@apply absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent;
|
|
@apply opacity-0 translate-x-[-100%];
|
|
@apply transition-all duration-700;
|
|
}
|
|
|
|
.record-button:hover::before {
|
|
@apply opacity-20 translate-x-[100%];
|
|
}
|
|
|
|
.audio-visualizer {
|
|
@apply relative overflow-hidden rounded-xl;
|
|
}
|
|
|
|
.audio-visualizer::after {
|
|
content: '';
|
|
@apply absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20;
|
|
@apply animate-pulse;
|
|
}
|
|
} |