mcp-config-manager 1.0.2

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,640 @@
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
9
+ background: #f5f5f5;
10
+ color: #333;
11
+ line-height: 1.6;
12
+ }
13
+
14
+ .container {
15
+ max-width: 1400px;
16
+ margin: 0 auto;
17
+ padding: 20px;
18
+ }
19
+
20
+ header {
21
+ background: white;
22
+ padding: 20px;
23
+ border-radius: 8px;
24
+ margin-bottom: 20px;
25
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
26
+ }
27
+
28
+ header h1 {
29
+ color: #2c3e50;
30
+ margin-bottom: 5px;
31
+ }
32
+
33
+ header p {
34
+ color: #7f8c8d;
35
+ }
36
+
37
+ .view-switcher {
38
+ margin-top: 15px;
39
+ display: flex;
40
+ gap: 10px;
41
+ }
42
+
43
+ .view-btn {
44
+ padding: 8px 16px;
45
+ border: 1px solid #e0e0e0;
46
+ background: white;
47
+ border-radius: 4px;
48
+ cursor: pointer;
49
+ transition: all 0.2s;
50
+ }
51
+
52
+ .view-btn.active {
53
+ background: #3498db;
54
+ color: white;
55
+ border-color: #3498db;
56
+ }
57
+
58
+ .view-btn:hover:not(.active) {
59
+ background: #f8f9fa;
60
+ }
61
+
62
+ .main-grid {
63
+ display: grid;
64
+ grid-template-columns: 300px 1fr;
65
+ gap: 20px;
66
+ }
67
+
68
+ .sidebar {
69
+ background: white;
70
+ padding: 20px;
71
+ border-radius: 8px;
72
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
73
+ height: fit-content;
74
+ }
75
+
76
+ .sidebar h2 {
77
+ margin-bottom: 15px;
78
+ color: #2c3e50;
79
+ }
80
+
81
+ .client-list {
82
+ margin-bottom: 15px;
83
+ }
84
+
85
+ .client-item {
86
+ padding: 12px;
87
+ margin-bottom: 8px;
88
+ border-radius: 4px;
89
+ cursor: pointer;
90
+ transition: background 0.2s;
91
+ border: 1px solid #e0e0e0;
92
+ }
93
+
94
+ .client-item:hover {
95
+ background: #f8f9fa;
96
+ }
97
+
98
+ .client-item.active {
99
+ background: #3498db;
100
+ color: white;
101
+ border-color: #3498db;
102
+ }
103
+
104
+ .client-item .client-status {
105
+ font-size: 12px;
106
+ margin-top: 4px;
107
+ opacity: 0.8;
108
+ }
109
+
110
+ .content {
111
+ background: white;
112
+ padding: 20px;
113
+ border-radius: 8px;
114
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
115
+ }
116
+
117
+ .client-header {
118
+ display: flex;
119
+ justify-content: space-between;
120
+ align-items: flex-start;
121
+ margin-bottom: 20px;
122
+ padding-bottom: 15px;
123
+ border-bottom: 2px solid #e0e0e0;
124
+ }
125
+
126
+ .config-path {
127
+ font-size: 12px;
128
+ color: #7f8c8d;
129
+ margin-top: 5px;
130
+ font-family: 'Courier New', monospace;
131
+ }
132
+
133
+ .action-buttons {
134
+ display: flex;
135
+ gap: 10px;
136
+ }
137
+
138
+ .server-list {
139
+ display: grid;
140
+ gap: 15px;
141
+ }
142
+
143
+ .server-card {
144
+ border: 1px solid #e0e0e0;
145
+ border-radius: 6px;
146
+ padding: 15px;
147
+ transition: box-shadow 0.2s;
148
+ }
149
+
150
+ .server-card:hover {
151
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
152
+ }
153
+
154
+ .server-header {
155
+ display: flex;
156
+ justify-content: space-between;
157
+ align-items: center;
158
+ margin-bottom: 10px;
159
+ gap: 10px;
160
+ }
161
+
162
+ .server-checkbox {
163
+ width: 18px;
164
+ height: 18px;
165
+ cursor: pointer;
166
+ }
167
+
168
+ .bulk-actions {
169
+ display: flex;
170
+ align-items: center;
171
+ gap: 10px;
172
+ padding: 10px;
173
+ background: #f8f9fa;
174
+ border-radius: 4px;
175
+ margin-bottom: 15px;
176
+ }
177
+
178
+ .bulk-actions span {
179
+ font-weight: 600;
180
+ margin-right: 10px;
181
+ }
182
+
183
+ .server-name {
184
+ font-weight: 600;
185
+ color: #2c3e50;
186
+ }
187
+
188
+ .server-actions {
189
+ display: flex;
190
+ gap: 5px;
191
+ }
192
+
193
+ .server-details {
194
+ background: #f8f9fa;
195
+ padding: 10px;
196
+ border-radius: 4px;
197
+ font-family: 'Courier New', monospace;
198
+ font-size: 14px;
199
+ }
200
+
201
+ .server-details .detail-row {
202
+ margin-bottom: 5px;
203
+ }
204
+
205
+ .server-details strong {
206
+ color: #7f8c8d;
207
+ }
208
+
209
+ .env-list {
210
+ margin-top: 10px;
211
+ padding-top: 10px;
212
+ border-top: 1px solid #e0e0e0;
213
+ }
214
+
215
+ .btn {
216
+ padding: 8px 16px;
217
+ border: none;
218
+ border-radius: 4px;
219
+ cursor: pointer;
220
+ font-size: 14px;
221
+ transition: opacity 0.2s;
222
+ }
223
+
224
+ .btn:hover {
225
+ opacity: 0.8;
226
+ }
227
+
228
+ .btn-primary {
229
+ background: #3498db;
230
+ color: white;
231
+ }
232
+
233
+ .btn-secondary {
234
+ background: #95a5a6;
235
+ color: white;
236
+ }
237
+
238
+ .btn-danger {
239
+ background: #e74c3c;
240
+ color: white;
241
+ }
242
+
243
+ .btn-small {
244
+ padding: 4px 8px;
245
+ font-size: 12px;
246
+ }
247
+
248
+ .modal {
249
+ position: fixed;
250
+ top: 0;
251
+ left: 0;
252
+ right: 0;
253
+ bottom: 0;
254
+ background: rgba(0,0,0,0.5);
255
+ display: flex;
256
+ align-items: center;
257
+ justify-content: center;
258
+ z-index: 1000;
259
+ }
260
+
261
+ .modal-content {
262
+ background: white;
263
+ padding: 25px;
264
+ border-radius: 8px;
265
+ width: 90%;
266
+ max-width: 500px;
267
+ max-height: 90vh;
268
+ overflow-y: auto;
269
+ }
270
+
271
+ .modal-content h3 {
272
+ margin-bottom: 20px;
273
+ color: #2c3e50;
274
+ }
275
+
276
+ .form-group {
277
+ margin-bottom: 15px;
278
+ }
279
+
280
+ .form-group label {
281
+ display: block;
282
+ margin-bottom: 5px;
283
+ color: #7f8c8d;
284
+ font-size: 14px;
285
+ }
286
+
287
+ .form-group input,
288
+ .form-group textarea,
289
+ .form-group select {
290
+ width: 100%;
291
+ padding: 8px;
292
+ border: 1px solid #e0e0e0;
293
+ border-radius: 4px;
294
+ font-size: 14px;
295
+ }
296
+
297
+ .form-group textarea {
298
+ resize: vertical;
299
+ font-family: 'Courier New', monospace;
300
+ }
301
+
302
+ .env-var-row {
303
+ display: flex;
304
+ align-items: center;
305
+ gap: 10px;
306
+ margin-bottom: 10px;
307
+ }
308
+
309
+ .env-var-row input {
310
+ padding: 6px;
311
+ }
312
+
313
+ .modal-actions {
314
+ display: flex;
315
+ justify-content: flex-end;
316
+ gap: 10px;
317
+ margin-top: 20px;
318
+ }
319
+
320
+ .view {
321
+ animation: fadeIn 0.3s;
322
+ }
323
+
324
+ @keyframes fadeIn {
325
+ from { opacity: 0; }
326
+ to { opacity: 1; }
327
+ }
328
+
329
+ .editor-tabs {
330
+ display: flex;
331
+ gap: 10px;
332
+ margin-bottom: 20px;
333
+ border-bottom: 2px solid #e0e0e0;
334
+ }
335
+
336
+ .tab-btn {
337
+ padding: 10px 20px;
338
+ background: none;
339
+ border: none;
340
+ cursor: pointer;
341
+ color: #7f8c8d;
342
+ position: relative;
343
+ transition: color 0.2s;
344
+ }
345
+
346
+ .tab-btn.active {
347
+ color: #3498db;
348
+ }
349
+
350
+ .tab-btn.active::after {
351
+ content: '';
352
+ position: absolute;
353
+ bottom: -2px;
354
+ left: 0;
355
+ right: 0;
356
+ height: 2px;
357
+ background: #3498db;
358
+ }
359
+
360
+ .tab-content {
361
+ animation: fadeIn 0.3s;
362
+ }
363
+
364
+ #jsonEditor {
365
+ font-family: 'Courier New', monospace;
366
+ white-space: pre;
367
+ }
368
+
369
+ .checkbox-list {
370
+ max-height: 200px;
371
+ overflow-y: auto;
372
+ border: 1px solid #e0e0e0;
373
+ border-radius: 4px;
374
+ padding: 10px;
375
+ }
376
+
377
+ .checkbox-item {
378
+ display: flex;
379
+ align-items: center;
380
+ margin-bottom: 8px;
381
+ gap: 8px; /* Add gap for consistent spacing */
382
+ }
383
+
384
+ .checkbox-item input[type="checkbox"] {
385
+ margin-right: 0; /* Reset default margin */
386
+ vertical-align: middle; /* Align checkbox vertically */
387
+ width: auto; /* Prevent input from taking full width */
388
+ }
389
+
390
+ .checkbox-item label {
391
+ vertical-align: middle; /* Align label text vertically */
392
+ margin-bottom: 0; /* Reset default margin */
393
+ }
394
+
395
+ .copy-options {
396
+ display: flex;
397
+ gap: 10px;
398
+ margin-bottom: 10px;
399
+ }
400
+
401
+ .copy-btn {
402
+ padding: 4px 8px;
403
+ font-size: 12px;
404
+ background: #95a5a6;
405
+ color: white;
406
+ border: none;
407
+ border-radius: 4px;
408
+ cursor: pointer;
409
+ }
410
+
411
+ .copy-btn:hover {
412
+ opacity: 0.8;
413
+ }
414
+
415
+ /* Kanban View Styles */
416
+ .kanban-board {
417
+ display: flex;
418
+ gap: 20px;
419
+ overflow-x: auto;
420
+ padding: 20px;
421
+ min-height: 600px;
422
+ }
423
+
424
+ .kanban-column {
425
+ flex: 0 0 300px;
426
+ background: white;
427
+ border-radius: 8px;
428
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
429
+ display: flex;
430
+ flex-direction: column;
431
+ }
432
+
433
+ .kanban-header {
434
+ padding: 15px;
435
+ border-bottom: 2px solid #e0e0e0;
436
+ background: #f8f9fa;
437
+ border-radius: 8px 8px 0 0;
438
+ }
439
+
440
+ .kanban-header h3 {
441
+ margin: 0;
442
+ color: #2c3e50;
443
+ }
444
+
445
+ .kanban-config-path {
446
+ font-size: 11px;
447
+ color: #7f8c8d;
448
+ margin-top: 5px;
449
+ word-break: break-all;
450
+ }
451
+
452
+ .kanban-servers {
453
+ padding: 15px;
454
+ flex: 1;
455
+ min-height: 100px;
456
+ transition: background 0.2s;
457
+ }
458
+
459
+ .kanban-servers.drag-over {
460
+ background: #e3f2fd;
461
+ }
462
+
463
+ .kanban-card {
464
+ background: var(--server-color, white);
465
+ border: 1px solid #e0e0e0;
466
+ border-radius: 6px;
467
+ padding: 12px;
468
+ margin-bottom: 10px;
469
+ cursor: move;
470
+ transition: transform 0.2s, box-shadow 0.2s;
471
+ }
472
+
473
+ .kanban-card:hover {
474
+ transform: translateY(-2px);
475
+ box-shadow: 0 4px 8px rgba(0,0,0,0.15);
476
+ }
477
+
478
+ .kanban-card.dragging {
479
+ opacity: 0.5;
480
+ }
481
+
482
+ .kanban-card-header {
483
+ display: flex;
484
+ justify-content: space-between;
485
+ align-items: center;
486
+ margin-bottom: 8px;
487
+ }
488
+
489
+ .kanban-card-title {
490
+ font-weight: 600;
491
+ color: #2c3e50;
492
+ }
493
+
494
+ .kanban-card-actions {
495
+ display: flex;
496
+ gap: 2px;
497
+ }
498
+
499
+ .icon-btn {
500
+ background: none;
501
+ border: none;
502
+ cursor: pointer;
503
+ font-size: 14px;
504
+ padding: 2px;
505
+ opacity: 0.7;
506
+ transition: opacity 0.2s, transform 0.2s;
507
+ }
508
+
509
+ .icon-btn:hover {
510
+ opacity: 1;
511
+ transform: scale(1.2);
512
+ }
513
+
514
+ .icon-btn.delete:hover {
515
+ filter: hue-rotate(340deg);
516
+ }
517
+
518
+ .icon-btn.add-env-var {
519
+ color: #2ecc71;
520
+ font-weight: bold;
521
+ font-size: 1.2em;
522
+ }
523
+
524
+ .icon-btn.no-bg {
525
+ background: none;
526
+ border: none;
527
+ padding: 0;
528
+ }
529
+
530
+ .kanban-card-details {
531
+ font-size: 12px;
532
+ color: #7f8c8d;
533
+ font-family: 'Courier New', monospace;
534
+ }
535
+
536
+ .kanban-add-btn {
537
+ margin: 0 15px 15px;
538
+ width: calc(100% - 30px);
539
+ }
540
+
541
+ @media (max-width: 768px) {
542
+ .main-grid {
543
+ grid-template-columns: 1fr;
544
+ }
545
+
546
+ .client-header {
547
+ flex-direction: column;
548
+ gap: 15px;
549
+ align-items: stretch;
550
+ }
551
+
552
+ .action-buttons {
553
+ flex-direction: column;
554
+ }
555
+
556
+ .kanban-board {
557
+ flex-direction: column;
558
+ }
559
+
560
+ .kanban-column {
561
+ flex: 1 1 auto;
562
+ }
563
+ }
564
+
565
+ /* New styles for Server View */
566
+ .server-list-all {
567
+ display: grid;
568
+ gap: 20px;
569
+ padding: 20px;
570
+ }
571
+
572
+ .server-card-all {
573
+ background: white;
574
+ border: 1px solid #e0e0e0;
575
+ border-radius: 8px;
576
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
577
+ padding: 15px;
578
+ }
579
+
580
+ .server-header-all {
581
+ display: flex;
582
+ justify-content: space-between;
583
+ align-items: center;
584
+ margin-bottom: 10px;
585
+ border-bottom: 1px solid #eee;
586
+ padding-bottom: 10px;
587
+ }
588
+
589
+ .server-name-all {
590
+ font-size: 1.2em;
591
+ font-weight: 600;
592
+ color: #2c3e50;
593
+ }
594
+
595
+ .global-tag {
596
+ background: #2ecc71;
597
+ color: white;
598
+ padding: 3px 8px;
599
+ border-radius: 4px;
600
+ font-size: 0.8em;
601
+ margin-left: 10px;
602
+ }
603
+
604
+ .server-actions-all {
605
+ display: flex;
606
+ gap: 10px;
607
+ }
608
+
609
+ .server-details-all {
610
+ font-size: 0.9em;
611
+ color: #555;
612
+ }
613
+
614
+ .server-details-all .detail-row {
615
+ margin-bottom: 5px;
616
+ }
617
+
618
+ .server-clients {
619
+ margin-top: 10px;
620
+ padding-top: 10px;
621
+ border-top: 1px solid #eee;
622
+ color: #7f8c8d;
623
+ }
624
+
625
+ /* Styles for the new modals */
626
+ #editServerEnvModal .modal-content,
627
+ #addServerToClientsModal .modal-content {
628
+ max-width: 600px;
629
+ }
630
+
631
+ #editServerEnvName, #addServerToClientsName {
632
+ font-weight: 600;
633
+ color: #3498db;
634
+ }
635
+
636
+ #addServerToClientsConfig {
637
+ background: #f8f9fa;
638
+ border: 1px solid #e0e0e0;
639
+ font-family: 'Courier New', monospace;
640
+ }