@qodalis/cli 2.1.1 → 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 +219 -102
- package/package.json +2 -2
- package/public-api.d.mts +44 -5
- package/public-api.d.ts +44 -5
- package/public-api.js +122 -17
- package/public-api.js.map +1 -1
- package/public-api.mjs +123 -18
- 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,7 +114,7 @@
|
|
|
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
|
|
|
@@ -98,7 +128,7 @@
|
|
|
98
128
|
align-items: center;
|
|
99
129
|
margin: 0;
|
|
100
130
|
font-weight: 600;
|
|
101
|
-
color: var(--cli-panel-text,
|
|
131
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
102
132
|
}
|
|
103
133
|
|
|
104
134
|
.cli-panel-title-icon {
|
|
@@ -126,7 +156,7 @@
|
|
|
126
156
|
appearance: none;
|
|
127
157
|
background: transparent;
|
|
128
158
|
border: none;
|
|
129
|
-
color: var(--cli-panel-text-secondary,
|
|
159
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
130
160
|
cursor: pointer;
|
|
131
161
|
width: 40px;
|
|
132
162
|
height: 40px;
|
|
@@ -145,7 +175,7 @@
|
|
|
145
175
|
}
|
|
146
176
|
|
|
147
177
|
.cli-panel-btn:hover:not(:disabled) {
|
|
148
|
-
color: var(--cli-panel-text,
|
|
178
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
149
179
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
150
180
|
}
|
|
151
181
|
|
|
@@ -171,13 +201,13 @@
|
|
|
171
201
|
/* ─── Tabs ───────────────────────────────────────────────── */
|
|
172
202
|
|
|
173
203
|
.cli-panel-tabs {
|
|
174
|
-
background-color: var(--cli-panel-header-bg, #
|
|
204
|
+
background-color: var(--cli-panel-header-bg, #0f1623);
|
|
175
205
|
display: flex;
|
|
176
206
|
align-items: center;
|
|
177
207
|
height: 38px;
|
|
178
208
|
padding: 0 8px;
|
|
179
209
|
gap: 4px;
|
|
180
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
210
|
+
border-bottom: 1px solid var(--cli-panel-border, #1e293b);
|
|
181
211
|
overflow-x: auto;
|
|
182
212
|
overflow-y: hidden;
|
|
183
213
|
flex-shrink: 0;
|
|
@@ -212,7 +242,7 @@
|
|
|
212
242
|
background: transparent;
|
|
213
243
|
border: none;
|
|
214
244
|
border-top: 2px solid transparent;
|
|
215
|
-
color: var(--cli-panel-text-secondary,
|
|
245
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
216
246
|
font-size: 0.8rem;
|
|
217
247
|
font-family: inherit;
|
|
218
248
|
white-space: nowrap;
|
|
@@ -225,12 +255,12 @@
|
|
|
225
255
|
|
|
226
256
|
.cli-panel-tab:hover:not(.active) {
|
|
227
257
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
228
|
-
color: var(--cli-panel-text,
|
|
258
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
229
259
|
}
|
|
230
260
|
|
|
231
261
|
.cli-panel-tab.active {
|
|
232
|
-
background-color: var(--cli-panel-bg, #
|
|
233
|
-
color: var(--cli-panel-text,
|
|
262
|
+
background-color: var(--cli-panel-bg, #070b14);
|
|
263
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
234
264
|
border-top-color: var(--cli-panel-accent, #818cf8);
|
|
235
265
|
}
|
|
236
266
|
|
|
@@ -240,13 +270,13 @@
|
|
|
240
270
|
|
|
241
271
|
.cli-panel-tab-rename-input {
|
|
242
272
|
appearance: none;
|
|
243
|
-
background: var(--cli-panel-bg, #
|
|
273
|
+
background: var(--cli-panel-bg, #070b14);
|
|
244
274
|
border: 1px solid var(--cli-panel-accent, #818cf8);
|
|
245
|
-
color: var(--cli-panel-text,
|
|
275
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
246
276
|
font-size: 0.8rem;
|
|
247
277
|
font-family: inherit;
|
|
248
278
|
padding: 2px 6px;
|
|
249
|
-
border-radius: 3px;
|
|
279
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
250
280
|
outline: none;
|
|
251
281
|
width: 120px;
|
|
252
282
|
height: 22px;
|
|
@@ -261,15 +291,15 @@
|
|
|
261
291
|
font-size: 1rem;
|
|
262
292
|
line-height: 1;
|
|
263
293
|
padding: 0 2px;
|
|
264
|
-
border-radius: 3px;
|
|
294
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
265
295
|
transition:
|
|
266
296
|
background-color 0.15s ease,
|
|
267
297
|
color 0.15s ease;
|
|
268
298
|
}
|
|
269
299
|
|
|
270
300
|
.cli-panel-tab-close-btn:hover {
|
|
271
|
-
color: var(--cli-panel-text,
|
|
272
|
-
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));
|
|
273
303
|
}
|
|
274
304
|
|
|
275
305
|
.cli-panel-add-tab {
|
|
@@ -282,7 +312,7 @@
|
|
|
282
312
|
line-height: 1;
|
|
283
313
|
width: 28px;
|
|
284
314
|
height: 24px;
|
|
285
|
-
border-radius: 4px;
|
|
315
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
286
316
|
display: flex;
|
|
287
317
|
align-items: center;
|
|
288
318
|
justify-content: center;
|
|
@@ -295,7 +325,7 @@
|
|
|
295
325
|
|
|
296
326
|
.cli-panel-add-tab:hover {
|
|
297
327
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
298
|
-
color: var(--cli-panel-text,
|
|
328
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
299
329
|
border-color: var(--cli-panel-text, rgba(255, 255, 255, 0.5));
|
|
300
330
|
}
|
|
301
331
|
|
|
@@ -304,20 +334,30 @@
|
|
|
304
334
|
.cli-panel-context-menu {
|
|
305
335
|
position: fixed;
|
|
306
336
|
z-index: 1100;
|
|
307
|
-
background-color: var(--cli-panel-header-bg, #
|
|
308
|
-
border: 1px solid var(--cli-panel-border, #
|
|
309
|
-
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);
|
|
310
340
|
padding: 4px 0;
|
|
311
341
|
min-width: 180px;
|
|
312
|
-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
313
|
-
|
|
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
|
+
);
|
|
314
354
|
}
|
|
315
355
|
|
|
316
356
|
.cli-panel-context-menu-item {
|
|
317
357
|
appearance: none;
|
|
318
358
|
background: transparent;
|
|
319
359
|
border: none;
|
|
320
|
-
color: var(--cli-panel-text,
|
|
360
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
321
361
|
cursor: pointer;
|
|
322
362
|
display: block;
|
|
323
363
|
width: 100%;
|
|
@@ -338,15 +378,15 @@
|
|
|
338
378
|
}
|
|
339
379
|
|
|
340
380
|
.cli-panel-context-menu-item.destructive {
|
|
341
|
-
color: #f87171;
|
|
381
|
+
color: var(--cli-panel-danger, #f87171);
|
|
342
382
|
}
|
|
343
383
|
.cli-panel-context-menu-item.destructive:hover:not(:disabled) {
|
|
344
|
-
background-color:
|
|
384
|
+
background-color: color-mix(in srgb, var(--cli-panel-danger, #f87171) 12%, transparent);
|
|
345
385
|
}
|
|
346
386
|
|
|
347
387
|
.cli-panel-context-menu-separator {
|
|
348
388
|
height: 1px;
|
|
349
|
-
background-color: var(--cli-panel-border, #
|
|
389
|
+
background-color: var(--cli-panel-border, #1e293b);
|
|
350
390
|
margin: 4px 0;
|
|
351
391
|
}
|
|
352
392
|
|
|
@@ -394,15 +434,15 @@
|
|
|
394
434
|
top: 4px;
|
|
395
435
|
right: 4px;
|
|
396
436
|
z-index: 10;
|
|
397
|
-
background: var(--cli-panel-header-bg, #
|
|
398
|
-
border: 1px solid var(--cli-panel-border, #
|
|
399
|
-
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);
|
|
400
440
|
cursor: pointer;
|
|
401
441
|
font-size: 0.9rem;
|
|
402
442
|
line-height: 1;
|
|
403
443
|
width: 22px;
|
|
404
444
|
height: 22px;
|
|
405
|
-
border-radius: 3px;
|
|
445
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
406
446
|
display: flex;
|
|
407
447
|
align-items: center;
|
|
408
448
|
justify-content: center;
|
|
@@ -414,8 +454,8 @@
|
|
|
414
454
|
}
|
|
415
455
|
|
|
416
456
|
.cli-panel-pane-close-btn:hover {
|
|
417
|
-
color: var(--cli-panel-text,
|
|
418
|
-
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));
|
|
419
459
|
}
|
|
420
460
|
|
|
421
461
|
/* ─── Pane divider ───────────────────────────────────────── */
|
|
@@ -444,7 +484,7 @@
|
|
|
444
484
|
}
|
|
445
485
|
|
|
446
486
|
.cli-panel-pane-divider:hover .cli-panel-pane-divider-grip {
|
|
447
|
-
background-color: var(--cli-panel-text,
|
|
487
|
+
background-color: var(--cli-panel-text, #e2e8f0);
|
|
448
488
|
}
|
|
449
489
|
|
|
450
490
|
/* ─── Position: top ─────────────────────────────────────── */
|
|
@@ -452,10 +492,13 @@
|
|
|
452
492
|
/* Header at BOTTOM (column-reverse) so it stays visible when collapsed upward */
|
|
453
493
|
.cli-panel-wrapper[data-position="top"] {
|
|
454
494
|
bottom: auto;
|
|
455
|
-
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
|
+
);
|
|
456
499
|
border-top: none;
|
|
457
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
458
|
-
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));
|
|
459
502
|
flex-direction: column-reverse;
|
|
460
503
|
}
|
|
461
504
|
|
|
@@ -465,7 +508,7 @@
|
|
|
465
508
|
|
|
466
509
|
.cli-panel-wrapper[data-position="top"] .cli-panel-header-content {
|
|
467
510
|
border-bottom: none;
|
|
468
|
-
border-top: 1px solid var(--cli-panel-border, #
|
|
511
|
+
border-top: 1px solid var(--cli-panel-border, #1e293b);
|
|
469
512
|
}
|
|
470
513
|
|
|
471
514
|
.cli-panel-wrapper[data-position="top"] .cli-panel-resize-bar {
|
|
@@ -478,15 +521,15 @@
|
|
|
478
521
|
|
|
479
522
|
/* Header at RIGHT (row-reverse) so it stays visible when collapsed leftward */
|
|
480
523
|
.cli-panel-wrapper[data-position="left"] {
|
|
481
|
-
|
|
482
|
-
top: 0;
|
|
524
|
+
top: env(safe-area-inset-top, 0px);
|
|
483
525
|
left: 0;
|
|
484
526
|
right: auto;
|
|
485
527
|
width: auto;
|
|
486
|
-
height:
|
|
528
|
+
height: auto !important;
|
|
529
|
+
max-height: none;
|
|
487
530
|
border-top: none;
|
|
488
|
-
border-right: 1px solid var(--cli-panel-border, #
|
|
489
|
-
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));
|
|
490
533
|
flex-direction: row-reverse;
|
|
491
534
|
}
|
|
492
535
|
|
|
@@ -506,7 +549,7 @@
|
|
|
506
549
|
flex-direction: column;
|
|
507
550
|
padding: 1rem 0;
|
|
508
551
|
border-bottom: none;
|
|
509
|
-
border-left: 1px solid var(--cli-panel-border, #
|
|
552
|
+
border-left: 1px solid var(--cli-panel-border, #1e293b);
|
|
510
553
|
}
|
|
511
554
|
|
|
512
555
|
.cli-panel-wrapper[data-position="left"] .cli-panel-title {
|
|
@@ -545,15 +588,15 @@
|
|
|
545
588
|
|
|
546
589
|
/* Header at LEFT (row) so it stays visible when collapsed rightward */
|
|
547
590
|
.cli-panel-wrapper[data-position="right"] {
|
|
548
|
-
|
|
549
|
-
top: 0;
|
|
591
|
+
top: env(safe-area-inset-top, 0px);
|
|
550
592
|
left: auto;
|
|
551
593
|
right: 0;
|
|
552
594
|
width: auto;
|
|
553
|
-
height:
|
|
595
|
+
height: auto !important;
|
|
596
|
+
max-height: none;
|
|
554
597
|
border-top: none;
|
|
555
|
-
border-left: 1px solid var(--cli-panel-border, #
|
|
556
|
-
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));
|
|
557
600
|
flex-direction: row;
|
|
558
601
|
}
|
|
559
602
|
|
|
@@ -573,7 +616,7 @@
|
|
|
573
616
|
flex-direction: column;
|
|
574
617
|
padding: 1rem 0;
|
|
575
618
|
border-bottom: none;
|
|
576
|
-
border-right: 1px solid var(--cli-panel-border, #
|
|
619
|
+
border-right: 1px solid var(--cli-panel-border, #1e293b);
|
|
577
620
|
}
|
|
578
621
|
|
|
579
622
|
.cli-panel-wrapper[data-position="right"] .cli-panel-title {
|
|
@@ -626,9 +669,9 @@
|
|
|
626
669
|
display: flex;
|
|
627
670
|
align-items: center;
|
|
628
671
|
gap: 6px;
|
|
629
|
-
background-color: var(--cli-panel-header-bg, #
|
|
630
|
-
border: 1px solid var(--cli-panel-border, #
|
|
631
|
-
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);
|
|
632
675
|
cursor: pointer;
|
|
633
676
|
padding: 6px 12px;
|
|
634
677
|
appearance: none;
|
|
@@ -636,16 +679,16 @@
|
|
|
636
679
|
font-size: 0.8rem;
|
|
637
680
|
font-weight: 600;
|
|
638
681
|
transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
|
639
|
-
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));
|
|
640
683
|
opacity: 0.85;
|
|
641
684
|
}
|
|
642
685
|
|
|
643
686
|
.cli-panel-hide-tab:hover {
|
|
644
687
|
transform: scale(1.05);
|
|
645
688
|
opacity: 1;
|
|
646
|
-
color: var(--cli-panel-text,
|
|
647
|
-
background-color: var(--cli-panel-bg, #
|
|
648
|
-
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));
|
|
649
692
|
}
|
|
650
693
|
|
|
651
694
|
.cli-panel-hide-tab:active {
|
|
@@ -696,6 +739,22 @@
|
|
|
696
739
|
display: none;
|
|
697
740
|
}
|
|
698
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
|
+
|
|
699
758
|
.cli-panel-hide-tab {
|
|
700
759
|
padding: 6px 8px;
|
|
701
760
|
}
|
|
@@ -729,7 +788,7 @@
|
|
|
729
788
|
/* ─── Hide tab: bottom position ─────────────────────────── */
|
|
730
789
|
|
|
731
790
|
.cli-panel-hide-tab[data-position="bottom"] {
|
|
732
|
-
bottom:
|
|
791
|
+
bottom: var(--cli-panel-bottom-offset, 0px);
|
|
733
792
|
border-bottom: none;
|
|
734
793
|
border-radius: 8px 8px 0 0;
|
|
735
794
|
}
|
|
@@ -796,10 +855,10 @@
|
|
|
796
855
|
top: auto;
|
|
797
856
|
right: 0;
|
|
798
857
|
left: auto;
|
|
799
|
-
background-color: var(--cli-panel-header-bg, #
|
|
800
|
-
border: 1px solid var(--cli-panel-border, #
|
|
801
|
-
border-radius: 6px;
|
|
802
|
-
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));
|
|
803
862
|
z-index: 1100;
|
|
804
863
|
min-width: 120px;
|
|
805
864
|
overflow: hidden;
|
|
@@ -811,7 +870,7 @@
|
|
|
811
870
|
appearance: none;
|
|
812
871
|
background: transparent;
|
|
813
872
|
border: none;
|
|
814
|
-
color: var(--cli-panel-text-secondary,
|
|
873
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
815
874
|
cursor: pointer;
|
|
816
875
|
display: flex;
|
|
817
876
|
align-items: center;
|
|
@@ -826,7 +885,7 @@
|
|
|
826
885
|
|
|
827
886
|
.cli-panel-position-dropdown-item:hover {
|
|
828
887
|
background-color: var(--cli-btn-hover-bg, rgba(129, 140, 248, 0.12));
|
|
829
|
-
color: var(--cli-panel-text,
|
|
888
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
830
889
|
}
|
|
831
890
|
|
|
832
891
|
.cli-panel-position-dropdown-item.active {
|
|
@@ -875,7 +934,7 @@
|
|
|
875
934
|
display: flex;
|
|
876
935
|
align-items: center;
|
|
877
936
|
gap: 5px;
|
|
878
|
-
color: var(--cli-panel-text-secondary,
|
|
937
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
879
938
|
}
|
|
880
939
|
|
|
881
940
|
.cli-panel-status-dot {
|
|
@@ -946,7 +1005,7 @@
|
|
|
946
1005
|
|
|
947
1006
|
.cli-panel-status-item.status-clickable {
|
|
948
1007
|
cursor: pointer;
|
|
949
|
-
border-radius: 4px;
|
|
1008
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
950
1009
|
padding: 2px 6px;
|
|
951
1010
|
margin: -2px -6px;
|
|
952
1011
|
transition: background-color 0.15s ease;
|
|
@@ -978,13 +1037,13 @@
|
|
|
978
1037
|
width: 20px;
|
|
979
1038
|
height: 20px;
|
|
980
1039
|
cursor: default;
|
|
981
|
-
color: var(--cli-panel-text-secondary,
|
|
1040
|
+
color: var(--cli-panel-text-secondary, #94a3b8);
|
|
982
1041
|
font-size: 12px;
|
|
983
1042
|
}
|
|
984
1043
|
|
|
985
1044
|
.cli-panel-status-compact-item.status-clickable {
|
|
986
1045
|
cursor: pointer;
|
|
987
|
-
border-radius: 4px;
|
|
1046
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
988
1047
|
}
|
|
989
1048
|
|
|
990
1049
|
.cli-panel-status-compact-item.status-clickable:hover {
|
|
@@ -1041,15 +1100,25 @@
|
|
|
1041
1100
|
|
|
1042
1101
|
.cli-panel-services-dropdown {
|
|
1043
1102
|
position: fixed;
|
|
1044
|
-
background-color: var(--cli-panel-header-bg, #
|
|
1045
|
-
border: 1px solid var(--cli-panel-border, #
|
|
1046
|
-
border-radius:
|
|
1047
|
-
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));
|
|
1048
1107
|
z-index: 1100;
|
|
1049
1108
|
min-width: 260px;
|
|
1050
1109
|
max-width: 380px;
|
|
1051
1110
|
overflow: hidden;
|
|
1052
|
-
|
|
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
|
+
);
|
|
1053
1122
|
}
|
|
1054
1123
|
|
|
1055
1124
|
.cli-panel-services-dropdown-header {
|
|
@@ -1059,7 +1128,7 @@
|
|
|
1059
1128
|
text-transform: uppercase;
|
|
1060
1129
|
letter-spacing: 0.05em;
|
|
1061
1130
|
color: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.5));
|
|
1062
|
-
border-bottom: 1px solid var(--cli-panel-border, #
|
|
1131
|
+
border-bottom: 1px solid var(--cli-panel-border, #1e293b);
|
|
1063
1132
|
}
|
|
1064
1133
|
|
|
1065
1134
|
.cli-panel-services-dropdown-list {
|
|
@@ -1079,7 +1148,7 @@
|
|
|
1079
1148
|
|
|
1080
1149
|
.cli-panel-services-dropdown-list::-webkit-scrollbar-thumb {
|
|
1081
1150
|
background: var(--cli-panel-text-secondary, rgba(255, 255, 255, 0.2));
|
|
1082
|
-
border-radius: 3px;
|
|
1151
|
+
border-radius: var(--cli-panel-radius, 3px);
|
|
1083
1152
|
}
|
|
1084
1153
|
|
|
1085
1154
|
.cli-panel-services-dropdown-list::-webkit-scrollbar-thumb:hover {
|
|
@@ -1091,7 +1160,7 @@
|
|
|
1091
1160
|
align-items: flex-start;
|
|
1092
1161
|
gap: 10px;
|
|
1093
1162
|
padding: 10px 14px;
|
|
1094
|
-
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));
|
|
1095
1164
|
transition: background-color 0.15s ease;
|
|
1096
1165
|
}
|
|
1097
1166
|
|
|
@@ -1130,7 +1199,7 @@
|
|
|
1130
1199
|
.cli-panel-svc-name {
|
|
1131
1200
|
font-size: 13px;
|
|
1132
1201
|
font-weight: 500;
|
|
1133
|
-
color: var(--cli-panel-text,
|
|
1202
|
+
color: var(--cli-panel-text, #e2e8f0);
|
|
1134
1203
|
overflow: hidden;
|
|
1135
1204
|
text-overflow: ellipsis;
|
|
1136
1205
|
white-space: nowrap;
|
|
@@ -1174,7 +1243,7 @@
|
|
|
1174
1243
|
left: 0;
|
|
1175
1244
|
right: 0;
|
|
1176
1245
|
height: 2px;
|
|
1177
|
-
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);
|
|
1178
1247
|
background-size: 200% 100%;
|
|
1179
1248
|
opacity: 0.4;
|
|
1180
1249
|
animation: cliGlowShift 8s ease-in-out infinite;
|
|
@@ -1195,7 +1264,7 @@
|
|
|
1195
1264
|
right: 0;
|
|
1196
1265
|
width: 2px;
|
|
1197
1266
|
height: 100%;
|
|
1198
|
-
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);
|
|
1199
1268
|
background-size: 100% 200%;
|
|
1200
1269
|
}
|
|
1201
1270
|
|
|
@@ -1206,7 +1275,7 @@
|
|
|
1206
1275
|
right: auto;
|
|
1207
1276
|
width: 2px;
|
|
1208
1277
|
height: 100%;
|
|
1209
|
-
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);
|
|
1210
1279
|
background-size: 100% 200%;
|
|
1211
1280
|
}
|
|
1212
1281
|
|
|
@@ -1243,12 +1312,12 @@
|
|
|
1243
1312
|
}
|
|
1244
1313
|
|
|
1245
1314
|
.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb {
|
|
1246
|
-
background: #444;
|
|
1247
|
-
border-radius: 4px;
|
|
1315
|
+
background: var(--cli-panel-border, #444);
|
|
1316
|
+
border-radius: var(--cli-panel-radius, 4px);
|
|
1248
1317
|
}
|
|
1249
1318
|
|
|
1250
1319
|
.cli-panel-wrapper .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
|
|
1251
|
-
background: #666;
|
|
1320
|
+
background: var(--cli-panel-text-secondary, #666);
|
|
1252
1321
|
}
|
|
1253
1322
|
|
|
1254
1323
|
/* ─── Global helper ──────────────────────────────────────── */
|
|
@@ -1257,3 +1326,51 @@ body.cli-pane-resizing {
|
|
|
1257
1326
|
user-select: none;
|
|
1258
1327
|
cursor: ew-resize;
|
|
1259
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
|
+
}
|