@qodalis/cli 2.1.0 → 2.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.
- package/assets/cli-panel.css +247 -102
- package/package.json +2 -2
- package/public-api.d.mts +50 -5
- package/public-api.d.ts +50 -5
- package/public-api.js +188 -23
- package/public-api.js.map +1 -1
- package/public-api.mjs +189 -24
- package/public-api.mjs.map +1 -1
package/assets/cli-panel.css
CHANGED
|
@@ -1,36 +1,66 @@
|
|
|
1
|
-
/* Qodalis CLI Panel — shared styles for React, Vue, and vanilla JS
|
|
1
|
+
/* Qodalis CLI Panel — shared styles for React, Vue, Angular and vanilla JS
|
|
2
2
|
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* --cli-panel-
|
|
9
|
-
* --cli-panel-
|
|
10
|
-
* --cli-
|
|
11
|
-
* --cli-
|
|
3
|
+
* Colors, font and corners come from these custom properties; the fallbacks
|
|
4
|
+
* below are the dark palette. The panel's `theme` option sets them inline on the
|
|
5
|
+
* panel, its hide tab, dropdowns and context menu (see CliPanelConfig.theme).
|
|
6
|
+
* Without that option a stylesheet can set them on `.cli-panel-wrapper,
|
|
7
|
+
* .cli-panel-hide-tab, .cli-panel-context-menu, .cli-panel-services-dropdown`:
|
|
8
|
+
* --cli-panel-bg panel background behind the terminals
|
|
9
|
+
* --cli-panel-header-bg header, tab bar and menus
|
|
10
|
+
* --cli-panel-border borders and separators
|
|
11
|
+
* --cli-panel-text text
|
|
12
|
+
* --cli-panel-text-secondary labels, inactive tabs, icons
|
|
13
|
+
* --cli-panel-accent active tab, focus rings, highlights
|
|
14
|
+
* --cli-btn-hover-bg buttons and menu items under the pointer
|
|
15
|
+
* --cli-btn-active-bg pressed buttons, selected items
|
|
16
|
+
* --cli-panel-danger destructive items and errors
|
|
17
|
+
* --cli-panel-shadow shadow color of the panel, menus and hide tab
|
|
18
|
+
* --cli-panel-font font of the chrome (not the terminal)
|
|
19
|
+
* --cli-panel-radius corner radius of buttons, tabs and menus (6px)
|
|
12
20
|
*/
|
|
13
21
|
|
|
14
22
|
/* ─── Wrapper ────────────────────────────────────────────── */
|
|
15
23
|
|
|
24
|
+
/* Docking above a host's own bottom bar: set --cli-panel-bottom-offset (e.g. the
|
|
25
|
+
* bar's height) on any ancestor instead of overriding `bottom`. The panel then
|
|
26
|
+
* sits on the bar, or on the on-screen keyboard while it is open (the panel sets
|
|
27
|
+
* --cli-panel-keyboard-inset and --cli-panel-visible-height from the visual
|
|
28
|
+
* viewport), and is never taller than the space above it. */
|
|
16
29
|
.cli-panel-wrapper {
|
|
30
|
+
--cli-panel-bottom: max(
|
|
31
|
+
var(--cli-panel-bottom-offset, 0px),
|
|
32
|
+
var(--cli-panel-keyboard-inset, 0px)
|
|
33
|
+
);
|
|
17
34
|
position: fixed;
|
|
18
|
-
bottom:
|
|
35
|
+
bottom: var(--cli-panel-bottom);
|
|
36
|
+
/* below the status bar of apps that draw under it (safe-area-inset-top) */
|
|
37
|
+
max-height: calc(
|
|
38
|
+
var(--cli-panel-visible-height, 100vh) +
|
|
39
|
+
var(--cli-panel-keyboard-inset, 0px) - var(--cli-panel-bottom) -
|
|
40
|
+
env(safe-area-inset-top, 0px)
|
|
41
|
+
);
|
|
19
42
|
left: 0;
|
|
20
43
|
right: 0;
|
|
21
44
|
width: 100vw;
|
|
22
45
|
transform: translateY(0);
|
|
23
46
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
24
|
-
background-color: var(--cli-panel-bg, #
|
|
25
|
-
color: var(--cli-panel-text,
|
|
26
|
-
border-top: 1px solid var(--cli-panel-border, #
|
|
47
|
+
background-color: var(--cli-panel-bg, #070b14);
|
|
48
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
49
|
+
border-top: 1px solid var(--cli-panel-border, #1e293b);
|
|
27
50
|
display: flex;
|
|
28
51
|
flex-direction: column;
|
|
29
52
|
z-index: 1000;
|
|
30
|
-
font-family:
|
|
31
|
-
-
|
|
32
|
-
|
|
33
|
-
|
|
53
|
+
font-family: var(
|
|
54
|
+
--cli-panel-font,
|
|
55
|
+
-apple-system,
|
|
56
|
+
BlinkMacSystemFont,
|
|
57
|
+
"Segoe UI",
|
|
58
|
+
Roboto,
|
|
59
|
+
Helvetica,
|
|
60
|
+
Arial,
|
|
61
|
+
sans-serif
|
|
62
|
+
);
|
|
63
|
+
box-shadow: 0 -4px 20px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
34
64
|
}
|
|
35
65
|
|
|
36
66
|
.cli-panel-wrapper.collapsed {
|
|
@@ -45,7 +75,7 @@
|
|
|
45
75
|
/* ─── Header ─────────────────────────────────────────────── */
|
|
46
76
|
|
|
47
77
|
.cli-panel-header {
|
|
48
|
-
background-color: var(--cli-panel-header-bg, #
|
|
78
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
49
79
|
display: flex;
|
|
50
80
|
flex-direction: column;
|
|
51
81
|
position: relative;
|
|
@@ -84,19 +114,21 @@
|
|
|
84
114
|
flex-direction: row;
|
|
85
115
|
gap: 1rem;
|
|
86
116
|
align-items: center;
|
|
87
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
117
|
+
border-bottom: 1px solid var(--cli-panel-border, #1e293b);
|
|
88
118
|
padding: 0 1rem;
|
|
89
119
|
}
|
|
90
120
|
|
|
91
121
|
.cli-panel-title {
|
|
92
122
|
font-size: 0.95rem;
|
|
123
|
+
white-space: nowrap;
|
|
124
|
+
min-width: 0;
|
|
93
125
|
display: flex;
|
|
94
126
|
gap: 0.5rem;
|
|
95
127
|
justify-content: center;
|
|
96
128
|
align-items: center;
|
|
97
129
|
margin: 0;
|
|
98
130
|
font-weight: 600;
|
|
99
|
-
color: var(--cli-panel-text,
|
|
131
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
100
132
|
}
|
|
101
133
|
|
|
102
134
|
.cli-panel-title-icon {
|
|
@@ -124,7 +156,7 @@
|
|
|
124
156
|
appearance: none;
|
|
125
157
|
background: transparent;
|
|
126
158
|
border: none;
|
|
127
|
-
color: var(--cli-panel-text-secondary,
|
|
159
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
128
160
|
cursor: pointer;
|
|
129
161
|
width: 40px;
|
|
130
162
|
height: 40px;
|
|
@@ -143,7 +175,7 @@
|
|
|
143
175
|
}
|
|
144
176
|
|
|
145
177
|
.cli-panel-btn:hover:not(:disabled) {
|
|
146
|
-
color: var(--cli-panel-text,
|
|
178
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
147
179
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
148
180
|
}
|
|
149
181
|
|
|
@@ -169,13 +201,13 @@
|
|
|
169
201
|
/* ─── Tabs ───────────────────────────────────────────────── */
|
|
170
202
|
|
|
171
203
|
.cli-panel-tabs {
|
|
172
|
-
background-color: var(--cli-panel-header-bg, #
|
|
204
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
173
205
|
display: flex;
|
|
174
206
|
align-items: center;
|
|
175
207
|
height: 38px;
|
|
176
208
|
padding: 0 8px;
|
|
177
209
|
gap: 4px;
|
|
178
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
210
|
+
border-bottom: 1px solid var(--cli-panel-border, #1e293b);
|
|
179
211
|
overflow-x: auto;
|
|
180
212
|
overflow-y: hidden;
|
|
181
213
|
flex-shrink: 0;
|
|
@@ -210,7 +242,7 @@
|
|
|
210
242
|
background: transparent;
|
|
211
243
|
border: none;
|
|
212
244
|
border-top: 2px solid transparent;
|
|
213
|
-
color: var(--cli-panel-text-secondary,
|
|
245
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
214
246
|
font-size: 0.8rem;
|
|
215
247
|
font-family: inherit;
|
|
216
248
|
white-space: nowrap;
|
|
@@ -223,12 +255,12 @@
|
|
|
223
255
|
|
|
224
256
|
.cli-panel-tab:hover:not(.active) {
|
|
225
257
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
226
|
-
color: var(--cli-panel-text,
|
|
258
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
227
259
|
}
|
|
228
260
|
|
|
229
261
|
.cli-panel-tab.active {
|
|
230
|
-
background-color: var(--cli-panel-bg, #
|
|
231
|
-
color: var(--cli-panel-text,
|
|
262
|
+
background-color: var(--cli-panel-bg, #070b14);
|
|
263
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
232
264
|
border-top-color: var(--cli-panel-accent, #818cf8);
|
|
233
265
|
}
|
|
234
266
|
|
|
@@ -238,13 +270,13 @@
|
|
|
238
270
|
|
|
239
271
|
.cli-panel-tab-rename-input {
|
|
240
272
|
appearance: none;
|
|
241
|
-
background: var(--cli-panel-bg, #
|
|
273
|
+
background: var(--cli-panel-bg, #070b14);
|
|
242
274
|
border: 1px solid var(--cli-panel-accent, #818cf8);
|
|
243
|
-
color: var(--cli-panel-text,
|
|
275
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
244
276
|
font-size: 0.8rem;
|
|
245
277
|
font-family: inherit;
|
|
246
278
|
padding: 2px 6px;
|
|
247
|
-
border-radius: 3px;
|
|
279
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
248
280
|
outline: none;
|
|
249
281
|
width: 120px;
|
|
250
282
|
height: 22px;
|
|
@@ -259,15 +291,15 @@
|
|
|
259
291
|
font-size: 1rem;
|
|
260
292
|
line-height: 1;
|
|
261
293
|
padding: 0 2px;
|
|
262
|
-
border-radius: 3px;
|
|
294
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
263
295
|
transition:
|
|
264
296
|
background-color 0.15s ease,
|
|
265
297
|
color 0.15s ease;
|
|
266
298
|
}
|
|
267
299
|
|
|
268
300
|
.cli-panel-tab-close-btn:hover {
|
|
269
|
-
color: var(--cli-panel-text,
|
|
270
|
-
background-color: rgba(255, 255, 255, 0.1);
|
|
301
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
302
|
+
background-color: var(--cli-btn-hover-bg, rgba(255, 255, 255, 0.1));
|
|
271
303
|
}
|
|
272
304
|
|
|
273
305
|
.cli-panel-add-tab {
|
|
@@ -280,7 +312,7 @@
|
|
|
280
312
|
line-height: 1;
|
|
281
313
|
width: 28px;
|
|
282
314
|
height: 24px;
|
|
283
|
-
border-radius: 4px;
|
|
315
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
284
316
|
display: flex;
|
|
285
317
|
align-items: center;
|
|
286
318
|
justify-content: center;
|
|
@@ -293,7 +325,7 @@
|
|
|
293
325
|
|
|
294
326
|
.cli-panel-add-tab:hover {
|
|
295
327
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
296
|
-
color: var(--cli-panel-text,
|
|
328
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
297
329
|
border-color: var(--cli-panel-text, rgba(255, 255, 255, 0.5));
|
|
298
330
|
}
|
|
299
331
|
|
|
@@ -302,20 +334,30 @@
|
|
|
302
334
|
.cli-panel-context-menu {
|
|
303
335
|
position: fixed;
|
|
304
336
|
z-index: 1100;
|
|
305
|
-
background-color: var(--cli-panel-header-bg, #
|
|
306
|
-
border: 1px solid var(--cli-panel-border, #
|
|
307
|
-
border-radius: 6px;
|
|
337
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
338
|
+
border: 1px solid var(--cli-panel-border, #1e293b);
|
|
339
|
+
border-radius: var(--cli-panel-radius, 6px);
|
|
308
340
|
padding: 4px 0;
|
|
309
341
|
min-width: 180px;
|
|
310
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
311
|
-
|
|
342
|
+
box-shadow: 0 4px 16px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
343
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
344
|
+
font-family: var(
|
|
345
|
+
--cli-panel-font,
|
|
346
|
+
-apple-system,
|
|
347
|
+
BlinkMacSystemFont,
|
|
348
|
+
"Segoe UI",
|
|
349
|
+
Roboto,
|
|
350
|
+
Helvetica,
|
|
351
|
+
Arial,
|
|
352
|
+
sans-serif
|
|
353
|
+
);
|
|
312
354
|
}
|
|
313
355
|
|
|
314
356
|
.cli-panel-context-menu-item {
|
|
315
357
|
appearance: none;
|
|
316
358
|
background: transparent;
|
|
317
359
|
border: none;
|
|
318
|
-
color: var(--cli-panel-text,
|
|
360
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
319
361
|
cursor: pointer;
|
|
320
362
|
display: block;
|
|
321
363
|
width: 100%;
|
|
@@ -336,15 +378,15 @@
|
|
|
336
378
|
}
|
|
337
379
|
|
|
338
380
|
.cli-panel-context-menu-item.destructive {
|
|
339
|
-
color: #f87171;
|
|
381
|
+
color: var(--cli-panel-danger, #f87171);
|
|
340
382
|
}
|
|
341
383
|
.cli-panel-context-menu-item.destructive:hover:not(:disabled) {
|
|
342
|
-
background-color:
|
|
384
|
+
background-color: color-mix(in srgb, var(--cli-panel-danger, #f87171) 12%, transparent);
|
|
343
385
|
}
|
|
344
386
|
|
|
345
387
|
.cli-panel-context-menu-separator {
|
|
346
388
|
height: 1px;
|
|
347
|
-
background-color: var(--cli-panel-border, #
|
|
389
|
+
background-color: var(--cli-panel-border, #1e293b);
|
|
348
390
|
margin: 4px 0;
|
|
349
391
|
}
|
|
350
392
|
|
|
@@ -392,15 +434,15 @@
|
|
|
392
434
|
top: 4px;
|
|
393
435
|
right: 4px;
|
|
394
436
|
z-index: 10;
|
|
395
|
-
background: var(--cli-panel-header-bg, #
|
|
396
|
-
border: 1px solid var(--cli-panel-border, #
|
|
397
|
-
color: var(--cli-panel-text-secondary,
|
|
437
|
+
background: var(--cli-panel-header-bg, #0f1623);
|
|
438
|
+
border: 1px solid var(--cli-panel-border, #1e293b);
|
|
439
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
398
440
|
cursor: pointer;
|
|
399
441
|
font-size: 0.9rem;
|
|
400
442
|
line-height: 1;
|
|
401
443
|
width: 22px;
|
|
402
444
|
height: 22px;
|
|
403
|
-
border-radius: 3px;
|
|
445
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
404
446
|
display: flex;
|
|
405
447
|
align-items: center;
|
|
406
448
|
justify-content: center;
|
|
@@ -412,8 +454,8 @@
|
|
|
412
454
|
}
|
|
413
455
|
|
|
414
456
|
.cli-panel-pane-close-btn:hover {
|
|
415
|
-
color: var(--cli-panel-text,
|
|
416
|
-
background-color: rgba(255, 255, 255, 0.1);
|
|
457
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
458
|
+
background-color: var(--cli-btn-hover-bg, rgba(255, 255, 255, 0.1));
|
|
417
459
|
}
|
|
418
460
|
|
|
419
461
|
/* ─── Pane divider ───────────────────────────────────────── */
|
|
@@ -442,7 +484,7 @@
|
|
|
442
484
|
}
|
|
443
485
|
|
|
444
486
|
.cli-panel-pane-divider:hover .cli-panel-pane-divider-grip {
|
|
445
|
-
background-color: var(--cli-panel-text,
|
|
487
|
+
background-color: var(--cli-panel-text, #e2e8f0);
|
|
446
488
|
}
|
|
447
489
|
|
|
448
490
|
/* ─── Position: top ─────────────────────────────────────── */
|
|
@@ -450,10 +492,13 @@
|
|
|
450
492
|
/* Header at BOTTOM (column-reverse) so it stays visible when collapsed upward */
|
|
451
493
|
.cli-panel-wrapper[data-position="top"] {
|
|
452
494
|
bottom: auto;
|
|
453
|
-
top:
|
|
495
|
+
top: env(safe-area-inset-top, 0px);
|
|
496
|
+
max-height: calc(
|
|
497
|
+
var(--cli-panel-visible-height, 100vh) - env(safe-area-inset-top, 0px)
|
|
498
|
+
);
|
|
454
499
|
border-top: none;
|
|
455
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
456
|
-
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.
|
|
500
|
+
border-bottom: 1px solid var(--cli-panel-border, #1e293b);
|
|
501
|
+
box-shadow: 0 4px 20px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
457
502
|
flex-direction: column-reverse;
|
|
458
503
|
}
|
|
459
504
|
|
|
@@ -463,7 +508,7 @@
|
|
|
463
508
|
|
|
464
509
|
.cli-panel-wrapper[data-position="top"] .cli-panel-header-content {
|
|
465
510
|
border-bottom: none;
|
|
466
|
-
border-top: 1px solid var(--cli-panel-border, #
|
|
511
|
+
border-top: 1px solid var(--cli-panel-border, #1e293b);
|
|
467
512
|
}
|
|
468
513
|
|
|
469
514
|
.cli-panel-wrapper[data-position="top"] .cli-panel-resize-bar {
|
|
@@ -476,15 +521,15 @@
|
|
|
476
521
|
|
|
477
522
|
/* Header at RIGHT (row-reverse) so it stays visible when collapsed leftward */
|
|
478
523
|
.cli-panel-wrapper[data-position="left"] {
|
|
479
|
-
|
|
480
|
-
top: 0;
|
|
524
|
+
top: env(safe-area-inset-top, 0px);
|
|
481
525
|
left: 0;
|
|
482
526
|
right: auto;
|
|
483
527
|
width: auto;
|
|
484
|
-
height:
|
|
528
|
+
height: auto !important;
|
|
529
|
+
max-height: none;
|
|
485
530
|
border-top: none;
|
|
486
|
-
border-right: 1px solid var(--cli-panel-border, #
|
|
487
|
-
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.
|
|
531
|
+
border-right: 1px solid var(--cli-panel-border, #1e293b);
|
|
532
|
+
box-shadow: 4px 0 20px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
488
533
|
flex-direction: row-reverse;
|
|
489
534
|
}
|
|
490
535
|
|
|
@@ -504,7 +549,7 @@
|
|
|
504
549
|
flex-direction: column;
|
|
505
550
|
padding: 1rem 0;
|
|
506
551
|
border-bottom: none;
|
|
507
|
-
border-left: 1px solid var(--cli-panel-border, #
|
|
552
|
+
border-left: 1px solid var(--cli-panel-border, #1e293b);
|
|
508
553
|
}
|
|
509
554
|
|
|
510
555
|
.cli-panel-wrapper[data-position="left"] .cli-panel-title {
|
|
@@ -543,15 +588,15 @@
|
|
|
543
588
|
|
|
544
589
|
/* Header at LEFT (row) so it stays visible when collapsed rightward */
|
|
545
590
|
.cli-panel-wrapper[data-position="right"] {
|
|
546
|
-
|
|
547
|
-
top: 0;
|
|
591
|
+
top: env(safe-area-inset-top, 0px);
|
|
548
592
|
left: auto;
|
|
549
593
|
right: 0;
|
|
550
594
|
width: auto;
|
|
551
|
-
height:
|
|
595
|
+
height: auto !important;
|
|
596
|
+
max-height: none;
|
|
552
597
|
border-top: none;
|
|
553
|
-
border-left: 1px solid var(--cli-panel-border, #
|
|
554
|
-
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.
|
|
598
|
+
border-left: 1px solid var(--cli-panel-border, #1e293b);
|
|
599
|
+
box-shadow: -4px 0 20px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
555
600
|
flex-direction: row;
|
|
556
601
|
}
|
|
557
602
|
|
|
@@ -571,7 +616,7 @@
|
|
|
571
616
|
flex-direction: column;
|
|
572
617
|
padding: 1rem 0;
|
|
573
618
|
border-bottom: none;
|
|
574
|
-
border-right: 1px solid var(--cli-panel-border, #
|
|
619
|
+
border-right: 1px solid var(--cli-panel-border, #1e293b);
|
|
575
620
|
}
|
|
576
621
|
|
|
577
622
|
.cli-panel-wrapper[data-position="right"] .cli-panel-title {
|
|
@@ -624,9 +669,9 @@
|
|
|
624
669
|
display: flex;
|
|
625
670
|
align-items: center;
|
|
626
671
|
gap: 6px;
|
|
627
|
-
background-color: var(--cli-panel-header-bg, #
|
|
628
|
-
border: 1px solid var(--cli-panel-border, #
|
|
629
|
-
color: var(--cli-panel-text-secondary,
|
|
672
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
673
|
+
border: 1px solid var(--cli-panel-border, #1e293b);
|
|
674
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
630
675
|
cursor: pointer;
|
|
631
676
|
padding: 6px 12px;
|
|
632
677
|
appearance: none;
|
|
@@ -634,16 +679,16 @@
|
|
|
634
679
|
font-size: 0.8rem;
|
|
635
680
|
font-weight: 600;
|
|
636
681
|
transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
|
637
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.
|
|
682
|
+
box-shadow: 0 2px 8px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
638
683
|
opacity: 0.85;
|
|
639
684
|
}
|
|
640
685
|
|
|
641
686
|
.cli-panel-hide-tab:hover {
|
|
642
687
|
transform: scale(1.05);
|
|
643
688
|
opacity: 1;
|
|
644
|
-
color: var(--cli-panel-text,
|
|
645
|
-
background-color: var(--cli-panel-bg, #
|
|
646
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
689
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
690
|
+
background-color: var(--cli-panel-bg, #070b14);
|
|
691
|
+
box-shadow: 0 4px 16px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
647
692
|
}
|
|
648
693
|
|
|
649
694
|
.cli-panel-hide-tab:active {
|
|
@@ -668,6 +713,48 @@
|
|
|
668
713
|
|
|
669
714
|
/* Phones: icon only, so the tab covers as little of the page as possible */
|
|
670
715
|
@media (max-width: 600px) {
|
|
716
|
+
/* The header keeps the title on one line; moving the panel to another
|
|
717
|
+
edge makes no sense on a phone */
|
|
718
|
+
.cli-panel-header-content {
|
|
719
|
+
gap: 0.5rem;
|
|
720
|
+
padding: 0 0.5rem 0 0.75rem;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.cli-panel-title {
|
|
724
|
+
overflow: hidden;
|
|
725
|
+
text-overflow: ellipsis;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
.cli-panel-action-buttons {
|
|
729
|
+
gap: 0.15rem;
|
|
730
|
+
flex-shrink: 0;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.cli-panel-action-buttons .cli-panel-btn {
|
|
734
|
+
width: 34px;
|
|
735
|
+
height: 34px;
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
.cli-panel-btn-position-wrapper {
|
|
739
|
+
display: none;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
/* Only the run state fits next to the title; the rest would squeeze it */
|
|
743
|
+
.cli-panel-status-indicators {
|
|
744
|
+
/* gives way before the title does */
|
|
745
|
+
flex-shrink: 100;
|
|
746
|
+
min-width: 0;
|
|
747
|
+
overflow: hidden;
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
.cli-panel-status-indicators > .cli-panel-status-item:not(:first-child) {
|
|
751
|
+
display: none;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.cli-panel-title-icon {
|
|
755
|
+
flex-shrink: 0;
|
|
756
|
+
}
|
|
757
|
+
|
|
671
758
|
.cli-panel-hide-tab {
|
|
672
759
|
padding: 6px 8px;
|
|
673
760
|
}
|
|
@@ -701,7 +788,7 @@
|
|
|
701
788
|
/* ─── Hide tab: bottom position ─────────────────────────── */
|
|
702
789
|
|
|
703
790
|
.cli-panel-hide-tab[data-position="bottom"] {
|
|
704
|
-
bottom:
|
|
791
|
+
bottom: var(--cli-panel-bottom-offset, 0px);
|
|
705
792
|
border-bottom: none;
|
|
706
793
|
border-radius: 8px 8px 0 0;
|
|
707
794
|
}
|
|
@@ -768,10 +855,10 @@
|
|
|
768
855
|
top: auto;
|
|
769
856
|
right: 0;
|
|
770
857
|
left: auto;
|
|
771
|
-
background-color: var(--cli-panel-header-bg, #
|
|
772
|
-
border: 1px solid var(--cli-panel-border, #
|
|
773
|
-
border-radius: 6px;
|
|
774
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
858
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
859
|
+
border: 1px solid var(--cli-panel-border, #1e293b);
|
|
860
|
+
border-radius: var(--cli-panel-radius, 6px);
|
|
861
|
+
box-shadow: 0 8px 24px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
775
862
|
z-index: 1100;
|
|
776
863
|
min-width: 120px;
|
|
777
864
|
overflow: hidden;
|
|
@@ -783,7 +870,7 @@
|
|
|
783
870
|
appearance: none;
|
|
784
871
|
background: transparent;
|
|
785
872
|
border: none;
|
|
786
|
-
color: var(--cli-panel-text-secondary,
|
|
873
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
787
874
|
cursor: pointer;
|
|
788
875
|
display: flex;
|
|
789
876
|
align-items: center;
|
|
@@ -798,7 +885,7 @@
|
|
|
798
885
|
|
|
799
886
|
.cli-panel-position-dropdown-item:hover {
|
|
800
887
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
801
|
-
color: var(--cli-panel-text,
|
|
888
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
802
889
|
}
|
|
803
890
|
|
|
804
891
|
.cli-panel-position-dropdown-item.active {
|
|
@@ -847,7 +934,7 @@
|
|
|
847
934
|
display: flex;
|
|
848
935
|
align-items: center;
|
|
849
936
|
gap: 5px;
|
|
850
|
-
color: var(--cli-panel-text-secondary,
|
|
937
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
851
938
|
}
|
|
852
939
|
|
|
853
940
|
.cli-panel-status-dot {
|
|
@@ -918,7 +1005,7 @@
|
|
|
918
1005
|
|
|
919
1006
|
.cli-panel-status-item.status-clickable {
|
|
920
1007
|
cursor: pointer;
|
|
921
|
-
border-radius: 4px;
|
|
1008
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
922
1009
|
padding: 2px 6px;
|
|
923
1010
|
margin: -2px -6px;
|
|
924
1011
|
transition: background-color 0.15s ease;
|
|
@@ -950,13 +1037,13 @@
|
|
|
950
1037
|
width: 20px;
|
|
951
1038
|
height: 20px;
|
|
952
1039
|
cursor: default;
|
|
953
|
-
color: var(--cli-panel-text-secondary,
|
|
1040
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
954
1041
|
font-size: 12px;
|
|
955
1042
|
}
|
|
956
1043
|
|
|
957
1044
|
.cli-panel-status-compact-item.status-clickable {
|
|
958
1045
|
cursor: pointer;
|
|
959
|
-
border-radius: 4px;
|
|
1046
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
960
1047
|
}
|
|
961
1048
|
|
|
962
1049
|
.cli-panel-status-compact-item.status-clickable:hover {
|
|
@@ -1013,15 +1100,25 @@
|
|
|
1013
1100
|
|
|
1014
1101
|
.cli-panel-services-dropdown {
|
|
1015
1102
|
position: fixed;
|
|
1016
|
-
background-color: var(--cli-panel-header-bg, #
|
|
1017
|
-
border: 1px solid var(--cli-panel-border, #
|
|
1018
|
-
border-radius:
|
|
1019
|
-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
1103
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
1104
|
+
border: 1px solid var(--cli-panel-border, #1e293b);
|
|
1105
|
+
border-radius: calc(var(--cli-panel-radius, 6px) + 2px);
|
|
1106
|
+
box-shadow: 0 8px 24px var(--cli-panel-shadow, rgba(0, 0, 0, 0.4));
|
|
1020
1107
|
z-index: 1100;
|
|
1021
1108
|
min-width: 260px;
|
|
1022
1109
|
max-width: 380px;
|
|
1023
1110
|
overflow: hidden;
|
|
1024
|
-
|
|
1111
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
1112
|
+
font-family: var(
|
|
1113
|
+
--cli-panel-font,
|
|
1114
|
+
-apple-system,
|
|
1115
|
+
BlinkMacSystemFont,
|
|
1116
|
+
"Segoe UI",
|
|
1117
|
+
Roboto,
|
|
1118
|
+
Helvetica,
|
|
1119
|
+
Arial,
|
|
1120
|
+
sans-serif
|
|
1121
|
+
);
|
|
1025
1122
|
}
|
|
1026
1123
|
|
|
1027
1124
|
.cli-panel-services-dropdown-header {
|
|
@@ -1031,7 +1128,7 @@
|
|
|
1031
1128
|
text-transform: uppercase;
|
|
1032
1129
|
letter-spacing: 0.05em;
|
|
1033
1130
|
color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
|
|
1034
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
1131
|
+
border-bottom: 1px solid var(--cli-panel-border, #1e293b);
|
|
1035
1132
|
}
|
|
1036
1133
|
|
|
1037
1134
|
.cli-panel-services-dropdown-list {
|
|
@@ -1051,7 +1148,7 @@
|
|
|
1051
1148
|
|
|
1052
1149
|
.cli-panel-services-dropdown-list::-webkit-scrollbar-thumb {
|
|
1053
1150
|
background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.2));
|
|
1054
|
-
border-radius: 3px;
|
|
1151
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
1055
1152
|
}
|
|
1056
1153
|
|
|
1057
1154
|
.cli-panel-services-dropdown-list::-webkit-scrollbar-thumb:hover {
|
|
@@ -1063,7 +1160,7 @@
|
|
|
1063
1160
|
align-items: flex-start;
|
|
1064
1161
|
gap: 10px;
|
|
1065
1162
|
padding: 10px 14px;
|
|
1066
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
|
1163
|
+
border-bottom: 1px solid var(--cli-panel-border, rgba(255, 255, 255, 0.04));
|
|
1067
1164
|
transition: background-color 0.15s ease;
|
|
1068
1165
|
}
|
|
1069
1166
|
|
|
@@ -1102,7 +1199,7 @@
|
|
|
1102
1199
|
.cli-panel-svc-name {
|
|
1103
1200
|
font-size: 13px;
|
|
1104
1201
|
font-weight: 500;
|
|
1105
|
-
color: var(--cli-panel-text,
|
|
1202
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
1106
1203
|
overflow: hidden;
|
|
1107
1204
|
text-overflow: ellipsis;
|
|
1108
1205
|
white-space: nowrap;
|
|
@@ -1146,7 +1243,7 @@
|
|
|
1146
1243
|
left: 0;
|
|
1147
1244
|
right: 0;
|
|
1148
1245
|
height: 2px;
|
|
1149
|
-
background: linear-gradient(90deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #
|
|
1246
|
+
background: linear-gradient(90deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), color-mix(in srgb, var(--cli-panel-accent, #818cf8) 60%, #c4b5fd), var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
|
|
1150
1247
|
background-size: 200% 100%;
|
|
1151
1248
|
opacity: 0.4;
|
|
1152
1249
|
animation: cliGlowShift 8s ease-in-out infinite;
|
|
@@ -1167,7 +1264,7 @@
|
|
|
1167
1264
|
right: 0;
|
|
1168
1265
|
width: 2px;
|
|
1169
1266
|
height: 100%;
|
|
1170
|
-
background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #
|
|
1267
|
+
background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), color-mix(in srgb, var(--cli-panel-accent, #818cf8) 60%, #c4b5fd), var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
|
|
1171
1268
|
background-size: 100% 200%;
|
|
1172
1269
|
}
|
|
1173
1270
|
|
|
@@ -1178,7 +1275,7 @@
|
|
|
1178
1275
|
right: auto;
|
|
1179
1276
|
width: 2px;
|
|
1180
1277
|
height: 100%;
|
|
1181
|
-
background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), #
|
|
1278
|
+
background: linear-gradient(180deg, transparent, var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), color-mix(in srgb, var(--cli-panel-accent, #818cf8) 60%, #c4b5fd), var(--cli-status-glow, var(--cli-panel-accent, #818cf8)), transparent);
|
|
1182
1279
|
background-size: 100% 200%;
|
|
1183
1280
|
}
|
|
1184
1281
|
|
|
@@ -1215,12 +1312,12 @@
|
|
|
1215
1312
|
}
|
|
1216
1313
|
|
|
1217
1314
|
.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb {
|
|
1218
|
-
background: #444;
|
|
1219
|
-
border-radius: 4px;
|
|
1315
|
+
background: var(--cli-panel-border, #444);
|
|
1316
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
1220
1317
|
}
|
|
1221
1318
|
|
|
1222
1319
|
.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
|
|
1223
|
-
background: #666;
|
|
1320
|
+
background: var(--cli-panel-text-secondary, #666);
|
|
1224
1321
|
}
|
|
1225
1322
|
|
|
1226
1323
|
/* ─── Global helper ──────────────────────────────────────── */
|
|
@@ -1229,3 +1326,51 @@ body.cli-pane-resizing {
|
|
|
1229
1326
|
user-select: none;
|
|
1230
1327
|
cursor: ew-resize;
|
|
1231
1328
|
}
|
|
1329
|
+
|
|
1330
|
+
/* ─── Touch ──────────────────────────────────────────────── */
|
|
1331
|
+
|
|
1332
|
+
/* Drags on the handles resize the panel instead of scrolling the page */
|
|
1333
|
+
.cli-panel-resize-bar,
|
|
1334
|
+
.cli-panel-pane-divider {
|
|
1335
|
+
touch-action: none;
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
/* Fingers need bigger handles, and a grip that shows without hovering */
|
|
1339
|
+
@media (pointer: coarse) {
|
|
1340
|
+
.cli-panel-resize-bar {
|
|
1341
|
+
top: -14px;
|
|
1342
|
+
height: 28px;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.cli-panel-wrapper[data-position="top"] .cli-panel-resize-bar {
|
|
1346
|
+
top: auto;
|
|
1347
|
+
bottom: -14px;
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
.cli-panel-wrapper[data-position="left"] .cli-panel-resize-bar {
|
|
1351
|
+
right: -14px;
|
|
1352
|
+
width: 28px;
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
.cli-panel-wrapper[data-position="right"] .cli-panel-resize-bar {
|
|
1356
|
+
left: -14px;
|
|
1357
|
+
width: 28px;
|
|
1358
|
+
}
|
|
1359
|
+
|
|
1360
|
+
.cli-panel-wrapper:not(.collapsed) .cli-panel-resize-grip {
|
|
1361
|
+
opacity: 0.5;
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
.cli-panel-wrapper:is([data-position="bottom"], [data-position="top"]) .cli-panel-resize-grip {
|
|
1365
|
+
width: 40px;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.cli-panel-wrapper.resizing .cli-panel-resize-grip {
|
|
1369
|
+
opacity: 1;
|
|
1370
|
+
background: var(--cli-panel-accent, #818cf8);
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
.cli-panel-pane-divider {
|
|
1374
|
+
width: 14px;
|
|
1375
|
+
}
|
|
1376
|
+
}
|