Spaces:
Runtime error
Runtime error
| .confetti-holder.svelte-rtt661 { | |
| position: relative; | |
| } | |
| @keyframes svelte-rtt661-rotate { | |
| 0% { | |
| transform: skew(var(--skew)) rotate3d(var(--full-rotation)); | |
| } | |
| 100% { | |
| transform: skew(var(--skew)) rotate3d(var(--rotation-xyz), calc(var(--rotation-deg) + 360deg)); | |
| } | |
| } | |
| @keyframes svelte-rtt661-translate { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 8% { | |
| transform: translateY(calc(var(--translate-y) * 0.95)) translateX(calc(var(--translate-x) * (var(--x-spread) * 0.9))); | |
| opacity: 1; | |
| } | |
| 12% { | |
| transform: translateY(var(--translate-y)) translateX(calc(var(--translate-x) * (var(--x-spread) * 0.95))); | |
| opacity: 1; | |
| } | |
| 16% { | |
| transform: translateY(var(--translate-y)) translateX(calc(var(--translate-x) * var(--x-spread))); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(calc(var(--translate-y) + var(--fall-distance))) translateX(var(--translate-x)); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes svelte-rtt661-no-gravity-translate { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(var(--translate-y)) translateX(var(--translate-x)); | |
| opacity: 0; | |
| } | |
| } | |
| .confetti.svelte-rtt661 { | |
| --translate-y: calc(-200px * var(--translate-y-multiplier)); | |
| --translate-x: calc(200px * var(--translate-x-multiplier)); | |
| position: absolute; | |
| height: calc(var(--size) * var(--scale)); | |
| width: calc(var(--size) * var(--scale)); | |
| animation: svelte-rtt661-translate var(--transition-duration) var(--transition-delay) var(--transition-iteration-count) linear; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .confetti.svelte-rtt661::before { | |
| --full-rotation: var(--rotation-xyz), var(--rotation-deg); | |
| content: ''; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--color); | |
| background-size: contain; | |
| transform: skew(var(--skew)) rotate3d(var(--full-rotation)); | |
| animation: svelte-rtt661-rotate var(--transition-duration) var(--transition-delay) var(--transition-iteration-count) linear; | |
| } | |
| .rounded.svelte-rtt661 .confetti:where(.svelte-rtt661)::before { | |
| border-radius: 50%; | |
| } | |
| .cone.svelte-rtt661 .confetti:where(.svelte-rtt661) { | |
| --translate-x: calc(200px * var(--translate-y-multiplier) * var(--translate-x-multiplier)); | |
| } | |
| .no-gravity.svelte-rtt661 .confetti:where(.svelte-rtt661) { | |
| animation-name: svelte-rtt661-no-gravity-translate; | |
| animation-timing-function: ease-out; | |
| } | |
| @media (prefers-reduced-motion) { | |
| .reduced-motion.svelte-rtt661 .confetti:where(.svelte-rtt661), | |
| .reduced-motion.svelte-rtt661 .confetti:where(.svelte-rtt661)::before { | |
| animation: none; | |
| } | |
| } | |