CoCalc -- inlineChat.css

GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css
³²⁹⁷ views
1
/*---------------------------------------------------------------------------------------------
2
 *  Copyright (c) Microsoft Corporation. All rights reserved.
3
 *  Licensed under the MIT License. See License.txt in the project root for license information.
4
 *--------------------------------------------------------------------------------------------*/
5

6

7
.monaco-workbench .inline-chat {
8
	color: inherit;
9
	border-radius: 4px;
10
	border: 1px solid var(--vscode-inlineChat-border);
11
	box-shadow: 0 2px 4px 0 var(--vscode-widget-shadow);
12
	background: var(--vscode-inlineChat-background);
13
	padding-top: 3px;
14
	position: relative;
15
}
16

17
.monaco-workbench .zone-widget.inline-chat-widget {
18
	z-index: 3;
19
}
20

21
.monaco-workbench .zone-widget.inline-chat-widget .interactive-session {
22
	max-width: unset;
23
}
24

25
.monaco-workbench .zone-widget.inline-chat-widget .interactive-session .chat-input-container {
26
	border-color: var(--vscode-inlineChat-border);
27
}
28

29
.monaco-workbench .zone-widget.inline-chat-widget .interactive-session .chat-input-container:focus-within {
30
	border-color: var(--vscode-focusBorder);
31
}
32

33
.monaco-workbench .zone-widget.inline-chat-widget .interactive-session .chat-input-container .interactive-input-part {
34
	padding-top: 0px
35
}
36

37
.monaco-workbench .zone-widget.inline-chat-widget > .zone-widget-container {
38
	background: var(--vscode-inlineChat-background);
39
}
40

41
@property --inline-chat-frame-progress {
42
	syntax: '<percentage>';
43
	initial-value: 0%;
44
	inherits: false;
45
}
46

47
@keyframes shift {
48
	0% {
49
		--inline-chat-frame-progress: 0%;
50
	}
51
	50% {
52
		--inline-chat-frame-progress: 100%;
53
	}
54
	100% {
55
		--inline-chat-frame-progress: 0%;
56
	}
57
}
58

59
.monaco-workbench .zone-widget.inline-chat-widget > .zone-widget-container.busy {
60
	--inline-chat-frame-progress: 0%;
61
	border-image: linear-gradient(90deg, var(--vscode-editorGutter-addedBackground) var(--inline-chat-frame-progress), var(--vscode-button-background)) 1;
62
	animation: 3s shift linear infinite;
63
}
64

65
.monaco-workbench .zone-widget.inline-chat-widget > .zone-widget-container > .inline-chat {
66
	color: inherit;
67
	border-radius: unset;
68
	border: unset;
69
	box-shadow: unset;
70
	background: var(--vscode-inlineChat-background);
71
	position: relative;
72
	outline: none;
73
}
74

75
.monaco-workbench .inline-chat .chat-widget {
76
	.checkpoint-container,
77
	.checkpoint-restore-container {
78
		display: none;
79
	}
80
}
81

82
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part {
83
	padding: 4px 0 0 0;
84
}
85

86
.monaco-workbench .inline-chat-2 .inline-chat .chat-widget .interactive-session .interactive-input-part {
87
	padding: 8px 0 0 0;
88
}
89

90
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-execute-toolbar {
91
	margin-bottom: 1px;
92
}
93

94
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-input-and-execute-toolbar {
95
	width: 100%;
96
	border-radius: 2px;
97
}
98

99

100
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-input-part .interactive-input-followups .interactive-session-followups {
101
	margin: 3px 0 0 4px;
102
}
103

104
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .monaco-scrollable-element {
105
	border-top-left-radius: 3px;
106
	border-top-right-radius: 3px;
107
}
108

109
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .monaco-scrollable-element .shadow.top {
110
	box-shadow: none;
111
}
112

113
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact {
114
	gap: 8px;
115
	padding: 3px 20px 3px 8px;
116
}
117

118
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact .header .avatar {
119
	outline-offset: -1px;
120
}
121

122
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.interactive-item-compact .chat-notification-widget {
123
	margin-bottom: 0;
124
	padding: 0;
125
	border: none;
126
}
127

128
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-request {
129
	border: none;
130
}
131

132
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.minimal > .header {
133
	top: 5px;
134
	right: 10px;
135
	display: none;
136
}
137

138
.monaco-workbench .inline-chat .chat-widget .interactive-session .interactive-list .interactive-item-container.minimal > .chat-footer-toolbar {
139
	display: none;
140
}
141

142
.monaco-workbench .inline-chat .chat-widget .interactive-session .chat-input-toolbars {
143
	max-width: 66%;
144
}
145

146
.monaco-workbench .inline-chat .chat-widget .interactive-session .chat-input-toolbars > .chat-execute-toolbar .chat-modelPicker-item {
147
	min-width: 40px;
148
	max-width: 132px;
149
}
150

151
/* status */
152

153
.monaco-workbench .inline-chat > .status {
154
	display: flex;
155
	align-items: center;
156
	padding-right: 16px;
157
}
158

159
.monaco-workbench .inline-chat > .status {
160
	.label,
161
	.actions {
162
		padding-top: 8px;
163
	}
164
}
165

166
.monaco-workbench .inline-chat .status .actions.hidden {
167
	display: none;
168
}
169

170
.monaco-workbench .inline-chat .status .label {
171
	overflow: hidden;
172
	color: var(--vscode-descriptionForeground);
173
	font-size: 11px;
174
	display: flex;
175
	white-space: nowrap;
176
}
177

178
.monaco-workbench .inline-chat .status .label.info {
179
	margin-right: auto;
180
	padding-left: 2px;
181
}
182

183
.monaco-workbench .inline-chat .status .label.status {
184
	margin-left: auto;
185
	padding-right: 8px;
186
	padding-left: 8px;
187
}
188

189
.monaco-workbench .inline-chat .status .label.hidden,
190
.monaco-workbench .inline-chat .status .label:empty {
191
	display: none;
192
}
193

194
.monaco-workbench .inline-chat .status .label.error {
195
	color: var(--vscode-errorForeground);
196
}
197

198
.monaco-workbench .inline-chat .status .label.warn {
199
	color: var(--vscode-editorWarning-foreground);
200
}
201

202
.monaco-workbench .inline-chat .status .label > .codicon {
203
	padding: 0 3px;
204
	font-size: 12px;
205
	line-height: 18px;
206
}
207

208
.monaco-workbench .inline-chat .status .rerun {
209
	display: inline-flex;
210
}
211

212
.monaco-workbench .inline-chat .status .rerun:not(:empty) {
213
	padding-top: 8px;
214
	padding-left: 4px;
215
}
216

217
.monaco-workbench .inline-chat .status .rerun .agentOrSlashCommandDetected A {
218
	cursor: pointer;
219
	color: var(--vscode-textLink-foreground);
220
}
221

222
.monaco-workbench .inline-chat .interactive-item-container.interactive-response .detail-container .detail .agentOrSlashCommandDetected,
223
.monaco-workbench .inline-chat .interactive-item-container.interactive-response .detail-container .chat-animated-ellipsis {
224
	display: none;
225
}
226

227
.monaco-workbench .inline-chat .status .actions,
228
.monaco-workbench .inline-chat-diff-overlay {
229

230
	display: flex;
231
	height: 18px;
232

233
	.actions-container {
234
		gap: 3px
235
	}
236

237
	.monaco-button-dropdown > .monaco-dropdown-button {
238
		display: flex;
239
		align-items: center;
240
		padding: 0 4px;
241
	}
242

243
	.monaco-button.codicon {
244
		display: flex;
245
	}
246

247
	.monaco-button.codicon::before {
248
		align-self: center;
249
		color: var(--vscode-button-foreground);
250
	}
251

252
	.monaco-button.secondary.codicon::before {
253
		align-self: center;
254
		color: var(--vscode-button-secondaryForeground);
255
	}
256

257
	.monaco-text-button {
258
		padding: 0 6px;
259
		font-size: 12px;
260
		white-space: nowrap;
261
	}
262
}
263

264
.monaco-workbench .inline-chat .status .actions {
265
	gap: 4px;
266
}
267

268
.monaco-workbench .inline-chat .status .actions.secondary {
269
	margin-left: auto;
270
	display: none;
271
}
272

273
.monaco-workbench .inline-chat .status:hover .actions.secondary,
274
.monaco-workbench .inline-chat:focus .status .actions.secondary,
275
.monaco-workbench .inline-chat .status:focus-within .actions.secondary {
276
	display: inherit;
277
}
278

279
.monaco-workbench .inline-chat-diff-overlay {
280

281
	.monaco-button {
282
		border-radius: 0;
283
	}
284

285
	.monaco-button.secondary.checked {
286
		background-color: var(--vscode-button-secondaryHoverBackground);
287
	}
288

289
	.monaco-button:first-child {
290
		border-top-left-radius: 2px;
291
		border-bottom-left-radius: 2px;
292
	}
293

294
	.monaco-button:last-child {
295
		border-top-right-radius: 2px;
296
		border-bottom-right-radius: 2px;
297
	}
298

299
	.monaco-button:not(:last-child) {
300
		border-right: 1px solid var(--vscode-button-foreground);
301
	}
302
}
303

304

305
/* TODO@jrieken not needed? */
306
.monaco-workbench .inline-chat .status .monaco-toolbar .action-label.checked {
307
	color: var(--vscode-inputOption-activeForeground);
308
	background-color: var(--vscode-inputOption-activeBackground);
309
	outline: 1px solid var(--vscode-inputOption-activeBorder);
310
}
311

312

313
.monaco-workbench .inline-chat .status .monaco-toolbar .action-item.button-item .action-label:is(:hover, :focus) {
314
	background-color: var(--vscode-button-hoverBackground);
315
}
316

317
/* accessible diff viewer */
318

319
.monaco-workbench .inline-chat .diff-review {
320
	padding: 4px 6px;
321
	background-color: unset;
322
}
323

324
.monaco-workbench .inline-chat .diff-review.hidden {
325
	display: none;
326
}
327

328
/* decoration styles */
329

330
.monaco-workbench .inline-chat-inserted-range {
331
	background-color: var(--vscode-inlineChatDiff-inserted);
332
}
333

334
.monaco-workbench .inline-chat-inserted-range-linehighlight {
335
	background-color: var(--vscode-diffEditor-insertedLineBackground);
336
}
337

338
.monaco-workbench .inline-chat-original-zone2 {
339
	background-color: var(--vscode-diffEditor-removedLineBackground);
340
	opacity: 0.8;
341
}
342

343
.monaco-workbench .inline-chat-lines-inserted-range {
344
	background-color: var(--vscode-diffEditor-insertedTextBackground);
345
}
346

347
/* gutter decoration */
348

349
.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-opaque,
350
.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-transparent {
351
	display: block;
352
	cursor: pointer;
353
	transition: opacity .2s ease-in-out;
354
}
355

356
.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-opaque {
357
	opacity: 0.5;
358
}
359

360
.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-transparent {
361
	opacity: 0;
362
}
363

364
.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-opaque:hover,
365
.monaco-workbench .glyph-margin-widgets .cgmr.codicon-inline-chat-transparent:hover {
366
	opacity: 1;
367
}
368

369
.monaco-workbench .inline-chat .chat-attached-context {
370
	padding: 3px 0px;
371
}
372

373

374
/* HINT */
375

376
.monaco-workbench .monaco-editor .inline-chat-hint {
377
	cursor: pointer;
378
	color: var(--vscode-editorGhostText-foreground);
379
}
380

381
.monaco-workbench .monaco-editor .inline-chat-hint.embedded {
382
	border: 1px solid var(--vscode-editorSuggestWidget-border);
383
	border-radius: 3px;
384
}
385

386
Product

Resources

Company
