cursor-guard 4.1.0 → 4.2.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.
@@ -0,0 +1,666 @@
1
+ /* ═══════════════════════════════════════════════════════════════
2
+ Cursor Guard Dashboard — Ops Console Theme
3
+ ═══════════════════════════════════════════════════════════════ */
4
+
5
+ :root {
6
+ --bg-primary: #0f172a;
7
+ --bg-secondary: #1e293b;
8
+ --bg-tertiary: #334155;
9
+ --bg-hover: rgba(148,163,184,.08);
10
+ --border: #334155;
11
+ --border-subtle:#1e293b;
12
+
13
+ --text-primary: #f1f5f9;
14
+ --text-secondary: #94a3b8;
15
+ --text-tertiary: #64748b;
16
+
17
+ --green: #22c55e;
18
+ --green-bg: rgba(34,197,94,.12);
19
+ --yellow: #eab308;
20
+ --yellow-bg: rgba(234,179,8,.12);
21
+ --red: #ef4444;
22
+ --red-bg: rgba(239,68,68,.12);
23
+ --blue: #3b82f6;
24
+ --blue-bg: rgba(59,130,246,.12);
25
+ --purple: #a855f7;
26
+ --purple-bg: rgba(168,85,247,.12);
27
+ --amber: #f59e0b;
28
+ --amber-bg: rgba(245,158,11,.12);
29
+ --gray: #64748b;
30
+ --gray-bg: rgba(100,116,139,.12);
31
+
32
+ --radius: 8px;
33
+ --topbar-h: 52px;
34
+ --drawer-w: 480px;
35
+ }
36
+
37
+ /* ── Reset ────────────────────────────────────────────────── */
38
+
39
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
40
+
41
+ body {
42
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
43
+ font-size: 14px;
44
+ line-height: 1.5;
45
+ color: var(--text-primary);
46
+ background: var(--bg-primary);
47
+ padding-top: var(--topbar-h);
48
+ -webkit-font-smoothing: antialiased;
49
+ }
50
+
51
+ /* ── Top Bar ──────────────────────────────────────────────── */
52
+
53
+ #topbar {
54
+ position: fixed;
55
+ top: 0; left: 0; right: 0;
56
+ height: var(--topbar-h);
57
+ background: var(--bg-secondary);
58
+ border-bottom: 1px solid var(--border);
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: space-between;
62
+ padding: 0 20px;
63
+ z-index: 50;
64
+ gap: 12px;
65
+ }
66
+
67
+ .topbar-left, .topbar-right {
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 10px;
71
+ }
72
+
73
+ .logo-icon { color: var(--green); flex-shrink: 0; }
74
+ .logo-text { font-weight: 600; font-size: 15px; white-space: nowrap; }
75
+
76
+ #project-select {
77
+ background: var(--bg-tertiary);
78
+ color: var(--text-primary);
79
+ border: 1px solid var(--border);
80
+ border-radius: 4px;
81
+ padding: 4px 8px;
82
+ font-size: 13px;
83
+ max-width: 200px;
84
+ cursor: pointer;
85
+ }
86
+ #project-select:focus { outline: 1px solid var(--blue); }
87
+
88
+ #last-refresh { font-size: 12px; white-space: nowrap; }
89
+
90
+ /* ── Buttons ──────────────────────────────────────────────── */
91
+
92
+ .btn {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ gap: 5px;
96
+ padding: 6px 12px;
97
+ border: 1px solid var(--border);
98
+ border-radius: 4px;
99
+ background: var(--bg-tertiary);
100
+ color: var(--text-primary);
101
+ font-size: 13px;
102
+ cursor: pointer;
103
+ transition: background .15s;
104
+ white-space: nowrap;
105
+ }
106
+ .btn:hover { background: var(--bg-hover); }
107
+
108
+ .btn-ghost {
109
+ background: transparent;
110
+ border-color: transparent;
111
+ }
112
+ .btn-ghost:hover { background: var(--bg-hover); }
113
+
114
+ .btn-sm { padding: 3px 8px; font-size: 12px; }
115
+
116
+ /* ── Main ─────────────────────────────────────────────────── */
117
+
118
+ main {
119
+ max-width: 1200px;
120
+ margin: 0 auto;
121
+ padding: 24px 20px 60px;
122
+ }
123
+
124
+ /* ── Sections ─────────────────────────────────────────────── */
125
+
126
+ .screen { margin-bottom: 40px; }
127
+
128
+ .section-title {
129
+ font-size: 16px;
130
+ font-weight: 600;
131
+ color: var(--text-secondary);
132
+ margin-bottom: 16px;
133
+ letter-spacing: .02em;
134
+ }
135
+
136
+ /* ── Card Grid ────────────────────────────────────────────── */
137
+
138
+ .card-grid {
139
+ display: grid;
140
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
141
+ gap: 14px;
142
+ }
143
+
144
+ .card {
145
+ background: var(--bg-secondary);
146
+ border: 1px solid var(--border);
147
+ border-radius: var(--radius);
148
+ padding: 16px 20px;
149
+ transition: transform .15s, box-shadow .15s;
150
+ }
151
+ .card:hover {
152
+ transform: translateY(-1px);
153
+ box-shadow: 0 4px 12px rgba(0,0,0,.25);
154
+ }
155
+
156
+ .card-health {
157
+ grid-column: 1 / -1;
158
+ display: flex;
159
+ align-items: center;
160
+ gap: 16px;
161
+ flex-wrap: wrap;
162
+ }
163
+
164
+ .card-label {
165
+ font-size: 11px;
166
+ font-weight: 600;
167
+ text-transform: uppercase;
168
+ letter-spacing: .06em;
169
+ color: var(--text-tertiary);
170
+ margin-bottom: 8px;
171
+ }
172
+
173
+ .card-value {
174
+ font-size: 22px;
175
+ font-weight: 700;
176
+ line-height: 1.2;
177
+ }
178
+
179
+ .card-detail { margin-top: 6px; }
180
+
181
+ .card-empty {
182
+ color: var(--text-tertiary);
183
+ font-style: italic;
184
+ font-size: 13px;
185
+ }
186
+
187
+ .card-clickable { cursor: pointer; }
188
+
189
+ /* ── Status indicators ────────────────────────────────────── */
190
+
191
+ .status-dot {
192
+ display: inline-block;
193
+ width: 10px; height: 10px;
194
+ border-radius: 50%;
195
+ margin-right: 6px;
196
+ flex-shrink: 0;
197
+ }
198
+ .status-dot.status-healthy { background: var(--green); box-shadow: 0 0 6px var(--green); }
199
+ .status-dot.status-warning { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
200
+ .status-dot.status-critical { background: var(--red); box-shadow: 0 0 6px var(--red); }
201
+ .status-dot.status-unknown { background: var(--gray); }
202
+ .status-dot.status-running { background: var(--green); box-shadow: 0 0 6px var(--green); }
203
+ .status-dot.status-stopped { background: var(--gray); }
204
+ .status-dot.status-stale { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
205
+
206
+ .card-status {
207
+ display: flex;
208
+ align-items: center;
209
+ font-size: 18px;
210
+ font-weight: 700;
211
+ }
212
+
213
+ .status-text.status-healthy { color: var(--green); }
214
+ .status-text.status-warning { color: var(--yellow); }
215
+ .status-text.status-critical { color: var(--red); }
216
+ .status-text.status-unknown { color: var(--gray); }
217
+
218
+ .issue-list {
219
+ list-style: none;
220
+ margin-top: 8px;
221
+ padding-left: 16px;
222
+ }
223
+ .issue-list li::before {
224
+ content: '•';
225
+ color: var(--yellow);
226
+ margin-right: 6px;
227
+ }
228
+
229
+ /* ── Badges ───────────────────────────────────────────────── */
230
+
231
+ .badge {
232
+ display: inline-flex;
233
+ align-items: center;
234
+ padding: 2px 8px;
235
+ border-radius: 10px;
236
+ font-size: 11px;
237
+ font-weight: 600;
238
+ letter-spacing: .03em;
239
+ }
240
+
241
+ .badge-strategy { background: var(--blue-bg); color: var(--blue); }
242
+
243
+ .badge-pass { background: var(--green-bg); color: var(--green); }
244
+ .badge-warn { background: var(--yellow-bg); color: var(--yellow); }
245
+ .badge-fail { background: var(--red-bg); color: var(--red); }
246
+
247
+ .badge-git { background: var(--blue-bg); color: var(--blue); }
248
+ .badge-shadow { background: var(--amber-bg); color: var(--amber); }
249
+ .badge-pre { background: var(--purple-bg); color: var(--purple); }
250
+
251
+ /* ── Stats Row ────────────────────────────────────────────── */
252
+
253
+ .stats-row {
254
+ display: flex;
255
+ flex-wrap: wrap;
256
+ gap: 12px;
257
+ margin-bottom: 16px;
258
+ }
259
+
260
+ .stat-card {
261
+ background: var(--bg-secondary);
262
+ border: 1px solid var(--border);
263
+ border-radius: var(--radius);
264
+ padding: 12px 16px;
265
+ min-width: 140px;
266
+ flex: 1;
267
+ }
268
+ .stat-label {
269
+ font-size: 11px;
270
+ text-transform: uppercase;
271
+ letter-spacing: .05em;
272
+ color: var(--text-tertiary);
273
+ margin-bottom: 4px;
274
+ }
275
+ .stat-value {
276
+ font-size: 20px;
277
+ font-weight: 700;
278
+ }
279
+
280
+ /* ── Filter Bar ───────────────────────────────────────────── */
281
+
282
+ .filter-bar {
283
+ display: flex;
284
+ flex-wrap: wrap;
285
+ gap: 6px;
286
+ margin-bottom: 12px;
287
+ }
288
+
289
+ .filter-btn {
290
+ padding: 4px 10px;
291
+ border: 1px solid var(--border);
292
+ border-radius: 14px;
293
+ background: transparent;
294
+ color: var(--text-secondary);
295
+ font-size: 12px;
296
+ cursor: pointer;
297
+ transition: all .15s;
298
+ }
299
+ .filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
300
+ .filter-btn.active {
301
+ background: var(--blue-bg);
302
+ color: var(--blue);
303
+ border-color: var(--blue);
304
+ }
305
+
306
+ /* ── Table ────────────────────────────────────────────────── */
307
+
308
+ .table-wrap {
309
+ background: var(--bg-secondary);
310
+ border: 1px solid var(--border);
311
+ border-radius: var(--radius);
312
+ overflow: auto;
313
+ max-height: 420px;
314
+ }
315
+
316
+ .data-table {
317
+ width: 100%;
318
+ border-collapse: collapse;
319
+ font-size: 13px;
320
+ }
321
+ .data-table th {
322
+ text-align: left;
323
+ padding: 10px 14px;
324
+ font-weight: 600;
325
+ font-size: 11px;
326
+ text-transform: uppercase;
327
+ letter-spacing: .05em;
328
+ color: var(--text-tertiary);
329
+ border-bottom: 1px solid var(--border);
330
+ position: sticky;
331
+ top: 0;
332
+ background: var(--bg-secondary);
333
+ }
334
+ .data-table td {
335
+ padding: 8px 14px;
336
+ border-bottom: 1px solid rgba(51,65,85,.4);
337
+ vertical-align: top;
338
+ }
339
+ .data-table tbody tr { cursor: pointer; transition: background .1s; }
340
+ .data-table tbody tr:hover { background: var(--bg-hover); }
341
+
342
+ /* ── Protection ───────────────────────────────────────────── */
343
+
344
+ .protection-grid {
345
+ display: grid;
346
+ grid-template-columns: 1fr 1fr;
347
+ gap: 14px;
348
+ }
349
+
350
+ .pattern-card {
351
+ background: var(--bg-secondary);
352
+ border: 1px solid var(--border);
353
+ border-radius: var(--radius);
354
+ padding: 16px;
355
+ }
356
+ .pattern-card h4 {
357
+ font-size: 12px;
358
+ text-transform: uppercase;
359
+ letter-spacing: .05em;
360
+ color: var(--text-tertiary);
361
+ margin-bottom: 10px;
362
+ }
363
+
364
+ .pattern-list {
365
+ list-style: none;
366
+ display: flex;
367
+ flex-wrap: wrap;
368
+ gap: 6px;
369
+ }
370
+ .pattern-item {
371
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
372
+ font-size: 12px;
373
+ background: var(--bg-tertiary);
374
+ padding: 2px 8px;
375
+ border-radius: 3px;
376
+ color: var(--text-primary);
377
+ }
378
+
379
+ .protection-note {
380
+ margin-top: 14px;
381
+ font-size: 12px;
382
+ color: var(--text-tertiary);
383
+ font-style: italic;
384
+ }
385
+
386
+ .protection-count {
387
+ margin-top: 12px;
388
+ font-size: 14px;
389
+ font-weight: 600;
390
+ }
391
+
392
+ /* ── Diagnostics Summary ──────────────────────────────────── */
393
+
394
+ .diag-summary {
395
+ background: var(--bg-secondary);
396
+ border: 1px solid var(--border);
397
+ border-radius: var(--radius);
398
+ padding: 16px 20px;
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 20px;
402
+ cursor: pointer;
403
+ transition: transform .15s, box-shadow .15s;
404
+ }
405
+ .diag-summary:hover {
406
+ transform: translateY(-1px);
407
+ box-shadow: 0 4px 12px rgba(0,0,0,.25);
408
+ }
409
+
410
+ .diag-counts {
411
+ display: flex;
412
+ gap: 12px;
413
+ }
414
+ .diag-count {
415
+ text-align: center;
416
+ }
417
+ .diag-count .num {
418
+ font-size: 24px;
419
+ font-weight: 700;
420
+ display: block;
421
+ }
422
+ .diag-count .label {
423
+ font-size: 11px;
424
+ text-transform: uppercase;
425
+ letter-spacing: .04em;
426
+ }
427
+
428
+ .diag-hint {
429
+ margin-left: auto;
430
+ font-size: 12px;
431
+ color: var(--text-tertiary);
432
+ }
433
+
434
+ /* ── Drawer ───────────────────────────────────────────────── */
435
+
436
+ .drawer-overlay {
437
+ position: fixed;
438
+ inset: 0;
439
+ background: rgba(0,0,0,.5);
440
+ z-index: 100;
441
+ opacity: 0;
442
+ visibility: hidden;
443
+ transition: opacity .2s, visibility .2s;
444
+ }
445
+ .drawer-overlay.active {
446
+ opacity: 1;
447
+ visibility: visible;
448
+ }
449
+
450
+ .drawer {
451
+ position: fixed;
452
+ top: 0; right: 0; bottom: 0;
453
+ width: var(--drawer-w);
454
+ max-width: 92vw;
455
+ background: var(--bg-secondary);
456
+ border-left: 1px solid var(--border);
457
+ z-index: 101;
458
+ display: flex;
459
+ flex-direction: column;
460
+ transform: translateX(100%);
461
+ visibility: hidden;
462
+ transition: transform .25s ease, visibility .25s;
463
+ }
464
+ .drawer.active {
465
+ transform: translateX(0);
466
+ visibility: visible;
467
+ }
468
+
469
+ .drawer-header {
470
+ display: flex;
471
+ align-items: center;
472
+ justify-content: space-between;
473
+ padding: 16px 20px;
474
+ border-bottom: 1px solid var(--border);
475
+ }
476
+ .drawer-header h3 { font-size: 15px; font-weight: 600; }
477
+
478
+ .drawer-close {
479
+ background: none;
480
+ border: none;
481
+ color: var(--text-secondary);
482
+ font-size: 22px;
483
+ cursor: pointer;
484
+ padding: 0 4px;
485
+ line-height: 1;
486
+ }
487
+ .drawer-close:hover { color: var(--text-primary); }
488
+
489
+ .drawer-body {
490
+ flex: 1;
491
+ overflow-y: auto;
492
+ padding: 20px;
493
+ }
494
+
495
+ /* ── Drawer: Restore Point ────────────────────────────────── */
496
+
497
+ .restore-field {
498
+ margin-bottom: 14px;
499
+ }
500
+ .restore-field-label {
501
+ font-size: 11px;
502
+ text-transform: uppercase;
503
+ letter-spacing: .05em;
504
+ color: var(--text-tertiary);
505
+ margin-bottom: 3px;
506
+ }
507
+ .restore-field-value {
508
+ font-size: 14px;
509
+ word-break: break-all;
510
+ }
511
+
512
+ .restore-actions {
513
+ display: flex;
514
+ gap: 8px;
515
+ margin-top: 20px;
516
+ padding-top: 16px;
517
+ border-top: 1px solid var(--border);
518
+ }
519
+
520
+ .json-preview {
521
+ margin-top: 16px;
522
+ padding: 12px;
523
+ background: var(--bg-primary);
524
+ border-radius: 4px;
525
+ font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
526
+ font-size: 12px;
527
+ white-space: pre-wrap;
528
+ word-break: break-all;
529
+ max-height: 300px;
530
+ overflow: auto;
531
+ color: var(--text-secondary);
532
+ }
533
+
534
+ /* ── Drawer: Doctor Checks ────────────────────────────────── */
535
+
536
+ .check-item {
537
+ border-bottom: 1px solid rgba(51,65,85,.4);
538
+ }
539
+ .check-item:last-child { border-bottom: none; }
540
+
541
+ .check-item summary {
542
+ display: flex;
543
+ align-items: center;
544
+ gap: 8px;
545
+ padding: 10px 0;
546
+ cursor: pointer;
547
+ list-style: none;
548
+ font-size: 13px;
549
+ }
550
+ .check-item summary::-webkit-details-marker { display: none; }
551
+ .check-item summary::before {
552
+ content: '▸';
553
+ font-size: 11px;
554
+ color: var(--text-tertiary);
555
+ transition: transform .15s;
556
+ width: 12px;
557
+ text-align: center;
558
+ }
559
+ .check-item[open] summary::before { transform: rotate(90deg); }
560
+
561
+ .check-name { flex: 1; }
562
+ .check-detail {
563
+ padding: 0 0 10px 20px;
564
+ font-size: 12px;
565
+ color: var(--text-secondary);
566
+ }
567
+
568
+ /* ── State panels ─────────────────────────────────────────── */
569
+
570
+ .state-panel {
571
+ display: flex;
572
+ flex-direction: column;
573
+ align-items: center;
574
+ justify-content: center;
575
+ min-height: 300px;
576
+ text-align: center;
577
+ color: var(--text-secondary);
578
+ }
579
+
580
+ .error-icon {
581
+ font-size: 36px;
582
+ margin-bottom: 12px;
583
+ color: var(--yellow);
584
+ }
585
+
586
+ .error-panel {
587
+ text-align: center;
588
+ padding: 40px 20px;
589
+ color: var(--text-tertiary);
590
+ }
591
+ .error-panel .error-icon { font-size: 28px; margin-bottom: 8px; }
592
+
593
+ .empty-state {
594
+ text-align: center;
595
+ padding: 32px 16px;
596
+ color: var(--text-tertiary);
597
+ font-style: italic;
598
+ }
599
+
600
+ /* ── Spinner ──────────────────────────────────────────────── */
601
+
602
+ .spinner {
603
+ width: 32px; height: 32px;
604
+ border: 3px solid var(--border);
605
+ border-top-color: var(--blue);
606
+ border-radius: 50%;
607
+ animation: spin .8s linear infinite;
608
+ margin-bottom: 12px;
609
+ }
610
+ @keyframes spin { to { transform: rotate(360deg); } }
611
+
612
+ .icon-spin-active { animation: spin .6s linear infinite; }
613
+
614
+ /* ── Utility ──────────────────────────────────────────────── */
615
+
616
+ .hidden { display: none !important; }
617
+
618
+ .text-muted { color: var(--text-secondary); }
619
+ .text-sm { font-size: 12px; }
620
+ .text-mono { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; }
621
+
622
+ .flex-between { display: flex; align-items: center; justify-content: space-between; }
623
+ .gap-4 { gap: 4px; }
624
+ .mt-2 { margin-top: 8px; }
625
+
626
+ .copy-toast {
627
+ position: fixed;
628
+ bottom: 24px;
629
+ left: 50%;
630
+ transform: translateX(-50%) translateY(20px);
631
+ background: var(--green);
632
+ color: #000;
633
+ padding: 6px 16px;
634
+ border-radius: 4px;
635
+ font-size: 13px;
636
+ font-weight: 600;
637
+ opacity: 0;
638
+ transition: opacity .2s, transform .2s;
639
+ z-index: 200;
640
+ pointer-events: none;
641
+ }
642
+ .copy-toast.show {
643
+ opacity: 1;
644
+ transform: translateX(-50%) translateY(0);
645
+ }
646
+
647
+ /* ── Scrollbar ────────────────────────────────────────────── */
648
+
649
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
650
+ ::-webkit-scrollbar-track { background: transparent; }
651
+ ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 3px; }
652
+ ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
653
+
654
+ /* ── Responsive ───────────────────────────────────────────── */
655
+
656
+ @media (max-width: 768px) {
657
+ #topbar { padding: 0 12px; gap: 8px; }
658
+ .logo-text { display: none; }
659
+ main { padding: 16px 12px 40px; }
660
+ .card-grid { grid-template-columns: 1fr; }
661
+ .card-health { grid-column: auto; }
662
+ .protection-grid { grid-template-columns: 1fr; }
663
+ .stats-row { flex-direction: column; }
664
+ .drawer { width: 100vw; max-width: 100vw; }
665
+ .diag-summary { flex-direction: column; align-items: flex-start; }
666
+ }