Packages
phoenix_duskmoon
6.0.9
9.9.2
9.9.1
9.9.0
9.8.0
9.7.1
9.7.0
9.6.4
9.6.3
9.6.2
9.6.1
9.6.0
9.5.4
9.5.3
9.5.2
9.5.1
9.5.0
9.4.3
9.4.2
9.4.1
9.4.0
9.3.0
9.2.0
9.1.4
9.1.3
9.1.1
9.1.1-rc.1
retired
9.0.1
9.0.0-rc.3
9.0.0-rc.2
9.0.0-rc.1
8.0.0
7.2.1
7.2.0
7.1.3
7.1.2
7.1.1
6.3.2
6.3.1
6.3.0
6.2.0
6.1.3
6.1.2
6.1.1
6.1.0
6.0.10
6.0.9
6.0.8
6.0.7
6.0.6
6.0.5
6.0.4
6.0.3
6.0.2
6.0.1
6.0.0
5.2.0-beta.5
5.2.0-beta.4
5.2.0-beta.3
5.2.0-beta.2
5.2.0-beta.1
5.1.0
5.0.6
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
5.0.0
4.6.6
4.6.5
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.2
4.5.1
4.5.0
4.4.4
4.4.3
4.4.2
4.4.1
4.4.0
4.3.2
4.3.1
4.3.0
4.2.0
4.1.1
4.1.0
4.0.0
Duskmoon UI component library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
assets/css/components/eclipse.css
@layer components {
.eclipse {
--bg-color: #09090b;
--r: 600px;
width: var(--r);
height: var(--r);
position: relative;
overflow: hidden;
.layer {
position: absolute;
inset: 0;
}
.layer-1 {
animation: 30s linear rotate infinite;
transform-origin: 66% 40%;
background:
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.46) 3.96%, rgba(69,168,255,0) 8.33%, rgba(69,168,255,0) 8.33%) 69.5% 37.7% / 17.2% 17.2% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,1) 0%, rgba(69,168,255,0) 47.22%) 74.1% 35.6% / 33.6% 36.6% no-repeat;
}
.layer-2 {
animation: 20s linear rotate infinite reverse;
transform-origin: 66% 40%;
background:
radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 20%, var(--bg-color) 29%) 77.4% 33.8% / 40% 40% no-repeat,
repeating-conic-gradient(from 15deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.51) 2.64%, rgba(69,168,255,0) 5.56%, rgba(69,168,255,0) 5.56%) 69.5% 37.7% / 17.2% 17.2% no-repeat;
}
.layer-3 {
animation: 20s linear rotate infinite;
background:
repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 8.1%, rgba(69,168,255,0) 16.67%, rgba(69,168,255,0) 16.67%) 0 0 / 100% 100% no-repeat;
}
.layer-4 {
animation: 40s linear rotate infinite reverse;
background:
repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 2.86%, rgba(69,168,255,0) 5.88%, rgba(69,168,255,0) 5.88%) 0% 0% / 100% 100% no-repeat;
}
.layer-5 {
animation: 40s linear rotate infinite;
background:
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 6.62%, rgba(69,168,255,0) 7.69%, rgba(69,168,255,0) 7.69%) 0% 0% / 100% 100% no-repeat;
}
.layer-6 {
background:
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.27) 0%, rgba(69,168,255,0) 63.54%) 67% 39.3% / 5.8% 5.8% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 40.28%, rgba(255,183,163,0.05) 52.43%, rgba(69,168,255,0) 63.54%) 68% 38.6% / 13% 13% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.55) 0%, rgba(69,168,255,0) 63.54%) 66.9% 39.3% / 3.4% 3.4% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.2) 0%, rgba(69,168,255,0) 66.67%) 70.7% 36.5% / 25.6% 25.6% no-repeat,
radial-gradient(ellipse at 50% 50%, var(--bg-color) 26%, rgba(69,168,255,0) 26.4%) 0% 0% / 100% 100% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(255,212,148,0.04) 0%, rgba(69,168,255,0) 69.79%) 0% 0% / 100% 100% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(255,240,148,0.11) 0%, rgba(69,168,255,0) 52.43%) 0% 0% / 100% 100% no-repeat,
radial-gradient(ellipse at 51% 49%, rgba(69,168,255,0) 23.96%, var(--bg-color) 40.63%) 0% 0% / 100% 100% no-repeat,
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,239,69,0.14) 11.04%, rgba(69,168,255,0) 20%, rgba(69,168,255,0) 20%) 0% 0% / 100% 100% no-repeat,
radial-gradient(ellipse at 52% 48%, rgba(69,168,255,0) 23.96%, var(--bg-color) 34.03%) 0% 0% / 100% 100% no-repeat,
radial-gradient(ellipse at 50% 50%, rgba(255,185,147,0.29) 28%, rgba(69,168,255,0) 30%) 0% 0% / 100% 100% no-repeat;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}