@adityanair98/api-oracle 0.5.0 → 0.6.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.
@@ -1,1464 +0,0 @@
1
- :root {
2
- --color-primary: #2563EB;
3
- --color-primary-hover: #1D4ED8;
4
- --color-success: #16A34A;
5
- --color-warning: #D97706;
6
- --color-danger: #DC2626;
7
- --color-bg: #F8FAFC;
8
- --color-sidebar: #1E293B;
9
- --color-sidebar-hover: #334155;
10
- --color-sidebar-active: #2563EB;
11
- --color-card: #FFFFFF;
12
- --color-border: #E2E8F0;
13
- --color-text: #0F172A;
14
- --color-text-muted: #64748B;
15
- --color-text-sidebar: #CBD5E1;
16
- --color-code-bg: #1E293B;
17
- --color-code-text: #E2E8F0;
18
-
19
- --sidebar-width: 260px;
20
- --radius-sm: 6px;
21
- --radius-md: 10px;
22
- --radius-lg: 12px;
23
- --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
24
- --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
25
- --shadow-lg: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.07);
26
- --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', ui-monospace, monospace;
27
- }
28
-
29
- *, *::before, *::after {
30
- box-sizing: border-box;
31
- margin: 0;
32
- padding: 0;
33
- }
34
-
35
- html, body {
36
- height: 100%;
37
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
38
- font-size: 14px;
39
- color: var(--color-text);
40
- background: var(--color-bg);
41
- line-height: 1.5;
42
- -webkit-font-smoothing: antialiased;
43
- }
44
-
45
- #app {
46
- display: grid;
47
- grid-template-columns: var(--sidebar-width) 1fr;
48
- height: 100vh;
49
- overflow: hidden;
50
- }
51
-
52
- /* ─── Sidebar ──────────────────────────────────────────────────────────────── */
53
-
54
- .sidebar {
55
- background: var(--color-sidebar);
56
- height: 100vh;
57
- overflow-y: auto;
58
- overflow-x: hidden;
59
- display: flex;
60
- flex-direction: column;
61
- flex-shrink: 0;
62
- scrollbar-width: thin;
63
- scrollbar-color: #334155 transparent;
64
- }
65
-
66
- .sidebar::-webkit-scrollbar {
67
- width: 4px;
68
- }
69
-
70
- .sidebar::-webkit-scrollbar-track {
71
- background: transparent;
72
- }
73
-
74
- .sidebar::-webkit-scrollbar-thumb {
75
- background: #334155;
76
- border-radius: 2px;
77
- }
78
-
79
- .sidebar-header {
80
- display: flex;
81
- align-items: center;
82
- gap: 10px;
83
- padding: 20px 18px;
84
- border-bottom: 1px solid rgba(255,255,255,.06);
85
- flex-shrink: 0;
86
- }
87
-
88
- .logo-icon {
89
- font-size: 22px;
90
- line-height: 1;
91
- }
92
-
93
- .logo-text {
94
- font-size: 16px;
95
- font-weight: 700;
96
- color: #FFFFFF;
97
- letter-spacing: -0.01em;
98
- }
99
-
100
- .sidebar-nav {
101
- padding: 10px 10px 0;
102
- flex-shrink: 0;
103
- }
104
-
105
- .nav-item {
106
- display: flex;
107
- align-items: center;
108
- gap: 9px;
109
- padding: 9px 10px;
110
- border-radius: var(--radius-sm);
111
- color: var(--color-text-sidebar);
112
- text-decoration: none;
113
- font-size: 13.5px;
114
- font-weight: 500;
115
- transition: background 0.14s ease, color 0.14s ease;
116
- margin-bottom: 2px;
117
- cursor: pointer;
118
- }
119
-
120
- .nav-item:hover {
121
- background: var(--color-sidebar-hover);
122
- color: #FFFFFF;
123
- }
124
-
125
- .nav-item.active {
126
- background: var(--color-sidebar-active);
127
- color: #FFFFFF;
128
- }
129
-
130
- .nav-icon {
131
- font-style: normal;
132
- width: 18px;
133
- text-align: center;
134
- flex-shrink: 0;
135
- font-size: 14px;
136
- }
137
-
138
- .sidebar-categories {
139
- padding: 18px 10px 20px;
140
- flex: 1;
141
- }
142
-
143
- .sidebar-section-title {
144
- font-size: 10.5px;
145
- font-weight: 600;
146
- text-transform: uppercase;
147
- letter-spacing: 0.08em;
148
- color: #475569;
149
- padding: 0 8px 8px;
150
- }
151
-
152
- .category-item {
153
- display: flex;
154
- align-items: center;
155
- justify-content: space-between;
156
- padding: 7px 10px;
157
- border-radius: var(--radius-sm);
158
- color: var(--color-text-sidebar);
159
- text-decoration: none;
160
- font-size: 13px;
161
- font-weight: 500;
162
- transition: background 0.14s ease, color 0.14s ease;
163
- margin-bottom: 1px;
164
- cursor: pointer;
165
- text-transform: capitalize;
166
- }
167
-
168
- .category-item:hover {
169
- background: var(--color-sidebar-hover);
170
- color: #FFFFFF;
171
- }
172
-
173
- .category-item.active {
174
- background: rgba(37,99,235,.25);
175
- color: #93C5FD;
176
- }
177
-
178
- .category-count {
179
- font-size: 11px;
180
- font-weight: 600;
181
- background: rgba(255,255,255,.1);
182
- color: #94A3B8;
183
- padding: 1px 7px;
184
- border-radius: 20px;
185
- min-width: 24px;
186
- text-align: center;
187
- }
188
-
189
- .category-item.active .category-count {
190
- background: rgba(37,99,235,.4);
191
- color: #BFDBFE;
192
- }
193
-
194
- /* ─── Main Area ────────────────────────────────────────────────────────────── */
195
-
196
- .main {
197
- height: 100vh;
198
- overflow-y: auto;
199
- overflow-x: hidden;
200
- display: flex;
201
- flex-direction: column;
202
- background: var(--color-bg);
203
- }
204
-
205
- /* ─── Stats Bar ────────────────────────────────────────────────────────────── */
206
-
207
- .main-header {
208
- background: var(--color-card);
209
- border-bottom: 1px solid var(--color-border);
210
- flex-shrink: 0;
211
- position: sticky;
212
- top: 0;
213
- z-index: 10;
214
- }
215
-
216
- .stats-bar {
217
- display: flex;
218
- align-items: center;
219
- gap: 0;
220
- padding: 0 24px;
221
- border-bottom: 1px solid var(--color-border);
222
- }
223
-
224
- .stat-item {
225
- display: flex;
226
- flex-direction: column;
227
- align-items: center;
228
- padding: 10px 18px;
229
- border-right: 1px solid var(--color-border);
230
- min-width: 80px;
231
- }
232
-
233
- .stat-item:last-child {
234
- border-right: none;
235
- }
236
-
237
- .stat-num {
238
- font-size: 20px;
239
- font-weight: 700;
240
- color: var(--color-text);
241
- line-height: 1;
242
- letter-spacing: -0.02em;
243
- }
244
-
245
- .stat-num.stat-green { color: var(--color-success); }
246
- .stat-num.stat-yellow { color: var(--color-warning); }
247
- .stat-num.stat-red { color: var(--color-danger); }
248
-
249
- .stat-label {
250
- font-size: 11px;
251
- color: var(--color-text-muted);
252
- font-weight: 500;
253
- margin-top: 2px;
254
- text-transform: uppercase;
255
- letter-spacing: 0.04em;
256
- }
257
-
258
- /* ─── Search Bar ───────────────────────────────────────────────────────────── */
259
-
260
- .search-bar {
261
- padding: 14px 24px;
262
- position: relative;
263
- border-bottom: 1px solid var(--color-border);
264
- }
265
-
266
- .search-input {
267
- width: 100%;
268
- padding: 10px 40px 10px 16px;
269
- border: 1.5px solid var(--color-border);
270
- border-radius: var(--radius-md);
271
- font-size: 14.5px;
272
- color: var(--color-text);
273
- background: var(--color-bg);
274
- outline: none;
275
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
276
- }
277
-
278
- .search-input:focus {
279
- border-color: var(--color-primary);
280
- box-shadow: 0 0 0 3px rgba(37,99,235,.12);
281
- }
282
-
283
- .search-input::placeholder {
284
- color: #94A3B8;
285
- }
286
-
287
- .search-clear {
288
- position: absolute;
289
- right: 34px;
290
- top: 50%;
291
- transform: translateY(-50%);
292
- background: none;
293
- border: none;
294
- color: var(--color-text-muted);
295
- cursor: pointer;
296
- font-size: 14px;
297
- padding: 4px 6px;
298
- border-radius: var(--radius-sm);
299
- line-height: 1;
300
- transition: color 0.12s ease, background 0.12s ease;
301
- }
302
-
303
- .search-clear:hover {
304
- color: var(--color-text);
305
- background: var(--color-border);
306
- }
307
-
308
- /* ─── Toolbar ──────────────────────────────────────────────────────────────── */
309
-
310
- .toolbar {
311
- display: flex;
312
- align-items: center;
313
- justify-content: space-between;
314
- padding: 8px 24px;
315
- }
316
-
317
- .results-count {
318
- font-size: 13px;
319
- color: var(--color-text-muted);
320
- font-weight: 500;
321
- }
322
-
323
- .sort-controls {
324
- display: flex;
325
- align-items: center;
326
- gap: 8px;
327
- }
328
-
329
- .sort-label {
330
- font-size: 13px;
331
- color: var(--color-text-muted);
332
- font-weight: 500;
333
- }
334
-
335
- .sort-select {
336
- padding: 5px 28px 5px 10px;
337
- border: 1px solid var(--color-border);
338
- border-radius: var(--radius-sm);
339
- background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center;
340
- -webkit-appearance: none;
341
- appearance: none;
342
- font-size: 13px;
343
- color: var(--color-text);
344
- cursor: pointer;
345
- outline: none;
346
- transition: border-color 0.12s ease;
347
- }
348
-
349
- .sort-select:focus {
350
- border-color: var(--color-primary);
351
- }
352
-
353
- /* ─── Entries Grid ─────────────────────────────────────────────────────────── */
354
-
355
- .entries-grid {
356
- display: grid;
357
- grid-template-columns: repeat(3, 1fr);
358
- gap: 16px;
359
- padding: 24px;
360
- align-content: start;
361
- }
362
-
363
- /* ─── Entry Card ───────────────────────────────────────────────────────────── */
364
-
365
- .entry-card {
366
- background: var(--color-card);
367
- border: 1px solid var(--color-border);
368
- border-radius: var(--radius-lg);
369
- padding: 16px;
370
- box-shadow: var(--shadow-sm);
371
- display: flex;
372
- flex-direction: column;
373
- gap: 10px;
374
- transition: box-shadow 0.18s ease, transform 0.18s ease;
375
- cursor: default;
376
- }
377
-
378
- .entry-card:hover {
379
- box-shadow: var(--shadow-md);
380
- transform: translateY(-1px);
381
- }
382
-
383
- .card-top {
384
- display: flex;
385
- align-items: flex-start;
386
- justify-content: space-between;
387
- gap: 8px;
388
- }
389
-
390
- .card-badges {
391
- display: flex;
392
- align-items: center;
393
- gap: 6px;
394
- flex-wrap: wrap;
395
- }
396
-
397
- .card-name {
398
- font-size: 16px;
399
- font-weight: 700;
400
- color: var(--color-text);
401
- letter-spacing: -0.01em;
402
- line-height: 1.2;
403
- }
404
-
405
- .card-description {
406
- font-size: 13px;
407
- color: var(--color-text-muted);
408
- line-height: 1.45;
409
- overflow: hidden;
410
- display: -webkit-box;
411
- -webkit-line-clamp: 2;
412
- -webkit-box-orient: vertical;
413
- }
414
-
415
- .card-meta {
416
- display: flex;
417
- align-items: center;
418
- justify-content: space-between;
419
- gap: 8px;
420
- }
421
-
422
- .card-score-row {
423
- display: flex;
424
- align-items: center;
425
- gap: 6px;
426
- }
427
-
428
- .score-dots {
429
- font-size: 10px;
430
- letter-spacing: 1px;
431
- line-height: 1;
432
- }
433
-
434
- .score-dots .dot-filled {
435
- color: inherit;
436
- }
437
-
438
- .score-dots.score-high { color: var(--color-success); }
439
- .score-dots.score-mid { color: var(--color-warning); }
440
- .score-dots.score-low { color: var(--color-danger); }
441
-
442
- .score-num {
443
- font-size: 12px;
444
- font-weight: 700;
445
- color: var(--color-text-muted);
446
- }
447
-
448
- .staleness-dot {
449
- width: 8px;
450
- height: 8px;
451
- border-radius: 50%;
452
- flex-shrink: 0;
453
- }
454
-
455
- .staleness-dot.fresh { background: #22C55E; }
456
- .staleness-dot.aging { background: #EAB308; }
457
- .staleness-dot.stale { background: #F97316; }
458
- .staleness-dot.critical { background: var(--color-danger); }
459
-
460
- .card-bestfor {
461
- font-size: 12px;
462
- color: var(--color-text-muted);
463
- overflow: hidden;
464
- white-space: nowrap;
465
- text-overflow: ellipsis;
466
- }
467
-
468
- .card-bestfor strong {
469
- color: var(--color-text);
470
- font-weight: 600;
471
- }
472
-
473
- .card-footer {
474
- margin-top: auto;
475
- padding-top: 6px;
476
- border-top: 1px solid var(--color-border);
477
- }
478
-
479
- /* ─── Category Badge ───────────────────────────────────────────────────────── */
480
-
481
- .category-badge {
482
- display: inline-flex;
483
- align-items: center;
484
- padding: 2px 9px;
485
- border-radius: 20px;
486
- font-size: 11px;
487
- font-weight: 600;
488
- color: #fff;
489
- text-transform: capitalize;
490
- letter-spacing: 0.01em;
491
- white-space: nowrap;
492
- }
493
-
494
- /* ─── Buttons ──────────────────────────────────────────────────────────────── */
495
-
496
- .btn {
497
- display: inline-flex;
498
- align-items: center;
499
- justify-content: center;
500
- gap: 6px;
501
- padding: 8px 16px;
502
- border-radius: var(--radius-sm);
503
- font-size: 13.5px;
504
- font-weight: 600;
505
- cursor: pointer;
506
- border: 1.5px solid transparent;
507
- transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
508
- text-decoration: none;
509
- line-height: 1;
510
- white-space: nowrap;
511
- }
512
-
513
- .btn:active {
514
- transform: scale(0.98);
515
- }
516
-
517
- .btn-primary {
518
- background: var(--color-primary);
519
- color: #fff;
520
- border-color: var(--color-primary);
521
- }
522
-
523
- .btn-primary:hover {
524
- background: var(--color-primary-hover);
525
- border-color: var(--color-primary-hover);
526
- box-shadow: 0 2px 8px rgba(37,99,235,.3);
527
- }
528
-
529
- .btn-sm {
530
- padding: 5px 11px;
531
- font-size: 12.5px;
532
- }
533
-
534
- .btn-outline {
535
- background: transparent;
536
- color: var(--color-primary);
537
- border-color: var(--color-primary);
538
- }
539
-
540
- .btn-outline:hover {
541
- background: rgba(37,99,235,.06);
542
- }
543
-
544
- .btn-ghost {
545
- background: transparent;
546
- color: var(--color-text-muted);
547
- border-color: var(--color-border);
548
- }
549
-
550
- .btn-ghost:hover {
551
- background: var(--color-border);
552
- color: var(--color-text);
553
- }
554
-
555
- .btn-full {
556
- width: 100%;
557
- }
558
-
559
- /* ─── Badges ───────────────────────────────────────────────────────────────── */
560
-
561
- .badge {
562
- display: inline-flex;
563
- align-items: center;
564
- padding: 2px 8px;
565
- border-radius: 20px;
566
- font-size: 11.5px;
567
- font-weight: 600;
568
- white-space: nowrap;
569
- }
570
-
571
- .badge-green { background: #DCFCE7; color: #15803D; }
572
- .badge-yellow { background: #FEF9C3; color: #A16207; }
573
- .badge-orange { background: #FEF3C7; color: #B45309; }
574
- .badge-red { background: #FEE2E2; color: #B91C1C; }
575
- .badge-blue { background: #DBEAFE; color: #1D4ED8; }
576
- .badge-purple { background: #EDE9FE; color: #6D28D9; }
577
- .badge-gray { background: #F1F5F9; color: #475569; }
578
-
579
- /* ─── Loading / Empty States ───────────────────────────────────────────────── */
580
-
581
- .loading-state {
582
- grid-column: 1 / -1;
583
- text-align: center;
584
- padding: 40px 20px;
585
- color: var(--color-text-muted);
586
- font-size: 14px;
587
- }
588
-
589
- .empty-state {
590
- grid-column: 1 / -1;
591
- text-align: center;
592
- padding: 60px 20px;
593
- color: var(--color-text-muted);
594
- }
595
-
596
- .empty-state-icon {
597
- font-size: 40px;
598
- margin-bottom: 12px;
599
- display: block;
600
- opacity: 0.5;
601
- }
602
-
603
- .empty-state-title {
604
- font-size: 16px;
605
- font-weight: 600;
606
- color: var(--color-text);
607
- margin-bottom: 6px;
608
- }
609
-
610
- .empty-state-subtitle {
611
- font-size: 13px;
612
- }
613
-
614
- /* ─── View System ──────────────────────────────────────────────────────────── */
615
-
616
- .view {
617
- display: none;
618
- flex: 1;
619
- }
620
-
621
- .view.active {
622
- display: flex;
623
- flex-direction: column;
624
- }
625
-
626
- .view-header {
627
- padding: 28px 28px 20px;
628
- border-bottom: 1px solid var(--color-border);
629
- background: var(--color-card);
630
- flex-shrink: 0;
631
- }
632
-
633
- .view-header h1 {
634
- font-size: 22px;
635
- font-weight: 700;
636
- letter-spacing: -0.02em;
637
- color: var(--color-text);
638
- margin-bottom: 4px;
639
- }
640
-
641
- .view-subtitle {
642
- font-size: 14px;
643
- color: var(--color-text-muted);
644
- }
645
-
646
- /* ─── Modal Overlay ────────────────────────────────────────────────────────── */
647
-
648
- .modal-overlay {
649
- position: fixed;
650
- inset: 0;
651
- background: rgba(15,23,42,.6);
652
- backdrop-filter: blur(2px);
653
- z-index: 100;
654
- display: flex;
655
- align-items: center;
656
- justify-content: center;
657
- padding: 20px;
658
- animation: fadeIn 0.15s ease;
659
- }
660
-
661
- .modal-overlay[hidden] {
662
- display: none;
663
- }
664
-
665
- @keyframes fadeIn {
666
- from { opacity: 0; }
667
- to { opacity: 1; }
668
- }
669
-
670
- .modal-container {
671
- background: var(--color-card);
672
- border-radius: 16px;
673
- width: 100%;
674
- max-width: 800px;
675
- max-height: 90vh;
676
- overflow-y: auto;
677
- position: relative;
678
- box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.08);
679
- animation: slideUp 0.18s ease;
680
- scrollbar-width: thin;
681
- scrollbar-color: var(--color-border) transparent;
682
- }
683
-
684
- @keyframes slideUp {
685
- from { transform: translateY(12px); opacity: 0.7; }
686
- to { transform: translateY(0); opacity: 1; }
687
- }
688
-
689
- .modal-close {
690
- position: sticky;
691
- top: 16px;
692
- float: right;
693
- margin: 14px 14px -14px 0;
694
- background: var(--color-bg);
695
- border: 1px solid var(--color-border);
696
- width: 30px;
697
- height: 30px;
698
- border-radius: 50%;
699
- cursor: pointer;
700
- font-size: 13px;
701
- color: var(--color-text-muted);
702
- display: flex;
703
- align-items: center;
704
- justify-content: center;
705
- z-index: 10;
706
- transition: background 0.12s ease, color 0.12s ease;
707
- }
708
-
709
- .modal-close:hover {
710
- background: var(--color-border);
711
- color: var(--color-text);
712
- }
713
-
714
- .modal-content {
715
- padding: 24px 28px 28px;
716
- clear: both;
717
- }
718
-
719
- /* ─── Modal Sections ───────────────────────────────────────────────────────── */
720
-
721
- .modal-header {
722
- margin-bottom: 24px;
723
- }
724
-
725
- .modal-header-top {
726
- display: flex;
727
- align-items: flex-start;
728
- justify-content: space-between;
729
- gap: 12px;
730
- margin-bottom: 10px;
731
- flex-wrap: wrap;
732
- }
733
-
734
- .modal-title {
735
- font-size: 26px;
736
- font-weight: 800;
737
- letter-spacing: -0.02em;
738
- color: var(--color-text);
739
- line-height: 1.1;
740
- }
741
-
742
- .modal-meta-row {
743
- display: flex;
744
- align-items: center;
745
- gap: 10px;
746
- flex-wrap: wrap;
747
- }
748
-
749
- .modal-description {
750
- font-size: 15px;
751
- color: var(--color-text-muted);
752
- line-height: 1.6;
753
- margin-top: 10px;
754
- }
755
-
756
- .modal-section {
757
- margin-bottom: 24px;
758
- }
759
-
760
- .modal-section-title {
761
- font-size: 13px;
762
- font-weight: 700;
763
- text-transform: uppercase;
764
- letter-spacing: 0.07em;
765
- color: var(--color-text-muted);
766
- margin-bottom: 10px;
767
- padding-bottom: 6px;
768
- border-bottom: 1px solid var(--color-border);
769
- }
770
-
771
- /* ─── Code Block ───────────────────────────────────────────────────────────── */
772
-
773
- .code-block {
774
- background: var(--color-code-bg);
775
- border-radius: var(--radius-md);
776
- padding: 16px;
777
- position: relative;
778
- overflow: hidden;
779
- }
780
-
781
- .code-block pre {
782
- font-family: var(--font-mono);
783
- font-size: 13px;
784
- color: var(--color-code-text);
785
- white-space: pre-wrap;
786
- word-break: break-all;
787
- line-height: 1.6;
788
- margin: 0;
789
- }
790
-
791
- .code-block-header {
792
- display: flex;
793
- align-items: center;
794
- justify-content: space-between;
795
- margin-bottom: 10px;
796
- }
797
-
798
- .code-block-title {
799
- font-size: 12px;
800
- font-weight: 600;
801
- color: #64748B;
802
- text-transform: uppercase;
803
- letter-spacing: 0.06em;
804
- }
805
-
806
- .copy-btn {
807
- padding: 3px 10px;
808
- background: rgba(255,255,255,.08);
809
- border: 1px solid rgba(255,255,255,.12);
810
- border-radius: 4px;
811
- color: #94A3B8;
812
- font-size: 11.5px;
813
- font-weight: 500;
814
- cursor: pointer;
815
- transition: background 0.12s ease, color 0.12s ease;
816
- }
817
-
818
- .copy-btn:hover {
819
- background: rgba(255,255,255,.15);
820
- color: #E2E8F0;
821
- }
822
-
823
- /* ─── Gotcha Card ──────────────────────────────────────────────────────────── */
824
-
825
- .gotcha-list {
826
- display: flex;
827
- flex-direction: column;
828
- gap: 8px;
829
- }
830
-
831
- .gotcha-card {
832
- border-left: 4px solid #F59E0B;
833
- background: #FFFBEB;
834
- padding: 10px 14px;
835
- border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
836
- font-size: 13.5px;
837
- color: #78350F;
838
- line-height: 1.5;
839
- }
840
-
841
- /* ─── Use Case Pills ───────────────────────────────────────────────────────── */
842
-
843
- .use-case-list {
844
- display: flex;
845
- flex-direction: column;
846
- gap: 8px;
847
- }
848
-
849
- .use-case-item {
850
- display: flex;
851
- align-items: center;
852
- gap: 8px;
853
- }
854
-
855
- .use-case-pill {
856
- display: inline-flex;
857
- align-items: center;
858
- padding: 2px 9px;
859
- border-radius: 20px;
860
- font-size: 11px;
861
- font-weight: 700;
862
- text-transform: uppercase;
863
- letter-spacing: 0.04em;
864
- flex-shrink: 0;
865
- }
866
-
867
- .use-case-pill.perfect { background: #DCFCE7; color: #15803D; }
868
- .use-case-pill.good { background: #DBEAFE; color: #1E40AF; }
869
- .use-case-pill.partial { background: #F1F5F9; color: #475569; }
870
-
871
- .use-case-task {
872
- font-size: 13.5px;
873
- color: var(--color-text);
874
- }
875
-
876
- /* ─── Relationship Links ───────────────────────────────────────────────────── */
877
-
878
- .relationship-links {
879
- display: flex;
880
- flex-wrap: wrap;
881
- gap: 6px;
882
- }
883
-
884
- .relationship-link {
885
- display: inline-flex;
886
- align-items: center;
887
- padding: 4px 12px;
888
- background: var(--color-bg);
889
- border: 1px solid var(--color-border);
890
- border-radius: 20px;
891
- font-size: 12.5px;
892
- font-weight: 500;
893
- color: var(--color-primary);
894
- cursor: pointer;
895
- text-decoration: none;
896
- transition: background 0.12s ease, border-color 0.12s ease;
897
- }
898
-
899
- .relationship-link:hover {
900
- background: #EFF6FF;
901
- border-color: var(--color-primary);
902
- }
903
-
904
- /* ─── Detail Grid (pricing, rate limits, etc.) ─────────────────────────────── */
905
-
906
- .detail-grid {
907
- display: grid;
908
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
909
- gap: 12px;
910
- }
911
-
912
- .detail-item {
913
- background: var(--color-bg);
914
- border: 1px solid var(--color-border);
915
- border-radius: var(--radius-sm);
916
- padding: 10px 12px;
917
- }
918
-
919
- .detail-label {
920
- font-size: 11px;
921
- font-weight: 600;
922
- text-transform: uppercase;
923
- letter-spacing: 0.06em;
924
- color: var(--color-text-muted);
925
- margin-bottom: 3px;
926
- }
927
-
928
- .detail-value {
929
- font-size: 13.5px;
930
- color: var(--color-text);
931
- font-weight: 500;
932
- }
933
-
934
- /* ─── Report View ──────────────────────────────────────────────────────────── */
935
-
936
- .report-content, .lint-content {
937
- padding: 24px 28px;
938
- flex: 1;
939
- overflow-y: auto;
940
- }
941
-
942
- .staleness-group {
943
- margin-bottom: 28px;
944
- }
945
-
946
- .staleness-group-header {
947
- display: flex;
948
- align-items: center;
949
- gap: 10px;
950
- padding: 8px 14px;
951
- border-radius: var(--radius-sm);
952
- font-size: 14px;
953
- font-weight: 700;
954
- margin-bottom: 10px;
955
- }
956
-
957
- .staleness-group-header.critical { background: #FEE2E2; color: #991B1B; }
958
- .staleness-group-header.stale { background: #FEF3C7; color: #92400E; }
959
- .staleness-group-header.aging { background: #FEF9C3; color: #854D0E; }
960
- .staleness-group-header.fresh { background: #DCFCE7; color: #14532D; }
961
-
962
- .staleness-group-count {
963
- margin-left: auto;
964
- font-size: 12px;
965
- font-weight: 600;
966
- opacity: 0.75;
967
- }
968
-
969
- .entry-row {
970
- display: flex;
971
- align-items: center;
972
- gap: 12px;
973
- padding: 10px 14px;
974
- background: var(--color-card);
975
- border: 1px solid var(--color-border);
976
- border-radius: var(--radius-sm);
977
- margin-bottom: 6px;
978
- transition: box-shadow 0.12s ease;
979
- }
980
-
981
- .entry-row:hover {
982
- box-shadow: var(--shadow-sm);
983
- }
984
-
985
- .entry-row-name {
986
- font-size: 14px;
987
- font-weight: 600;
988
- color: var(--color-text);
989
- min-width: 140px;
990
- }
991
-
992
- .entry-row-slug {
993
- font-size: 12px;
994
- color: var(--color-text-muted);
995
- font-family: var(--font-mono);
996
- flex: 1;
997
- }
998
-
999
- .entry-row-days {
1000
- font-size: 12.5px;
1001
- color: var(--color-text-muted);
1002
- white-space: nowrap;
1003
- }
1004
-
1005
- .entry-row-actions {
1006
- margin-left: auto;
1007
- display: flex;
1008
- align-items: center;
1009
- gap: 8px;
1010
- }
1011
-
1012
- /* ─── Lint View ────────────────────────────────────────────────────────────── */
1013
-
1014
- .lint-summary-bar {
1015
- display: flex;
1016
- gap: 12px;
1017
- margin-bottom: 20px;
1018
- }
1019
-
1020
- .lint-summary-item {
1021
- display: flex;
1022
- align-items: center;
1023
- gap: 6px;
1024
- padding: 8px 14px;
1025
- background: var(--color-card);
1026
- border: 1px solid var(--color-border);
1027
- border-radius: var(--radius-sm);
1028
- font-size: 13.5px;
1029
- font-weight: 600;
1030
- }
1031
-
1032
- .lint-entry {
1033
- background: var(--color-card);
1034
- border: 1px solid var(--color-border);
1035
- border-radius: var(--radius-md);
1036
- margin-bottom: 10px;
1037
- overflow: hidden;
1038
- }
1039
-
1040
- .lint-entry-header {
1041
- display: flex;
1042
- align-items: center;
1043
- gap: 10px;
1044
- padding: 12px 16px;
1045
- cursor: pointer;
1046
- user-select: none;
1047
- transition: background 0.1s ease;
1048
- }
1049
-
1050
- .lint-entry-header:hover {
1051
- background: var(--color-bg);
1052
- }
1053
-
1054
- .lint-entry-name {
1055
- font-size: 14px;
1056
- font-weight: 600;
1057
- color: var(--color-text);
1058
- }
1059
-
1060
- .lint-entry-issues-count {
1061
- font-size: 12px;
1062
- color: var(--color-text-muted);
1063
- margin-left: auto;
1064
- }
1065
-
1066
- .lint-issues-list {
1067
- padding: 0 16px 12px;
1068
- display: flex;
1069
- flex-direction: column;
1070
- gap: 6px;
1071
- }
1072
-
1073
- .lint-issue {
1074
- display: flex;
1075
- align-items: flex-start;
1076
- gap: 8px;
1077
- font-size: 13px;
1078
- color: var(--color-text);
1079
- line-height: 1.45;
1080
- }
1081
-
1082
- .lint-issue-icon {
1083
- font-size: 14px;
1084
- flex-shrink: 0;
1085
- margin-top: 1px;
1086
- }
1087
-
1088
- .lint-issue.error .lint-issue-icon { color: var(--color-danger); }
1089
- .lint-issue.warning .lint-issue-icon { color: var(--color-warning); }
1090
- .lint-issue.info .lint-issue-icon { color: var(--color-primary); }
1091
-
1092
- /* ─── Search Test View ─────────────────────────────────────────────────────── */
1093
-
1094
- .search-test-box {
1095
- padding: 20px 28px;
1096
- background: var(--color-card);
1097
- border-bottom: 1px solid var(--color-border);
1098
- flex-shrink: 0;
1099
- }
1100
-
1101
- .search-test-input-row {
1102
- display: flex;
1103
- gap: 10px;
1104
- margin-bottom: 12px;
1105
- }
1106
-
1107
- .search-test-input-row .search-input {
1108
- flex: 1;
1109
- }
1110
-
1111
- .test-presets {
1112
- display: flex;
1113
- align-items: center;
1114
- gap: 6px;
1115
- flex-wrap: wrap;
1116
- }
1117
-
1118
- .preset-label {
1119
- font-size: 12.5px;
1120
- color: var(--color-text-muted);
1121
- font-weight: 500;
1122
- }
1123
-
1124
- .preset-btn {
1125
- padding: 4px 12px;
1126
- border: 1px solid var(--color-border);
1127
- border-radius: 20px;
1128
- background: var(--color-bg);
1129
- color: var(--color-text-muted);
1130
- font-size: 12.5px;
1131
- cursor: pointer;
1132
- transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
1133
- }
1134
-
1135
- .preset-btn:hover {
1136
- background: #EFF6FF;
1137
- border-color: var(--color-primary);
1138
- color: var(--color-primary);
1139
- }
1140
-
1141
- .test-results {
1142
- padding: 20px 28px;
1143
- display: flex;
1144
- flex-direction: column;
1145
- gap: 14px;
1146
- flex: 1;
1147
- overflow-y: auto;
1148
- }
1149
-
1150
- .test-result-card {
1151
- background: var(--color-card);
1152
- border: 1px solid var(--color-border);
1153
- border-radius: var(--radius-md);
1154
- padding: 16px;
1155
- }
1156
-
1157
- .test-result-header {
1158
- display: flex;
1159
- align-items: center;
1160
- gap: 10px;
1161
- margin-bottom: 12px;
1162
- }
1163
-
1164
- .test-result-rank {
1165
- width: 26px;
1166
- height: 26px;
1167
- background: var(--color-primary);
1168
- color: #fff;
1169
- border-radius: 50%;
1170
- font-size: 12px;
1171
- font-weight: 700;
1172
- display: flex;
1173
- align-items: center;
1174
- justify-content: center;
1175
- flex-shrink: 0;
1176
- }
1177
-
1178
- .test-result-name {
1179
- font-size: 15px;
1180
- font-weight: 700;
1181
- color: var(--color-text);
1182
- }
1183
-
1184
- .test-result-confidence {
1185
- margin-left: auto;
1186
- font-size: 13px;
1187
- font-weight: 600;
1188
- color: var(--color-text-muted);
1189
- }
1190
-
1191
- .score-bar-row {
1192
- display: flex;
1193
- align-items: center;
1194
- gap: 10px;
1195
- margin-bottom: 12px;
1196
- }
1197
-
1198
- .score-bar-label {
1199
- font-size: 12px;
1200
- font-weight: 600;
1201
- color: var(--color-text-muted);
1202
- width: 60px;
1203
- flex-shrink: 0;
1204
- }
1205
-
1206
- .score-bar-track {
1207
- flex: 1;
1208
- height: 8px;
1209
- background: var(--color-border);
1210
- border-radius: 4px;
1211
- overflow: hidden;
1212
- }
1213
-
1214
- .score-bar-fill {
1215
- height: 100%;
1216
- border-radius: 4px;
1217
- transition: width 0.4s ease;
1218
- }
1219
-
1220
- .score-bar-value {
1221
- font-size: 12px;
1222
- font-weight: 700;
1223
- color: var(--color-text);
1224
- width: 38px;
1225
- text-align: right;
1226
- flex-shrink: 0;
1227
- }
1228
-
1229
- .score-bar-fill.high { background: var(--color-success); }
1230
- .score-bar-fill.medium { background: var(--color-warning); }
1231
- .score-bar-fill.low { background: var(--color-danger); }
1232
-
1233
- .score-breakdown-table {
1234
- display: grid;
1235
- grid-template-columns: 1fr 60px 80px;
1236
- gap: 4px 8px;
1237
- font-size: 12.5px;
1238
- }
1239
-
1240
- .score-breakdown-table .th {
1241
- font-weight: 700;
1242
- color: var(--color-text-muted);
1243
- text-transform: uppercase;
1244
- font-size: 11px;
1245
- letter-spacing: 0.05em;
1246
- padding-bottom: 4px;
1247
- border-bottom: 1px solid var(--color-border);
1248
- }
1249
-
1250
- .score-breakdown-table .td {
1251
- color: var(--color-text);
1252
- padding: 3px 0;
1253
- align-self: center;
1254
- }
1255
-
1256
- .score-breakdown-table .td.factor-name {
1257
- font-weight: 500;
1258
- text-transform: capitalize;
1259
- }
1260
-
1261
- .score-breakdown-table .td.factor-value {
1262
- font-weight: 700;
1263
- text-align: right;
1264
- font-family: var(--font-mono);
1265
- font-size: 12px;
1266
- }
1267
-
1268
- .mini-bar-track {
1269
- height: 6px;
1270
- background: var(--color-border);
1271
- border-radius: 3px;
1272
- overflow: hidden;
1273
- align-self: center;
1274
- }
1275
-
1276
- .mini-bar-fill {
1277
- height: 100%;
1278
- border-radius: 3px;
1279
- background: var(--color-primary);
1280
- }
1281
-
1282
- /* ─── Toast ────────────────────────────────────────────────────────────────── */
1283
-
1284
- #toast-container {
1285
- position: fixed;
1286
- bottom: 20px;
1287
- right: 20px;
1288
- z-index: 200;
1289
- display: flex;
1290
- flex-direction: column;
1291
- gap: 8px;
1292
- pointer-events: none;
1293
- }
1294
-
1295
- .toast {
1296
- padding: 10px 16px;
1297
- border-radius: var(--radius-md);
1298
- font-size: 13.5px;
1299
- font-weight: 500;
1300
- box-shadow: var(--shadow-md);
1301
- pointer-events: all;
1302
- animation: toastIn 0.2s ease;
1303
- max-width: 320px;
1304
- }
1305
-
1306
- @keyframes toastIn {
1307
- from { transform: translateX(20px); opacity: 0; }
1308
- to { transform: translateX(0); opacity: 1; }
1309
- }
1310
-
1311
- .toast-success { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
1312
- .toast-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
1313
- .toast-info { background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD; }
1314
-
1315
- /* ─── Misc Utility ─────────────────────────────────────────────────────────── */
1316
-
1317
- .divider {
1318
- height: 1px;
1319
- background: var(--color-border);
1320
- margin: 16px 0;
1321
- }
1322
-
1323
- .text-muted {
1324
- color: var(--color-text-muted);
1325
- }
1326
-
1327
- .text-mono {
1328
- font-family: var(--font-mono);
1329
- }
1330
-
1331
- .truncate {
1332
- overflow: hidden;
1333
- white-space: nowrap;
1334
- text-overflow: ellipsis;
1335
- }
1336
-
1337
- .flex-gap {
1338
- display: flex;
1339
- align-items: center;
1340
- gap: 8px;
1341
- }
1342
-
1343
- /* ─── Responsive: Tablet (≤1024px) ────────────────────────────────────────── */
1344
-
1345
- @media (max-width: 1024px) {
1346
- .entries-grid {
1347
- grid-template-columns: repeat(2, 1fr);
1348
- }
1349
- }
1350
-
1351
- /* ─── Responsive: Mobile (≤768px) ─────────────────────────────────────────── */
1352
-
1353
- @media (max-width: 768px) {
1354
- #app {
1355
- grid-template-columns: 1fr;
1356
- grid-template-rows: auto 1fr;
1357
- }
1358
-
1359
- .sidebar {
1360
- height: auto;
1361
- max-height: 56px;
1362
- overflow: hidden;
1363
- flex-direction: row;
1364
- align-items: center;
1365
- padding: 0 12px;
1366
- border-bottom: 1px solid rgba(255,255,255,.1);
1367
- }
1368
-
1369
- .sidebar-header {
1370
- padding: 0;
1371
- border-bottom: none;
1372
- margin-right: 16px;
1373
- }
1374
-
1375
- .logo-text {
1376
- font-size: 15px;
1377
- }
1378
-
1379
- .sidebar-nav {
1380
- display: flex;
1381
- flex-direction: row;
1382
- padding: 8px 0;
1383
- gap: 2px;
1384
- overflow-x: auto;
1385
- flex: 1;
1386
- }
1387
-
1388
- .nav-item {
1389
- margin-bottom: 0;
1390
- padding: 6px 10px;
1391
- white-space: nowrap;
1392
- font-size: 12.5px;
1393
- }
1394
-
1395
- .sidebar-categories {
1396
- display: none;
1397
- }
1398
-
1399
- .main {
1400
- height: calc(100vh - 56px);
1401
- }
1402
-
1403
- .entries-grid {
1404
- grid-template-columns: 1fr;
1405
- padding: 16px;
1406
- gap: 12px;
1407
- }
1408
-
1409
- .stats-bar {
1410
- overflow-x: auto;
1411
- padding: 0 16px;
1412
- }
1413
-
1414
- .stat-item {
1415
- min-width: 60px;
1416
- padding: 8px 12px;
1417
- }
1418
-
1419
- .stat-num {
1420
- font-size: 16px;
1421
- }
1422
-
1423
- .search-bar {
1424
- padding: 10px 16px;
1425
- }
1426
-
1427
- .toolbar {
1428
- padding: 6px 16px;
1429
- }
1430
-
1431
- .view-header {
1432
- padding: 20px 16px 14px;
1433
- }
1434
-
1435
- .report-content, .lint-content {
1436
- padding: 16px;
1437
- }
1438
-
1439
- .modal-container {
1440
- max-height: 95vh;
1441
- }
1442
-
1443
- .modal-content {
1444
- padding: 16px 18px 20px;
1445
- }
1446
- }
1447
-
1448
- @media (max-width: 640px) {
1449
- .entries-grid {
1450
- grid-template-columns: 1fr;
1451
- }
1452
-
1453
- .detail-grid {
1454
- grid-template-columns: 1fr 1fr;
1455
- }
1456
-
1457
- .score-breakdown-table {
1458
- grid-template-columns: 1fr 48px;
1459
- }
1460
-
1461
- .score-breakdown-table .mini-bar-track {
1462
- display: none;
1463
- }
1464
- }