@howssatoshi/quantumcss 1.0.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.
@@ -0,0 +1,733 @@
1
+ /* Quantum CSS - High Performance Output */
2
+ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }
3
+ html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
4
+ body { margin: 0; line-height: inherit; }
5
+ img { display: block; max-width: 100%; height: auto; }
6
+ button { cursor: pointer; background: transparent; padding: 0; color: inherit; font: inherit; }
7
+
8
+ .block {
9
+ display: block;
10
+ }
11
+
12
+ .shadow {
13
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
14
+ }
15
+
16
+ .rounded {
17
+ border-radius: 0.25rem;
18
+ }
19
+
20
+ .border {
21
+ border-width: 1px;
22
+ }
23
+
24
+ .gap {
25
+ gap: 0px;
26
+ }
27
+
28
+ .grid {
29
+ display: grid;
30
+ }
31
+
32
+ .grid-template-columns {
33
+ display: grid;
34
+ }
35
+
36
+ .flex {
37
+ display: flex;
38
+ }
39
+
40
+ .flex-direction {
41
+ display: flex;
42
+ }
43
+
44
+ .inline-block {
45
+ display: inline-block;
46
+ }
47
+
48
+ .items-center {
49
+ align-items: center;
50
+ }
51
+
52
+ .items-start {
53
+ align-items: flex-start;
54
+ }
55
+
56
+ .flex-start {
57
+ display: flex;
58
+ }
59
+
60
+ .items-end {
61
+ align-items: flex-end;
62
+ }
63
+
64
+ .flex-end {
65
+ display: flex;
66
+ }
67
+
68
+ .justify-center {
69
+ justify-content: center;
70
+ }
71
+
72
+ .justify-between {
73
+ justify-content: space-between;
74
+ }
75
+
76
+ .justify-start {
77
+ justify-content: flex-start;
78
+ }
79
+
80
+ .justify-end {
81
+ justify-content: flex-end;
82
+ }
83
+
84
+ .flex-col {
85
+ flex-direction: column;
86
+ }
87
+
88
+ .flex-grow {
89
+ flex-grow: 1;
90
+ }
91
+
92
+ .flex-wrap {
93
+ flex-wrap: wrap;
94
+ }
95
+
96
+ .w-full {
97
+ width: 100%;
98
+ }
99
+
100
+ .h-full {
101
+ height: 100%;
102
+ }
103
+
104
+ .max-w-prose {
105
+ max-width: 65ch;
106
+ }
107
+
108
+ .min-h-screen {
109
+ min-height: 100vh;
110
+ }
111
+
112
+ .font-bold {
113
+ font-weight: 700;
114
+ }
115
+
116
+ .font-medium {
117
+ font-weight: 500;
118
+ }
119
+
120
+ .font-light {
121
+ font-weight: 300;
122
+ }
123
+
124
+ .tracking-tighter {
125
+ letter-spacing: -0.05em;
126
+ }
127
+
128
+ .tracking-tight {
129
+ letter-spacing: -0.025em;
130
+ }
131
+
132
+ .text-center {
133
+ text-align: center;
134
+ }
135
+
136
+ .text-left {
137
+ text-align: left;
138
+ }
139
+
140
+ .text-right {
141
+ text-align: right;
142
+ }
143
+
144
+ .rounded-full {
145
+ border-radius: 9999px;
146
+ }
147
+
148
+ .rounded-xl {
149
+ border-radius: 0.75rem;
150
+ }
151
+
152
+ .border-t {
153
+ border-top-width: 1px;
154
+ }
155
+
156
+ .border-b {
157
+ border-bottom-width: 1px;
158
+ }
159
+
160
+ .transition {
161
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
162
+ }
163
+
164
+ .scale-105 {
165
+ transform: scale(1.05);
166
+ }
167
+
168
+ .active-scale {
169
+ transform: scale(0.96);
170
+ }
171
+
172
+ .cursor-pointer {
173
+ cursor: pointer;
174
+ }
175
+
176
+ .overflow-hidden {
177
+ overflow: hidden;
178
+ }
179
+
180
+ .hidden {
181
+ display: none;
182
+ }
183
+
184
+ .glass {
185
+ background-color: rgba(255, 255, 255, 0.03);
186
+ backdrop-filter: blur(16px);
187
+ -webkit-backdrop-filter: blur(16px);
188
+ border: 1px solid rgba(255, 255, 255, 0.1);
189
+ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
190
+ }
191
+
192
+ .glow-blue {
193
+ box-shadow: 0 0 30px rgba(0, 212, 255, 0.25);
194
+ }
195
+
196
+ .bg-starlight {
197
+ background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
198
+ }
199
+
200
+ .text-gradient-starlight {
201
+ background: linear-gradient(to right, #ffb38a, #00d4ff);
202
+ -webkit-background-clip: text;
203
+ -webkit-text-fill-color: transparent;
204
+ display: inline-block;
205
+ }
206
+
207
+ .btn-starlight {
208
+ background: linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%);
209
+ color: #000;
210
+ border: none;
211
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
212
+ font-weight: 700;
213
+ transition: all 0.2s ease;
214
+ height: 3rem;
215
+ padding: 0 1.5rem;
216
+ display: inline-flex;
217
+ align-items: center;
218
+ justify-content: center;
219
+ border-radius: 0.75rem;
220
+ cursor: pointer;
221
+ }
222
+
223
+ .btn-secondary {
224
+ background: rgba(255, 255, 255, 0.05);
225
+ color: inherit;
226
+ border: 1px solid rgba(255, 255, 255, 0.15);
227
+ font-weight: 700;
228
+ transition: all 0.2s ease;
229
+ height: 3rem;
230
+ padding: 0 1.5rem;
231
+ display: inline-flex;
232
+ align-items: center;
233
+ justify-content: center;
234
+ border-radius: 0.75rem;
235
+ cursor: pointer;
236
+ }
237
+
238
+ .input-starlight {
239
+ background-color: rgba(255, 255, 255, 0.04);
240
+ border: 1px solid rgba(255, 255, 255, 0.15);
241
+ color: inherit;
242
+ border-radius: 0.75rem;
243
+ padding: 0 2.5rem 0 1rem;
244
+ appearance: none;
245
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9l4 4 4-4' /%3E%3C/svg%3E");
246
+ background-repeat: no-repeat;
247
+ background-position: right 1rem center;
248
+ background-size: 1rem;
249
+ transition: all 0.2s ease;
250
+ height: 3rem;
251
+ }
252
+
253
+ .checkbox-starlight {
254
+ appearance: none;
255
+ width: 1.25rem;
256
+ height: 1.25rem;
257
+ background: rgba(255, 255, 255, 0.05);
258
+ border: 1px solid rgba(255, 255, 255, 0.2);
259
+ border-radius: 0.375rem;
260
+ cursor: pointer;
261
+ transition: all 0.2s ease;
262
+ position: relative;
263
+ display: inline-flex;
264
+ align-items: center;
265
+ justify-content: center;
266
+ }
267
+
268
+ .radio-starlight {
269
+ appearance: none;
270
+ width: 1.25rem;
271
+ height: 1.25rem;
272
+ background: rgba(255, 255, 255, 0.05);
273
+ border: 1px solid rgba(255, 255, 255, 0.2);
274
+ border-radius: 50%;
275
+ cursor: pointer;
276
+ transition: all 0.2s ease;
277
+ position: relative;
278
+ display: inline-flex;
279
+ align-items: center;
280
+ justify-content: center;
281
+ }
282
+
283
+ .dialog-overlay {
284
+ position: fixed;
285
+ top: 0;
286
+ left: 0;
287
+ width: 100vw;
288
+ height: 100vh;
289
+ background: rgba(0, 0, 0, 0.6);
290
+ backdrop-filter: blur(12px);
291
+ display: flex;
292
+ align-items: center;
293
+ justify-content: center;
294
+ z-index: 400;
295
+ }
296
+
297
+ .dialog-content {
298
+ background-color: rgba(10, 10, 20, 0.98);
299
+ backdrop-filter: blur(20px);
300
+ border: 1px solid rgba(255, 255, 255, 0.1);
301
+ border-radius: 1.5rem;
302
+ width: 90%;
303
+ max-width: 600px;
304
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
305
+ overflow: hidden;
306
+ position: relative;
307
+ }
308
+
309
+ .dropdown-menu {
310
+ background-color: rgba(15, 15, 30, 0.98);
311
+ backdrop-filter: blur(20px);
312
+ border: 1px solid rgba(255, 255, 255, 0.1);
313
+ border-radius: 1rem;
314
+ padding: 0.5rem;
315
+ box-shadow: 0 20px 40px rgba(0,0,0,0.4);
316
+ min-width: 200px;
317
+ z-index: 600;
318
+ margin-top: 0.5rem;
319
+ }
320
+
321
+ .dropdown-item {
322
+ padding: 0.625rem 1rem;
323
+ color: rgba(255,255,255,0.7);
324
+ border-radius: 0.625rem;
325
+ display: block;
326
+ width: 100%;
327
+ text-align: left;
328
+ transition: all 0.2s;
329
+ cursor: pointer;
330
+ font-size: 0.875rem;
331
+ }
332
+
333
+ .tooltip {
334
+ position: absolute;
335
+ bottom: 125%;
336
+ left: 50%;
337
+ transform: translateX(-50%);
338
+ padding: 0.5rem 0.75rem;
339
+ background-color: rgba(10, 10, 30, 0.98);
340
+ backdrop-filter: blur(12px);
341
+ border: 1px solid rgba(0, 212, 255, 0.3);
342
+ border-radius: 0.5rem;
343
+ color: #f1f5f9;
344
+ font-size: 0.75rem;
345
+ white-space: nowrap;
346
+ pointer-events: none;
347
+ opacity: 0;
348
+ transition: all 0.2s ease;
349
+ z-index: 800;
350
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
351
+ }
352
+
353
+ .skeleton {
354
+ background-color: rgba(255, 255, 255, 0.1);
355
+ background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
356
+ background-size: 200% 100%;
357
+ background-repeat: no-repeat;
358
+ border-radius: 0.5rem;
359
+ width: 100%;
360
+ height: 1rem;
361
+ }
362
+
363
+ .p-8 {
364
+ padding: 2rem;
365
+ }
366
+
367
+ .bg-starlight-deep {
368
+ background-color: #08081a;
369
+ }
370
+
371
+ .mx-auto {
372
+ margin-left: auto;
373
+ margin-right: auto;
374
+ }
375
+
376
+ .mb-20 {
377
+ margin-bottom: 5rem;
378
+ }
379
+
380
+ .pt-16 {
381
+ padding-top: 4rem;
382
+ }
383
+
384
+ .text-6xl {
385
+ font-size: 4.5rem;
386
+ }
387
+
388
+ .mb-6 {
389
+ margin-bottom: 1.5rem;
390
+ }
391
+
392
+ .text-xl {
393
+ font-size: 1.25rem;
394
+ }
395
+
396
+ .text-gray-400 {
397
+ color: #9ca3af;
398
+ }
399
+
400
+ .mb-10 {
401
+ margin-bottom: 2.5rem;
402
+ }
403
+
404
+ .gap-6 {
405
+ gap: 1.5rem;
406
+ }
407
+
408
+ .text-black {
409
+ color: #000000;
410
+ }
411
+
412
+ .px-10 {
413
+ padding-left: 2.5rem;
414
+ padding-right: 2.5rem;
415
+ }
416
+
417
+ .py-4 {
418
+ padding-top: 1rem;
419
+ padding-bottom: 1rem;
420
+ }
421
+
422
+ .hover\:bg-white:hover {
423
+ background-color: #ffffff;
424
+ }
425
+
426
+ .text-white {
427
+ color: #ffffff;
428
+ }
429
+
430
+ .text-sm {
431
+ font-size: 0.875rem;
432
+ }
433
+
434
+ .grid-cols-1 {
435
+ grid-template-columns: repeat(1, minmax(0, 1fr));
436
+ }
437
+
438
+ .gap-10 {
439
+ gap: 2.5rem;
440
+ }
441
+
442
+ .p-10 {
443
+ padding: 2.5rem;
444
+ }
445
+
446
+ .rounded-2xl {
447
+ border-radius: 0.25rem;
448
+ }
449
+
450
+ .text-2xl {
451
+ font-size: 1.5rem;
452
+ }
453
+
454
+ .mb-4 {
455
+ margin-bottom: 1rem;
456
+ }
457
+
458
+ .bg-white {
459
+ background-color: #ffffff;
460
+ }
461
+
462
+ .p-4 {
463
+ padding: 1rem;
464
+ }
465
+
466
+ .border-white {
467
+ border-color: #ffffff;
468
+ }
469
+
470
+ .py-3 {
471
+ padding-top: 0.75rem;
472
+ padding-bottom: 0.75rem;
473
+ }
474
+
475
+ .p-12 {
476
+ padding: 3rem;
477
+ }
478
+
479
+ .rounded-3xl {
480
+ border-radius: 0.375rem;
481
+ }
482
+
483
+ .text-4xl {
484
+ font-size: 2.5rem;
485
+ }
486
+
487
+ .text-lg {
488
+ font-size: 1.125rem;
489
+ }
490
+
491
+ .gap-4 {
492
+ gap: 1rem;
493
+ }
494
+
495
+ .px-6 {
496
+ padding-left: 1.5rem;
497
+ padding-right: 1.5rem;
498
+ }
499
+
500
+ .hover\:scale-105:hover {
501
+ transform: scale(1.05);
502
+ }
503
+
504
+ .mt-32 {
505
+ margin-top: 8rem;
506
+ }
507
+
508
+ .pt-10 {
509
+ padding-top: 2.5rem;
510
+ }
511
+
512
+ .text-gray-500 {
513
+ color: #6b7280;
514
+ }
515
+
516
+ .mb-2 {
517
+ margin-bottom: 0.5rem;
518
+ }
519
+
520
+ .mb-8 {
521
+ margin-bottom: 2rem;
522
+ }
523
+
524
+ .text-xs {
525
+ font-size: 0.75rem;
526
+ }
527
+
528
+ .px-8 {
529
+ padding-left: 2rem;
530
+ padding-right: 2rem;
531
+ }
532
+
533
+ .pt-20 {
534
+ padding-top: 5rem;
535
+ }
536
+
537
+ .pb-12 {
538
+ padding-bottom: 3rem;
539
+ }
540
+
541
+ .pb-20 {
542
+ padding-bottom: 5rem;
543
+ }
544
+
545
+ .grid-3 {
546
+ display: grid;
547
+ }
548
+
549
+ .gap-3 {
550
+ gap: 0.75rem;
551
+ }
552
+
553
+ .mt-6 {
554
+ margin-top: 1.5rem;
555
+ }
556
+
557
+ .w-3\/4 {
558
+ width: 75.00%;
559
+ }
560
+
561
+ .h-6 {
562
+ height: 1.5rem;
563
+ }
564
+
565
+ .h-12 {
566
+ height: 3rem;
567
+ }
568
+
569
+ .w-1\/2 {
570
+ width: 50.00%;
571
+ }
572
+
573
+ .h-4 {
574
+ height: 1rem;
575
+ }
576
+
577
+ .bg-gray-50 {
578
+ background-color: #f9fafb;
579
+ }
580
+
581
+ .text-gray-900 {
582
+ color: #111827;
583
+ }
584
+
585
+ .mb-16 {
586
+ margin-bottom: 4rem;
587
+ }
588
+
589
+ .border-gray-200 {
590
+ border-color: #e5e7eb;
591
+ }
592
+
593
+ .pb-8 {
594
+ padding-bottom: 2rem;
595
+ }
596
+
597
+ .text-5xl {
598
+ font-size: 3.5rem;
599
+ }
600
+
601
+ .bg-blue-600 {
602
+ background-color: #2563eb;
603
+ }
604
+
605
+ .py-2 {
606
+ padding-top: 0.5rem;
607
+ padding-bottom: 0.5rem;
608
+ }
609
+
610
+ .text-blue-600 {
611
+ color: #2563eb;
612
+ }
613
+
614
+ .text-gray-700 {
615
+ color: #374151;
616
+ }
617
+
618
+ .text-base {
619
+ font-size: 1rem;
620
+ }
621
+
622
+ .text-gray-600 {
623
+ color: #4b5563;
624
+ }
625
+
626
+ .shadow-md {
627
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
628
+ }
629
+
630
+ .bg-gray-800 {
631
+ background-color: #1f2937;
632
+ }
633
+
634
+ .hover\:bg-black:hover {
635
+ background-color: #000000;
636
+ }
637
+
638
+ .border-gray-300 {
639
+ border-color: #d1d5db;
640
+ }
641
+
642
+ .hover\:bg-gray-100:hover {
643
+ background-color: #f3f4f6;
644
+ }
645
+
646
+ .rounded-lg {
647
+ border-radius: 0.5rem;
648
+ }
649
+
650
+ .shadow-sm {
651
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
652
+ }
653
+
654
+ .border-gray-100 {
655
+ border-color: #f3f4f6;
656
+ }
657
+
658
+ .mt-8 {
659
+ margin-top: 2rem;
660
+ }
661
+
662
+ .bg-blue-50 {
663
+ background-color: #eff6ff;
664
+ }
665
+
666
+ .w-1\/4 {
667
+ width: 25.00%;
668
+ }
669
+
670
+ .gap-12 {
671
+ gap: 3rem;
672
+ }
673
+
674
+ .shadow-xl {
675
+ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
676
+ }
677
+
678
+ .bg-gray-900 {
679
+ background-color: #111827;
680
+ }
681
+
682
+ .border-gray-700 {
683
+ border-color: #374151;
684
+ }
685
+
686
+ .text-gray-300 {
687
+ color: #d1d5db;
688
+ }
689
+
690
+ .px-4 {
691
+ padding-left: 1rem;
692
+ padding-right: 1rem;
693
+ }
694
+
695
+ .focus\:border-blue-600:focus {
696
+ border-color: #2563eb;
697
+ }
698
+
699
+ .pt-8 {
700
+ padding-top: 2rem;
701
+ }
702
+
703
+ @media (min-width: 768px) {
704
+ .md\:grid-cols-2 {
705
+ grid-template-columns: repeat(2, minmax(0, 1fr));
706
+ }
707
+
708
+ .md\:flex-row {
709
+ flex-direction: row;
710
+ }
711
+
712
+ .md\:w-80 {
713
+ width: 80;
714
+ }
715
+
716
+ .md\:text-5xl {
717
+ font-size: 3.5rem;
718
+ }
719
+
720
+ .md\:text-lg {
721
+ font-size: 1.125rem;
722
+ }
723
+
724
+ .md\:w-1\/2 {
725
+ width: 50.00%;
726
+ }
727
+ }
728
+
729
+ @media (min-width: 1024px) {
730
+ .lg\:grid-cols-4 {
731
+ grid-template-columns: repeat(4, minmax(0, 1fr));
732
+ }
733
+ }