@firstpick/pi-package-webui 0.1.4 → 0.1.6
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/README.md +34 -11
- package/bin/pi-webui.mjs +608 -26
- package/index.ts +82 -10
- package/package.json +34 -4
- package/public/app.js +3118 -211
- package/public/catppuccin-mocha-background.png +0 -0
- package/public/index.html +152 -52
- package/public/matrix-background.webp +0 -0
- package/public/service-worker.js +3 -1
- package/public/styles.css +772 -17
- package/tests/mobile-static.test.mjs +231 -36
package/public/styles.css
CHANGED
|
@@ -58,11 +58,17 @@
|
|
|
58
58
|
--background-glow-pink: rgba(245, 194, 231, 0.34);
|
|
59
59
|
--background-glow-blue: rgba(137, 180, 250, 0.32);
|
|
60
60
|
--background-glow-teal: rgba(148, 226, 213, 0.20);
|
|
61
|
+
--theme-background-image: none;
|
|
62
|
+
--theme-background-overlay: linear-gradient(180deg, rgba(17, 17, 27, 0), rgba(17, 17, 27, 0));
|
|
63
|
+
--theme-background-size: cover;
|
|
64
|
+
--theme-background-position: center;
|
|
65
|
+
--theme-background-repeat: no-repeat;
|
|
61
66
|
--button-primary-text: #11111b;
|
|
62
67
|
--visual-viewport-height: 100dvh;
|
|
63
68
|
--visual-viewport-offset-top: 0px;
|
|
64
69
|
--keyboard-inset-bottom: 0px;
|
|
65
70
|
|
|
71
|
+
font-size: 80%;
|
|
66
72
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
67
73
|
}
|
|
68
74
|
|
|
@@ -74,11 +80,35 @@ body {
|
|
|
74
80
|
min-height: 0;
|
|
75
81
|
overflow: hidden;
|
|
76
82
|
color: var(--text);
|
|
77
|
-
background:
|
|
83
|
+
background-color: var(--ctp-crust);
|
|
84
|
+
background-image:
|
|
85
|
+
var(--theme-background-overlay),
|
|
86
|
+
var(--theme-background-image),
|
|
78
87
|
radial-gradient(circle at 8% -8%, var(--background-glow-pink) 0, transparent 31rem),
|
|
79
88
|
radial-gradient(circle at 82% 2%, var(--background-glow-blue) 0, transparent 34rem),
|
|
80
89
|
radial-gradient(circle at 52% 112%, var(--background-glow-teal) 0, transparent 30rem),
|
|
81
90
|
linear-gradient(135deg, var(--ctp-crust) 0%, var(--ctp-mantle) 45%, var(--ctp-base) 100%);
|
|
91
|
+
background-size:
|
|
92
|
+
cover,
|
|
93
|
+
var(--theme-background-size),
|
|
94
|
+
auto,
|
|
95
|
+
auto,
|
|
96
|
+
auto,
|
|
97
|
+
auto;
|
|
98
|
+
background-position:
|
|
99
|
+
center,
|
|
100
|
+
var(--theme-background-position),
|
|
101
|
+
8% -8%,
|
|
102
|
+
82% 2%,
|
|
103
|
+
52% 112%,
|
|
104
|
+
center;
|
|
105
|
+
background-repeat:
|
|
106
|
+
no-repeat,
|
|
107
|
+
var(--theme-background-repeat),
|
|
108
|
+
no-repeat,
|
|
109
|
+
no-repeat,
|
|
110
|
+
no-repeat,
|
|
111
|
+
no-repeat;
|
|
82
112
|
}
|
|
83
113
|
body::before,
|
|
84
114
|
body::after {
|
|
@@ -141,6 +171,7 @@ button.danger {
|
|
|
141
171
|
box-shadow: 0 0 1.1rem rgba(243, 139, 168, 0.42);
|
|
142
172
|
}
|
|
143
173
|
button:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
|
|
174
|
+
button[hidden] { display: none !important; }
|
|
144
175
|
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible {
|
|
145
176
|
border-color: var(--ctp-teal);
|
|
146
177
|
box-shadow: 0 0 0 3px rgba(148, 226, 213, 0.15), 0 0 1rem var(--glow-teal);
|
|
@@ -454,15 +485,61 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
454
485
|
padding: 1rem;
|
|
455
486
|
scrollbar-gutter: stable;
|
|
456
487
|
}
|
|
457
|
-
.side-panel
|
|
458
|
-
|
|
459
|
-
|
|
488
|
+
.side-panel-section {
|
|
489
|
+
display: grid;
|
|
490
|
+
gap: 0.55rem;
|
|
491
|
+
}
|
|
492
|
+
.side-panel-section + .side-panel-section { margin-top: 0.78rem; }
|
|
493
|
+
.side-panel-section h2 {
|
|
494
|
+
margin: 0;
|
|
495
|
+
font-size: inherit;
|
|
496
|
+
}
|
|
497
|
+
.side-panel-section-toggle {
|
|
498
|
+
display: flex;
|
|
499
|
+
align-items: center;
|
|
500
|
+
justify-content: space-between;
|
|
501
|
+
gap: 0.65rem;
|
|
502
|
+
width: 100%;
|
|
503
|
+
min-height: 44px;
|
|
504
|
+
padding: 0.48rem 0.68rem;
|
|
460
505
|
color: var(--ctp-pink);
|
|
506
|
+
text-align: left;
|
|
461
507
|
text-transform: uppercase;
|
|
462
508
|
letter-spacing: 0.16em;
|
|
509
|
+
border-color: rgba(245, 194, 231, 0.20);
|
|
510
|
+
border-radius: 0.78rem;
|
|
511
|
+
background:
|
|
512
|
+
linear-gradient(120deg, rgba(245, 194, 231, 0.10), rgba(148, 226, 213, 0.06)),
|
|
513
|
+
rgba(var(--ctp-crust-rgb), 0.52);
|
|
514
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(245, 194, 231, 0.05);
|
|
515
|
+
font-size: 0.78rem;
|
|
516
|
+
font-weight: 900;
|
|
463
517
|
text-shadow: 0 0 1rem var(--glow-pink);
|
|
464
518
|
}
|
|
465
|
-
.side-panel-
|
|
519
|
+
.side-panel-section-toggle:hover,
|
|
520
|
+
.side-panel-section-toggle:focus-visible {
|
|
521
|
+
transform: none;
|
|
522
|
+
color: var(--ctp-teal);
|
|
523
|
+
border-color: rgba(148, 226, 213, 0.46);
|
|
524
|
+
box-shadow: 0 0 1.1rem rgba(148, 226, 213, 0.12), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
525
|
+
}
|
|
526
|
+
.side-panel-section-toggle[aria-expanded="true"] {
|
|
527
|
+
border-color: rgba(245, 194, 231, 0.32);
|
|
528
|
+
}
|
|
529
|
+
.side-panel-section-chevron {
|
|
530
|
+
flex: 0 0 auto;
|
|
531
|
+
color: var(--ctp-teal);
|
|
532
|
+
font-size: 1rem;
|
|
533
|
+
line-height: 1;
|
|
534
|
+
transition: transform 160ms ease, color 160ms ease;
|
|
535
|
+
}
|
|
536
|
+
.side-panel-section:not(.collapsed) .side-panel-section-chevron {
|
|
537
|
+
transform: rotate(90deg);
|
|
538
|
+
}
|
|
539
|
+
.side-panel-section.collapsed .side-panel-section-content,
|
|
540
|
+
.side-panel-section-content[hidden] {
|
|
541
|
+
display: none;
|
|
542
|
+
}
|
|
466
543
|
.side-panel-controls {
|
|
467
544
|
display: grid;
|
|
468
545
|
gap: 0.75rem;
|
|
@@ -489,6 +566,42 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
489
566
|
width: 100%;
|
|
490
567
|
min-width: 0;
|
|
491
568
|
}
|
|
569
|
+
.background-input {
|
|
570
|
+
position: absolute;
|
|
571
|
+
width: 1px;
|
|
572
|
+
height: 1px;
|
|
573
|
+
overflow: hidden;
|
|
574
|
+
clip: rect(0 0 0 0);
|
|
575
|
+
clip-path: inset(50%);
|
|
576
|
+
white-space: nowrap;
|
|
577
|
+
}
|
|
578
|
+
.background-control-row {
|
|
579
|
+
display: grid;
|
|
580
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
581
|
+
gap: 0.42rem;
|
|
582
|
+
align-items: center;
|
|
583
|
+
}
|
|
584
|
+
.background-clear-button {
|
|
585
|
+
width: 44px !important;
|
|
586
|
+
min-width: 44px !important;
|
|
587
|
+
padding-inline: 0;
|
|
588
|
+
color: var(--ctp-red);
|
|
589
|
+
font-size: 1.25rem;
|
|
590
|
+
font-weight: 900;
|
|
591
|
+
line-height: 1;
|
|
592
|
+
}
|
|
593
|
+
.background-status {
|
|
594
|
+
min-width: 0;
|
|
595
|
+
padding: 0.5rem 0.58rem;
|
|
596
|
+
overflow-wrap: anywhere;
|
|
597
|
+
color: rgba(var(--ctp-subtext-rgb), 0.74);
|
|
598
|
+
border: 1px solid rgba(180, 190, 254, 0.14);
|
|
599
|
+
border-radius: 0.62rem;
|
|
600
|
+
background: rgba(var(--ctp-crust-rgb), 0.42);
|
|
601
|
+
font-size: 0.72rem;
|
|
602
|
+
font-weight: 750;
|
|
603
|
+
line-height: 1.35;
|
|
604
|
+
}
|
|
492
605
|
.toggle-control {
|
|
493
606
|
display: grid;
|
|
494
607
|
grid-template-columns: auto minmax(0, 1fr);
|
|
@@ -620,8 +733,102 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
620
733
|
border-color: transparent;
|
|
621
734
|
background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-peach), var(--ctp-red));
|
|
622
735
|
}
|
|
623
|
-
.
|
|
624
|
-
|
|
736
|
+
.optional-features-box {
|
|
737
|
+
display: grid;
|
|
738
|
+
gap: 0.6rem;
|
|
739
|
+
padding: 0.72rem;
|
|
740
|
+
border: 1px solid rgba(180, 190, 254, 0.16);
|
|
741
|
+
border-radius: 0.85rem;
|
|
742
|
+
background: rgba(var(--ctp-crust-rgb), 0.46);
|
|
743
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 0 1rem rgba(148, 226, 213, 0.05);
|
|
744
|
+
}
|
|
745
|
+
.optional-feature-row {
|
|
746
|
+
display: grid;
|
|
747
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
748
|
+
gap: 0.62rem;
|
|
749
|
+
align-items: start;
|
|
750
|
+
min-width: 0;
|
|
751
|
+
padding: 0.62rem;
|
|
752
|
+
border: 1px solid rgba(180, 190, 254, 0.14);
|
|
753
|
+
border-radius: 0.72rem;
|
|
754
|
+
background: rgba(var(--ctp-crust-rgb), 0.55);
|
|
755
|
+
}
|
|
756
|
+
.optional-feature-row.enabled {
|
|
757
|
+
border-color: rgba(166, 227, 161, 0.28);
|
|
758
|
+
}
|
|
759
|
+
.optional-feature-row.disabled {
|
|
760
|
+
border-color: rgba(249, 226, 175, 0.28);
|
|
761
|
+
}
|
|
762
|
+
.optional-feature-row.missing {
|
|
763
|
+
border-color: rgba(243, 139, 168, 0.25);
|
|
764
|
+
}
|
|
765
|
+
.optional-feature-main {
|
|
766
|
+
display: grid;
|
|
767
|
+
gap: 0.28rem;
|
|
768
|
+
min-width: 0;
|
|
769
|
+
}
|
|
770
|
+
.optional-feature-title {
|
|
771
|
+
display: flex;
|
|
772
|
+
flex-wrap: wrap;
|
|
773
|
+
gap: 0.42rem;
|
|
774
|
+
align-items: center;
|
|
775
|
+
min-width: 0;
|
|
776
|
+
}
|
|
777
|
+
.optional-feature-title strong {
|
|
778
|
+
color: rgba(var(--ctp-text-rgb), 0.94);
|
|
779
|
+
font-size: 0.82rem;
|
|
780
|
+
}
|
|
781
|
+
.optional-feature-pill {
|
|
782
|
+
display: inline-flex;
|
|
783
|
+
align-items: center;
|
|
784
|
+
min-height: 1.15rem;
|
|
785
|
+
padding: 0.12rem 0.42rem;
|
|
786
|
+
border-radius: 999px;
|
|
787
|
+
color: var(--ctp-subtext);
|
|
788
|
+
border: 1px solid rgba(180, 190, 254, 0.18);
|
|
789
|
+
background: rgba(var(--ctp-surface-rgb), 0.55);
|
|
790
|
+
font-size: 0.64rem;
|
|
791
|
+
font-weight: 900;
|
|
792
|
+
letter-spacing: 0.08em;
|
|
793
|
+
text-transform: uppercase;
|
|
794
|
+
}
|
|
795
|
+
.optional-feature-pill.enabled {
|
|
796
|
+
color: var(--ctp-green);
|
|
797
|
+
border-color: rgba(166, 227, 161, 0.32);
|
|
798
|
+
}
|
|
799
|
+
.optional-feature-pill.disabled {
|
|
800
|
+
color: var(--ctp-yellow);
|
|
801
|
+
border-color: rgba(249, 226, 175, 0.32);
|
|
802
|
+
}
|
|
803
|
+
.optional-feature-pill.missing {
|
|
804
|
+
color: var(--ctp-red);
|
|
805
|
+
border-color: rgba(243, 139, 168, 0.32);
|
|
806
|
+
}
|
|
807
|
+
.optional-feature-detail,
|
|
808
|
+
.optional-feature-description {
|
|
809
|
+
color: rgba(var(--ctp-subtext-rgb), 0.74);
|
|
810
|
+
font-size: 0.72rem;
|
|
811
|
+
line-height: 1.35;
|
|
812
|
+
}
|
|
813
|
+
.optional-feature-package {
|
|
814
|
+
width: fit-content;
|
|
815
|
+
max-width: 100%;
|
|
816
|
+
overflow-wrap: anywhere;
|
|
817
|
+
color: rgba(var(--ctp-teal-rgb), 0.86);
|
|
818
|
+
font-size: 0.68rem;
|
|
819
|
+
}
|
|
820
|
+
.optional-feature-action {
|
|
821
|
+
min-width: 5.2rem;
|
|
822
|
+
white-space: nowrap;
|
|
823
|
+
}
|
|
824
|
+
.optional-feature-action.install {
|
|
825
|
+
color: var(--ctp-yellow);
|
|
826
|
+
border-color: rgba(249, 226, 175, 0.32);
|
|
827
|
+
}
|
|
828
|
+
.optional-feature-action.install:not(:disabled):hover {
|
|
829
|
+
color: #11111b;
|
|
830
|
+
border-color: transparent;
|
|
831
|
+
background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-peach));
|
|
625
832
|
}
|
|
626
833
|
|
|
627
834
|
.terminal-tabs-shell {
|
|
@@ -640,6 +847,23 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
640
847
|
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.035), 0 0.45rem 1rem rgba(var(--ctp-crust-rgb), 0.20);
|
|
641
848
|
}
|
|
642
849
|
.terminal-tabs-toggle-button { display: none; }
|
|
850
|
+
.terminal-close-all-button {
|
|
851
|
+
flex: 0 0 auto;
|
|
852
|
+
min-height: 2.35rem;
|
|
853
|
+
padding: 0.38rem 0.7rem;
|
|
854
|
+
color: var(--ctp-red);
|
|
855
|
+
white-space: nowrap;
|
|
856
|
+
border-color: rgba(243, 139, 168, 0.32);
|
|
857
|
+
background:
|
|
858
|
+
linear-gradient(120deg, rgba(243, 139, 168, 0.12), rgba(250, 179, 135, 0.08)),
|
|
859
|
+
rgba(var(--ctp-crust-rgb), 0.62);
|
|
860
|
+
}
|
|
861
|
+
.terminal-close-all-button:hover,
|
|
862
|
+
.terminal-close-all-button:focus-visible {
|
|
863
|
+
color: #11111b;
|
|
864
|
+
border-color: transparent;
|
|
865
|
+
background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
|
|
866
|
+
}
|
|
643
867
|
.terminal-tabs {
|
|
644
868
|
display: flex;
|
|
645
869
|
align-items: center;
|
|
@@ -918,6 +1142,9 @@ body.side-panel-collapsed .terminal-tabs-shell {
|
|
|
918
1142
|
color: #11111b;
|
|
919
1143
|
background: linear-gradient(120deg, var(--ctp-red), var(--ctp-peach));
|
|
920
1144
|
}
|
|
1145
|
+
.terminal-tab-group-close {
|
|
1146
|
+
border-left-color: rgba(243, 139, 168, 0.18);
|
|
1147
|
+
}
|
|
921
1148
|
.terminal-new-tab-button {
|
|
922
1149
|
flex: 0 0 auto;
|
|
923
1150
|
padding: 0.45rem 0.72rem;
|
|
@@ -1629,6 +1856,13 @@ button.footer-meta {
|
|
|
1629
1856
|
background: linear-gradient(145deg, rgba(var(--ctp-surface-rgb), 0.66), rgba(var(--ctp-mantle-rgb), 0.7));
|
|
1630
1857
|
box-shadow: 0 0.8rem 1.8rem rgba(var(--ctp-crust-rgb), 0.34), inset 0 1px 0 rgba(255,255,255,0.045);
|
|
1631
1858
|
}
|
|
1859
|
+
.message.action-enter {
|
|
1860
|
+
animation: action-card-slide-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
1861
|
+
}
|
|
1862
|
+
@keyframes action-card-slide-in {
|
|
1863
|
+
from { opacity: 0; transform: translateY(0.42rem); }
|
|
1864
|
+
to { opacity: 1; transform: translateY(0); }
|
|
1865
|
+
}
|
|
1632
1866
|
.message::before {
|
|
1633
1867
|
content: "";
|
|
1634
1868
|
position: absolute;
|
|
@@ -1685,6 +1919,24 @@ button.footer-meta {
|
|
|
1685
1919
|
background: linear-gradient(145deg, rgba(249, 226, 175, 0.11), rgba(var(--ctp-surface-rgb), 0.58));
|
|
1686
1920
|
padding: 0;
|
|
1687
1921
|
}
|
|
1922
|
+
.message.toolExecution {
|
|
1923
|
+
border-color: rgba(249, 226, 175, 0.34);
|
|
1924
|
+
background: linear-gradient(145deg, rgba(249, 226, 175, 0.12), rgba(var(--ctp-surface-rgb), 0.58));
|
|
1925
|
+
}
|
|
1926
|
+
.message.toolExecution .message-role {
|
|
1927
|
+
color: var(--ctp-yellow);
|
|
1928
|
+
text-shadow: 0 0 0.85rem rgba(249, 226, 175, 0.30);
|
|
1929
|
+
}
|
|
1930
|
+
.message.toolExecution.tool-running {
|
|
1931
|
+
border-color: rgba(148, 226, 213, 0.48);
|
|
1932
|
+
box-shadow: 0 0 1rem rgba(148, 226, 213, 0.18), 0 0.8rem 1.8rem rgba(var(--ctp-crust-rgb), 0.34);
|
|
1933
|
+
}
|
|
1934
|
+
.message.toolExecution.tool-success {
|
|
1935
|
+
border-color: rgba(166, 227, 161, 0.38);
|
|
1936
|
+
}
|
|
1937
|
+
.message.toolExecution.tool-error {
|
|
1938
|
+
border-color: rgba(243, 139, 168, 0.72);
|
|
1939
|
+
}
|
|
1688
1940
|
.message.streaming {
|
|
1689
1941
|
outline: 1px solid rgba(148, 226, 213, 0.72);
|
|
1690
1942
|
box-shadow: 0 0 1.7rem var(--glow-teal), 0 0.8rem 2rem rgba(var(--ctp-crust-rgb), 0.4);
|
|
@@ -1779,6 +2031,135 @@ button.footer-meta {
|
|
|
1779
2031
|
padding: 0 0.9rem 0.85rem;
|
|
1780
2032
|
border-top: 1px solid rgba(249, 226, 175, 0.12);
|
|
1781
2033
|
}
|
|
2034
|
+
.tool-result-preview {
|
|
2035
|
+
padding: 0 0.9rem 0.85rem;
|
|
2036
|
+
border-top: 1px solid rgba(249, 226, 175, 0.10);
|
|
2037
|
+
}
|
|
2038
|
+
.message-collapse[open] + .tool-result-preview {
|
|
2039
|
+
display: none;
|
|
2040
|
+
}
|
|
2041
|
+
.tool-result-preview-text {
|
|
2042
|
+
max-height: none;
|
|
2043
|
+
margin: 0;
|
|
2044
|
+
color: rgba(var(--ctp-text-rgb), 0.78);
|
|
2045
|
+
}
|
|
2046
|
+
.tool-title-line {
|
|
2047
|
+
display: flex;
|
|
2048
|
+
align-items: baseline;
|
|
2049
|
+
gap: 0.5rem;
|
|
2050
|
+
flex-wrap: wrap;
|
|
2051
|
+
margin: 0.15rem 0 0.35rem;
|
|
2052
|
+
}
|
|
2053
|
+
.tool-name {
|
|
2054
|
+
color: var(--ctp-yellow);
|
|
2055
|
+
font-weight: 900;
|
|
2056
|
+
text-transform: uppercase;
|
|
2057
|
+
letter-spacing: 0.12em;
|
|
2058
|
+
}
|
|
2059
|
+
.tool-subject {
|
|
2060
|
+
color: rgba(var(--ctp-text-rgb), 0.86);
|
|
2061
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2062
|
+
overflow-wrap: anywhere;
|
|
2063
|
+
}
|
|
2064
|
+
.tool-meta-line {
|
|
2065
|
+
display: flex;
|
|
2066
|
+
gap: 0.35rem;
|
|
2067
|
+
flex-wrap: wrap;
|
|
2068
|
+
margin: 0.2rem 0 0.45rem;
|
|
2069
|
+
}
|
|
2070
|
+
.tool-meta-pill {
|
|
2071
|
+
border: 1px solid rgba(249, 226, 175, 0.20);
|
|
2072
|
+
border-radius: 999px;
|
|
2073
|
+
padding: 0.12rem 0.46rem;
|
|
2074
|
+
color: rgba(var(--ctp-subtext-rgb), 0.82);
|
|
2075
|
+
background: rgba(var(--ctp-crust-rgb), 0.46);
|
|
2076
|
+
font-size: 0.72rem;
|
|
2077
|
+
font-weight: 800;
|
|
2078
|
+
}
|
|
2079
|
+
.tool-command-line {
|
|
2080
|
+
margin: 0.1rem 0 0.4rem;
|
|
2081
|
+
white-space: pre-wrap;
|
|
2082
|
+
overflow-wrap: anywhere;
|
|
2083
|
+
color: var(--ctp-yellow);
|
|
2084
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2085
|
+
font-weight: 900;
|
|
2086
|
+
}
|
|
2087
|
+
.tool-output-details {
|
|
2088
|
+
margin: 0.45rem 0 0;
|
|
2089
|
+
}
|
|
2090
|
+
.tool-output-summary {
|
|
2091
|
+
color: var(--ctp-yellow);
|
|
2092
|
+
font-weight: 900;
|
|
2093
|
+
letter-spacing: 0.04em;
|
|
2094
|
+
}
|
|
2095
|
+
.tool-output-details[open] + .tool-output-preview {
|
|
2096
|
+
display: none;
|
|
2097
|
+
}
|
|
2098
|
+
.tool-output-preview {
|
|
2099
|
+
margin-top: 0.4rem;
|
|
2100
|
+
}
|
|
2101
|
+
.tool-output-preview-text {
|
|
2102
|
+
color: rgba(var(--ctp-text-rgb), 0.78);
|
|
2103
|
+
}
|
|
2104
|
+
.tool-raw-details {
|
|
2105
|
+
margin-top: 0.58rem;
|
|
2106
|
+
border-color: rgba(180, 190, 254, 0.14);
|
|
2107
|
+
background: rgba(var(--ctp-crust-rgb), 0.30);
|
|
2108
|
+
}
|
|
2109
|
+
.tool-raw-summary {
|
|
2110
|
+
color: rgba(var(--ctp-subtext-rgb), 0.72);
|
|
2111
|
+
font-size: 0.74rem;
|
|
2112
|
+
font-weight: 900;
|
|
2113
|
+
letter-spacing: 0.08em;
|
|
2114
|
+
text-transform: uppercase;
|
|
2115
|
+
}
|
|
2116
|
+
.tool-raw-code {
|
|
2117
|
+
max-height: 18rem;
|
|
2118
|
+
color: rgba(var(--ctp-text-rgb), 0.76);
|
|
2119
|
+
font-size: 0.78rem;
|
|
2120
|
+
}
|
|
2121
|
+
.muted-output {
|
|
2122
|
+
color: rgba(var(--ctp-subtext-rgb), 0.72);
|
|
2123
|
+
}
|
|
2124
|
+
.tool-warnings {
|
|
2125
|
+
display: grid;
|
|
2126
|
+
gap: 0.2rem;
|
|
2127
|
+
margin-top: 0.45rem;
|
|
2128
|
+
}
|
|
2129
|
+
.tool-warning {
|
|
2130
|
+
color: var(--ctp-yellow);
|
|
2131
|
+
font-size: 0.78rem;
|
|
2132
|
+
font-weight: 800;
|
|
2133
|
+
}
|
|
2134
|
+
.tool-diff {
|
|
2135
|
+
overflow: auto;
|
|
2136
|
+
margin: 0.45rem 0;
|
|
2137
|
+
border: 1px solid rgba(203, 166, 247, 0.20);
|
|
2138
|
+
border-radius: 0.75rem;
|
|
2139
|
+
background: rgba(var(--ctp-crust-rgb), 0.82);
|
|
2140
|
+
padding: 0.55rem 0;
|
|
2141
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2142
|
+
font-size: 0.86rem;
|
|
2143
|
+
}
|
|
2144
|
+
.tool-diff > div {
|
|
2145
|
+
padding: 0 0.72rem;
|
|
2146
|
+
white-space: pre;
|
|
2147
|
+
}
|
|
2148
|
+
.tool-diff .diff-added {
|
|
2149
|
+
color: var(--ctp-green);
|
|
2150
|
+
background: rgba(166, 227, 161, 0.10);
|
|
2151
|
+
}
|
|
2152
|
+
.tool-diff .diff-removed {
|
|
2153
|
+
color: var(--ctp-red);
|
|
2154
|
+
background: rgba(243, 139, 168, 0.10);
|
|
2155
|
+
}
|
|
2156
|
+
.tool-diff .diff-hunk {
|
|
2157
|
+
color: var(--ctp-mauve);
|
|
2158
|
+
background: rgba(203, 166, 247, 0.10);
|
|
2159
|
+
}
|
|
2160
|
+
.tool-diff .diff-file {
|
|
2161
|
+
color: var(--ctp-yellow);
|
|
2162
|
+
}
|
|
1782
2163
|
.message.toolResult:not(.error) .message-collapse:not([open]) > summary.message-header,
|
|
1783
2164
|
.message.bashExecution .message-collapse:not([open]) > summary.message-header,
|
|
1784
2165
|
.message.compactionSummary .message-collapse:not([open]) > summary.message-header {
|
|
@@ -1843,6 +2224,127 @@ button.footer-meta {
|
|
|
1843
2224
|
color: #11111b;
|
|
1844
2225
|
background: linear-gradient(120deg, var(--ctp-yellow), var(--ctp-mauve));
|
|
1845
2226
|
}
|
|
2227
|
+
.markdown-body {
|
|
2228
|
+
display: block;
|
|
2229
|
+
color: rgba(var(--ctp-text-rgb), 0.94);
|
|
2230
|
+
line-height: 1.58;
|
|
2231
|
+
overflow-wrap: anywhere;
|
|
2232
|
+
}
|
|
2233
|
+
.markdown-body > :first-child { margin-top: 0; }
|
|
2234
|
+
.markdown-body > :last-child { margin-bottom: 0; }
|
|
2235
|
+
.markdown-body p {
|
|
2236
|
+
margin: 0.45rem 0;
|
|
2237
|
+
}
|
|
2238
|
+
.markdown-heading {
|
|
2239
|
+
margin: 0.7rem 0 0.35rem;
|
|
2240
|
+
color: var(--ctp-teal);
|
|
2241
|
+
line-height: 1.25;
|
|
2242
|
+
letter-spacing: 0.01em;
|
|
2243
|
+
text-shadow: 0 0 0.9rem rgba(148, 226, 213, 0.18);
|
|
2244
|
+
}
|
|
2245
|
+
.markdown-heading-1 { font-size: 1.35rem; }
|
|
2246
|
+
.markdown-heading-2 { font-size: 1.18rem; }
|
|
2247
|
+
.markdown-heading-3 { font-size: 1.05rem; }
|
|
2248
|
+
.markdown-heading-4,
|
|
2249
|
+
.markdown-heading-5,
|
|
2250
|
+
.markdown-heading-6 { font-size: 0.96rem; color: var(--ctp-mauve); }
|
|
2251
|
+
.markdown-body a {
|
|
2252
|
+
color: var(--ctp-blue);
|
|
2253
|
+
text-decoration-color: rgba(137, 180, 250, 0.45);
|
|
2254
|
+
text-underline-offset: 0.16em;
|
|
2255
|
+
}
|
|
2256
|
+
.markdown-body a:hover { color: var(--ctp-teal); }
|
|
2257
|
+
.markdown-inline-code {
|
|
2258
|
+
border: 1px solid rgba(203, 166, 247, 0.18);
|
|
2259
|
+
border-radius: 0.35rem;
|
|
2260
|
+
padding: 0.05rem 0.28rem;
|
|
2261
|
+
color: var(--ctp-yellow);
|
|
2262
|
+
background: rgba(var(--ctp-crust-rgb), 0.60);
|
|
2263
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2264
|
+
font-size: 0.92em;
|
|
2265
|
+
}
|
|
2266
|
+
.markdown-code-block {
|
|
2267
|
+
position: relative;
|
|
2268
|
+
margin: 0.55rem 0;
|
|
2269
|
+
}
|
|
2270
|
+
.markdown-code-language {
|
|
2271
|
+
position: absolute;
|
|
2272
|
+
top: 0.42rem;
|
|
2273
|
+
right: 0.55rem;
|
|
2274
|
+
z-index: 1;
|
|
2275
|
+
color: rgba(var(--ctp-subtext-rgb), 0.72);
|
|
2276
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
2277
|
+
font-size: 0.68rem;
|
|
2278
|
+
font-weight: 900;
|
|
2279
|
+
letter-spacing: 0.08em;
|
|
2280
|
+
text-transform: uppercase;
|
|
2281
|
+
}
|
|
2282
|
+
.markdown-code code {
|
|
2283
|
+
display: block;
|
|
2284
|
+
min-width: max-content;
|
|
2285
|
+
}
|
|
2286
|
+
.markdown-list {
|
|
2287
|
+
margin: 0.45rem 0 0.55rem 1.2rem;
|
|
2288
|
+
padding-left: 1rem;
|
|
2289
|
+
}
|
|
2290
|
+
.markdown-list li { margin: 0.18rem 0; }
|
|
2291
|
+
.markdown-task-item {
|
|
2292
|
+
list-style: none;
|
|
2293
|
+
margin-left: -1.25rem;
|
|
2294
|
+
}
|
|
2295
|
+
.markdown-task-checkbox {
|
|
2296
|
+
min-width: 0;
|
|
2297
|
+
min-height: 0;
|
|
2298
|
+
width: 0.95rem;
|
|
2299
|
+
height: 0.95rem;
|
|
2300
|
+
margin: 0 0.45rem 0 0;
|
|
2301
|
+
vertical-align: -0.12rem;
|
|
2302
|
+
accent-color: var(--ctp-green);
|
|
2303
|
+
}
|
|
2304
|
+
.markdown-blockquote {
|
|
2305
|
+
margin: 0.55rem 0;
|
|
2306
|
+
padding: 0.5rem 0.75rem;
|
|
2307
|
+
border-left: 3px solid rgba(203, 166, 247, 0.56);
|
|
2308
|
+
color: rgba(var(--ctp-text-rgb), 0.84);
|
|
2309
|
+
background: rgba(var(--ctp-crust-rgb), 0.42);
|
|
2310
|
+
border-radius: 0.45rem;
|
|
2311
|
+
}
|
|
2312
|
+
.markdown-rule {
|
|
2313
|
+
height: 1px;
|
|
2314
|
+
margin: 0.8rem 0;
|
|
2315
|
+
border: 0;
|
|
2316
|
+
background: linear-gradient(90deg, transparent, rgba(203, 166, 247, 0.45), transparent);
|
|
2317
|
+
}
|
|
2318
|
+
.markdown-table-wrapper {
|
|
2319
|
+
overflow-x: auto;
|
|
2320
|
+
margin: 0.6rem 0;
|
|
2321
|
+
border: 1px solid rgba(203, 166, 247, 0.20);
|
|
2322
|
+
border-radius: 0.7rem;
|
|
2323
|
+
background: rgba(var(--ctp-crust-rgb), 0.46);
|
|
2324
|
+
}
|
|
2325
|
+
.markdown-table {
|
|
2326
|
+
width: 100%;
|
|
2327
|
+
border-collapse: collapse;
|
|
2328
|
+
min-width: max-content;
|
|
2329
|
+
}
|
|
2330
|
+
.markdown-table th,
|
|
2331
|
+
.markdown-table td {
|
|
2332
|
+
padding: 0.42rem 0.58rem;
|
|
2333
|
+
border-bottom: 1px solid rgba(180, 190, 254, 0.12);
|
|
2334
|
+
text-align: left;
|
|
2335
|
+
vertical-align: top;
|
|
2336
|
+
}
|
|
2337
|
+
.markdown-table th {
|
|
2338
|
+
color: var(--ctp-yellow);
|
|
2339
|
+
font-size: 0.78rem;
|
|
2340
|
+
letter-spacing: 0.05em;
|
|
2341
|
+
text-transform: uppercase;
|
|
2342
|
+
background: rgba(var(--ctp-surface-rgb), 0.42);
|
|
2343
|
+
}
|
|
2344
|
+
.markdown-table tr:last-child td { border-bottom: 0; }
|
|
2345
|
+
.streaming-markdown {
|
|
2346
|
+
min-height: 1.35rem;
|
|
2347
|
+
}
|
|
1846
2348
|
.text-block, .code-block {
|
|
1847
2349
|
margin: 0.35rem 0;
|
|
1848
2350
|
white-space: pre-wrap;
|
|
@@ -1918,7 +2420,90 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
1918
2420
|
background: linear-gradient(90deg, transparent, var(--ctp-pink), var(--ctp-blue), var(--ctp-teal), transparent);
|
|
1919
2421
|
opacity: 0.8;
|
|
1920
2422
|
}
|
|
2423
|
+
.composer-input-row {
|
|
2424
|
+
display: grid;
|
|
2425
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
2426
|
+
gap: 0.55rem;
|
|
2427
|
+
align-items: stretch;
|
|
2428
|
+
}
|
|
2429
|
+
.composer-icon-button {
|
|
2430
|
+
display: inline-flex;
|
|
2431
|
+
align-items: center;
|
|
2432
|
+
justify-content: center;
|
|
2433
|
+
min-width: 2.9rem;
|
|
2434
|
+
min-height: 2.9rem;
|
|
2435
|
+
padding: 0.62rem;
|
|
2436
|
+
border-radius: 0.95rem;
|
|
2437
|
+
line-height: 1;
|
|
2438
|
+
}
|
|
2439
|
+
.composer-icon {
|
|
2440
|
+
display: block;
|
|
2441
|
+
width: 1.18rem;
|
|
2442
|
+
height: 1.18rem;
|
|
2443
|
+
flex: 0 0 auto;
|
|
2444
|
+
}
|
|
2445
|
+
.composer-icon-github {
|
|
2446
|
+
width: 1.12rem;
|
|
2447
|
+
height: 1.12rem;
|
|
2448
|
+
}
|
|
2449
|
+
.composer-attach-button {
|
|
2450
|
+
align-self: stretch;
|
|
2451
|
+
width: 3.05rem;
|
|
2452
|
+
margin: 0;
|
|
2453
|
+
}
|
|
1921
2454
|
.command-suggest[hidden] { display: none; }
|
|
2455
|
+
.attachment-input { display: none; }
|
|
2456
|
+
.attachment-tray[hidden] { display: none; }
|
|
2457
|
+
.attachment-tray {
|
|
2458
|
+
display: flex;
|
|
2459
|
+
flex-wrap: wrap;
|
|
2460
|
+
gap: 0.45rem;
|
|
2461
|
+
margin-top: 0.55rem;
|
|
2462
|
+
}
|
|
2463
|
+
.attachment-pill {
|
|
2464
|
+
display: inline-flex;
|
|
2465
|
+
align-items: center;
|
|
2466
|
+
gap: 0.42rem;
|
|
2467
|
+
max-width: min(100%, 28rem);
|
|
2468
|
+
padding: 0.38rem 0.48rem 0.38rem 0.6rem;
|
|
2469
|
+
border: 1px solid rgba(137, 180, 250, 0.32);
|
|
2470
|
+
border-radius: 999px;
|
|
2471
|
+
color: var(--text);
|
|
2472
|
+
background: linear-gradient(135deg, rgba(var(--ctp-surface-rgb), 0.82), rgba(var(--ctp-crust-rgb), 0.78));
|
|
2473
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 0 0.85rem rgba(137, 180, 250, 0.08);
|
|
2474
|
+
}
|
|
2475
|
+
.attachment-pill-icon { flex: 0 0 auto; }
|
|
2476
|
+
.attachment-pill-name {
|
|
2477
|
+
min-width: 0;
|
|
2478
|
+
overflow: hidden;
|
|
2479
|
+
text-overflow: ellipsis;
|
|
2480
|
+
white-space: nowrap;
|
|
2481
|
+
font-weight: 800;
|
|
2482
|
+
}
|
|
2483
|
+
.attachment-pill-meta {
|
|
2484
|
+
flex: 0 0 auto;
|
|
2485
|
+
color: rgba(var(--ctp-subtext-rgb), 0.72);
|
|
2486
|
+
font-size: 0.78rem;
|
|
2487
|
+
}
|
|
2488
|
+
.attachment-remove-button {
|
|
2489
|
+
min-height: 0;
|
|
2490
|
+
padding: 0.12rem 0.34rem;
|
|
2491
|
+
border-radius: 999px;
|
|
2492
|
+
color: var(--ctp-red);
|
|
2493
|
+
border-color: rgba(243, 139, 168, 0.32);
|
|
2494
|
+
background: rgba(243, 139, 168, 0.08);
|
|
2495
|
+
box-shadow: none;
|
|
2496
|
+
}
|
|
2497
|
+
.attachment-remove-button:hover {
|
|
2498
|
+
color: #11111b;
|
|
2499
|
+
background: var(--ctp-red);
|
|
2500
|
+
border-color: transparent;
|
|
2501
|
+
}
|
|
2502
|
+
.composer.drag-over {
|
|
2503
|
+
outline: 2px dashed rgba(137, 180, 250, 0.72);
|
|
2504
|
+
outline-offset: -0.42rem;
|
|
2505
|
+
background: linear-gradient(180deg, rgba(137, 180, 250, 0.14), rgba(var(--ctp-crust-rgb), 0.86));
|
|
2506
|
+
}
|
|
1922
2507
|
.command-suggest {
|
|
1923
2508
|
margin-top: 0.5rem;
|
|
1924
2509
|
max-height: 15rem;
|
|
@@ -1994,6 +2579,32 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
1994
2579
|
}
|
|
1995
2580
|
.composer-actions-button { display: none; }
|
|
1996
2581
|
.composer-actions-panel { display: contents; }
|
|
2582
|
+
.composer-abort-button,
|
|
2583
|
+
.composer-row button.primary {
|
|
2584
|
+
min-width: 5.8rem;
|
|
2585
|
+
}
|
|
2586
|
+
.composer-abort-button {
|
|
2587
|
+
position: relative;
|
|
2588
|
+
overflow: hidden;
|
|
2589
|
+
box-shadow: 0 0 1rem rgba(243, 139, 168, 0.30), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
2590
|
+
}
|
|
2591
|
+
.composer-abort-button.long-pressing {
|
|
2592
|
+
transform: translateY(0);
|
|
2593
|
+
box-shadow: 0 0 1.4rem rgba(243, 139, 168, 0.50), inset 0 1px 0 rgba(255,255,255,0.08);
|
|
2594
|
+
}
|
|
2595
|
+
.composer-abort-button.long-pressing::after {
|
|
2596
|
+
content: "";
|
|
2597
|
+
position: absolute;
|
|
2598
|
+
inset: 0;
|
|
2599
|
+
pointer-events: none;
|
|
2600
|
+
background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
|
|
2601
|
+
transform: scaleX(0);
|
|
2602
|
+
transform-origin: left center;
|
|
2603
|
+
animation: abort-long-press-fill 700ms linear forwards;
|
|
2604
|
+
}
|
|
2605
|
+
@keyframes abort-long-press-fill {
|
|
2606
|
+
to { transform: scaleX(1); }
|
|
2607
|
+
}
|
|
1997
2608
|
.composer-row label {
|
|
1998
2609
|
display: flex;
|
|
1999
2610
|
align-items: center;
|
|
@@ -2023,6 +2634,11 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2023
2634
|
.composer-publish-menu.open {
|
|
2024
2635
|
z-index: 100;
|
|
2025
2636
|
}
|
|
2637
|
+
.composer-git-button,
|
|
2638
|
+
.composer-publish-button {
|
|
2639
|
+
width: 2.9rem;
|
|
2640
|
+
}
|
|
2641
|
+
.composer-attach-button,
|
|
2026
2642
|
.composer-compact-button,
|
|
2027
2643
|
.composer-git-button,
|
|
2028
2644
|
.composer-publish-button {
|
|
@@ -2047,6 +2663,7 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2047
2663
|
linear-gradient(120deg, rgba(250, 179, 135, 0.13), rgba(245, 194, 231, 0.10)),
|
|
2048
2664
|
linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
|
|
2049
2665
|
}
|
|
2666
|
+
.composer-attach-button:hover,
|
|
2050
2667
|
.composer-compact-button:hover,
|
|
2051
2668
|
.composer-git-button:hover,
|
|
2052
2669
|
.composer-publish-button:hover,
|
|
@@ -2111,15 +2728,21 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2111
2728
|
background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow));
|
|
2112
2729
|
box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20);
|
|
2113
2730
|
}
|
|
2731
|
+
.composer button[data-tooltip] {
|
|
2732
|
+
position: relative;
|
|
2733
|
+
}
|
|
2114
2734
|
.composer-row button[data-tooltip]::before,
|
|
2115
|
-
.composer-row button[data-tooltip]::after
|
|
2735
|
+
.composer-row button[data-tooltip]::after,
|
|
2736
|
+
.composer-input-row button[data-tooltip]::before,
|
|
2737
|
+
.composer-input-row button[data-tooltip]::after {
|
|
2116
2738
|
position: absolute;
|
|
2117
2739
|
right: 0;
|
|
2118
2740
|
pointer-events: none;
|
|
2119
2741
|
opacity: 0;
|
|
2120
2742
|
transition: opacity 140ms ease, transform 140ms ease;
|
|
2121
2743
|
}
|
|
2122
|
-
.composer-row button[data-tooltip]::before
|
|
2744
|
+
.composer-row button[data-tooltip]::before,
|
|
2745
|
+
.composer-input-row button[data-tooltip]::before {
|
|
2123
2746
|
content: "";
|
|
2124
2747
|
bottom: calc(100% + 0.42rem);
|
|
2125
2748
|
width: 0.72rem;
|
|
@@ -2130,7 +2753,8 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2130
2753
|
transform: translate(-1.2rem, 0.24rem) rotate(45deg);
|
|
2131
2754
|
z-index: 29;
|
|
2132
2755
|
}
|
|
2133
|
-
.composer-row button[data-tooltip]::after
|
|
2756
|
+
.composer-row button[data-tooltip]::after,
|
|
2757
|
+
.composer-input-row button[data-tooltip]::after {
|
|
2134
2758
|
content: attr(data-tooltip);
|
|
2135
2759
|
bottom: calc(100% + 0.72rem);
|
|
2136
2760
|
z-index: 30;
|
|
@@ -2158,13 +2782,22 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2158
2782
|
.composer-row button[data-tooltip]:focus-visible::before,
|
|
2159
2783
|
.composer-row button[data-tooltip]:focus-visible::after,
|
|
2160
2784
|
.composer-row button[data-tooltip].tooltip-open::before,
|
|
2161
|
-
.composer-row button[data-tooltip].tooltip-open::after
|
|
2785
|
+
.composer-row button[data-tooltip].tooltip-open::after,
|
|
2786
|
+
.composer-input-row button[data-tooltip]:hover::before,
|
|
2787
|
+
.composer-input-row button[data-tooltip]:hover::after,
|
|
2788
|
+
.composer-input-row button[data-tooltip]:focus-visible::before,
|
|
2789
|
+
.composer-input-row button[data-tooltip]:focus-visible::after,
|
|
2790
|
+
.composer-input-row button[data-tooltip].tooltip-open::before,
|
|
2791
|
+
.composer-input-row button[data-tooltip].tooltip-open::after {
|
|
2162
2792
|
opacity: 1;
|
|
2163
2793
|
transform: translateY(0);
|
|
2164
2794
|
}
|
|
2165
2795
|
.composer-row button[data-tooltip]:hover::before,
|
|
2166
2796
|
.composer-row button[data-tooltip]:focus-visible::before,
|
|
2167
|
-
.composer-row button[data-tooltip].tooltip-open::before
|
|
2797
|
+
.composer-row button[data-tooltip].tooltip-open::before,
|
|
2798
|
+
.composer-input-row button[data-tooltip]:hover::before,
|
|
2799
|
+
.composer-input-row button[data-tooltip]:focus-visible::before,
|
|
2800
|
+
.composer-input-row button[data-tooltip].tooltip-open::before {
|
|
2168
2801
|
transform: translate(-1.2rem, 0) rotate(45deg);
|
|
2169
2802
|
}
|
|
2170
2803
|
|
|
@@ -2333,6 +2966,118 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2333
2966
|
.dialog-input { width: 100%; padding: 0.7rem; }
|
|
2334
2967
|
.dialog-editor { width: 100%; min-height: 12rem; padding: 0.7rem; }
|
|
2335
2968
|
|
|
2969
|
+
.native-command-dialog {
|
|
2970
|
+
width: min(56rem, calc(100vw - 2rem));
|
|
2971
|
+
}
|
|
2972
|
+
.native-command-search {
|
|
2973
|
+
margin: 0.6rem 0 0.7rem;
|
|
2974
|
+
}
|
|
2975
|
+
.native-command-body {
|
|
2976
|
+
display: grid;
|
|
2977
|
+
gap: 0.7rem;
|
|
2978
|
+
max-height: min(34rem, 58vh);
|
|
2979
|
+
overflow: auto;
|
|
2980
|
+
padding-right: 0.12rem;
|
|
2981
|
+
}
|
|
2982
|
+
.native-command-empty,
|
|
2983
|
+
.native-command-note {
|
|
2984
|
+
margin: 0;
|
|
2985
|
+
padding: 0.72rem 0.82rem;
|
|
2986
|
+
border: 1px solid rgba(180, 190, 254, 0.14);
|
|
2987
|
+
border-radius: 0.82rem;
|
|
2988
|
+
background: rgba(var(--ctp-crust-rgb), 0.46);
|
|
2989
|
+
white-space: pre-wrap;
|
|
2990
|
+
}
|
|
2991
|
+
.native-selector-list {
|
|
2992
|
+
display: grid;
|
|
2993
|
+
gap: 0.45rem;
|
|
2994
|
+
}
|
|
2995
|
+
.native-selector-item {
|
|
2996
|
+
display: grid;
|
|
2997
|
+
gap: 0.18rem;
|
|
2998
|
+
justify-items: stretch;
|
|
2999
|
+
width: 100%;
|
|
3000
|
+
padding: 0.62rem 0.72rem 0.62rem calc(0.72rem + (var(--tree-depth, 0) * 1rem));
|
|
3001
|
+
text-align: left;
|
|
3002
|
+
border-color: rgba(180, 190, 254, 0.16);
|
|
3003
|
+
background: rgba(var(--ctp-surface-rgb), 0.36);
|
|
3004
|
+
}
|
|
3005
|
+
.native-selector-item:hover,
|
|
3006
|
+
.native-selector-item:focus-visible,
|
|
3007
|
+
.native-selector-item.active {
|
|
3008
|
+
border-color: rgba(148, 226, 213, 0.45);
|
|
3009
|
+
background: linear-gradient(90deg, rgba(148, 226, 213, 0.16), rgba(137, 180, 250, 0.10));
|
|
3010
|
+
}
|
|
3011
|
+
.native-selector-item:disabled {
|
|
3012
|
+
cursor: default;
|
|
3013
|
+
opacity: 0.62;
|
|
3014
|
+
}
|
|
3015
|
+
.native-selector-title {
|
|
3016
|
+
display: flex;
|
|
3017
|
+
flex-wrap: wrap;
|
|
3018
|
+
gap: 0.45rem;
|
|
3019
|
+
align-items: center;
|
|
3020
|
+
color: var(--text);
|
|
3021
|
+
}
|
|
3022
|
+
.native-selector-badge {
|
|
3023
|
+
padding: 0.1rem 0.38rem;
|
|
3024
|
+
border: 1px solid rgba(166, 227, 161, 0.32);
|
|
3025
|
+
border-radius: 999px;
|
|
3026
|
+
color: var(--ctp-green);
|
|
3027
|
+
font-size: 0.68rem;
|
|
3028
|
+
font-weight: 900;
|
|
3029
|
+
text-transform: uppercase;
|
|
3030
|
+
letter-spacing: 0.07em;
|
|
3031
|
+
}
|
|
3032
|
+
.native-selector-detail,
|
|
3033
|
+
.native-selector-meta,
|
|
3034
|
+
.native-settings-hint {
|
|
3035
|
+
color: rgba(var(--ctp-subtext-rgb), 0.74);
|
|
3036
|
+
overflow-wrap: anywhere;
|
|
3037
|
+
}
|
|
3038
|
+
.native-selector-meta {
|
|
3039
|
+
font-size: 0.76rem;
|
|
3040
|
+
}
|
|
3041
|
+
.native-settings-grid,
|
|
3042
|
+
.native-tree-options {
|
|
3043
|
+
display: grid;
|
|
3044
|
+
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
|
|
3045
|
+
gap: 0.72rem;
|
|
3046
|
+
}
|
|
3047
|
+
.native-settings-field,
|
|
3048
|
+
.native-settings-toggle {
|
|
3049
|
+
display: grid;
|
|
3050
|
+
gap: 0.42rem;
|
|
3051
|
+
padding: 0.72rem;
|
|
3052
|
+
border: 1px solid rgba(180, 190, 254, 0.14);
|
|
3053
|
+
border-radius: 0.82rem;
|
|
3054
|
+
background: rgba(var(--ctp-crust-rgb), 0.44);
|
|
3055
|
+
}
|
|
3056
|
+
.native-settings-toggle {
|
|
3057
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
3058
|
+
align-items: start;
|
|
3059
|
+
}
|
|
3060
|
+
.native-settings-label {
|
|
3061
|
+
color: rgba(var(--ctp-text-rgb), 0.74);
|
|
3062
|
+
font-size: 0.72rem;
|
|
3063
|
+
font-weight: 900;
|
|
3064
|
+
letter-spacing: 0.08em;
|
|
3065
|
+
text-transform: uppercase;
|
|
3066
|
+
}
|
|
3067
|
+
.native-settings-hint {
|
|
3068
|
+
display: block;
|
|
3069
|
+
margin-top: 0.18rem;
|
|
3070
|
+
font-size: 0.78rem;
|
|
3071
|
+
font-weight: 500;
|
|
3072
|
+
}
|
|
3073
|
+
.native-tree-options {
|
|
3074
|
+
position: sticky;
|
|
3075
|
+
top: 0;
|
|
3076
|
+
z-index: 1;
|
|
3077
|
+
padding-bottom: 0.45rem;
|
|
3078
|
+
background: linear-gradient(180deg, rgba(var(--ctp-mantle-rgb), 0.98), rgba(var(--ctp-mantle-rgb), 0.86));
|
|
3079
|
+
}
|
|
3080
|
+
|
|
2336
3081
|
.path-picker-dialog {
|
|
2337
3082
|
width: min(48rem, calc(100vw - 2rem));
|
|
2338
3083
|
}
|
|
@@ -2537,7 +3282,7 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2537
3282
|
body.side-panel-collapsed .terminal-tabs-shell { padding-right: 2.75rem; }
|
|
2538
3283
|
.terminal-tabs-toggle-button {
|
|
2539
3284
|
display: block;
|
|
2540
|
-
width: min(14rem, calc(100vw -
|
|
3285
|
+
width: min(14rem, calc(100vw - 8.8rem));
|
|
2541
3286
|
min-height: 28px;
|
|
2542
3287
|
padding: 0.16rem 0.58rem;
|
|
2543
3288
|
overflow: hidden;
|
|
@@ -2565,8 +3310,14 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2565
3310
|
top: calc(0.12rem + env(safe-area-inset-top));
|
|
2566
3311
|
right: 0.42rem;
|
|
2567
3312
|
}
|
|
3313
|
+
.terminal-close-all-button {
|
|
3314
|
+
min-height: 28px;
|
|
3315
|
+
padding: 0.16rem 0.46rem;
|
|
3316
|
+
border-radius: 0.58rem;
|
|
3317
|
+
font-size: 0.72rem;
|
|
3318
|
+
line-height: 1.1;
|
|
3319
|
+
}
|
|
2568
3320
|
.terminal-tabs {
|
|
2569
|
-
position: absolute;
|
|
2570
3321
|
left: 0.55rem;
|
|
2571
3322
|
right: 0.55rem;
|
|
2572
3323
|
top: calc(100% + 0.35rem);
|
|
@@ -2841,12 +3592,11 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2841
3592
|
margin-top: 0.35rem;
|
|
2842
3593
|
}
|
|
2843
3594
|
body.mobile-keyboard-open .composer-actions-button,
|
|
2844
|
-
body.mobile-keyboard-open #steerButton,
|
|
2845
|
-
body.mobile-keyboard-open #followUpButton,
|
|
2846
3595
|
body.mobile-keyboard-open .composer-actions-panel {
|
|
2847
3596
|
display: none !important;
|
|
2848
3597
|
}
|
|
2849
|
-
body.mobile-keyboard-open .composer-row button.primary
|
|
3598
|
+
body.mobile-keyboard-open .composer-row button.primary,
|
|
3599
|
+
body.mobile-keyboard-open .composer-abort-button:not([hidden]) {
|
|
2850
3600
|
grid-column: 1 / -1;
|
|
2851
3601
|
min-height: 44px;
|
|
2852
3602
|
}
|
|
@@ -2893,6 +3643,8 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
2893
3643
|
font-size: 0.92rem;
|
|
2894
3644
|
}
|
|
2895
3645
|
body:not(.pi-run-active):not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
|
|
3646
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-abort-button:not([hidden]) { grid-column: span 2; }
|
|
3647
|
+
body.pi-run-active:not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
|
|
2896
3648
|
.composer-row > #followUpButton,
|
|
2897
3649
|
.composer-row > #steerButton,
|
|
2898
3650
|
.composer-actions-button { grid-column: span 2; }
|
|
@@ -3006,6 +3758,9 @@ summary { cursor: pointer; color: var(--warning); }
|
|
|
3006
3758
|
.composer-row button[data-tooltip].tooltip-open::after { display: block; }
|
|
3007
3759
|
.git-workflow-actions button,
|
|
3008
3760
|
#gitWorkflowCancelButton { min-height: 44px; }
|
|
3761
|
+
.native-command-body { max-height: min(28rem, 54dvh); }
|
|
3762
|
+
.native-settings-grid,
|
|
3763
|
+
.native-tree-options { grid-template-columns: 1fr; }
|
|
3009
3764
|
.path-picker-current-row { grid-template-columns: 1fr; }
|
|
3010
3765
|
.path-picker-add-fast-pick { width: 100%; }
|
|
3011
3766
|
.path-picker-fast-pick { grid-template-columns: minmax(0, 1fr) 44px; }
|