@howssatoshi/quantumcss 1.4.2 → 1.5.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/README.md +8 -7
- package/dist/quantum.min.css +1 -4678
- package/examples/blog-template.html +268 -0
- package/examples/gaming-template.html +355 -0
- package/examples/images/starlight.jpg +0 -0
- package/examples/index.html +138 -0
- package/examples/kitchen-sink.html +1012 -0
- package/examples/news-template.html +320 -0
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +330 -0
- package/examples/starlight.html +161 -0
- package/examples/theme-test.html +174 -0
- package/examples/travel/index.html +254 -0
- package/examples/verify_fixes.html +52 -0
- package/examples/verify_presets.html +32 -0
- package/package.json +8 -1
- package/src/generator.js +19 -8
- package/src/starlight.js +406 -15
- package/src/styles/quantum-animations.css +3 -2
- package/src/styles/quantum-base.css +295 -91
- package/src/styles/quantum-components.css +47 -47
- package/src/styles/quantum-responsive.css +5 -4
- package/src/styles/starlight.css +184 -184
package/src/styles/starlight.css
CHANGED
|
@@ -10,18 +10,18 @@ a {
|
|
|
10
10
|
|
|
11
11
|
a:hover {
|
|
12
12
|
color: var(--color-starlight-peach);
|
|
13
|
-
text-shadow: 0 0 8px
|
|
13
|
+
text-shadow: 0 0 8px rgb(255 179 138 / 40%);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
a:active {
|
|
17
17
|
transform: scale(0.98);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
html[data-theme="light"] a {
|
|
21
21
|
color: var(--color-starlight-blue);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
html[data-theme="light"] a:hover {
|
|
25
25
|
color: var(--color-starlight-peach);
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -38,17 +38,17 @@ body.light-mode a:hover {
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.starlight-card:hover {
|
|
41
|
-
border-color:
|
|
41
|
+
border-color: rgb(0 212 255 / 40%);
|
|
42
42
|
transform: translateY(-4px);
|
|
43
|
-
box-shadow: 0 12px 40px
|
|
44
|
-
background-color:
|
|
43
|
+
box-shadow: 0 12px 40px rgb(0 0 0 / 40%), 0 0 20px rgb(0 212 255 / 10%);
|
|
44
|
+
background-color: rgb(255 255 255 / 4%);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
html[data-theme="light"] .starlight-card {
|
|
48
48
|
background: var(--light-card-bg);
|
|
49
49
|
border-color: var(--light-card-border);
|
|
50
50
|
color: #334155;
|
|
51
|
-
box-shadow: 0 4px 20px
|
|
51
|
+
box-shadow: 0 4px 20px rgb(0 0 0 / 2%);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/* 2. Checkboxes & Radio Buttons */
|
|
@@ -56,8 +56,8 @@ body.light-mode .starlight-card {
|
|
|
56
56
|
appearance: none;
|
|
57
57
|
width: 1.25rem;
|
|
58
58
|
height: 1.25rem;
|
|
59
|
-
background:
|
|
60
|
-
border: 1px solid
|
|
59
|
+
background: rgb(255 255 255 / 5%);
|
|
60
|
+
border: 1px solid rgb(255 255 255 / 20%);
|
|
61
61
|
border-radius: 0.375rem;
|
|
62
62
|
cursor: pointer;
|
|
63
63
|
transition: all 0.2s ease;
|
|
@@ -69,10 +69,10 @@ body.light-mode .starlight-card {
|
|
|
69
69
|
|
|
70
70
|
.radio-starlight { border-radius: 50%; }
|
|
71
71
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
border-color:
|
|
75
|
-
background:
|
|
72
|
+
html[data-theme="light"] .checkbox-starlight,
|
|
73
|
+
html[data-theme="light"] .radio-starlight {
|
|
74
|
+
border-color: rgb(0 0 0 / 20%);
|
|
75
|
+
background: rgb(0 0 0 / 5%);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
.checkbox-starlight:checked, .radio-starlight:checked {
|
|
@@ -106,9 +106,9 @@ body.light-mode .radio-starlight {
|
|
|
106
106
|
left: 50%;
|
|
107
107
|
transform: translateX(-50%) translateY(10px);
|
|
108
108
|
padding: 0.5rem 0.75rem;
|
|
109
|
-
background-color:
|
|
109
|
+
background-color: rgb(10 10 30 / 98%);
|
|
110
110
|
backdrop-filter: blur(12px);
|
|
111
|
-
border: 1px solid
|
|
111
|
+
border: 1px solid rgb(0 212 255 / 30%);
|
|
112
112
|
border-radius: 0.5rem;
|
|
113
113
|
color: #f1f5f9;
|
|
114
114
|
font-size: 0.75rem;
|
|
@@ -117,7 +117,7 @@ body.light-mode .radio-starlight {
|
|
|
117
117
|
opacity: 0;
|
|
118
118
|
transition: all 0.2s ease;
|
|
119
119
|
z-index: 800;
|
|
120
|
-
box-shadow: 0 4px 15px
|
|
120
|
+
box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.has-tooltip:hover .tooltip {
|
|
@@ -142,7 +142,7 @@ body.light-mode .radio-starlight {
|
|
|
142
142
|
animation: star-twinkle var(--duration, 3s) infinite ease-in-out;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
|
|
145
|
+
html[data-theme="light"] .star {
|
|
146
146
|
background: var(--color-starlight-blue);
|
|
147
147
|
opacity: 0.15;
|
|
148
148
|
}
|
|
@@ -151,7 +151,7 @@ body.light-mode .star {
|
|
|
151
151
|
.dialog-overlay {
|
|
152
152
|
position: fixed;
|
|
153
153
|
inset: 0;
|
|
154
|
-
background:
|
|
154
|
+
background: rgb(0 0 0 / 60%);
|
|
155
155
|
backdrop-filter: blur(12px);
|
|
156
156
|
display: flex;
|
|
157
157
|
align-items: center;
|
|
@@ -160,24 +160,24 @@ body.light-mode .star {
|
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
.dialog-content {
|
|
163
|
-
background-color:
|
|
163
|
+
background-color: rgb(10 10 20 / 98%);
|
|
164
164
|
backdrop-filter: blur(20px);
|
|
165
|
-
border: 1px solid
|
|
165
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
166
166
|
border-radius: 1.5rem;
|
|
167
167
|
padding: 2.5rem;
|
|
168
168
|
max-width: 90%;
|
|
169
169
|
width: 600px;
|
|
170
170
|
max-height: 85vh;
|
|
171
171
|
overflow-y: auto;
|
|
172
|
-
box-shadow: 0 25px 50px -12px
|
|
172
|
+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
|
|
173
173
|
position: relative;
|
|
174
174
|
}
|
|
175
175
|
|
|
176
176
|
.starlight-dialog {
|
|
177
|
-
background-color:
|
|
177
|
+
background-color: rgb(10 10 20 / 98%);
|
|
178
178
|
backdrop-filter: blur(24px);
|
|
179
179
|
-webkit-backdrop-filter: blur(24px);
|
|
180
|
-
border: 1px solid
|
|
180
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
181
181
|
border-radius: 1.5rem;
|
|
182
182
|
padding: 3rem;
|
|
183
183
|
width: 100%;
|
|
@@ -186,7 +186,7 @@ body.light-mode .star {
|
|
|
186
186
|
overflow-y: auto;
|
|
187
187
|
margin: auto;
|
|
188
188
|
position: relative;
|
|
189
|
-
box-shadow: 0 25px 50px -12px
|
|
189
|
+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
/* Custom scrollbar for dialogs */
|
|
@@ -197,7 +197,7 @@ body.light-mode .star {
|
|
|
197
197
|
|
|
198
198
|
.dialog-content::-webkit-scrollbar-track,
|
|
199
199
|
.starlight-dialog::-webkit-scrollbar-track {
|
|
200
|
-
background:
|
|
200
|
+
background: rgb(255 255 255 / 5%);
|
|
201
201
|
border-radius: 4px;
|
|
202
202
|
}
|
|
203
203
|
|
|
@@ -207,16 +207,16 @@ body.light-mode .star {
|
|
|
207
207
|
border-radius: 4px;
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
background:
|
|
210
|
+
html[data-theme="light"] .dialog-content::-webkit-scrollbar-track,
|
|
211
|
+
html[data-theme="light"] .starlight-dialog::-webkit-scrollbar-track {
|
|
212
|
+
background: rgb(0 0 0 / 5%);
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
|
|
216
|
-
background-color:
|
|
217
|
-
border-color:
|
|
215
|
+
html[data-theme="light"] .starlight-dialog {
|
|
216
|
+
background-color: rgb(255 255 255 / 98%);
|
|
217
|
+
border-color: rgb(0 0 0 / 10%);
|
|
218
218
|
color: #1e293b;
|
|
219
|
-
box-shadow: 0 25px 50px -12px
|
|
219
|
+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 15%);
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
.dialog-close {
|
|
@@ -226,8 +226,8 @@ body.light-mode .starlight-dialog {
|
|
|
226
226
|
width: 2rem;
|
|
227
227
|
height: 2rem;
|
|
228
228
|
border-radius: 50%;
|
|
229
|
-
background:
|
|
230
|
-
border: 1px solid
|
|
229
|
+
background: rgb(255 255 255 / 5%);
|
|
230
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
231
231
|
color: white;
|
|
232
232
|
display: flex;
|
|
233
233
|
align-items: center;
|
|
@@ -237,14 +237,14 @@ body.light-mode .starlight-dialog {
|
|
|
237
237
|
padding: 0;
|
|
238
238
|
}
|
|
239
239
|
|
|
240
|
-
|
|
241
|
-
background:
|
|
242
|
-
border-color:
|
|
240
|
+
html[data-theme="light"] .dialog-close {
|
|
241
|
+
background: rgb(0 0 0 / 5%);
|
|
242
|
+
border-color: rgb(0 0 0 / 10%);
|
|
243
243
|
color: #1e293b;
|
|
244
244
|
}
|
|
245
245
|
|
|
246
246
|
.dialog-close:hover {
|
|
247
|
-
background:
|
|
247
|
+
background: rgb(255 255 255 / 15%);
|
|
248
248
|
border-color: var(--color-starlight-blue);
|
|
249
249
|
transform: rotate(90deg);
|
|
250
250
|
}
|
|
@@ -256,15 +256,15 @@ body.light-mode .dialog-close {
|
|
|
256
256
|
gap: 1rem;
|
|
257
257
|
}
|
|
258
258
|
|
|
259
|
-
|
|
260
|
-
background:
|
|
259
|
+
html[data-theme="light"] .dialog-overlay {
|
|
260
|
+
background: rgb(255 255 255 / 40%);
|
|
261
261
|
}
|
|
262
262
|
|
|
263
|
-
|
|
264
|
-
background-color:
|
|
265
|
-
border-color:
|
|
263
|
+
html[data-theme="light"] .dialog-content {
|
|
264
|
+
background-color: rgb(255 255 255 / 98%);
|
|
265
|
+
border-color: rgb(0 0 0 / 10%);
|
|
266
266
|
color: #1e293b;
|
|
267
|
-
box-shadow: 0 25px 50px -12px
|
|
267
|
+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 15%);
|
|
268
268
|
}
|
|
269
269
|
|
|
270
270
|
/* 6. Dropdown Menu */
|
|
@@ -274,13 +274,13 @@ body.light-mode .dialog-content {
|
|
|
274
274
|
left: 0;
|
|
275
275
|
background-color: var(--color-starlight-deep);
|
|
276
276
|
backdrop-filter: blur(20px);
|
|
277
|
-
border: 1px solid
|
|
277
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
278
278
|
border-radius: 0.75rem;
|
|
279
279
|
padding: 0.5rem;
|
|
280
280
|
margin-top: 0.5rem;
|
|
281
281
|
min-width: 200px;
|
|
282
282
|
z-index: 600;
|
|
283
|
-
box-shadow: 0 20px 40px
|
|
283
|
+
box-shadow: 0 20px 40px rgb(0 0 0 / 40%);
|
|
284
284
|
opacity: 0;
|
|
285
285
|
visibility: hidden;
|
|
286
286
|
transform: translateY(10px);
|
|
@@ -301,7 +301,7 @@ body.light-mode .dialog-content {
|
|
|
301
301
|
width: 100%;
|
|
302
302
|
padding: 0.625rem 1rem;
|
|
303
303
|
border-radius: 0.5rem;
|
|
304
|
-
color:
|
|
304
|
+
color: rgb(255 255 255 / 70%);
|
|
305
305
|
transition: all 0.2s ease;
|
|
306
306
|
text-align: left;
|
|
307
307
|
background: transparent;
|
|
@@ -314,17 +314,17 @@ body.light-mode .dialog-content {
|
|
|
314
314
|
color: black;
|
|
315
315
|
}
|
|
316
316
|
|
|
317
|
-
|
|
318
|
-
background-color:
|
|
317
|
+
html[data-theme="light"] .dropdown-menu {
|
|
318
|
+
background-color: rgb(255 255 255 / 99%);
|
|
319
319
|
border-color: #cbd5e1;
|
|
320
|
-
box-shadow: 0 10px 30px
|
|
320
|
+
box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
|
|
323
|
+
html[data-theme="light"] .dropdown-item {
|
|
324
324
|
color: #475569;
|
|
325
325
|
}
|
|
326
326
|
|
|
327
|
-
|
|
327
|
+
html[data-theme="light"] .dropdown-item:hover {
|
|
328
328
|
background-color: var(--color-starlight-blue);
|
|
329
329
|
color: black;
|
|
330
330
|
}
|
|
@@ -333,8 +333,8 @@ body.light-mode .dropdown-item:hover {
|
|
|
333
333
|
.input-starlight, .textarea-starlight {
|
|
334
334
|
height: auto;
|
|
335
335
|
padding: 1rem;
|
|
336
|
-
background-color:
|
|
337
|
-
border: 1px solid
|
|
336
|
+
background-color: rgb(255 255 255 / 4%);
|
|
337
|
+
border: 1px solid rgb(255 255 255 / 15%);
|
|
338
338
|
border-radius: 0.75rem;
|
|
339
339
|
color: inherit;
|
|
340
340
|
width: 100%;
|
|
@@ -345,46 +345,46 @@ textarea.input-starlight, .textarea-starlight {
|
|
|
345
345
|
display: block;
|
|
346
346
|
}
|
|
347
347
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
background-color: #
|
|
348
|
+
html[data-theme="light"] .input-starlight,
|
|
349
|
+
html[data-theme="light"] .textarea-starlight {
|
|
350
|
+
background-color: #fff;
|
|
351
351
|
border-color: #cbd5e1;
|
|
352
352
|
}
|
|
353
353
|
|
|
354
|
-
|
|
355
|
-
background-color:
|
|
356
|
-
border-color:
|
|
354
|
+
html[data-theme="light"] .glass {
|
|
355
|
+
background-color: rgb(0 0 0 / 2%);
|
|
356
|
+
border-color: rgb(0 0 0 / 5%);
|
|
357
357
|
}
|
|
358
358
|
|
|
359
359
|
/* 8. Input Focus States */
|
|
360
360
|
.input-starlight:focus, .textarea-starlight:focus {
|
|
361
361
|
outline: none;
|
|
362
362
|
border-color: var(--color-starlight-blue);
|
|
363
|
-
box-shadow: 0 0 0 4px
|
|
364
|
-
background-color:
|
|
363
|
+
box-shadow: 0 0 0 4px rgb(0 212 255 / 10%), 0 0 20px rgb(0 212 255 / 10%);
|
|
364
|
+
background-color: rgb(255 255 255 / 6%);
|
|
365
365
|
}
|
|
366
366
|
|
|
367
|
-
|
|
368
|
-
|
|
367
|
+
html[data-theme="light"] .input-starlight:focus,
|
|
368
|
+
html[data-theme="light"] .textarea-starlight:focus {
|
|
369
369
|
border-color: var(--color-starlight-blue);
|
|
370
|
-
box-shadow: 0 0 0 4px
|
|
371
|
-
background-color: #
|
|
370
|
+
box-shadow: 0 0 0 4px rgb(0 212 255 / 10%), 0 4px 12px rgb(0 0 0 / 5%);
|
|
371
|
+
background-color: #fff;
|
|
372
372
|
}
|
|
373
373
|
|
|
374
374
|
/* 9. Code Interface Window */
|
|
375
375
|
.code-window {
|
|
376
|
-
background:
|
|
376
|
+
background: rgb(0 0 0 / 40%);
|
|
377
377
|
backdrop-filter: blur(20px);
|
|
378
378
|
-webkit-backdrop-filter: blur(20px);
|
|
379
|
-
border: 1px solid
|
|
379
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
380
380
|
border-radius: var(--radius-xl);
|
|
381
381
|
overflow: hidden;
|
|
382
|
-
box-shadow: 0 25px 50px -12px
|
|
382
|
+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
|
|
383
383
|
}
|
|
384
384
|
|
|
385
385
|
.code-window-header {
|
|
386
|
-
background:
|
|
387
|
-
border-bottom: 1px solid
|
|
386
|
+
background: rgb(255 255 255 / 5%);
|
|
387
|
+
border-bottom: 1px solid rgb(255 255 255 / 5%);
|
|
388
388
|
padding: 1rem 1.5rem;
|
|
389
389
|
display: flex;
|
|
390
390
|
align-items: center;
|
|
@@ -408,30 +408,30 @@ body.light-mode .textarea-starlight:focus {
|
|
|
408
408
|
font-weight: 800;
|
|
409
409
|
text-transform: uppercase;
|
|
410
410
|
letter-spacing: 0.15em;
|
|
411
|
-
color:
|
|
411
|
+
color: rgb(255 255 255 / 40%);
|
|
412
412
|
}
|
|
413
413
|
|
|
414
|
-
|
|
414
|
+
html[data-theme="light"] .code-window {
|
|
415
415
|
background: #f8fafc;
|
|
416
416
|
border-color: #e2e8f0;
|
|
417
|
-
box-shadow: 0 10px 30px
|
|
417
|
+
box-shadow: 0 10px 30px rgb(0 0 0 / 5%);
|
|
418
418
|
}
|
|
419
419
|
|
|
420
|
-
|
|
420
|
+
html[data-theme="light"] .code-window-header {
|
|
421
421
|
background: #f1f5f9;
|
|
422
422
|
border-color: #e2e8f0;
|
|
423
423
|
}
|
|
424
424
|
|
|
425
|
-
|
|
425
|
+
html[data-theme="light"] .code-window-title {
|
|
426
426
|
color: #94a3b8;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
429
|
/* 10. Starlight Accordion */
|
|
430
430
|
.accordion-starlight.accordion-item {
|
|
431
|
-
background:
|
|
431
|
+
background: rgb(255 255 255 / 2%);
|
|
432
432
|
backdrop-filter: blur(12px);
|
|
433
433
|
-webkit-backdrop-filter: blur(12px);
|
|
434
|
-
border: 1px solid
|
|
434
|
+
border: 1px solid rgb(255 255 255 / 8%);
|
|
435
435
|
border-radius: var(--radius-xl);
|
|
436
436
|
margin-bottom: var(--space-4);
|
|
437
437
|
transition: all var(--transition-base);
|
|
@@ -439,15 +439,15 @@ body.light-mode .code-window-title {
|
|
|
439
439
|
}
|
|
440
440
|
|
|
441
441
|
.accordion-starlight.accordion-item:hover {
|
|
442
|
-
border-color:
|
|
443
|
-
background:
|
|
444
|
-
box-shadow: 0 0 20px
|
|
442
|
+
border-color: rgb(0 212 255 / 30%);
|
|
443
|
+
background: rgb(255 255 255 / 4%);
|
|
444
|
+
box-shadow: 0 0 20px rgb(0 212 255 / 5%);
|
|
445
445
|
}
|
|
446
446
|
|
|
447
447
|
.accordion-starlight.accordion-item.active {
|
|
448
448
|
border-color: var(--color-starlight-blue);
|
|
449
|
-
background:
|
|
450
|
-
box-shadow: 0 0 30px
|
|
449
|
+
background: rgb(0 212 255 / 3%);
|
|
450
|
+
box-shadow: 0 0 30px rgb(0 212 255 / 10%), inset 0 0 20px rgb(0 212 255 / 5%);
|
|
451
451
|
}
|
|
452
452
|
|
|
453
453
|
.accordion-starlight .accordion-header {
|
|
@@ -460,13 +460,13 @@ body.light-mode .code-window-title {
|
|
|
460
460
|
}
|
|
461
461
|
|
|
462
462
|
.accordion-starlight.active .accordion-header {
|
|
463
|
-
background: linear-gradient(to right,
|
|
464
|
-
border-bottom: 1px solid
|
|
463
|
+
background: linear-gradient(to right, rgb(255 179 138 / 15%), rgb(0 212 255 / 15%)) !important;
|
|
464
|
+
border-bottom: 1px solid rgb(0 212 255 / 20%);
|
|
465
465
|
}
|
|
466
466
|
|
|
467
467
|
.accordion-starlight .accordion-content {
|
|
468
|
-
background: linear-gradient(to bottom,
|
|
469
|
-
color:
|
|
468
|
+
background: linear-gradient(to bottom, rgb(0 0 0 / 30%), rgb(0 0 0 / 10%)) !important;
|
|
469
|
+
color: rgb(255 255 255 / 60%) !important;
|
|
470
470
|
font-size: 1rem;
|
|
471
471
|
line-height: 1.8;
|
|
472
472
|
padding: 0;
|
|
@@ -478,24 +478,24 @@ body.light-mode .code-window-title {
|
|
|
478
478
|
|
|
479
479
|
.accordion-starlight .accordion-icon {
|
|
480
480
|
color: var(--color-starlight-blue);
|
|
481
|
-
filter: drop-shadow(0 0 5px
|
|
481
|
+
filter: drop-shadow(0 0 5px rgb(0 212 255 / 50%));
|
|
482
482
|
}
|
|
483
483
|
|
|
484
|
-
|
|
484
|
+
html[data-theme="light"] .accordion-starlight.accordion-item {
|
|
485
485
|
background: white;
|
|
486
486
|
border-color: #e2e8f0;
|
|
487
487
|
}
|
|
488
488
|
|
|
489
|
-
|
|
489
|
+
html[data-theme="light"] .accordion-starlight.accordion-item.active {
|
|
490
490
|
border-color: var(--color-starlight-blue);
|
|
491
491
|
background: #f8fafc;
|
|
492
492
|
}
|
|
493
493
|
|
|
494
|
-
|
|
494
|
+
html[data-theme="light"] .accordion-starlight .accordion-header {
|
|
495
495
|
color: #1e293b;
|
|
496
496
|
}
|
|
497
497
|
|
|
498
|
-
|
|
498
|
+
html[data-theme="light"] .accordion-starlight .accordion-content {
|
|
499
499
|
background: #f1f5f9 !important;
|
|
500
500
|
color: #475569 !important;
|
|
501
501
|
}
|
|
@@ -524,7 +524,7 @@ body.light-mode .accordion-starlight .accordion-content {
|
|
|
524
524
|
z-index: 10;
|
|
525
525
|
}
|
|
526
526
|
|
|
527
|
-
|
|
527
|
+
html[data-theme="light"] .search-icon {
|
|
528
528
|
color: #64748b;
|
|
529
529
|
}
|
|
530
530
|
|
|
@@ -565,7 +565,7 @@ body.light-mode .search-icon {
|
|
|
565
565
|
.gallery-overlay {
|
|
566
566
|
position: absolute;
|
|
567
567
|
inset: 0;
|
|
568
|
-
background: linear-gradient(to top,
|
|
568
|
+
background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
|
|
569
569
|
display: flex;
|
|
570
570
|
align-items: flex-end;
|
|
571
571
|
padding: 1rem;
|
|
@@ -599,7 +599,7 @@ body.light-mode .search-icon {
|
|
|
599
599
|
-webkit-text-fill-color: transparent;
|
|
600
600
|
}
|
|
601
601
|
|
|
602
|
-
|
|
602
|
+
html[data-theme="light"] .stat-value {
|
|
603
603
|
background: linear-gradient(135deg, #1e293b 0%, var(--color-starlight-blue) 100%);
|
|
604
604
|
-webkit-background-clip: text;
|
|
605
605
|
-webkit-text-fill-color: transparent;
|
|
@@ -624,10 +624,10 @@ body.light-mode .stat-value {
|
|
|
624
624
|
|
|
625
625
|
/* 14. Hamburger Menu Glass */
|
|
626
626
|
.nav-glass {
|
|
627
|
-
background:
|
|
627
|
+
background: rgb(255 255 255 / 5%);
|
|
628
628
|
backdrop-filter: blur(24px);
|
|
629
629
|
-webkit-backdrop-filter: blur(24px);
|
|
630
|
-
border-bottom: 1px solid
|
|
630
|
+
border-bottom: 1px solid rgb(255 255 255 / 10%);
|
|
631
631
|
display: flex;
|
|
632
632
|
flex-direction: column;
|
|
633
633
|
position: sticky;
|
|
@@ -636,10 +636,10 @@ body.light-mode .stat-value {
|
|
|
636
636
|
padding: 0;
|
|
637
637
|
}
|
|
638
638
|
|
|
639
|
-
|
|
640
|
-
background:
|
|
641
|
-
border-bottom-color:
|
|
642
|
-
box-shadow: 0 4px 12px
|
|
639
|
+
html[data-theme="light"] .nav-glass {
|
|
640
|
+
background: rgb(255 255 255 / 95%);
|
|
641
|
+
border-bottom-color: rgb(0 0 0 / 8%);
|
|
642
|
+
box-shadow: 0 4px 12px rgb(0 0 0 / 3%);
|
|
643
643
|
}
|
|
644
644
|
|
|
645
645
|
.nav-desktop {
|
|
@@ -663,7 +663,7 @@ body.light-mode .nav-glass {
|
|
|
663
663
|
.nav-link {
|
|
664
664
|
font-size: 0.875rem;
|
|
665
665
|
font-weight: 500;
|
|
666
|
-
color:
|
|
666
|
+
color: rgb(255 255 255 / 70%);
|
|
667
667
|
transition: all 0.3s;
|
|
668
668
|
position: relative;
|
|
669
669
|
padding: 0.5rem 0;
|
|
@@ -683,7 +683,7 @@ body.light-mode .nav-glass {
|
|
|
683
683
|
}
|
|
684
684
|
|
|
685
685
|
.nav-list.vertical .nav-link:hover {
|
|
686
|
-
background:
|
|
686
|
+
background: rgb(255 255 255 / 5%);
|
|
687
687
|
color: var(--color-starlight-blue);
|
|
688
688
|
}
|
|
689
689
|
|
|
@@ -705,11 +705,11 @@ body.light-mode .nav-glass {
|
|
|
705
705
|
}
|
|
706
706
|
|
|
707
707
|
|
|
708
|
-
|
|
708
|
+
html[data-theme="light"] .nav-link {
|
|
709
709
|
color: #475569;
|
|
710
710
|
}
|
|
711
711
|
|
|
712
|
-
|
|
712
|
+
html[data-theme="light"] .nav-link:hover {
|
|
713
713
|
color: #1e293b;
|
|
714
714
|
}
|
|
715
715
|
|
|
@@ -722,26 +722,26 @@ body.light-mode .nav-link:hover {
|
|
|
722
722
|
align-items: center;
|
|
723
723
|
gap: 0.4rem;
|
|
724
724
|
cursor: pointer;
|
|
725
|
-
background:
|
|
726
|
-
border: 1px solid
|
|
725
|
+
background: rgb(255 255 255 / 5%);
|
|
726
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
727
727
|
border-radius: 0.5rem;
|
|
728
728
|
padding: 0.5rem;
|
|
729
729
|
transition: all 0.3s;
|
|
730
730
|
position: relative;
|
|
731
731
|
}
|
|
732
732
|
|
|
733
|
-
|
|
734
|
-
background:
|
|
735
|
-
border-color:
|
|
733
|
+
html[data-theme="light"] .hamburger {
|
|
734
|
+
background: rgb(0 0 0 / 2%);
|
|
735
|
+
border-color: rgb(0 0 0 / 10%);
|
|
736
736
|
}
|
|
737
737
|
|
|
738
738
|
.hamburger:hover {
|
|
739
|
-
background:
|
|
739
|
+
background: rgb(255 255 255 / 10%);
|
|
740
740
|
border-color: var(--color-starlight-blue);
|
|
741
741
|
}
|
|
742
742
|
|
|
743
|
-
|
|
744
|
-
background:
|
|
743
|
+
html[data-theme="light"] .hamburger:hover {
|
|
744
|
+
background: rgb(0 0 0 / 10%);
|
|
745
745
|
}
|
|
746
746
|
|
|
747
747
|
.hamburger span {
|
|
@@ -753,7 +753,7 @@ body.light-mode .hamburger:hover {
|
|
|
753
753
|
transform-origin: center;
|
|
754
754
|
}
|
|
755
755
|
|
|
756
|
-
|
|
756
|
+
html[data-theme="light"] .hamburger span {
|
|
757
757
|
background: #1e293b;
|
|
758
758
|
}
|
|
759
759
|
|
|
@@ -764,10 +764,10 @@ body.light-mode .hamburger span {
|
|
|
764
764
|
|
|
765
765
|
.nav-menu-mobile {
|
|
766
766
|
width: 100%;
|
|
767
|
-
background:
|
|
767
|
+
background: rgb(0 0 0 / 20%);
|
|
768
768
|
backdrop-filter: blur(10px);
|
|
769
769
|
-webkit-backdrop-filter: blur(10px);
|
|
770
|
-
border-top: 1px solid
|
|
770
|
+
border-top: 1px solid rgb(255 255 255 / 5%);
|
|
771
771
|
padding: 0;
|
|
772
772
|
max-height: 0;
|
|
773
773
|
overflow: hidden;
|
|
@@ -782,10 +782,10 @@ body.light-mode .hamburger span {
|
|
|
782
782
|
opacity: 1;
|
|
783
783
|
}
|
|
784
784
|
|
|
785
|
-
|
|
786
|
-
background: #
|
|
787
|
-
border-top-color:
|
|
788
|
-
box-shadow: 0 15px 30px
|
|
785
|
+
html[data-theme="light"] .nav-menu-mobile {
|
|
786
|
+
background: #fff;
|
|
787
|
+
border-top-color: rgb(0 0 0 / 8%);
|
|
788
|
+
box-shadow: 0 15px 30px rgb(0 0 0 / 5%);
|
|
789
789
|
}
|
|
790
790
|
|
|
791
791
|
/* Vertical Accordion Dropdowns */
|
|
@@ -815,11 +815,11 @@ body.light-mode .nav-menu-mobile {
|
|
|
815
815
|
.nav-list.vertical .dropdown-item {
|
|
816
816
|
padding: 0.5rem 1rem;
|
|
817
817
|
font-size: 0.825rem;
|
|
818
|
-
border-left: 1px solid
|
|
818
|
+
border-left: 1px solid rgb(255 255 255 / 10%);
|
|
819
819
|
border-radius: 0;
|
|
820
820
|
}
|
|
821
821
|
|
|
822
|
-
@media (
|
|
822
|
+
@media (width >= 768px) {
|
|
823
823
|
.nav-desktop {
|
|
824
824
|
display: flex;
|
|
825
825
|
}
|
|
@@ -844,15 +844,15 @@ body.light-mode .nav-menu-mobile {
|
|
|
844
844
|
width: 280px !important;
|
|
845
845
|
min-width: 280px !important;
|
|
846
846
|
border-bottom: none;
|
|
847
|
-
border-right: 1px solid
|
|
847
|
+
border-right: 1px solid rgb(255 255 255 / 10%);
|
|
848
848
|
padding: 2.5rem 1.5rem;
|
|
849
849
|
align-items: flex-start;
|
|
850
850
|
justify-content: flex-start;
|
|
851
851
|
}
|
|
852
852
|
|
|
853
|
-
|
|
854
|
-
background:
|
|
855
|
-
border-right-color:
|
|
853
|
+
html[data-theme="light"] .starlight-nav.vertical {
|
|
854
|
+
background: rgb(255 255 255 / 98%);
|
|
855
|
+
border-right-color: rgb(0 0 0 / 8%);
|
|
856
856
|
}
|
|
857
857
|
|
|
858
858
|
/* 15. More Form Controls */
|
|
@@ -865,7 +865,7 @@ body.light-mode .starlight-nav.vertical {
|
|
|
865
865
|
padding-right: 3rem !important;
|
|
866
866
|
}
|
|
867
867
|
|
|
868
|
-
|
|
868
|
+
html[data-theme="light"] .select-starlight {
|
|
869
869
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231e293b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
870
870
|
}
|
|
871
871
|
|
|
@@ -873,13 +873,13 @@ body.light-mode .select-starlight {
|
|
|
873
873
|
appearance: none;
|
|
874
874
|
width: 100%;
|
|
875
875
|
height: 6px;
|
|
876
|
-
background:
|
|
876
|
+
background: rgb(255 255 255 / 10%);
|
|
877
877
|
border-radius: 3px;
|
|
878
878
|
outline: none;
|
|
879
879
|
}
|
|
880
880
|
|
|
881
|
-
|
|
882
|
-
background:
|
|
881
|
+
html[data-theme="light"] .range-starlight {
|
|
882
|
+
background: rgb(0 0 0 / 10%);
|
|
883
883
|
}
|
|
884
884
|
|
|
885
885
|
.range-starlight::-webkit-slider-thumb {
|
|
@@ -903,78 +903,78 @@ body.light-mode .range-starlight {
|
|
|
903
903
|
height: 1.75rem;
|
|
904
904
|
}
|
|
905
905
|
|
|
906
|
-
.toggle-starlight .toggle-slider
|
|
906
|
+
.toggle-starlight .toggle-slider::before {
|
|
907
907
|
height: 1.25rem;
|
|
908
908
|
width: 1.25rem;
|
|
909
909
|
top: 0.25rem;
|
|
910
910
|
left: 0.25rem;
|
|
911
911
|
}
|
|
912
912
|
|
|
913
|
-
.toggle-starlight input:checked + .toggle-slider
|
|
913
|
+
.toggle-starlight input:checked + .toggle-slider::before {
|
|
914
914
|
transform: translateX(1.75rem);
|
|
915
915
|
}
|
|
916
916
|
|
|
917
917
|
.toggle-starlight .toggle-slider {
|
|
918
|
-
background:
|
|
919
|
-
border: 1px solid
|
|
918
|
+
background: rgb(255 255 255 / 10%);
|
|
919
|
+
border: 1px solid rgb(255 255 255 / 10%);
|
|
920
920
|
}
|
|
921
921
|
|
|
922
|
-
|
|
923
|
-
background:
|
|
924
|
-
border-color:
|
|
922
|
+
html[data-theme="light"] .toggle-starlight .toggle-slider {
|
|
923
|
+
background: rgb(0 0 0 / 10%);
|
|
924
|
+
border-color: rgb(0 0 0 / 15%);
|
|
925
925
|
}
|
|
926
926
|
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
927
|
+
html[data-theme="light"] .bg-starlight,
|
|
928
|
+
html[data-theme="light"] .bg-starlight:hover,
|
|
929
|
+
html[data-theme="light"] .hover\:bg-starlight:hover,
|
|
930
|
+
html[data-theme="light"] .btn-starlight,
|
|
931
|
+
html[data-theme="light"] .btn-starlight:hover,
|
|
932
|
+
html[data-theme="light"] .hover\:btn-starlight:hover,
|
|
933
|
+
html[data-theme="light"] .btn-primary,
|
|
934
|
+
html[data-theme="light"] .btn-primary:hover {
|
|
935
935
|
background: linear-gradient(135deg, #ffb38a 40%, #00d4ff 100%) !important;
|
|
936
936
|
}
|
|
937
937
|
|
|
938
|
-
|
|
938
|
+
html[data-theme="light"] .text-gradient-starlight {
|
|
939
939
|
background: linear-gradient(135deg, #ffb38a 40%, #00d4ff 100%) !important;
|
|
940
940
|
-webkit-background-clip: text !important;
|
|
941
941
|
-webkit-text-fill-color: transparent !important;
|
|
942
942
|
}
|
|
943
943
|
|
|
944
|
-
|
|
945
|
-
|
|
944
|
+
html[data-theme="light"] .text-success { color: #059669; }
|
|
945
|
+
html[data-theme="light"] .text-warning { color: #d97706; }
|
|
946
946
|
|
|
947
|
-
|
|
948
|
-
background-color:
|
|
949
|
-
border-color:
|
|
947
|
+
html[data-theme="light"] .dialog-content .bg-black\/40 {
|
|
948
|
+
background-color: rgb(0 0 0 / 5%);
|
|
949
|
+
border-color: rgb(0 0 0 / 10%);
|
|
950
950
|
}
|
|
951
951
|
|
|
952
952
|
/* 18. Semantic Typography Utilities */
|
|
953
953
|
.text-glow {
|
|
954
|
-
text-shadow: 0 0 10px
|
|
954
|
+
text-shadow: 0 0 10px rgb(0 212 255 / 50%), 0 0 20px rgb(0 212 255 / 20%);
|
|
955
955
|
}
|
|
956
956
|
|
|
957
957
|
.text-glass {
|
|
958
|
-
color:
|
|
958
|
+
color: rgb(255 255 255 / 60%);
|
|
959
959
|
backdrop-filter: blur(4px);
|
|
960
960
|
-webkit-backdrop-filter: blur(4px);
|
|
961
961
|
}
|
|
962
962
|
|
|
963
|
-
|
|
964
|
-
text-shadow: 0 0 8px
|
|
963
|
+
html[data-theme="light"] .text-glow {
|
|
964
|
+
text-shadow: 0 0 8px rgb(0 212 255 / 30%);
|
|
965
965
|
}
|
|
966
966
|
|
|
967
|
-
|
|
968
|
-
color:
|
|
967
|
+
html[data-theme="light"] .text-glass {
|
|
968
|
+
color: rgb(0 0 0 / 50%);
|
|
969
969
|
}
|
|
970
970
|
|
|
971
971
|
/* 17. Skeleton Loading (Starlight Variant) */
|
|
972
972
|
.starlight-loading {
|
|
973
973
|
background: linear-gradient(
|
|
974
974
|
90deg,
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
975
|
+
rgb(255 255 255 / 3%) 25%,
|
|
976
|
+
rgb(255 255 255 / 8%) 50%,
|
|
977
|
+
rgb(255 255 255 / 3%) 75%
|
|
978
978
|
);
|
|
979
979
|
background-size: 200% 100%;
|
|
980
980
|
animation: starlight-shimmer 2s infinite linear;
|
|
@@ -987,12 +987,12 @@ body.light-mode .text-glass {
|
|
|
987
987
|
100% { background-position: -200% 0; }
|
|
988
988
|
}
|
|
989
989
|
|
|
990
|
-
|
|
990
|
+
html[data-theme="light"] .starlight-loading {
|
|
991
991
|
background: linear-gradient(
|
|
992
992
|
90deg,
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
993
|
+
rgb(0 0 0 / 3%) 25%,
|
|
994
|
+
rgb(0 0 0 / 6%) 50%,
|
|
995
|
+
rgb(0 0 0 / 3%) 75%
|
|
996
996
|
);
|
|
997
997
|
background-size: 200% 100%;
|
|
998
998
|
}
|
|
@@ -1004,43 +1004,43 @@ body.light-mode .starlight-loading {
|
|
|
1004
1004
|
}
|
|
1005
1005
|
|
|
1006
1006
|
::-webkit-scrollbar-track {
|
|
1007
|
-
background:
|
|
1007
|
+
background: rgb(255 255 255 / 2%);
|
|
1008
1008
|
backdrop-filter: blur(10px);
|
|
1009
1009
|
}
|
|
1010
1010
|
|
|
1011
1011
|
::-webkit-scrollbar-thumb {
|
|
1012
|
-
background:
|
|
1013
|
-
border: 1px solid
|
|
1012
|
+
background: rgb(255 255 255 / 10%);
|
|
1013
|
+
border: 1px solid rgb(255 255 255 / 5%);
|
|
1014
1014
|
border-radius: 10px;
|
|
1015
1015
|
transition: all 0.3s;
|
|
1016
1016
|
}
|
|
1017
1017
|
|
|
1018
1018
|
::-webkit-scrollbar-thumb:hover {
|
|
1019
|
-
background:
|
|
1020
|
-
box-shadow: 0 0 10px
|
|
1019
|
+
background: rgb(0 212 255 / 30%);
|
|
1020
|
+
box-shadow: 0 0 10px rgb(0 212 255 / 20%);
|
|
1021
1021
|
}
|
|
1022
1022
|
|
|
1023
|
-
|
|
1024
|
-
background:
|
|
1023
|
+
html[data-theme="light"] ::-webkit-scrollbar-track {
|
|
1024
|
+
background: rgb(0 0 0 / 3%);
|
|
1025
1025
|
}
|
|
1026
1026
|
|
|
1027
|
-
|
|
1028
|
-
background:
|
|
1029
|
-
border-color:
|
|
1027
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb {
|
|
1028
|
+
background: rgb(0 0 0 / 10%);
|
|
1029
|
+
border-color: rgb(0 0 0 / 5%);
|
|
1030
1030
|
}
|
|
1031
1031
|
|
|
1032
|
-
|
|
1032
|
+
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
|
|
1033
1033
|
background: var(--color-starlight-blue);
|
|
1034
1034
|
}
|
|
1035
1035
|
|
|
1036
1036
|
/* Firefox Support */
|
|
1037
1037
|
* {
|
|
1038
1038
|
scrollbar-width: thin;
|
|
1039
|
-
scrollbar-color:
|
|
1039
|
+
scrollbar-color: rgb(255 255 255 / 10%) transparent;
|
|
1040
1040
|
}
|
|
1041
1041
|
|
|
1042
|
-
|
|
1043
|
-
scrollbar-color:
|
|
1042
|
+
html[data-theme="light"] * {
|
|
1043
|
+
scrollbar-color: rgb(0 0 0 / 10%) transparent;
|
|
1044
1044
|
}
|
|
1045
1045
|
|
|
1046
1046
|
@media (forced-colors: active) {
|
|
@@ -1073,28 +1073,28 @@ body.light-mode * {
|
|
|
1073
1073
|
justify-content: center;
|
|
1074
1074
|
cursor: pointer;
|
|
1075
1075
|
transition: all 0.2s ease;
|
|
1076
|
-
box-shadow: 0 0 20px
|
|
1076
|
+
box-shadow: 0 0 20px rgb(0 212 255 / 30%);
|
|
1077
1077
|
text-decoration: none;
|
|
1078
1078
|
}
|
|
1079
1079
|
|
|
1080
1080
|
.btn-starlight:hover {
|
|
1081
1081
|
transform: translateY(-2px);
|
|
1082
|
-
box-shadow: 0 5px 25px
|
|
1082
|
+
box-shadow: 0 5px 25px rgb(0 212 255 / 40%);
|
|
1083
1083
|
filter: brightness(1.1);
|
|
1084
1084
|
}
|
|
1085
1085
|
|
|
1086
1086
|
.btn-starlight:active {
|
|
1087
1087
|
transform: translateY(0) scale(0.95);
|
|
1088
|
-
box-shadow: 0 2px 10px
|
|
1088
|
+
box-shadow: 0 2px 10px rgb(0 212 255 / 20%);
|
|
1089
1089
|
filter: brightness(0.9);
|
|
1090
1090
|
}
|
|
1091
1091
|
|
|
1092
1092
|
.btn-starlight:focus-visible {
|
|
1093
1093
|
outline: 2px solid white;
|
|
1094
1094
|
outline-offset: 2px;
|
|
1095
|
-
box-shadow: 0 0 0 4px
|
|
1095
|
+
box-shadow: 0 0 0 4px rgb(0 212 255 / 30%);
|
|
1096
1096
|
}
|
|
1097
1097
|
|
|
1098
|
-
|
|
1098
|
+
html[data-theme="light"] .btn-starlight:focus-visible {
|
|
1099
1099
|
outline-color: var(--color-starlight-blue);
|
|
1100
1100
|
}}
|