@scoutmesh/viewer 0.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,619 @@
1
+ :root {
2
+ color-scheme: light;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
4
+ color: #24343f;
5
+ background: #f6f8fa;
6
+ font-synthesis: none;
7
+ }
8
+ * {
9
+ box-sizing: border-box;
10
+ }
11
+ body {
12
+ margin: 0;
13
+ }
14
+ button,
15
+ input,
16
+ select {
17
+ font: inherit;
18
+ }
19
+ button,
20
+ a,
21
+ summary,
22
+ input[type="checkbox"] {
23
+ cursor: pointer;
24
+ }
25
+ button,
26
+ a,
27
+ input,
28
+ select,
29
+ summary {
30
+ -webkit-tap-highlight-color: transparent;
31
+ }
32
+ :focus-visible {
33
+ outline: 3px solid #75b5db;
34
+ outline-offset: 3px;
35
+ }
36
+ [hidden] {
37
+ display: none !important;
38
+ }
39
+ a {
40
+ color: #24668d;
41
+ text-decoration: none;
42
+ }
43
+ a:hover {
44
+ text-decoration: underline;
45
+ }
46
+ p {
47
+ margin: 0;
48
+ }
49
+ main {
50
+ max-width: 1240px;
51
+ padding: 18px 16px 24px;
52
+ margin: auto;
53
+ }
54
+ h1 {
55
+ font-size: 19px;
56
+ font-weight: 600;
57
+ line-height: 1.35;
58
+ letter-spacing: -0.4px;
59
+ margin: 0 0 12px;
60
+ overflow-wrap: anywhere;
61
+ }
62
+ h2 {
63
+ font-size: 17px;
64
+ font-weight: 600;
65
+ line-height: 1.35;
66
+ margin: 0;
67
+ }
68
+ .sr-only {
69
+ position: absolute;
70
+ width: 1px;
71
+ height: 1px;
72
+ padding: 0;
73
+ margin: -1px;
74
+ overflow: hidden;
75
+ clip-path: inset(50%);
76
+ white-space: nowrap;
77
+ border: 0;
78
+ }
79
+ .button {
80
+ border: 1px solid #d9e2e8;
81
+ border-radius: 6px;
82
+ padding: 7px 10px;
83
+ font-size: 12px;
84
+ background: white;
85
+ color: #345b73;
86
+ min-height: 34px;
87
+ }
88
+ .button:hover {
89
+ background: #f0f6f9;
90
+ }
91
+ button:disabled {
92
+ opacity: 0.5;
93
+ cursor: default;
94
+ }
95
+ .muted {
96
+ color: #637785;
97
+ font-size: 12px;
98
+ line-height: 1.5;
99
+ }
100
+ .result-summary {
101
+ color: #637785;
102
+ font-size: 12px;
103
+ padding: 10px 0;
104
+ }
105
+ .connection-warning {
106
+ color: #79521e;
107
+ background: #fff4df;
108
+ border-radius: 6px;
109
+ padding: 10px;
110
+ margin-bottom: 10px;
111
+ font-size: 13px;
112
+ }
113
+ .results {
114
+ min-width: 0;
115
+ }
116
+ .cards {
117
+ display: grid;
118
+ grid-template-columns: minmax(0, 1fr);
119
+ gap: 10px;
120
+ align-items: start;
121
+ }
122
+ .candidate-card {
123
+ min-width: 0;
124
+ border: 1px solid #dce4ea;
125
+ border-radius: 9px;
126
+ background: white;
127
+ padding: 14px;
128
+ }
129
+ .candidate-card.selected {
130
+ border-color: #84acc4;
131
+ background: #f5faff;
132
+ }
133
+ .identity {
134
+ margin-top: 4px;
135
+ font-size: 13px;
136
+ line-height: 1.5;
137
+ color: #526877;
138
+ overflow-wrap: anywhere;
139
+ }
140
+ .candidate-heading {
141
+ display: flex;
142
+ align-items: flex-start;
143
+ gap: 12px;
144
+ }
145
+ .candidate-heading-text {
146
+ min-width: 0;
147
+ }
148
+ .candidate-avatar {
149
+ position: relative;
150
+ display: grid;
151
+ place-items: center;
152
+ flex: 0 0 40px;
153
+ width: 40px;
154
+ height: 40px;
155
+ overflow: hidden;
156
+ border-radius: 50%;
157
+ background: #e9f0f5;
158
+ color: #47677c;
159
+ font-size: 13px;
160
+ font-weight: 600;
161
+ }
162
+ .candidate-avatar img {
163
+ position: absolute;
164
+ inset: 0;
165
+ width: 100%;
166
+ height: 100%;
167
+ object-fit: cover;
168
+ }
169
+ #profile-identity .candidate-avatar {
170
+ flex-basis: 64px;
171
+ width: 64px;
172
+ height: 64px;
173
+ font-size: 20px;
174
+ }
175
+ .candidate-overview {
176
+ display: grid;
177
+ gap: 8px;
178
+ margin: 12px 0 0;
179
+ }
180
+ .candidate-overview > div {
181
+ display: grid;
182
+ grid-template-columns: 108px minmax(0, 1fr);
183
+ gap: 8px;
184
+ align-items: baseline;
185
+ }
186
+ .candidate-overview dt {
187
+ margin: 0;
188
+ font-size: 12px;
189
+ font-weight: 600;
190
+ color: #34586b;
191
+ }
192
+ .candidate-overview dd {
193
+ font-size: 13px;
194
+ line-height: 1.5;
195
+ overflow-wrap: anywhere;
196
+ }
197
+ .candidate-overview .unknown-overview dt {
198
+ color: #85602c;
199
+ }
200
+ #profile-content .candidate-overview > div {
201
+ grid-template-columns: 1fr;
202
+ gap: 3px;
203
+ }
204
+ .source-links {
205
+ display: flex;
206
+ flex-wrap: wrap;
207
+ gap: 8px 16px;
208
+ font-size: 12px;
209
+ line-height: 1.5;
210
+ overflow-wrap: anywhere;
211
+ }
212
+ @media (max-width: 460px) {
213
+ .candidate-overview > div {
214
+ grid-template-columns: 1fr;
215
+ gap: 2px;
216
+ }
217
+ }
218
+ .card-actions {
219
+ display: flex;
220
+ align-items: center;
221
+ flex-wrap: wrap;
222
+ gap: 6px 14px;
223
+ margin-top: 10px;
224
+ }
225
+ .card-actions a,
226
+ .text-button,
227
+ .profile-link {
228
+ color: #24668d;
229
+ font-size: 12px;
230
+ border: 0;
231
+ background: transparent;
232
+ padding: 5px 0;
233
+ min-height: 30px;
234
+ line-height: 20px;
235
+ }
236
+ .text-button:hover,
237
+ .profile-link:hover {
238
+ text-decoration: underline;
239
+ }
240
+ .details-button {
241
+ background: #eef4f8;
242
+ border: 1px solid #e1e9ef;
243
+ color: #285773;
244
+ border-radius: 6px;
245
+ padding: 5px 9px;
246
+ font-size: 12px;
247
+ min-height: 30px;
248
+ }
249
+ .details-button:hover {
250
+ background: #e3eef5;
251
+ }
252
+ .detail-section {
253
+ margin-top: 14px;
254
+ }
255
+ .detail-section h3 {
256
+ font-size: 13px;
257
+ font-weight: 600;
258
+ margin: 0 0 6px;
259
+ }
260
+ .detail-section p,
261
+ .detail-section li,
262
+ .detail-section dd {
263
+ font-size: 13px;
264
+ line-height: 1.6;
265
+ overflow-wrap: anywhere;
266
+ }
267
+ .detail-section ul {
268
+ margin: 4px 0;
269
+ padding-left: 18px;
270
+ }
271
+ .detail-section li + li {
272
+ margin-top: 5px;
273
+ }
274
+ .detail-section dl {
275
+ margin: 0;
276
+ }
277
+ .detail + .detail {
278
+ margin-top: 10px;
279
+ }
280
+ dt {
281
+ font-size: 12px;
282
+ color: #637785;
283
+ margin-bottom: 3px;
284
+ }
285
+ dd {
286
+ margin: 0;
287
+ }
288
+ .more-information {
289
+ border-top: 1px solid #e5ebef;
290
+ padding-top: 10px;
291
+ margin-top: 14px;
292
+ font-size: 12px;
293
+ }
294
+ .more-information > summary {
295
+ color: #345b73;
296
+ padding: 5px 0;
297
+ }
298
+ .email-panel {
299
+ margin-top: 10px;
300
+ padding: 10px;
301
+ background: #f1f6f9;
302
+ border-radius: 6px;
303
+ }
304
+ .email-top {
305
+ display: flex;
306
+ justify-content: space-between;
307
+ align-items: center;
308
+ flex-wrap: wrap;
309
+ gap: 6px 12px;
310
+ font-size: 13px;
311
+ }
312
+ .email-top a {
313
+ overflow-wrap: anywhere;
314
+ min-width: 0;
315
+ }
316
+ .email-panel .muted {
317
+ margin-top: 4px;
318
+ }
319
+ .empty {
320
+ padding: 36px 16px;
321
+ text-align: center;
322
+ color: #637785;
323
+ font-size: 14px;
324
+ }
325
+ #error {
326
+ background: #fff1ef;
327
+ border: 1px solid #ecd4cf;
328
+ color: #8e3c30;
329
+ padding: 12px;
330
+ border-radius: 8px;
331
+ font-size: 13px;
332
+ margin-top: 12px;
333
+ }
334
+ dialog {
335
+ border: 1px solid #dfe7ed;
336
+ border-radius: 12px;
337
+ padding: 0;
338
+ overflow: hidden;
339
+ width: min(620px, calc(100vw - 24px));
340
+ max-height: calc(100vh - 32px);
341
+ box-shadow: 0 20px 90px #20344933;
342
+ color: #24343f;
343
+ }
344
+ dialog[open] {
345
+ display: flex;
346
+ flex-direction: column;
347
+ }
348
+ #profile-content {
349
+ overflow-y: auto;
350
+ overscroll-behavior: contain;
351
+ min-height: 0;
352
+ padding: 16px 20px 20px;
353
+ }
354
+ dialog::backdrop {
355
+ background: #162b3a55;
356
+ }
357
+ .profile-top {
358
+ display: flex;
359
+ align-items: center;
360
+ justify-content: space-between;
361
+ flex-shrink: 0;
362
+ padding: 10px 16px 10px 20px;
363
+ border-bottom: 1px solid #e5ebef;
364
+ color: #637785;
365
+ font-size: 12px;
366
+ }
367
+ .welcome {
368
+ max-width: 600px;
369
+ margin: 60px auto;
370
+ }
371
+ .brand {
372
+ font-size: 22px;
373
+ font-weight: 700;
374
+ color: #172a39;
375
+ }
376
+ .brand span {
377
+ color: #367b9f;
378
+ }
379
+ .welcome h1 {
380
+ margin-top: 24px;
381
+ font-size: 30px;
382
+ }
383
+ .welcome > p {
384
+ color: #637785;
385
+ line-height: 1.6;
386
+ font-size: 14px;
387
+ }
388
+ .view-list {
389
+ display: grid;
390
+ gap: 12px;
391
+ margin: 28px 0;
392
+ }
393
+ .view-link {
394
+ display: flex;
395
+ flex-wrap: wrap;
396
+ justify-content: space-between;
397
+ gap: 10px;
398
+ border: 1px solid #dfe7ed;
399
+ padding: 16px;
400
+ background: white;
401
+ border-radius: 8px;
402
+ font-size: 14px;
403
+ }
404
+ .view-link span {
405
+ font-size: 12px;
406
+ color: #637785;
407
+ }
408
+ .setup-note {
409
+ display: grid;
410
+ gap: 10px;
411
+ padding-top: 20px;
412
+ border-top: 1px solid #e0e6eb;
413
+ color: #637785;
414
+ font-size: 13px;
415
+ }
416
+ code,
417
+ small {
418
+ font-size: 12px;
419
+ }
420
+ @media (min-width: 900px) {
421
+ .cards {
422
+ grid-template-columns: repeat(2, minmax(0, 1fr));
423
+ }
424
+ }
425
+ @media (max-width: 400px) {
426
+ main {
427
+ padding: 14px 10px 20px;
428
+ }
429
+ .candidate-card {
430
+ padding: 12px;
431
+ }
432
+ .card-actions {
433
+ column-gap: 10px;
434
+ }
435
+ }
436
+ @media (pointer: coarse) {
437
+ .card-actions a,
438
+ .text-button,
439
+ .details-button,
440
+ .review-tabs button,
441
+ summary,
442
+ .button {
443
+ min-height: 44px;
444
+ }
445
+ }
446
+
447
+ .review-tabs {
448
+ display: flex;
449
+ gap: 4px;
450
+ border-bottom: 1px solid #dce4ea;
451
+ margin-bottom: 10px;
452
+ }
453
+ .review-tabs button {
454
+ padding: 9px 10px;
455
+ border: 0;
456
+ border-bottom: 2px solid transparent;
457
+ background: transparent;
458
+ color: #637785;
459
+ font-size: 13px;
460
+ }
461
+ .review-tabs button[aria-pressed="true"] {
462
+ color: #245f7e;
463
+ border-bottom-color: #367b9f;
464
+ font-weight: 600;
465
+ }
466
+ #review-feedback {
467
+ margin-bottom: 12px;
468
+ }
469
+ .review-actions {
470
+ display: flex;
471
+ flex-wrap: wrap;
472
+ align-items: center;
473
+ gap: 6px 12px;
474
+ margin-left: auto;
475
+ }
476
+ .shortlist-button[aria-pressed="true"] {
477
+ background: #e6f2ec;
478
+ border-color: #a7c8b8;
479
+ color: #2e6750;
480
+ }
481
+ .remove-button {
482
+ color: #7b5550;
483
+ }
484
+ .undo-removal {
485
+ display: flex;
486
+ align-items: center;
487
+ justify-content: space-between;
488
+ gap: 12px;
489
+ border: 1px solid #dce4ea;
490
+ border-radius: 7px;
491
+ padding: 6px 12px;
492
+ margin-bottom: 12px;
493
+ background: #fff;
494
+ font-size: 13px;
495
+ }
496
+
497
+ .pagination,
498
+ .new-batch,
499
+ .batch-context {
500
+ display: flex;
501
+ align-items: center;
502
+ justify-content: space-between;
503
+ gap: 12px;
504
+ margin: 12px 0;
505
+ font-size: 13px;
506
+ }
507
+ .new-batch {
508
+ position: sticky;
509
+ top: 8px;
510
+ z-index: 3;
511
+ box-shadow: 0 3px 12px #20344914;
512
+ border: 1px solid #b9d5e3;
513
+ background: #eaf4fa;
514
+ border-radius: 8px;
515
+ padding: 10px 12px;
516
+ }
517
+ .pagination span {
518
+ color: #526877;
519
+ }
520
+ #pagination-bottom {
521
+ position: sticky;
522
+ bottom: 0;
523
+ padding: 10px;
524
+ background: #f6f8faf2;
525
+ border-top: 1px solid #dce4ea;
526
+ }
527
+
528
+ .profile-navigation {
529
+ display: flex;
530
+ align-items: center;
531
+ gap: 6px;
532
+ }
533
+ #profile-position {
534
+ min-width: 56px;
535
+ text-align: center;
536
+ font-variant-numeric: tabular-nums;
537
+ }
538
+ .profile-top {
539
+ gap: 8px;
540
+ flex-wrap: wrap;
541
+ }
542
+
543
+ .review-tabs {
544
+ overflow-x: auto;
545
+ }
546
+ .review-tabs button {
547
+ white-space: nowrap;
548
+ flex-shrink: 0;
549
+ }
550
+ .candidate-card.maybe {
551
+ border-color: #d6bd83;
552
+ background: #fffdf5;
553
+ }
554
+ .candidate-card.removed {
555
+ border-style: dashed;
556
+ }
557
+ .maybe-button[aria-pressed="true"] {
558
+ background: #fff3d7;
559
+ border-color: #d6bd83;
560
+ color: #795b23;
561
+ }
562
+ #profile-identity {
563
+ padding: 16px 20px 12px;
564
+ flex-shrink: 0;
565
+ }
566
+ #profile-tabs {
567
+ display: flex;
568
+ gap: 16px;
569
+ padding: 0 20px;
570
+ border-bottom: 1px solid #e5ebef;
571
+ flex-shrink: 0;
572
+ }
573
+ #profile-tabs button {
574
+ background: transparent;
575
+ border: 0;
576
+ border-bottom: 2px solid transparent;
577
+ padding: 10px 0;
578
+ color: #637785;
579
+ }
580
+ #profile-tabs button[aria-selected="true"] {
581
+ border-bottom-color: #367b9f;
582
+ color: #245f7e;
583
+ font-weight: 600;
584
+ }
585
+ #profile-content {
586
+ min-height: 120px;
587
+ }
588
+ #profile-content .candidate-overview {
589
+ margin-top: 0;
590
+ }
591
+ #profile-actions {
592
+ display: flex;
593
+ align-items: center;
594
+ gap: 8px;
595
+ flex-wrap: wrap;
596
+ flex-shrink: 0;
597
+ border-top: 1px solid #e5ebef;
598
+ padding: 12px 20px;
599
+ background: #fff;
600
+ }
601
+ .decision-status {
602
+ font-size: 12px;
603
+ color: #637785;
604
+ }
605
+ @media (max-width: 400px) {
606
+ #profile-actions {
607
+ padding: 10px 12px;
608
+ }
609
+ #profile-actions .review-actions {
610
+ gap: 8px;
611
+ }
612
+ #profile-tabs {
613
+ gap: 12px;
614
+ }
615
+ }
616
+
617
+ .detail-section dd {
618
+ white-space: pre-wrap;
619
+ }