requ-mcp 0.2.0 → 0.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.
@@ -0,0 +1,458 @@
1
+ /* requ dashboard — custom styles to complement Tailwind CDN */
2
+
3
+ /* ── Fonts ─────────────────────────────────────────────── */
4
+ body {
5
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
6
+ -webkit-font-smoothing: antialiased;
7
+ }
8
+
9
+ /* ── Scrollbars ─────────────────────────────────────────── */
10
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
11
+ ::-webkit-scrollbar-track { background: transparent; }
12
+ ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
13
+ ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
14
+
15
+ /* ── Skeleton loader animation ─────────────────────────── */
16
+ @keyframes skeleton-pulse {
17
+ 0%, 100% { opacity: 1; }
18
+ 50% { opacity: 0.4; }
19
+ }
20
+ .skeleton {
21
+ background: #e2e8f0;
22
+ border-radius: 6px;
23
+ animation: skeleton-pulse 1.6s ease-in-out infinite;
24
+ }
25
+ .skeleton-sm { height: 12px; }
26
+ .skeleton-md { height: 16px; }
27
+ .skeleton-lg { height: 24px; }
28
+ .skeleton-xl { height: 40px; }
29
+
30
+ /* ── Progress bar ───────────────────────────────────────── */
31
+ .progress-track {
32
+ width: 100%;
33
+ height: 6px;
34
+ background: #e2e8f0;
35
+ border-radius: 9999px;
36
+ overflow: hidden;
37
+ }
38
+ .progress-fill {
39
+ height: 100%;
40
+ border-radius: 9999px;
41
+ transition: width 0.5s ease;
42
+ }
43
+ .progress-fill--green { background: #16a34a; }
44
+ .progress-fill--indigo { background: #4f46e5; }
45
+ .progress-fill--amber { background: #d97706; }
46
+ .progress-fill--red { background: #dc2626; }
47
+
48
+ /* Mini progress (inside KPI cards) */
49
+ .progress-mini {
50
+ height: 4px;
51
+ background: #f1f5f9;
52
+ border-radius: 9999px;
53
+ overflow: hidden;
54
+ margin-top: 8px;
55
+ }
56
+ .progress-mini-fill {
57
+ height: 100%;
58
+ border-radius: 9999px;
59
+ transition: width 0.5s ease;
60
+ }
61
+
62
+ /* ── Chart containers ───────────────────────────────────── */
63
+ .chart-container {
64
+ position: relative;
65
+ height: 380px;
66
+ width: 100%;
67
+ }
68
+ .chart-container-sm {
69
+ position: relative;
70
+ height: 260px;
71
+ width: 100%;
72
+ }
73
+
74
+ /* ── Tab transition ─────────────────────────────────────── */
75
+ [x-cloak] { display: none !important; }
76
+
77
+ .tab-panel {
78
+ animation: fadeIn 0.18s ease-out;
79
+ }
80
+ @keyframes fadeIn {
81
+ from { opacity: 0; transform: translateY(4px); }
82
+ to { opacity: 1; transform: translateY(0); }
83
+ }
84
+
85
+ /* ── Table ──────────────────────────────────────────────── */
86
+ .data-table {
87
+ width: 100%;
88
+ border-collapse: collapse;
89
+ font-size: 0.875rem;
90
+ }
91
+ .data-table th {
92
+ text-align: left;
93
+ padding: 10px 14px;
94
+ font-weight: 600;
95
+ font-size: 0.75rem;
96
+ text-transform: uppercase;
97
+ letter-spacing: 0.05em;
98
+ color: #64748b;
99
+ background: #f8fafc;
100
+ border-bottom: 1px solid #e2e8f0;
101
+ white-space: nowrap;
102
+ cursor: pointer;
103
+ user-select: none;
104
+ }
105
+ .data-table th:hover { background: #f1f5f9; color: #334155; }
106
+ .data-table td {
107
+ padding: 11px 14px;
108
+ border-bottom: 1px solid #f1f5f9;
109
+ vertical-align: middle;
110
+ color: #334155;
111
+ }
112
+ .data-table tbody tr {
113
+ cursor: pointer;
114
+ transition: background 0.1s;
115
+ }
116
+ .data-table tbody tr:hover { background: #f8fafc; }
117
+ .data-table tbody tr.expanded { background: #f0f9ff; }
118
+
119
+ /* ── Expandable detail row ──────────────────────────────── */
120
+ .detail-row td {
121
+ padding: 0 !important;
122
+ border-bottom: 2px solid #e2e8f0 !important;
123
+ cursor: default;
124
+ }
125
+ .detail-row:hover { background: transparent !important; }
126
+ .detail-content {
127
+ padding: 16px 14px 16px 40px;
128
+ background: #f8fafc;
129
+ }
130
+
131
+ /* ── Pill badges ────────────────────────────────────────── */
132
+ .badge {
133
+ display: inline-flex;
134
+ align-items: center;
135
+ gap: 4px;
136
+ padding: 2px 8px;
137
+ border-radius: 9999px;
138
+ font-size: 0.72rem;
139
+ font-weight: 600;
140
+ letter-spacing: 0.02em;
141
+ white-space: nowrap;
142
+ }
143
+ .badge-green { background: #dcfce7; color: #15803d; }
144
+ .badge-red { background: #fee2e2; color: #b91c1c; }
145
+ .badge-amber { background: #fef3c7; color: #b45309; }
146
+ .badge-slate { background: #f1f5f9; color: #475569; }
147
+ .badge-blue { background: #dbeafe; color: #1d4ed8; }
148
+ .badge-indigo { background: #e0e7ff; color: #4338ca; }
149
+ .badge-purple { background: #ede9fe; color: #6d28d9; }
150
+
151
+ /* ── Pulse dot (active phase) ───────────────────────────── */
152
+ .pulse-dot {
153
+ display: inline-block;
154
+ width: 8px;
155
+ height: 8px;
156
+ border-radius: 50%;
157
+ background: #22c55e;
158
+ box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
159
+ animation: pulse-ring 2s ease-out infinite;
160
+ }
161
+ @keyframes pulse-ring {
162
+ 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
163
+ 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
164
+ 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
165
+ }
166
+
167
+ /* ── KPI card ───────────────────────────────────────────── */
168
+ .kpi-card {
169
+ background: white;
170
+ border-radius: 12px;
171
+ border: 1px solid #e2e8f0;
172
+ padding: 20px 24px;
173
+ transition: box-shadow 0.15s, border-color 0.15s;
174
+ }
175
+ .kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); border-color: #c7d2fe; }
176
+
177
+ /* ── Section card ───────────────────────────────────────── */
178
+ .section-card {
179
+ background: white;
180
+ border-radius: 12px;
181
+ border: 1px solid #e2e8f0;
182
+ overflow: hidden;
183
+ }
184
+ .section-card-header {
185
+ padding: 16px 20px;
186
+ border-bottom: 1px solid #f1f5f9;
187
+ font-weight: 600;
188
+ font-size: 0.9rem;
189
+ color: #1e293b;
190
+ display: flex;
191
+ align-items: center;
192
+ justify-content: space-between;
193
+ }
194
+
195
+ /* ── Component card ─────────────────────────────────────── */
196
+ .component-card {
197
+ background: white;
198
+ border: 1px solid #e2e8f0;
199
+ border-radius: 12px;
200
+ padding: 20px;
201
+ transition: box-shadow 0.15s, border-color 0.15s;
202
+ }
203
+ .component-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #a5b4fc; }
204
+
205
+ /* ── Gaps panel ─────────────────────────────────────────── */
206
+ .gap-panel-red { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 16px; }
207
+ .gap-panel-amber { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 16px; }
208
+ .gap-panel-slate { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
209
+
210
+ /* ── Filter strip ───────────────────────────────────────── */
211
+ .filter-pill {
212
+ padding: 5px 14px;
213
+ border-radius: 9999px;
214
+ font-size: 0.8rem;
215
+ font-weight: 500;
216
+ cursor: pointer;
217
+ border: 1px solid #e2e8f0;
218
+ background: white;
219
+ color: #475569;
220
+ transition: all 0.12s;
221
+ }
222
+ .filter-pill:hover { border-color: #a5b4fc; color: #4338ca; }
223
+ .filter-pill.active {
224
+ background: #4f46e5;
225
+ border-color: #4f46e5;
226
+ color: white;
227
+ }
228
+
229
+ /* ── Search input ───────────────────────────────────────── */
230
+ .search-input {
231
+ border: 1px solid #e2e8f0;
232
+ border-radius: 8px;
233
+ padding: 8px 12px 8px 36px;
234
+ font-size: 0.875rem;
235
+ color: #1e293b;
236
+ background: white;
237
+ width: 100%;
238
+ max-width: 320px;
239
+ transition: border-color 0.15s, box-shadow 0.15s;
240
+ outline: none;
241
+ }
242
+ .search-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
243
+
244
+ /* ── Select dropdown ────────────────────────────────────── */
245
+ .filter-select {
246
+ border: 1px solid #e2e8f0;
247
+ border-radius: 8px;
248
+ padding: 7px 32px 7px 10px;
249
+ font-size: 0.8rem;
250
+ color: #334155;
251
+ background: white;
252
+ cursor: pointer;
253
+ outline: none;
254
+ appearance: none;
255
+ background-image: 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");
256
+ background-repeat: no-repeat;
257
+ background-position: right 10px center;
258
+ transition: border-color 0.15s;
259
+ }
260
+ .filter-select:focus { border-color: #6366f1; }
261
+ .filter-select--dark {
262
+ background-color: transparent;
263
+ background-image: 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='%23cbd5e1' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
264
+ color: #e2e8f0; /* slate-200 — overrides the dark color from .filter-select base */
265
+ }
266
+
267
+ /* ── Button ─────────────────────────────────────────────── */
268
+ .btn-primary {
269
+ display: inline-flex;
270
+ align-items: center;
271
+ gap: 6px;
272
+ padding: 7px 14px;
273
+ background: #4f46e5;
274
+ color: white;
275
+ border-radius: 8px;
276
+ font-size: 0.8rem;
277
+ font-weight: 500;
278
+ cursor: pointer;
279
+ border: none;
280
+ transition: background 0.12s;
281
+ }
282
+ .btn-primary:hover { background: #4338ca; }
283
+ .btn-secondary {
284
+ display: inline-flex;
285
+ align-items: center;
286
+ gap: 6px;
287
+ padding: 7px 14px;
288
+ background: white;
289
+ color: #334155;
290
+ border-radius: 8px;
291
+ font-size: 0.8rem;
292
+ font-weight: 500;
293
+ cursor: pointer;
294
+ border: 1px solid #e2e8f0;
295
+ transition: all 0.12s;
296
+ }
297
+ .btn-secondary:hover { border-color: #a5b4fc; color: #4338ca; }
298
+
299
+ /* ── Empty state ────────────────────────────────────────── */
300
+ .empty-state {
301
+ display: flex;
302
+ flex-direction: column;
303
+ align-items: center;
304
+ justify-content: center;
305
+ padding: 60px 20px;
306
+ color: #94a3b8;
307
+ text-align: center;
308
+ gap: 12px;
309
+ }
310
+ .empty-state svg { opacity: 0.4; }
311
+ .empty-state h3 { font-size: 1rem; font-weight: 600; color: #64748b; margin: 0; }
312
+ .empty-state p { font-size: 0.85rem; margin: 0; max-width: 280px; line-height: 1.5; }
313
+
314
+ /* ── Not initialized banner ─────────────────────────────── */
315
+ .init-banner {
316
+ background: #fefce8;
317
+ border: 1px solid #fde68a;
318
+ border-radius: 10px;
319
+ padding: 14px 18px;
320
+ display: flex;
321
+ align-items: center;
322
+ gap: 10px;
323
+ font-size: 0.875rem;
324
+ color: #92400e;
325
+ margin-bottom: 20px;
326
+ }
327
+
328
+ /* ── Mobile — horizontal scrollable tab row ─────────────── */
329
+ @media (max-width: 640px) {
330
+ .tab-scroll {
331
+ overflow-x: auto;
332
+ -webkit-overflow-scrolling: touch;
333
+ scrollbar-width: none;
334
+ }
335
+ .tab-scroll::-webkit-scrollbar { display: none; }
336
+ .tab-scroll .tab-list { min-width: max-content; }
337
+
338
+ .data-table-wrap { overflow-x: auto; }
339
+ }
340
+
341
+ /* ── Chip ───────────────────────────────────────────────── */
342
+ .chip {
343
+ display: inline-block;
344
+ padding: 1px 7px;
345
+ border-radius: 4px;
346
+ font-size: 0.7rem;
347
+ font-weight: 600;
348
+ background: #f1f5f9;
349
+ color: #475569;
350
+ margin: 1px;
351
+ white-space: nowrap;
352
+ }
353
+ .chip-indigo { background: #e0e7ff; color: #4338ca; }
354
+ .chip-green { background: #dcfce7; color: #15803d; }
355
+ .chip-amber { background: #fef3c7; color: #b45309; }
356
+
357
+ /* ── Spinner ────────────────────────────────────────────── */
358
+ @keyframes spin { to { transform: rotate(360deg); } }
359
+ .spinner {
360
+ width: 20px;
361
+ height: 20px;
362
+ border: 2px solid #e2e8f0;
363
+ border-top-color: #6366f1;
364
+ border-radius: 50%;
365
+ animation: spin 0.7s linear infinite;
366
+ }
367
+
368
+ /* ── Coverage summary bar ───────────────────────────────── */
369
+ .cov-stat {
370
+ text-align: center;
371
+ padding: 16px 12px;
372
+ }
373
+ .cov-stat .value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
374
+ .cov-stat .label { font-size: 0.72rem; color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
375
+
376
+ /* ── Accessibility: respect prefers-reduced-motion ──────── */
377
+ @media (prefers-reduced-motion: reduce) {
378
+ *,
379
+ *::before,
380
+ *::after {
381
+ animation-duration: 0.01ms !important;
382
+ animation-iteration-count: 1 !important;
383
+ transition-duration: 0.01ms !important;
384
+ scroll-behavior: auto !important;
385
+ }
386
+ /* Keep skeleton visible (no pulsing) but still show it */
387
+ .skeleton {
388
+ animation: none;
389
+ opacity: 0.7;
390
+ }
391
+ }
392
+
393
+ /* ── Toggle switch ──────────────────────────────────────── */
394
+ .toggle-group {
395
+ display: inline-flex;
396
+ background: #f1f5f9;
397
+ border-radius: 8px;
398
+ padding: 3px;
399
+ gap: 2px;
400
+ }
401
+ .toggle-btn {
402
+ padding: 5px 14px;
403
+ border-radius: 6px;
404
+ font-size: 0.8rem;
405
+ font-weight: 500;
406
+ cursor: pointer;
407
+ border: none;
408
+ background: transparent;
409
+ color: #64748b;
410
+ transition: all 0.15s;
411
+ }
412
+ .toggle-btn.active {
413
+ background: white;
414
+ color: #1e293b;
415
+ box-shadow: 0 1px 4px rgba(0,0,0,0.1);
416
+ }
417
+
418
+ /* ── Non-sortable table headers (global panel) ─────────────── */
419
+ #panel-global .data-table th {
420
+ cursor: default;
421
+ }
422
+ #panel-global .data-table th:hover {
423
+ background: #f8fafc;
424
+ color: #64748b;
425
+ }
426
+
427
+ /* ── Brief content — Markdown prose ────────────────────────── */
428
+ .brief-content p { margin-bottom: 0.75rem; color: #475569; line-height: 1.6; }
429
+ .brief-content h1,
430
+ .brief-content h2,
431
+ .brief-content h3 { font-weight: 600; color: #1e293b; margin-top: 1rem; margin-bottom: 0.5rem; }
432
+ .brief-content h1 { font-size: 1.125rem; }
433
+ .brief-content h2 { font-size: 1rem; }
434
+ .brief-content h3 { font-size: 0.9rem; }
435
+ .brief-content ul,
436
+ .brief-content ol { margin-left: 1.25rem; margin-bottom: 0.75rem; color: #475569; }
437
+ .brief-content ul { list-style-type: disc; }
438
+ .brief-content ol { list-style-type: decimal; }
439
+ .brief-content li { margin-bottom: 0.25rem; }
440
+ .brief-content code { font-family: monospace; font-size: 0.85em; background: #f1f5f9; color: #0f172a; padding: 0.1em 0.35em; border-radius: 3px; }
441
+ .brief-content pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.75rem 1rem; overflow-x: auto; margin-bottom: 0.75rem; }
442
+ .brief-content pre code { background: none; padding: 0; font-size: 0.85rem; }
443
+ .brief-content a { color: #4f46e5; text-decoration: underline; }
444
+ .brief-content strong { font-weight: 600; color: #1e293b; }
445
+ .brief-content em { font-style: italic; }
446
+ .brief-content > p:last-child,
447
+ .brief-content > ul:last-child,
448
+ .brief-content > ol:last-child { margin-bottom: 0; }
449
+
450
+ /* ── Brief expand/collapse ─────────────────────────────── */
451
+ .brief-collapse {
452
+ max-height: 7.5rem; /* ≈ 5 lines at 1.5rem line-height */
453
+ overflow: hidden;
454
+ transition: max-height 0.25s ease;
455
+ }
456
+ .brief-collapse.brief-expanded {
457
+ max-height: 2000px; /* large enough; animates via max-height trick */
458
+ }