CoCalc -- review.css

GitHub Repository: microsoft/vscode
Path: blob/main/src/vs/workbench/contrib/comments/browser/media/review.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
.review-widget {
7
	width: 100%;
8
	position: absolute;
9
}
10

11
.monaco-editor .review-widget,
12
.monaco-editor .review-widget {
13
	background-color: var(--vscode-peekViewResult-background);
14
}
15
.review-widget .hidden {
16
	display: none !important;
17
}
18

19
.review-widget .body {
20
	overflow: hidden;
21
}
22

23
.review-widget .body .review-comment {
24
	padding: 8px 16px 8px 20px;
25
	display: flex;
26
}
27

28
@keyframes monaco-review-widget-focus {
29
	0% {
30
		background: var(--vscode-peekViewResult-selectionBackground);
31
	}
32

33
	100% {
34
		background: transparent;
35
	}
36
}
37

38
.review-widget .body .review-comment.focus {
39
	animation: monaco-review-widget-focus 3s ease 0s;
40
}
41
.review-widget .body .review-comment .comment-actions {
42
	margin-left: auto;
43
}
44

45
.review-widget .body .review-comment .comment-actions .monaco-toolbar {
46
	height: 22px;
47
}
48

49
.review-widget .body .review-comment .comment-title .comment-header-info {
50
	overflow: hidden;
51
	text-overflow: ellipsis;
52
}
53

54
.review-widget .body .review-comment .comment-title {
55
	display: flex;
56
	width: 100%;
57
}
58

59
.review-widget .body .review-comment .comment-title .action-label.codicon {
60
	line-height: 18px;
61
}
62

63
.review-widget .body .review-comment .comment-title .monaco-dropdown .toolbar-toggle-more {
64
	width: 16px;
65
	height: 18px;
66
	line-height: 18px;
67
	vertical-align: middle;
68
}
69

70
.review-widget .body .comment-body blockquote {
71
	margin: 0 7px 0 5px;
72
	padding: 0 16px 0 10px;
73
	border-left-width: 5px;
74
	border-left-style: solid;
75
}
76

77
.review-widget .body .review-comment .avatar-container {
78
	margin-top: 4px !important;
79
}
80

81
.review-widget .body .avatar-container img.avatar {
82
	height: 28px;
83
	width: 28px;
84
	display: inline-block;
85
	overflow: hidden;
86
	line-height: 1;
87
	vertical-align: middle;
88
	border-radius: 3px;
89
	border-style: none;
90
}
91

92
.review-widget .body .comment-reactions .monaco-text-button {
93
	margin: 0 7px 0 0;
94
	width: 30px;
95
	background-color: transparent;
96
	border: 1px solid grey;
97
	border-radius: 3px;
98
}
99

100
.review-widget .body .review-comment .review-comment-contents {
101
	padding-left: 20px;
102
	user-select: text;
103
	-webkit-user-select: text;
104
	width: 100%;
105
	overflow: hidden;
106
}
107

108
.review-widget .body pre {
109
	overflow: auto;
110
	word-wrap: normal;
111
	white-space: pre;
112
}
113

114

115
.review-widget .body .review-comment .review-comment-contents .author {
116
	line-height: 22px;
117
}
118

119

120
.review-widget .body .review-comment .review-comment-contents .isPending {
121
	line-height: 22px;
122
	margin: 0 5px 0 5px;
123
	padding: 0 2px 0 2px;
124
	font-style: italic;
125
}
126

127
.review-widget .body .review-comment .review-comment-contents .timestamp {
128
	line-height: 22px;
129
	margin: 0 5px 0 5px;
130
	padding: 0 2px 0 2px;
131
}
132

133
.review-widget .body .review-comment .review-comment-contents .comment-body .comment-body-plainstring {
134
	white-space: pre-wrap;
135
}
136

137
.review-widget .body .review-comment .review-comment-contents .comment-body {
138
	padding-top: 4px;
139
}
140

141
.review-widget .body .review-comment .review-comment-contents .comment-body-max-height {
142
	max-height: 20em;
143
}
144

145
.review-widget .body .review-comment .review-comment-contents .comment-reactions {
146
	margin-top: 8px;
147
	min-height: 25px;
148
}
149

150
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item .action-label {
151
	padding: 1px 4px;
152
	white-space: pre;
153
	text-align: center;
154
	font-size: 12px;
155
	display: flex;
156
}
157

158
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item .action-label .reaction-icon {
159
	background-size: 14px;
160
	background-position: left center;
161
	background-repeat: no-repeat;
162
	width: 14px;
163
	-webkit-font-smoothing: antialiased;
164
	-moz-osx-font-smoothing: grayscale;
165
	display: inline-block;
166
	margin-right: 4px;
167
}
168

169
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item .action-label .reaction-label {
170
	line-height: 20px;
171
	margin-right: 4px;
172
}
173

174
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.toolbar-toggle-pickReactions {
175
	background-size: 16px;
176
	font-size: 16px;
177
	width: 26px;
178
	height: 16px;
179
	background-repeat: no-repeat;
180
	background-position: center;
181
	margin-top: 3px;
182
	border: none;
183
}
184

185
.review-widget .body .review-comment .comment-title .action-label {
186
	display: block;
187
	height: 16px;
188
	line-height: 16px;
189
	background-size: 16px;
190
	background-position: center center;
191
	background-repeat: no-repeat;
192
}
193

194
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label {
195
	border: 1px solid;
196
}
197

198
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.disabled {
199
	opacity: 0.6;
200
}
201

202
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.active:hover {
203
	background-color: var(--vscode-statusBarItem-hoverBackground);
204
}
205

206
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label:active {
207
	background-color: var(--vscode-statusBarItem-activeBackground);
208
	border: 1px solid transparent;
209
}
210
.review-widget .body .review-comment .review-comment-contents .comment-body a {
211
	cursor: pointer;
212
}
213

214
.review-widget .body .comment-body p,
215
.review-widget .body .comment-body ul {
216
	margin: 8px 0;
217
}
218

219
.review-widget .body .comment-body p:first-child,
220
.review-widget .body .comment-body ul:first-child {
221
	margin-top: 0;
222
}
223

224
.review-widget .body .comment-body p:last-child,
225
.review-widget .body.comment-body ul:last-child {
226
	margin-bottom: 0;
227
}
228

229
.review-widget .body .comment-body ul {
230
	padding-left: 20px;
231
}
232

233
.review-widget .body .comment-body li > p {
234
	margin-bottom: 0;
235
}
236

237
.review-widget .body .comment-body li > ul {
238
	margin-top: 0;
239
}
240

241
.review-widget .body .comment-body span {
242
	white-space: pre;
243
}
244

245
.review-widget .body .comment-body img {
246
	max-width: 100%;
247
}
248

249
.review-widget .body .comment-form-container {
250
	margin: 8px 20px;
251
}
252

253
.review-widget .validation-error {
254
	display: inline-block;
255
	overflow: hidden;
256
	text-align: left;
257
	width: 100%;
258
	box-sizing: border-box;
259
	padding: 0.4em;
260
	font-size: 12px;
261
	line-height: 17px;
262
	min-height: 34px;
263
	margin-top: -1px;
264
	margin-left: -1px;
265
	word-wrap: break-word;
266
}
267

268

269
.review-widget .body .comment-additional-actions {
270
	margin: 10px 20px;
271
}
272

273
.review-widget .body .comment-additional-actions .section-separator {
274
	border-top: 1px solid var(--vscode-menu-separatorBackground);
275
	margin: 10px 0 14px;
276
}
277

278
.review-widget .body .comment-additional-actions .button-bar {
279
	display: flex;
280
	white-space: nowrap;
281
}
282

283
.review-widget .body .comment-additional-actions .monaco-button,
284
.review-widget .body .comment-additional-actions .monaco-text-button,
285
.review-widget .body .comment-additional-actions .monaco-button-dropdown {
286
	display: flex;
287
	width: auto;
288
}
289

290
.review-widget .body .comment-additional-actions .button-bar > .monaco-text-button,
291
.review-widget .body .comment-additional-actions .button-bar > .monaco-button-dropdown {
292
	margin: 0 10px 0 0;
293
}
294

295
.review-widget .body .comment-additional-actions .button-bar .monaco-text-button {
296
	padding: 4px 10px;
297
}
298

299
.review-widget .body .comment-additional-actions .codicon-drop-down-button {
300
	align-items: center;
301
}
302

303
.review-widget .body .monaco-editor {
304
	color: var(--vscode-editor-foreground);
305
}
306

307
.review-widget .body .comment-form-container .comment-form {
308
	display: flex;
309
	flex-direction: row;
310
}
311

312
.review-widget .body .comment-form-container .comment-form .avatar-container {
313
	padding-right: 20px;
314
}
315

316
.review-widget .body .comment-form-container.expand .review-thread-reply-button {
317
	display: none;
318
}
319

320
.review-widget .body .comment-form-container.expand .monaco-editor,
321
.review-widget .body .comment-form-container.expand .form-actions {
322
	display: block;
323
	box-sizing: content-box;
324
}
325

326
.review-widget .body .comment-form-container .review-thread-reply-button {
327
	text-align: left;
328
	display: block;
329
	width: 100%;
330
	resize: vertical;
331
	border-radius: 0;
332
	box-sizing: border-box;
333
	padding: 6px 12px;
334
	font-weight: 600;
335
	line-height: 20px;
336
	white-space: nowrap;
337
	border: 0px;
338
	outline: 1px solid transparent;
339
	background-color: var(--vscode-editorCommentsWidget-replyInputBackground);
340
	color: var(--vscode-editor-foreground);
341
	font-size: inherit;
342
	font-family: var(--monaco-monospace-font);
343
}
344

345
.review-widget .body .comment-form-container .review-thread-reply-button:focus {
346
	outline-style: solid;
347
	outline-width: 1px;
348
}
349

350
.review-widget .body .comment-form-container .monaco-editor,
351
.review-widget .body .comment-form-container .monaco-editor .monaco-editor-background,
352
.review-widget .body .edit-container .monaco-editor .monaco-editor-background {
353
	background-color: var(--vscode-editorCommentsWidget-replyInputBackground);
354
}
355

356
.review-widget .body .comment-form-container .monaco-editor,
357
.review-widget .body .edit-container .monaco-editor {
358
	width: 100%;
359
	min-height: 90px;
360
	max-height: 500px;
361
	border-radius: 3px;
362
	border: 0px;
363
	box-sizing: content-box;
364
	padding: 6px 0 6px 12px;
365
}
366

367
.review-widget .body .comment-form-container .monaco-editor,
368
.review-widget .body .comment-form-container .form-actions {
369
	display: none;
370
}
371

372
.review-widget .body .comment-form-container .form-actions,
373
.review-widget .body .edit-container .form-actions {
374
	overflow: auto;
375
	margin: 10px 0;
376
}
377

378
.review-widget .body .edit-container .form-actions {
379
	padding-top: 10px;
380
}
381

382
.review-widget .body .edit-textarea {
383
	margin: 5px 0 10px 0;
384
	margin-right: 12px;
385
}
386

387
.review-widget .body .comment-form-container .form-actions .monaco-text-button,
388
.review-widget .body .edit-container .monaco-text-button {
389
	width: auto;
390
	padding: 4px 10px;
391
	margin-left: 5px;
392
}
393

394
.review-widget .body .form-actions .monaco-text-button {
395
	float: right;
396
}
397

398
.review-widget .head {
399
	box-sizing: border-box;
400
	display: flex;
401
	height: 100%;
402
}
403

404
.review-widget .head .review-title {
405
	display: inline-block;
406
	font-size: 13px;
407
	margin-left: 20px;
408
	cursor: default;
409
	overflow: hidden;
410
	text-overflow: ellipsis;
411
	white-space: nowrap;
412
}
413

414
.review-widget .head .review-title .dirname:not(:empty) {
415
	font-size: 0.9em;
416
	margin-left: 0.5em;
417
}
418

419
.review-widget .head .review-actions {
420
	flex: 1;
421
	text-align: right;
422
	padding-right: 2px;
423
}
424

425
.review-widget .head .review-actions > .monaco-action-bar {
426
	display: inline-block;
427
}
428

429
.review-widget .head .review-actions > .monaco-action-bar,
430
.review-widget .head .review-actions > .monaco-action-bar > .actions-container {
431
	height: 100%;
432
}
433

434
.review-widget .action-item {
435
	min-width: 18px;
436
	min-height: 20px;
437
	margin-left: 4px;
438
}
439

440
.review-widget .head .review-actions > .monaco-action-bar .action-label {
441
	margin: 0;
442
	line-height: inherit;
443
	background-repeat: no-repeat;
444
	background-position: center center;
445
}
446

447
.review-widget .head .review-actions > .monaco-action-bar .action-label.codicon {
448
	margin: 0;
449
}
450

451
.review-widget > .body {
452
	border-top: 1px solid;
453
	position: relative;
454
}
455

456
.monaco-editor .comment-range-glyph {
457
	margin-left: 10px;
458
	width: 4px !important;
459
	cursor: pointer;
460
	z-index: 10;
461
}
462

463
div.preview.inline .monaco-editor .comment-range-glyph {
464
	display: none !important;
465
}
466

467
.monaco-editor .comment-diff-added {
468
	border-left-width: 3px;
469
	border-left-style: solid;
470
}
471

472
.monaco-editor .comment-diff-added,
473
.monaco-editor .comment-range-glyph.multiline-add {
474
	border-left-color: var(--vscode-editorGutter-commentRangeForeground);
475
}
476

477
.monaco-editor .comment-diff-added:before,
478
.monaco-editor .comment-range-glyph.line-hover:before {
479
	background: var(--vscode-editorGutter-commentRangeForeground);
480
}
481

482
.monaco-editor .comment-thread:before,
483
.monaco-editor .comment-thread-unresolved:before {
484
	background: var(--vscode-editorGutter-commentRangeForeground);
485
}
486

487
.monaco-editor .comment-thread-range {
488
	background-color: var(--vscode-editorCommentsWidget-rangeBackground);
489
}
490

491
.monaco-editor .comment-thread-range-current {
492
	background-color: var(--vscode-editorCommentsWidget-rangeActiveBackground);
493
}
494

495
.monaco-editor .margin-view-overlays .comment-range-glyph.line-hover,
496
.monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread,
497
.monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread-unresolved {
498
	margin-left: 13px;
499
}
500

501
.monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before,
502
.monaco-editor .margin-view-overlays .comment-range-glyph.line-hover:before,
503
.monaco-editor .comment-range-glyph.comment-thread:before,
504
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before {
505
	position: absolute;
506
	height: 100%;
507
	width: 9px;
508
	left: -6px;
509
	z-index: 10;
510
	color: var(--vscode-editorGutter-commentGlyphForeground);
511
	text-align: center;
512
	display: flex;
513
	flex-direction: row;
514
	align-items: center;
515
	justify-content: center;
516
}
517

518
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before {
519
	color: var(--vscode-editorGutter-commentUnresolvedGlyphForeground);
520
}
521

522
.monaco-editor .margin-view-overlays .comment-range-glyph.multiline-add {
523
	border-left-width: 3px;
524
	border-left-style: dotted;
525
	height: 16px;
526
	margin-top: 2px;
527
}
528

529
.monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before,
530
.monaco-editor .margin-view-overlays .comment-range-glyph.line-hover:before {
531
	content: var(--vscode-icon-plus-content);
532
	font-family: var(--vscode-icon-plus-font-family);
533
	font-family: "codicon";
534
	border-radius: 3px;
535
	width: 18px !important;
536
	margin-left: -5px;
537
	padding-left: 1px;
538
}
539

540
.monaco-editor .comment-range-glyph.comment-thread,
541
.monaco-editor .comment-range-glyph.comment-thread-unresolved {
542
	z-index: 20;
543
}
544

545
.monaco-editor .comment-range-glyph.comment-thread:before,
546
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before {
547
	font-family: "codicon";
548
	font-size: 13px;
549
	width: 18px !important;
550
	line-height: 100%;
551
	border-radius: 3px;
552
	z-index: 20;
553
	margin-left: -5px;
554
	padding-top: 1px;
555
	padding-left: 1px;
556
}
557

558
.monaco-editor .comment-range-glyph.comment-thread:before {
559
	content: var(--vscode-icon-comment-add-content);
560
	font-family: var(--vscode-icon-comment-add-font-family);
561

562
}
563
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before {
564
	content: var(--vscode-icon-comment-unresolved-content);
565
	font-family: var(--vscode-icon-comment-unresolved-font-family);
566
}
567

568
.monaco-editor.inline-comment .margin-view-overlays .codicon-folding-expanded,
569
.monaco-editor.inline-comment .margin-view-overlays .codicon-folding-collapsed {
570
	margin-left: 11px;
571
}
572

573
.monaco-editor.inline-comment .margin-view-overlays .dirty-diff-glyph {
574
	margin-left: 25px;
575
}
576

577
Product

Resources

Company
