@duskmoon-dev/css-art 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/art/atom.css +184 -0
- package/dist/art/eclipse.css +79 -0
- package/dist/art/index.css +1271 -0
- package/dist/art/moon.css +89 -0
- package/dist/art/mountain.css +112 -0
- package/dist/art/plasma-ball.css +662 -0
- package/dist/art/snow.css +38 -0
- package/dist/art/sun.css +99 -0
- package/dist/index.css +1281 -0
- package/dist/index.min.css +1 -0
- package/package.json +60 -0
package/dist/art/sun.css
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
@layer css-art {
|
|
2
|
+
.art-sun {
|
|
3
|
+
--art-sun-size: 8rem;
|
|
4
|
+
--art-sun-color: oklch(85% 0.18 85);
|
|
5
|
+
--art-sun-corona: oklch(90% 0.15 75);
|
|
6
|
+
--art-sun-glow: oklch(90% 0.12 80 / 0.4);
|
|
7
|
+
|
|
8
|
+
position: relative;
|
|
9
|
+
width: var(--art-sun-size);
|
|
10
|
+
height: var(--art-sun-size);
|
|
11
|
+
border-radius: 50%;
|
|
12
|
+
background: radial-gradient(
|
|
13
|
+
circle at 40% 40%,
|
|
14
|
+
oklch(95% 0.12 90) 0%,
|
|
15
|
+
var(--art-sun-color) 50%,
|
|
16
|
+
var(--art-sun-corona) 100%
|
|
17
|
+
);
|
|
18
|
+
box-shadow:
|
|
19
|
+
0 0 calc(var(--art-sun-size) * 0.2) var(--art-sun-glow),
|
|
20
|
+
0 0 calc(var(--art-sun-size) * 0.5) var(--art-sun-glow),
|
|
21
|
+
0 0 calc(var(--art-sun-size) * 0.8) oklch(90% 0.1 80 / 0.15);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Rays using pseudo-elements */
|
|
25
|
+
.art-sun-rays::before,
|
|
26
|
+
.art-sun-rays::after {
|
|
27
|
+
content: '';
|
|
28
|
+
position: absolute;
|
|
29
|
+
top: 50%;
|
|
30
|
+
left: 50%;
|
|
31
|
+
width: 140%;
|
|
32
|
+
height: 140%;
|
|
33
|
+
transform: translate(-50%, -50%);
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.art-sun-rays::before {
|
|
38
|
+
background: repeating-conic-gradient(
|
|
39
|
+
from 0deg,
|
|
40
|
+
oklch(90% 0.14 85 / 0.3) 0deg 5deg,
|
|
41
|
+
transparent 5deg 30deg
|
|
42
|
+
);
|
|
43
|
+
animation: art-sun-rotate 30s linear infinite;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.art-sun-rays::after {
|
|
47
|
+
background: repeating-conic-gradient(
|
|
48
|
+
from 15deg,
|
|
49
|
+
oklch(90% 0.14 85 / 0.15) 0deg 3deg,
|
|
50
|
+
transparent 3deg 30deg
|
|
51
|
+
);
|
|
52
|
+
animation: art-sun-rotate 45s linear infinite reverse;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@keyframes art-sun-rotate {
|
|
56
|
+
from { transform: translate(-50%, -50%) rotate(0deg); }
|
|
57
|
+
to { transform: translate(-50%, -50%) rotate(360deg); }
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Sunset variant — warmer, redder tones */
|
|
61
|
+
.art-sun-sunset {
|
|
62
|
+
--art-sun-color: oklch(75% 0.2 40);
|
|
63
|
+
--art-sun-corona: oklch(70% 0.22 30);
|
|
64
|
+
--art-sun-glow: oklch(80% 0.18 40 / 0.4);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Size variants */
|
|
68
|
+
.art-sun-sm {
|
|
69
|
+
--art-sun-size: 4rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.art-sun-lg {
|
|
73
|
+
--art-sun-size: 12rem;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.art-sun-xl {
|
|
77
|
+
--art-sun-size: 16rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Animated pulse */
|
|
81
|
+
.art-sun-pulse {
|
|
82
|
+
animation: art-sun-breathe 3s ease-in-out infinite;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@keyframes art-sun-breathe {
|
|
86
|
+
0%, 100% {
|
|
87
|
+
box-shadow:
|
|
88
|
+
0 0 calc(var(--art-sun-size) * 0.2) var(--art-sun-glow),
|
|
89
|
+
0 0 calc(var(--art-sun-size) * 0.5) var(--art-sun-glow),
|
|
90
|
+
0 0 calc(var(--art-sun-size) * 0.8) oklch(90% 0.1 80 / 0.15);
|
|
91
|
+
}
|
|
92
|
+
50% {
|
|
93
|
+
box-shadow:
|
|
94
|
+
0 0 calc(var(--art-sun-size) * 0.3) var(--art-sun-glow),
|
|
95
|
+
0 0 calc(var(--art-sun-size) * 0.6) var(--art-sun-glow),
|
|
96
|
+
0 0 calc(var(--art-sun-size) * 1) oklch(90% 0.1 80 / 0.2);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|