vg-coder-cli 2.0.7 → 2.0.9

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,488 @@
1
+ :root {
2
+ /* Light Mode Variables (Default) */
3
+ --ios-bg: #F2F2F7;
4
+ --ios-card: #FFFFFF;
5
+ --ios-blue: #007AFF;
6
+ --ios-green: #34C759;
7
+ --ios-red: #FF3B30;
8
+ --ios-gray: #8E8E93;
9
+ --ios-gray-light: #E5E5EA;
10
+ --ios-input-bg: #F2F2F7;
11
+ --ios-separator: #C6C6C8;
12
+ --text-primary: #000000;
13
+ --text-secondary: #8E8E93;
14
+ --text-inverse: #FFFFFF;
15
+ --shadow-color: rgba(0, 0, 0, 0.04);
16
+ --code-bg: #1C1C1E;
17
+ --safe-area-top: env(safe-area-inset-top);
18
+ --safe-area-bottom: env(safe-area-inset-bottom);
19
+ }
20
+
21
+ /* Dark Mode Variables */
22
+ [data-theme="dark"] {
23
+ --ios-bg: #000000;
24
+ --ios-card: #1C1C1E;
25
+ --ios-gray-light: #2C2C2E;
26
+ --ios-input-bg: #2C2C2E;
27
+ --ios-separator: #38383A;
28
+ --text-primary: #FFFFFF;
29
+ --text-secondary: #98989D;
30
+ --text-inverse: #000000;
31
+ --shadow-color: rgba(255, 255, 255, 0.05);
32
+ --code-bg: #000000;
33
+ }
34
+
35
+ * {
36
+ margin: 0;
37
+ padding: 0;
38
+ box-sizing: border-box;
39
+ -webkit-tap-highlight-color: transparent;
40
+ }
41
+
42
+ body {
43
+ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
44
+ background-color: var(--ios-bg);
45
+ color: var(--text-primary);
46
+ min-height: 100vh;
47
+ padding: 0;
48
+ padding-bottom: calc(20px + var(--safe-area-bottom));
49
+ -webkit-font-smoothing: antialiased;
50
+ transition: background-color 0.3s ease, color 0.3s ease;
51
+ }
52
+
53
+ .container {
54
+ max-width: 800px;
55
+ margin: 0 auto;
56
+ padding: 20px;
57
+ padding-top: calc(20px + var(--safe-area-top));
58
+ position: relative;
59
+ }
60
+
61
+ /* Header iOS Style */
62
+ .header {
63
+ text-align: left;
64
+ margin-bottom: 24px;
65
+ padding: 0 4px;
66
+ display: flex;
67
+ justify-content: space-between;
68
+ align-items: flex-start;
69
+ }
70
+
71
+ .header-content {
72
+ flex: 1;
73
+ }
74
+
75
+ .header h1 {
76
+ color: var(--text-primary);
77
+ font-size: 34px;
78
+ font-weight: 700;
79
+ letter-spacing: -0.5px;
80
+ margin-bottom: 8px;
81
+ }
82
+
83
+ .header p {
84
+ color: var(--text-secondary);
85
+ font-size: 17px;
86
+ line-height: 1.4;
87
+ margin-bottom: 12px;
88
+ }
89
+
90
+ .status {
91
+ display: inline-flex;
92
+ align-items: center;
93
+ padding: 6px 12px;
94
+ background: rgba(52, 199, 89, 0.15);
95
+ color: var(--ios-green);
96
+ border-radius: 20px;
97
+ font-size: 13px;
98
+ font-weight: 600;
99
+ margin-top: 5px;
100
+ }
101
+
102
+ /* Theme Toggle Button */
103
+ .theme-toggle {
104
+ background: var(--ios-card);
105
+ border: none;
106
+ width: 40px;
107
+ height: 40px;
108
+ border-radius: 50%;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ font-size: 20px;
113
+ cursor: pointer;
114
+ box-shadow: 0 2px 8px var(--shadow-color);
115
+ color: var(--text-primary);
116
+ transition: transform 0.2s, background-color 0.3s;
117
+ }
118
+
119
+ .theme-toggle:active {
120
+ transform: scale(0.9);
121
+ }
122
+
123
+ /* Card Style (Inset Grouped) */
124
+ .system-prompt-card,
125
+ .endpoint-card {
126
+ background: var(--ios-card);
127
+ border-radius: 16px;
128
+ padding: 20px;
129
+ margin-bottom: 20px;
130
+ box-shadow: 0 2px 8px var(--shadow-color);
131
+ overflow: hidden;
132
+ position: relative;
133
+ transition: background-color 0.3s ease;
134
+ }
135
+
136
+ /* System Prompt */
137
+ .system-prompt-header {
138
+ display: flex;
139
+ justify-content: space-between;
140
+ align-items: center;
141
+ cursor: pointer;
142
+ padding: 4px 0;
143
+ }
144
+
145
+ /* Container for Icon Button + Title */
146
+ .header-title-group {
147
+ display: flex;
148
+ align-items: center;
149
+ gap: 12px;
150
+ }
151
+
152
+ .system-prompt-header h2 {
153
+ color: var(--text-primary);
154
+ font-size: 20px;
155
+ font-weight: 600;
156
+ margin: 0;
157
+ }
158
+
159
+ /* Icon Buttons in Headers */
160
+ .btn-icon-head {
161
+ background: rgba(0, 0, 0, 0.05);
162
+ border: none;
163
+ cursor: pointer;
164
+ font-size: 18px;
165
+ padding: 6px;
166
+ width: 36px;
167
+ height: 36px;
168
+ border-radius: 8px;
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: center;
172
+ transition: background 0.2s, transform 0.1s;
173
+ color: var(--text-primary);
174
+ }
175
+ [data-theme="dark"] .btn-icon-head {
176
+ background: rgba(255, 255, 255, 0.1);
177
+ }
178
+ .btn-icon-head:hover {
179
+ background: rgba(0, 122, 255, 0.15);
180
+ }
181
+ .btn-icon-head:active {
182
+ transform: scale(0.95);
183
+ }
184
+
185
+ .toggle-icon {
186
+ color: var(--text-secondary);
187
+ font-size: 14px;
188
+ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
189
+ }
190
+
191
+ .toggle-icon.open {
192
+ transform: rotate(180deg);
193
+ }
194
+
195
+ .system-prompt-content {
196
+ max-height: 0;
197
+ overflow: hidden;
198
+ transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s;
199
+ opacity: 0;
200
+ }
201
+
202
+ .system-prompt-content.open {
203
+ max-height: 2000px;
204
+ opacity: 1;
205
+ margin-top: 16px;
206
+ }
207
+
208
+ .prompt-text {
209
+ background: var(--ios-input-bg);
210
+ border: none;
211
+ border-radius: 12px;
212
+ padding: 16px;
213
+ font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
214
+ font-size: 13px;
215
+ line-height: 1.5;
216
+ white-space: pre-wrap;
217
+ max-height: 300px;
218
+ overflow-y: auto;
219
+ margin-bottom: 16px;
220
+ color: var(--text-primary);
221
+ -webkit-overflow-scrolling: touch;
222
+ transition: background-color 0.3s;
223
+ }
224
+
225
+ /* Endpoints */
226
+ .endpoint-header {
227
+ display: flex;
228
+ align-items: center;
229
+ justify-content: space-between; /* Spread items to edges */
230
+ margin-bottom: 12px;
231
+ border-bottom: 0.5px solid var(--ios-separator);
232
+ padding-bottom: 12px;
233
+ }
234
+
235
+ /* Group method and path on the left */
236
+ .endpoint-title-group {
237
+ display: flex;
238
+ align-items: center;
239
+ flex-wrap: wrap;
240
+ gap: 10px;
241
+ }
242
+
243
+ .method {
244
+ padding: 4px 10px;
245
+ border-radius: 6px;
246
+ font-weight: 700;
247
+ font-size: 12px;
248
+ text-transform: uppercase;
249
+ letter-spacing: 0.5px;
250
+ }
251
+
252
+ .method.post {
253
+ background: var(--ios-green);
254
+ color: white;
255
+ }
256
+
257
+ .endpoint-path {
258
+ font-family: 'SF Mono', 'Menlo', monospace;
259
+ color: var(--text-primary);
260
+ font-size: 16px;
261
+ font-weight: 600;
262
+ word-break: break-all;
263
+ }
264
+
265
+ .endpoint-desc {
266
+ color: var(--text-secondary);
267
+ margin-bottom: 20px;
268
+ font-size: 15px;
269
+ line-height: 1.4;
270
+ }
271
+
272
+ /* Forms */
273
+ .form-group {
274
+ margin-bottom: 20px;
275
+ }
276
+
277
+ .form-group label {
278
+ display: block;
279
+ margin-bottom: 8px;
280
+ color: var(--text-primary);
281
+ font-weight: 500;
282
+ font-size: 14px;
283
+ text-transform: uppercase;
284
+ letter-spacing: 0.3px;
285
+ opacity: 0.6;
286
+ }
287
+
288
+ .form-group input,
289
+ .form-group textarea {
290
+ width: 100%;
291
+ padding: 14px;
292
+ background: var(--ios-input-bg);
293
+ border: 1px solid transparent;
294
+ border-radius: 12px;
295
+ font-size: 17px;
296
+ font-family: 'SF Mono', 'Menlo', monospace;
297
+ color: var(--text-primary);
298
+ transition: background 0.2s, border-color 0.2s;
299
+ appearance: none;
300
+ -webkit-appearance: none;
301
+ }
302
+
303
+ .form-group input:focus,
304
+ .form-group textarea:focus {
305
+ outline: none;
306
+ border-color: var(--ios-blue);
307
+ background: var(--ios-input-bg);
308
+ }
309
+
310
+ .form-group textarea {
311
+ min-height: 120px;
312
+ resize: none;
313
+ }
314
+
315
+ /* Buttons */
316
+ .btn-group {
317
+ display: flex;
318
+ gap: 12px;
319
+ margin-top: 24px;
320
+ flex-direction: column;
321
+ }
322
+
323
+ @media (min-width: 640px) {
324
+ .btn-group {
325
+ flex-direction: row;
326
+ }
327
+ }
328
+
329
+ .btn {
330
+ background: var(--ios-blue);
331
+ color: white;
332
+ border: none;
333
+ padding: 14px 20px;
334
+ border-radius: 12px;
335
+ cursor: pointer;
336
+ font-size: 17px;
337
+ font-weight: 600;
338
+ transition: transform 0.1s, opacity 0.2s;
339
+ display: flex;
340
+ align-items: center;
341
+ justify-content: center;
342
+ gap: 8px;
343
+ width: 100%;
344
+ position: relative;
345
+ overflow: hidden;
346
+ }
347
+
348
+ .btn:active {
349
+ transform: scale(0.98);
350
+ opacity: 0.9;
351
+ }
352
+
353
+ .btn:disabled {
354
+ background: var(--ios-gray-light);
355
+ color: var(--ios-gray);
356
+ cursor: not-allowed;
357
+ transform: none;
358
+ }
359
+
360
+ .btn-copy {
361
+ background: rgba(0, 122, 255, 0.1);
362
+ color: var(--ios-blue);
363
+ }
364
+
365
+ .system-prompt-content .btn-copy {
366
+ margin-top: 8px;
367
+ }
368
+
369
+ .btn-copy:active {
370
+ background: rgba(0, 122, 255, 0.2);
371
+ }
372
+
373
+ .btn-copy.copied {
374
+ background: var(--ios-green);
375
+ color: white;
376
+ }
377
+
378
+ /* Response Area */
379
+ .response {
380
+ margin-top: 20px;
381
+ padding: 16px;
382
+ border-radius: 12px;
383
+ background: var(--code-bg);
384
+ color: #fff;
385
+ display: none;
386
+ font-size: 13px;
387
+ overflow-x: auto;
388
+ border-left: none;
389
+ }
390
+
391
+ .response.show {
392
+ display: block;
393
+ animation: fadeIn 0.3s ease;
394
+ }
395
+
396
+ .response.success {
397
+ border: 1px solid rgba(52, 199, 89, 0.3);
398
+ }
399
+
400
+ .response.error {
401
+ border: 1px solid rgba(255, 59, 48, 0.3);
402
+ background: #2C1515;
403
+ }
404
+
405
+ .response pre {
406
+ margin: 0;
407
+ font-family: 'SF Mono', 'Menlo', monospace;
408
+ white-space: pre-wrap;
409
+ word-wrap: break-word;
410
+ }
411
+
412
+ @keyframes fadeIn {
413
+ from {
414
+ opacity: 0;
415
+ transform: translateY(5px);
416
+ }
417
+
418
+ to {
419
+ opacity: 1;
420
+ transform: translateY(0);
421
+ }
422
+ }
423
+
424
+ /* Loading Spinner */
425
+ .loading {
426
+ display: inline-block;
427
+ width: 18px;
428
+ height: 18px;
429
+ border: 2px solid rgba(255, 255, 255, 0.3);
430
+ border-radius: 50%;
431
+ border-top-color: currentColor;
432
+ animation: spin 0.8s linear infinite;
433
+ }
434
+
435
+ @keyframes spin {
436
+ to {
437
+ transform: rotate(360deg);
438
+ }
439
+ }
440
+
441
+ /* Toast */
442
+ .toast {
443
+ position: fixed;
444
+ top: 10px;
445
+ left: 50%;
446
+ transform: translateX(-50%) translateY(-100px);
447
+ padding: 12px 20px;
448
+ border-radius: 25px;
449
+ color: #000;
450
+ background: rgba(255, 255, 255, 0.95);
451
+ backdrop-filter: blur(20px);
452
+ -webkit-backdrop-filter: blur(20px);
453
+ font-weight: 500;
454
+ font-size: 15px;
455
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
456
+ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
457
+ z-index: 2000;
458
+ display: flex;
459
+ align-items: center;
460
+ gap: 10px;
461
+ width: auto;
462
+ max-width: 90%;
463
+ white-space: nowrap;
464
+ opacity: 0;
465
+ pointer-events: none;
466
+ }
467
+
468
+ .toast.show {
469
+ transform: translateX(-50%) translateY(calc(var(--safe-area-top)));
470
+ opacity: 1;
471
+ }
472
+
473
+ .toast::before {
474
+ content: '';
475
+ display: block;
476
+ width: 20px;
477
+ height: 20px;
478
+ border-radius: 50%;
479
+ flex-shrink: 0;
480
+ }
481
+
482
+ .toast.success::before {
483
+ background: var(--ios-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
484
+ }
485
+
486
+ .toast.error::before {
487
+ background: var(--ios-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat;
488
+ }