@howssatoshi/quantumcss 1.7.7 → 1.10.1
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/README.md +1 -1
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +12 -20
- package/examples/analytics-dashboard.html +36 -30
- package/examples/blog-template.html +35 -34
- package/examples/chat-messaging.html +35 -56
- package/examples/email-template.html +22 -30
- package/examples/gaming-template.html +161 -30
- package/examples/images/eric.png +0 -0
- package/examples/index.html +102 -129
- package/examples/kitchen-sink.html +59 -23
- package/examples/music-streaming.html +19 -27
- package/examples/news-template.html +87 -229
- package/examples/portfolio-resume.html +125 -588
- package/examples/shopping/index.html +514 -341
- package/examples/shopping/nova-shop.css +984 -0
- package/examples/starlight.html +9 -8
- package/examples/theme-test.html +0 -15
- package/examples/travel/index.html +185 -28
- package/examples/video-streaming.html +40 -19
- package/package.json +1 -1
- package/src/defaults.js +77 -1
- package/src/generator.js +14 -5
- package/src/starlight.js +0 -4
- package/src/styles/quantum-base.css +192 -18
- package/src/styles/quantum-components.css +147 -136
- package/src/styles/starlight.css +907 -44
package/examples/starlight.html
CHANGED
|
@@ -8,21 +8,22 @@
|
|
|
8
8
|
<script src="../src/starlight.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
body {
|
|
11
|
-
background:
|
|
11
|
+
background: transparent !important;
|
|
12
12
|
min-height: 100vh;
|
|
13
13
|
overflow-x: hidden;
|
|
14
14
|
}
|
|
15
|
+
header, main, section { position: relative; z-index: 1; }
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
html[data-theme="dark"] {
|
|
17
18
|
color: #f1f5f9;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
html[data-theme="light"] {
|
|
21
22
|
background: #f1f5f9 !important;
|
|
22
23
|
color: #1e293b;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
|
-
|
|
26
|
+
html[data-theme="light"] .glass {
|
|
26
27
|
background: rgba(0, 0, 0, 0.03) !important;
|
|
27
28
|
border-color: rgba(0, 0, 0, 0.1) !important;
|
|
28
29
|
color: #1e293b !important;
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
height: 50%;
|
|
37
38
|
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
38
39
|
filter: blur(60px);
|
|
39
|
-
z-index:
|
|
40
|
+
z-index: -1;
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
.hero-glow-2 {
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
height: 50%;
|
|
48
49
|
background: radial-gradient(circle, rgba(255, 179, 138, 0.1) 0%, transparent 70%);
|
|
49
50
|
filter: blur(60px);
|
|
50
|
-
z-index:
|
|
51
|
+
z-index: -1;
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
.float {
|
|
@@ -81,14 +82,14 @@
|
|
|
81
82
|
background: rgba(255, 255, 255, 0.1);
|
|
82
83
|
}
|
|
83
84
|
|
|
84
|
-
|
|
85
|
+
html[data-theme="light"] .theme-toggle:hover {
|
|
85
86
|
background: rgba(0, 0, 0, 0.05);
|
|
86
87
|
}
|
|
87
88
|
</style>
|
|
88
89
|
</head>
|
|
89
90
|
<body class="p-8 min-h-screen">
|
|
90
91
|
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
91
|
-
<svg class="w-6 h-6 sun-icon
|
|
92
|
+
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
92
93
|
<svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
93
94
|
</div>
|
|
94
95
|
<div class="hero-glow"></div>
|
package/examples/theme-test.html
CHANGED
|
@@ -66,21 +66,6 @@
|
|
|
66
66
|
function updateStatus() {
|
|
67
67
|
const html = document.documentElement;
|
|
68
68
|
const currentTheme = html.getAttribute('data-theme');
|
|
69
|
-
const savedTheme = localStorage.getItem('theme');
|
|
70
|
-
const effectiveTheme = localStorage.getItem('theme-effective');
|
|
71
|
-
const systemPrefers = window.matchMedia('(prefers-color-scheme: light)').matches;
|
|
72
|
-
|
|
73
|
-
const statusEl = document.getElementById('status');
|
|
74
|
-
const stateEl = document.getElementById('current-state');
|
|
75
|
-
|
|
76
|
-
// Debug information
|
|
77
|
-
console.log('Theme Debug:', {
|
|
78
|
-
currentTheme,
|
|
79
|
-
savedTheme,
|
|
80
|
-
effectiveTheme,
|
|
81
|
-
systemPrefers,
|
|
82
|
-
htmlDataTheme: html.getAttribute('data-theme'),
|
|
83
|
-
htmlAttributes: Object.keys(html.attributes).map(attr => `${attr}: ${html.getAttribute(attr)}`)
|
|
84
69
|
});
|
|
85
70
|
|
|
86
71
|
statusEl.innerHTML = `
|
|
@@ -8,17 +8,22 @@
|
|
|
8
8
|
<script src="../../src/starlight.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
body {
|
|
11
|
-
background: radial-gradient(circle at top right,
|
|
11
|
+
background: radial-gradient(circle at top right, var(--q-color-starlight-deep), #000);
|
|
12
12
|
overflow-x: hidden;
|
|
13
13
|
transition: background-color 0.5s ease, color 0.5s ease;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
color:
|
|
15
|
+
html[data-theme="dark"] {
|
|
16
|
+
color: var(--q-text-primary);
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
background:
|
|
20
|
-
color:
|
|
18
|
+
html[data-theme="light"] {
|
|
19
|
+
background: var(--q-light-bg) !important;
|
|
20
|
+
color: var(--q-light-text);
|
|
21
21
|
}
|
|
22
|
+
|
|
23
|
+
html[data-theme="light"] body {
|
|
24
|
+
background: var(--q-light-bg) !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
22
27
|
.hero-glow {
|
|
23
28
|
position: absolute;
|
|
24
29
|
top: -10%;
|
|
@@ -27,11 +32,11 @@
|
|
|
27
32
|
height: 60%;
|
|
28
33
|
background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
|
|
29
34
|
filter: blur(100px);
|
|
30
|
-
z-index:
|
|
35
|
+
z-index: -1;
|
|
31
36
|
transition: opacity 0.5s ease;
|
|
32
37
|
}
|
|
33
38
|
|
|
34
|
-
|
|
39
|
+
html[data-theme="light"] .hero-glow {
|
|
35
40
|
opacity: 0;
|
|
36
41
|
}
|
|
37
42
|
|
|
@@ -52,28 +57,28 @@
|
|
|
52
57
|
background: rgba(255, 255, 255, 0.1);
|
|
53
58
|
}
|
|
54
59
|
|
|
55
|
-
|
|
60
|
+
html[data-theme="light"] .theme-toggle:hover {
|
|
56
61
|
background: rgba(0, 0, 0, 0.05);
|
|
57
62
|
}
|
|
58
63
|
|
|
59
|
-
|
|
60
|
-
background:
|
|
61
|
-
border-color:
|
|
62
|
-
color:
|
|
64
|
+
html[data-theme="light"] .glass {
|
|
65
|
+
background: var(--q-glass-bg) !important;
|
|
66
|
+
border-color: var(--q-glass-border) !important;
|
|
67
|
+
color: var(--q-light-text) !important;
|
|
63
68
|
}
|
|
64
69
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
color:
|
|
70
|
+
html[data-theme="light"] .starlight-card p,
|
|
71
|
+
html[data-theme="light"] header p,
|
|
72
|
+
html[data-theme="light"] section p {
|
|
73
|
+
color: var(--q-light-text-muted);
|
|
69
74
|
}
|
|
70
75
|
|
|
71
|
-
|
|
72
|
-
background-color:
|
|
76
|
+
html[data-theme="light"] .btn-outline:hover {
|
|
77
|
+
background-color: var(--q-light-text);
|
|
73
78
|
color: white;
|
|
74
79
|
}
|
|
75
80
|
|
|
76
|
-
|
|
81
|
+
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
|
|
77
82
|
filter: none;
|
|
78
83
|
}
|
|
79
84
|
|
|
@@ -81,20 +86,172 @@
|
|
|
81
86
|
color-scheme: dark;
|
|
82
87
|
}
|
|
83
88
|
|
|
84
|
-
|
|
89
|
+
html[data-theme="light"] input[type="date"] {
|
|
85
90
|
color-scheme: light;
|
|
86
91
|
}
|
|
87
92
|
|
|
88
|
-
|
|
89
|
-
color:
|
|
93
|
+
html[data-theme="light"] input {
|
|
94
|
+
color: var(--q-light-text) !important;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
html[data-theme="light"] input::placeholder {
|
|
98
|
+
color: var(--q-light-text-muted) !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
html[data-theme="light"] .text-starlight-blue {
|
|
102
|
+
color: var(--q-color-primary) !important;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
html[data-theme="light"] .starlight-navbar {
|
|
106
|
+
background: var(--q-light-card-bg) !important;
|
|
107
|
+
border-bottom-color: var(--q-light-card-border) !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
html[data-theme="light"] .starlight-navbar a {
|
|
111
|
+
color: var(--q-light-text-muted) !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
html[data-theme="light"] .starlight-navbar a:hover {
|
|
115
|
+
color: var(--q-color-primary) !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
html[data-theme="light"] .text-gradient-starlight {
|
|
119
|
+
background: none;
|
|
120
|
+
-webkit-text-fill-color: var(--q-light-text);
|
|
121
|
+
color: var(--q-light-text);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
html[data-theme="light"] .nav-link {
|
|
125
|
+
color: var(--q-light-text-muted) !important;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
html[data-theme="light"] .nav-link:hover {
|
|
129
|
+
color: var(--q-color-primary) !important;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
html[data-theme="light"] .glass {
|
|
133
|
+
background: var(--q-light-card-bg) !important;
|
|
134
|
+
border-color: var(--q-light-card-border) !important;
|
|
135
|
+
color: var(--q-light-text) !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
html[data-theme="light"] .glass input {
|
|
139
|
+
color: var(--q-light-text) !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
html[data-theme="light"] .glass input::placeholder {
|
|
143
|
+
color: var(--q-light-text-muted) !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
html[data-theme="light"] .glass .btn-starlight {
|
|
147
|
+
background: var(--q-light-text);
|
|
148
|
+
color: white;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
html[data-theme="light"] .starlight-card {
|
|
152
|
+
background: var(--q-light-card-bg) !important;
|
|
153
|
+
border-color: var(--q-light-card-border) !important;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
html[data-theme="light"] .starlight-card h3 {
|
|
157
|
+
color: var(--q-light-text) !important;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
html[data-theme="light"] .starlight-card .text-slate-400 {
|
|
161
|
+
color: var(--q-light-text-muted) !important;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
html[data-theme="light"] .btn-outline {
|
|
165
|
+
border-color: var(--q-light-text) !important;
|
|
166
|
+
color: var(--q-light-text) !important;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
html[data-theme="light"] .btn-outline:hover {
|
|
170
|
+
background-color: var(--q-light-text) !important;
|
|
171
|
+
color: white !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
html[data-theme="light"] .starlight-footer {
|
|
175
|
+
background: var(--q-light-bg) !important;
|
|
176
|
+
border-top-color: var(--q-light-card-border) !important;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
html[data-theme="light"] .starlight-footer a {
|
|
180
|
+
color: var(--q-light-text-muted) !important;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
html[data-theme="light"] .starlight-footer a:hover {
|
|
184
|
+
color: var(--q-color-primary) !important;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
html[data-theme="light"] .starlight-footer p {
|
|
188
|
+
color: var(--q-light-text-muted) !important;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
html[data-theme="light"] .badge-primary {
|
|
192
|
+
background-color: rgba(37, 99, 235, 0.1) !important;
|
|
193
|
+
color: var(--q-color-primary) !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
html[data-theme="light"] .border-white_10 {
|
|
197
|
+
border-color: var(--q-light-card-border) !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
html[data-theme="light"] .text-white {
|
|
201
|
+
color: var(--q-light-text) !important;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
html[data-theme="light"] .text-white_10 {
|
|
205
|
+
color: var(--q-light-text-muted) !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
html[data-theme="light"] .text-slate-400 {
|
|
209
|
+
color: var(--q-light-text-muted) !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
html[data-theme="light"] .text-slate-500 {
|
|
213
|
+
color: var(--q-light-text-muted) !important;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
html[data-theme="light"] .bg-white_5 {
|
|
217
|
+
background: var(--q-glass-bg) !important;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
html[data-theme="light"] .border-white_10 {
|
|
221
|
+
border-color: var(--q-light-card-border) !important;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
html[data-theme="light"] .border-white_5 {
|
|
225
|
+
border-color: var(--q-light-card-border) !important;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
html[data-theme="light"] h1 {
|
|
229
|
+
color: var(--q-light-text) !important;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
html[data-theme="light"] h2 {
|
|
233
|
+
color: var(--q-light-text) !important;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
html[data-theme="light"] h3 {
|
|
237
|
+
color: var(--q-light-text) !important;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
html[data-theme="light"] .bg-gray-800,
|
|
241
|
+
html[data-theme="light"] .bg-gray-700,
|
|
242
|
+
html[data-theme="light"] .bg-gray-900 {
|
|
243
|
+
background-color: var(--q-light-card-bg) !important;
|
|
90
244
|
}
|
|
91
245
|
|
|
92
|
-
|
|
93
|
-
|
|
246
|
+
/* Card image overlay text stays light due to dark gradient */
|
|
247
|
+
html[data-theme="light"] .starlight-card .absolute .badge,
|
|
248
|
+
html[data-theme="light"] .starlight-card .absolute h3 {
|
|
249
|
+
color: white !important;
|
|
94
250
|
}
|
|
95
251
|
|
|
96
|
-
|
|
97
|
-
|
|
252
|
+
/* Newsletter section text */
|
|
253
|
+
html[data-theme="light"] .bg-gradient-to-br {
|
|
254
|
+
background: linear-gradient(to bottom right, var(--q-color-primary-100), transparent) !important;
|
|
98
255
|
}
|
|
99
256
|
</style>
|
|
100
257
|
</head>
|
|
@@ -120,7 +277,7 @@
|
|
|
120
277
|
</div>
|
|
121
278
|
<div class="flex items-center gap-4">
|
|
122
279
|
<div id="theme-btn" class="theme-toggle" title="Toggle Theme">
|
|
123
|
-
<svg class="w-6 h-6 sun-icon
|
|
280
|
+
<svg class="w-6 h-6 sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
|
|
124
281
|
<svg class="w-6 h-6 moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
125
282
|
</div>
|
|
126
283
|
<button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
|
|
@@ -46,14 +46,21 @@
|
|
|
46
46
|
margin: 0 2rem;
|
|
47
47
|
display: flex;
|
|
48
48
|
}
|
|
49
|
-
.search-input {
|
|
49
|
+
.video-search-input {
|
|
50
50
|
flex: 1;
|
|
51
|
-
padding: 0.625rem
|
|
51
|
+
padding: 0.625rem 1.25rem;
|
|
52
52
|
background: rgba(255, 255, 255, 0.05);
|
|
53
53
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
54
54
|
border-radius: 0.5rem 0 0 0.5rem;
|
|
55
55
|
color: var(--text-primary, #f1f5f9);
|
|
56
56
|
font-size: 0.9375rem;
|
|
57
|
+
outline: none;
|
|
58
|
+
transition: all 0.2s;
|
|
59
|
+
}
|
|
60
|
+
.video-search-input:focus {
|
|
61
|
+
border-color: var(--color-starlight, #00d4ff);
|
|
62
|
+
background: rgba(255, 255, 255, 0.08);
|
|
63
|
+
box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
|
|
57
64
|
}
|
|
58
65
|
.search-btn {
|
|
59
66
|
padding: 0 1.25rem;
|
|
@@ -94,6 +101,29 @@
|
|
|
94
101
|
overflow: hidden;
|
|
95
102
|
}
|
|
96
103
|
|
|
104
|
+
@media (max-width: 1024px) {
|
|
105
|
+
.main-content {
|
|
106
|
+
grid-template-columns: 72px 1fr;
|
|
107
|
+
}
|
|
108
|
+
.sidebar .nav-item {
|
|
109
|
+
justify-content: center;
|
|
110
|
+
padding: 0.75rem 0;
|
|
111
|
+
}
|
|
112
|
+
.sidebar .nav-item span:last-child,
|
|
113
|
+
.sidebar .nav-section-title {
|
|
114
|
+
display: none;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@media (max-width: 768px) {
|
|
119
|
+
.main-content {
|
|
120
|
+
grid-template-columns: 1fr;
|
|
121
|
+
}
|
|
122
|
+
.sidebar {
|
|
123
|
+
display: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
97
127
|
/* Sidebar */
|
|
98
128
|
.sidebar {
|
|
99
129
|
padding: 0.75rem 0;
|
|
@@ -288,21 +318,19 @@
|
|
|
288
318
|
}
|
|
289
319
|
|
|
290
320
|
/* Light Mode */
|
|
291
|
-
|
|
321
|
+
html[data-theme="light"] {
|
|
292
322
|
--bg-primary: #ffffff;
|
|
293
323
|
--text-primary: #0f0f0f;
|
|
294
324
|
--text-secondary: #606060;
|
|
295
325
|
--text-muted: #909090;
|
|
296
326
|
}
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
327
|
+
html[data-theme="light"] header { background: #ffffff; border-bottom-color: #e5e5e5; }
|
|
328
|
+
html[data-theme="light"] .nav-item:hover, html[data-theme="light"] .nav-item.active { background: #f2f2f2; }
|
|
329
|
+
html[data-theme="light"] .category-tab { background: #f2f2f2; border-color: #e5e5e5; color: #0f0f0f; }
|
|
330
|
+
html[data-theme="light"] .category-tab.active { background: #0f0f0f; color: #ffffff; }
|
|
331
|
+
html[data-theme="light"] .video-thumbnail, html[data-theme="light"] .short-thumbnail { background: #f2f2f2; }
|
|
302
332
|
|
|
303
333
|
@media (max-width: 1024px) {
|
|
304
|
-
.main-content { grid-template-columns: 1fr; }
|
|
305
|
-
.sidebar { display: none; }
|
|
306
334
|
.video-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
|
|
307
335
|
}
|
|
308
336
|
@media (max-width: 640px) {
|
|
@@ -312,7 +340,7 @@
|
|
|
312
340
|
}
|
|
313
341
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
314
342
|
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
|
|
315
|
-
|
|
343
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccc; }
|
|
316
344
|
</style>
|
|
317
345
|
</head>
|
|
318
346
|
<body>
|
|
@@ -323,7 +351,7 @@
|
|
|
323
351
|
<span>Starlight</span>
|
|
324
352
|
</div>
|
|
325
353
|
<div class="search-bar">
|
|
326
|
-
<input type="text" class="search-input" placeholder="Search">
|
|
354
|
+
<input type="text" class="video-search-input" placeholder="Search">
|
|
327
355
|
<button class="search-btn">🔍</button>
|
|
328
356
|
</div>
|
|
329
357
|
<div class="header-actions">
|
|
@@ -545,13 +573,6 @@
|
|
|
545
573
|
</div>
|
|
546
574
|
|
|
547
575
|
<script>
|
|
548
|
-
function toggleTheme() {
|
|
549
|
-
document.body.classList.toggle('light-mode');
|
|
550
|
-
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
551
|
-
}
|
|
552
|
-
if (localStorage.getItem('theme') === 'light') {
|
|
553
|
-
document.body.classList.add('light-mode');
|
|
554
|
-
}
|
|
555
576
|
|
|
556
577
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
557
578
|
tab.addEventListener('click', function() {
|
package/package.json
CHANGED
package/src/defaults.js
CHANGED
|
@@ -35,6 +35,7 @@ const defaultTheme = {
|
|
|
35
35
|
starlight: {
|
|
36
36
|
blue: '#00d4ff', peach: '#ffb38a', orange: '#ff7e5f', deep: '#08081a',
|
|
37
37
|
},
|
|
38
|
+
accent: '#00d4ff',
|
|
38
39
|
transparent: 'transparent',
|
|
39
40
|
},
|
|
40
41
|
spacing: {
|
|
@@ -201,7 +202,82 @@ const utilityMaps = {
|
|
|
201
202
|
'starlight-dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
|
|
202
203
|
'starlight-gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
|
|
203
204
|
'starlight-form': 'card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
|
|
204
|
-
'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in'
|
|
205
|
+
'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in',
|
|
206
|
+
'starlight-sidebar': 'flex flex-col h-screen w-72 fixed left-0 top-0 bg-black_40 backdrop-blur-xl border-r border-white_10 p-6 z-40',
|
|
207
|
+
'starlight-feed-card': 'flex flex-col bg-white_03 backdrop-blur-md border border-white_10 rounded-2xl p-6 transition-all duration-300 ease',
|
|
208
|
+
'starlight-auth-form': 'flex flex-col max-w-md mx-auto bg-white_05 backdrop-blur-xl border border-white_10 rounded-2xl p-10 shadow-2xl',
|
|
209
|
+
|
|
210
|
+
'email-nav': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
211
|
+
'email-feed': 'flex flex-col h-full bg-white_05 backdrop-blur-md border-r border-white_10 overflow-y-auto',
|
|
212
|
+
'email-content': 'flex flex-col h-full overflow-y-auto',
|
|
213
|
+
|
|
214
|
+
'music-nav': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
215
|
+
'music-content': 'flex flex-col h-full overflow-y-auto',
|
|
216
|
+
'music-footer': 'flex items-center justify-between px-6 py-4 bg-black_40 backdrop-blur-xl border-t border-white_10',
|
|
217
|
+
|
|
218
|
+
'chat-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 overflow-hidden',
|
|
219
|
+
'chat-content': 'flex flex-col h-full overflow-hidden',
|
|
220
|
+
|
|
221
|
+
'admin-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
222
|
+
'admin-content': 'flex flex-col h-full overflow-y-auto',
|
|
223
|
+
|
|
224
|
+
'analytics-sidebar': 'flex flex-col h-full bg-black_40 backdrop-blur-xl border-r border-white_10 p-4 overflow-y-auto',
|
|
225
|
+
'analytics-content': 'flex flex-col h-full overflow-y-auto',
|
|
226
|
+
|
|
227
|
+
'layout-email-3col': 'grid h-screen grid-cols-[280px_320px_1fr] overflow-hidden',
|
|
228
|
+
'layout-music-2col': 'grid h-screen grid-rows-[1fr_auto] overflow-hidden',
|
|
229
|
+
'layout-music-row': 'grid grid-cols-[280px_1fr] overflow-hidden',
|
|
230
|
+
'layout-chat-2col': 'grid h-screen grid-cols-[320px_1fr] overflow-hidden',
|
|
231
|
+
'layout-admin-2col': 'grid h-screen grid-cols-[260px_1fr] overflow-hidden',
|
|
232
|
+
'layout-analytics-2col': 'grid h-screen grid-cols-[240px_1fr] overflow-hidden',
|
|
233
|
+
|
|
234
|
+
'starlight-stat': 'flex flex-col gap-2 p-5 bg-white_03 border border-white_08 rounded-xl transition-all duration-300',
|
|
235
|
+
'starlight-stat-header': 'flex items-center justify-between',
|
|
236
|
+
'starlight-stat-icon': 'flex items-center justify-center w-10 h-10 rounded-lg',
|
|
237
|
+
'starlight-stat-value': 'text-3xl font-bold text-starlight-blue',
|
|
238
|
+
'starlight-stat-label': 'text-sm uppercase tracking-wide text-white_60',
|
|
239
|
+
|
|
240
|
+
'starlight-avatar': 'flex items-center justify-center rounded-full font-semibold text-white',
|
|
241
|
+
'starlight-avatar-sm': 'w-8 h-8 text-xs',
|
|
242
|
+
'starlight-avatar-md': 'w-10 h-10 text-sm',
|
|
243
|
+
'starlight-avatar-lg': 'w-12 h-12 text-base',
|
|
244
|
+
'starlight-avatar-xl': 'w-16 h-16 text-lg',
|
|
245
|
+
|
|
246
|
+
'starlight-theme-toggle': 'flex items-center justify-center w-10 h-10 rounded-full bg-white_05 border border-white_10 cursor-pointer transition-all duration-300',
|
|
247
|
+
'starlight-notification': 'relative flex items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer',
|
|
248
|
+
'starlight-notification-dot': 'absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse',
|
|
249
|
+
|
|
250
|
+
'starlight-table-container': 'bg-white_03 border border-white_08 rounded-xl overflow-hidden',
|
|
251
|
+
'starlight-table-header': 'flex items-center justify-between p-4 border-b border-white_08',
|
|
252
|
+
'starlight-table': 'w-full border-collapse',
|
|
253
|
+
'starlight-table-footer': 'flex items-center justify-between p-4 border-t border-white_08 text-white_60',
|
|
254
|
+
|
|
255
|
+
'starlight-chart': 'bg-white_03 border border-white_08 rounded-xl overflow-hidden',
|
|
256
|
+
'starlight-chart-header': 'flex items-center justify-between p-4 border-b border-white_05',
|
|
257
|
+
'starlight-chart-tabs': 'flex gap-1',
|
|
258
|
+
'starlight-chart-tab': 'px-3 py-1 text-xs font-medium bg-transparent border-none rounded-md cursor-pointer transition-all',
|
|
259
|
+
'starlight-chart-tab.active': 'bg-starlight-blue_15 text-starlight-blue',
|
|
260
|
+
|
|
261
|
+
'starlight-breadcrumb': 'flex items-center gap-2 text-sm',
|
|
262
|
+
'starlight-breadcrumb-item': 'text-white_60 no-underline transition-colors',
|
|
263
|
+
'starlight-breadcrumb-separator': 'text-white_40',
|
|
264
|
+
'starlight-breadcrumb-current': 'font-medium',
|
|
265
|
+
|
|
266
|
+
'starlight-gallery-grid': 'grid gap-4',
|
|
267
|
+
'starlight-gallery-item': 'relative aspect-video rounded-lg overflow-hidden',
|
|
268
|
+
'starlight-gallery-overlay': 'absolute inset-0 flex items-end p-4 bg-gradient-to-t from-black_80 to-transparent opacity-0 transition-opacity',
|
|
269
|
+
|
|
270
|
+
'starlight-progress': 'flex items-center gap-3',
|
|
271
|
+
'starlight-progress-bar': 'flex-1 h-2 bg-white_10 rounded-full overflow-hidden',
|
|
272
|
+
'starlight-progress-fill': 'h-full bg-gradient-to-r from-starlight-blue to-starlight-peach rounded-full transition-all duration-500',
|
|
273
|
+
|
|
274
|
+
'starlight-player-controls': 'flex items-center gap-4',
|
|
275
|
+
'starlight-player-btn': 'flex items-center justify-center w-10 h-10 bg-transparent border-none cursor-pointer transition-all',
|
|
276
|
+
'starlight-player-btn-primary': 'w-12 h-12 bg-starlight-blue rounded-full text-black hover:bg-starlight-peach',
|
|
277
|
+
|
|
278
|
+
'starlight-page-header': 'flex items-center justify-between p-6',
|
|
279
|
+
'starlight-page-title': 'text-3xl font-bold',
|
|
280
|
+
'starlight-page-subtitle': 'text-sm text-white_60 mt-1'
|
|
205
281
|
};
|
|
206
282
|
|
|
207
283
|
module.exports = { defaultTheme, utilityMaps };
|
package/src/generator.js
CHANGED
|
@@ -122,6 +122,9 @@ function generateCSS(configPath) {
|
|
|
122
122
|
regex: new RegExp(`\\s${v}="([^"]+)"`, 'g')
|
|
123
123
|
}));
|
|
124
124
|
|
|
125
|
+
const jitLimit = (config.jit && config.jit.limit) || 10000;
|
|
126
|
+
const jitWarnAt = (config.jit && config.jit.warnAt) || (jitLimit * 0.8);
|
|
127
|
+
|
|
125
128
|
files.forEach(file => {
|
|
126
129
|
try {
|
|
127
130
|
const content = fs.readFileSync(file, 'utf8');
|
|
@@ -129,7 +132,9 @@ function generateCSS(configPath) {
|
|
|
129
132
|
// 1. Match standard class="..."
|
|
130
133
|
let match;
|
|
131
134
|
while ((match = classAttrRegex.exec(content)) !== null) {
|
|
132
|
-
match[1].split(/\s+/).forEach(cls => {
|
|
135
|
+
match[1].split(/\s+/).forEach(cls => {
|
|
136
|
+
if (cls && rawClasses.size < jitLimit) rawClasses.add(cls);
|
|
137
|
+
});
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
// 2. Match attribute lanes (e.g., md="flex gap-4")
|
|
@@ -137,7 +142,7 @@ function generateCSS(configPath) {
|
|
|
137
142
|
regex.lastIndex = 0;
|
|
138
143
|
while ((match = regex.exec(content)) !== null) {
|
|
139
144
|
match[1].split(/\s+/).forEach(cls => {
|
|
140
|
-
if (cls) {
|
|
145
|
+
if (cls && rawClasses.size < jitLimit) {
|
|
141
146
|
// We convert attribute-based utilities to a canonical internal format
|
|
142
147
|
// using the __ separator, which getRulesForClass already understands.
|
|
143
148
|
rawClasses.add(`${variant}__${cls}`);
|
|
@@ -150,6 +155,10 @@ function generateCSS(configPath) {
|
|
|
150
155
|
}
|
|
151
156
|
});
|
|
152
157
|
|
|
158
|
+
if (rawClasses.size >= jitWarnAt) {
|
|
159
|
+
console.warn(`⚠️ JIT Warning: Generated ${rawClasses.size} utilities, approaching limit of ${jitLimit}.`);
|
|
160
|
+
}
|
|
161
|
+
|
|
153
162
|
const utilities = new Set();
|
|
154
163
|
const responsiveUtils = {
|
|
155
164
|
sm: new Set(), md: new Set(), lg: new Set(), xl: new Set(), '2xl': new Set(),
|
|
@@ -162,7 +171,7 @@ function generateCSS(configPath) {
|
|
|
162
171
|
* @returns {string} The escaped selector
|
|
163
172
|
*/
|
|
164
173
|
const escapeSelector = (cls) => {
|
|
165
|
-
return cls.replace(/([:.[\]
|
|
174
|
+
return cls.replace(/([:.[\]\\/])/g, '\\$1');
|
|
166
175
|
};
|
|
167
176
|
|
|
168
177
|
const sideMap = {
|
|
@@ -450,13 +459,13 @@ function generateCSS(configPath) {
|
|
|
450
459
|
|
|
451
460
|
selectors.forEach(selector => {
|
|
452
461
|
if (breakpoint === 'light') {
|
|
453
|
-
const block = `html[data-theme="light"] ${selector}
|
|
462
|
+
const block = `html[data-theme="light"] ${selector} {
|
|
454
463
|
${rules.join('\n').trim()}
|
|
455
464
|
}
|
|
456
465
|
`;
|
|
457
466
|
utilities.add(block);
|
|
458
467
|
} else if (breakpoint === 'dark') {
|
|
459
|
-
const block = `html[data-theme="dark"] ${selector}
|
|
468
|
+
const block = `html[data-theme="dark"] ${selector} {
|
|
460
469
|
${rules.join('\n').trim()}
|
|
461
470
|
}
|
|
462
471
|
`;
|
package/src/starlight.js
CHANGED
|
@@ -505,8 +505,6 @@ const Starlight = {
|
|
|
505
505
|
|
|
506
506
|
// Apply to DOM
|
|
507
507
|
html.setAttribute('data-theme', effectiveTheme);
|
|
508
|
-
document.body.classList.toggle('light-mode', effectiveTheme === 'light');
|
|
509
|
-
document.body.classList.toggle('dark-mode', effectiveTheme === 'dark');
|
|
510
508
|
|
|
511
509
|
// Save preference
|
|
512
510
|
if (save) {
|
|
@@ -555,8 +553,6 @@ const Starlight = {
|
|
|
555
553
|
|
|
556
554
|
// Apply to DOM
|
|
557
555
|
html.setAttribute('data-theme', newEffective);
|
|
558
|
-
document.body.classList.toggle('light-mode', newEffective === 'light');
|
|
559
|
-
document.body.classList.toggle('dark-mode', newEffective === 'dark');
|
|
560
556
|
|
|
561
557
|
localStorage.setItem(`${config.storageKey}-effective`, newEffective);
|
|
562
558
|
updateIcons('auto', newEffective);
|