90 lines
1.5 KiB
CSS
90 lines
1.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--color-primary: #7c3aed;
|
|
--color-primary-light: #a78bfa;
|
|
--color-primary-dark: #5b21b6;
|
|
--color-accent: #ec4899;
|
|
--color-accent-light: #f9a8d4;
|
|
--color-accent-dark: #be185d;
|
|
--color-bg: #fafafa;
|
|
--color-surface: #f5f3ff;
|
|
--color-text: #1f1f2e;
|
|
--color-text-muted: #6b7280;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-bg: #0f0e17;
|
|
--color-surface: #1a1730;
|
|
--color-text: #fffffe;
|
|
--color-text-muted: #a7a9be;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
@keyframes lila-pop {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
40% {
|
|
transform: scale(1.03);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes lila-shake {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
20% {
|
|
transform: translateX(-3px);
|
|
}
|
|
40% {
|
|
transform: translateX(3px);
|
|
}
|
|
60% {
|
|
transform: translateX(-2px);
|
|
}
|
|
80% {
|
|
transform: translateX(2px);
|
|
}
|
|
}
|
|
|
|
@keyframes lila-confetti {
|
|
0% {
|
|
transform: translate(var(--x0), var(--y0)) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate(var(--x1), var(--y1)) rotate(540deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.lila-pop {
|
|
animation: lila-pop 220ms ease-out;
|
|
}
|
|
|
|
.lila-shake {
|
|
animation: lila-shake 260ms ease-in-out;
|
|
}
|
|
|
|
.lila-confetti-piece {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 12px;
|
|
border-radius: 3px;
|
|
animation: lila-confetti 900ms ease-out forwards;
|
|
will-change: transform, opacity;
|
|
}
|