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: 8px 7px 8px 5px;
72
	padding: 2px 16px 2px 10px;
73
	border-left-width: 5px;
74
	border-left-style: solid;
75
	border-left-color: var(--vscode-textBlockQuote-border);
76
}
77

78
.review-widget .body .review-comment blockquote {
79
	background: var(--vscode-textBlockQuote-background);
80
}
81

82
.review-widget .body .review-comment .avatar-container {
83
	margin-top: 4px !important;
84
}
85

86
.review-widget .body .avatar-container img.avatar {
87
	height: 28px;
88
	width: 28px;
89
	display: inline-block;
90
	overflow: hidden;
91
	line-height: 1;
92
	vertical-align: middle;
93
	border-radius: 3px;
94
	border-style: none;
95
}
96

97
.review-widget .body .comment-reactions .monaco-text-button {
98
	margin: 0 7px 0 0;
99
	width: 30px;
100
	background-color: transparent;
101
	border: 1px solid grey;
102
	border-radius: 3px;
103
}
104

105
.review-widget .body .review-comment .review-comment-contents {
106
	padding-left: 20px;
107
	user-select: text;
108
	-webkit-user-select: text;
109
	width: 100%;
110
	overflow: hidden;
111
}
112

113
.review-widget .body pre {
114
	overflow: auto;
115
	word-wrap: normal;
116
	white-space: pre;
117
}
118

119

120
.review-widget .body .review-comment .review-comment-contents .author {
121
	line-height: 22px;
122
}
123

124

125
.review-widget .body .review-comment .review-comment-contents .isPending {
126
	line-height: 22px;
127
	margin: 0 5px 0 5px;
128
	padding: 0 2px 0 2px;
129
	font-style: italic;
130
}
131

132
.review-widget .body .review-comment .review-comment-contents .timestamp {
133
	line-height: 22px;
134
	margin: 0 5px 0 5px;
135
	padding: 0 2px 0 2px;
136
}
137

138
.review-widget .body .review-comment .review-comment-contents .comment-body .comment-body-plainstring {
139
	white-space: pre-wrap;
140
}
141

142
.review-widget .body .review-comment .review-comment-contents .comment-body {
143
	padding-top: 4px;
144
}
145

146
.review-widget .body .review-comment .review-comment-contents .comment-body-max-height {
147
	max-height: 20em;
148
}
149

150
.review-widget .body .review-comment .review-comment-contents .comment-reactions {
151
	margin-top: 8px;
152
	min-height: 25px;
153
}
154

155
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item .action-label {
156
	padding: 1px 4px;
157
	white-space: pre;
158
	text-align: center;
159
	font-size: 12px;
160
	display: flex;
161
}
162

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

174
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item .action-label .reaction-label {
175
	line-height: 20px;
176
	margin-right: 4px;
177
}
178

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

190
.review-widget .body .review-comment .comment-title .action-label {
191
	display: block;
192
	height: 16px;
193
	line-height: 16px;
194
	background-size: 16px;
195
	background-position: center center;
196
	background-repeat: no-repeat;
197
}
198

199
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label {
200
	border: 1px solid;
201
	border-color: var(--vscode-panel-border);
202
}
203

204
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.disabled {
205
	opacity: 0.6;
206
}
207

208
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label.active:hover {
209
	background-color: var(--vscode-statusBarItem-hoverBackground);
210
}
211

212
.review-widget .body .review-comment .review-comment-contents .comment-reactions .action-item a.action-label:active {
213
	background-color: var(--vscode-statusBarItem-activeBackground);
214
	border: 1px solid transparent;
215
}
216
.review-widget .body .review-comment .review-comment-contents .comment-body a {
217
	cursor: pointer;
218
	color: var(--vscode-textLink-foreground);
219
}
220

221
.review-widget .body .comment-body a:hover,
222
.review-widget .body .comment-body a:active {
223
	color: var(--vscode-textLink-activeForeground);
224
}
225

226
.review-widget .body .comment-body a:focus {
227
	outline: 1px solid var(--vscode-focusBorder);
228
}
229

230
.review-widget .body .comment-body p,
231
.review-widget .body .comment-body ul {
232
	margin: 8px 0;
233
}
234

235
.review-widget .body .comment-body p:first-child,
236
.review-widget .body .comment-body ul:first-child {
237
	margin-top: 0;
238
}
239

240
.review-widget .body .comment-body p:last-child,
241
.review-widget .body.comment-body ul:last-child {
242
	margin-bottom: 0;
243
}
244

245
.review-widget .body .comment-body ul {
246
	padding-left: 20px;
247
}
248

249
.review-widget .body .comment-body li > p {
250
	margin-bottom: 0;
251
}
252

253
.review-widget .body .comment-body li > ul {
254
	margin-top: 0;
255
}
256

257
.review-widget .body .comment-body span {
258
	white-space: pre;
259
}
260

261
.review-widget .body .comment-body img {
262
	max-width: 100%;
263
}
264

265
.review-widget .body .comment-body .monaco-tokenized-source {
266
	font-size: inherit !important;
267
	line-height: auto !important;
268
}
269

270
.review-widget .body .comment-form-container {
271
	margin: 8px 20px;
272
}
273

274
.review-widget .validation-error {
275
	display: inline-block;
276
	overflow: hidden;
277
	text-align: left;
278
	width: 100%;
279
	box-sizing: border-box;
280
	padding: 0.4em;
281
	font-size: 12px;
282
	line-height: 17px;
283
	min-height: 34px;
284
	margin-top: -1px;
285
	margin-left: -1px;
286
	word-wrap: break-word;
287
	border: 1px solid var(--vscode-inputValidation-errorBorder);
288
	background: var(--vscode-inputValidation-errorBackground);
289
}
290

291
.review-widget .body .comment-form .validation-error {
292
	color: var(--vscode-inputValidation-errorForeground);
293
}
294

295

296
.review-widget .body .comment-additional-actions {
297
	margin: 10px 20px;
298
}
299

300
.review-widget .body .comment-additional-actions .section-separator {
301
	border-top: 1px solid var(--vscode-menu-separatorBackground);
302
	margin: 10px 0 14px;
303
}
304

305
.review-widget .body .comment-additional-actions .button-bar {
306
	display: flex;
307
	white-space: nowrap;
308
}
309

310
.review-widget .body .comment-additional-actions .monaco-button,
311
.review-widget .body .comment-additional-actions .monaco-text-button,
312
.review-widget .body .comment-additional-actions .monaco-button-dropdown {
313
	display: flex;
314
	width: auto;
315
}
316

317
.review-widget .body .comment-additional-actions .button-bar > .monaco-text-button,
318
.review-widget .body .comment-additional-actions .button-bar > .monaco-button-dropdown {
319
	margin: 0 10px 0 0;
320
}
321

322
.review-widget .body .comment-additional-actions .codicon-drop-down-button {
323
	align-items: center;
324
}
325

326
.review-widget .body .monaco-editor {
327
	color: var(--vscode-editor-foreground);
328
}
329

330
.review-widget .body code {
331
	font-family: var(--comment-thread-editor-font-family);
332
	font-weight: var(--comment-thread-editor-font-weight);
333
}
334

335
.review-widget .body .comment-form-container .comment-form {
336
	display: flex;
337
	flex-direction: row;
338
}
339

340
.review-widget .body .comment-form-container .comment-form .avatar-container {
341
	padding-right: 20px;
342
}
343

344
.review-widget .body .comment-form-container.expand .review-thread-reply-button {
345
	display: none;
346
}
347

348
.review-widget .body .comment-form-container.expand .monaco-editor,
349
.review-widget .body .comment-form-container.expand .form-actions {
350
	display: block;
351
	box-sizing: content-box;
352
}
353

354
.review-widget .body .comment-form-container .review-thread-reply-button {
355
	text-align: left;
356
	display: block;
357
	width: 100%;
358
	resize: vertical;
359
	border-radius: 0;
360
	box-sizing: border-box;
361
	padding: 6px 12px;
362
	font-weight: 600;
363
	line-height: 20px;
364
	white-space: nowrap;
365
	border: 0px;
366
	outline: 1px solid transparent;
367
	outline-color: var(--vscode-contrastBorder);
368
	background-color: var(--vscode-editorCommentsWidget-replyInputBackground);
369
	color: var(--vscode-editor-foreground);
370
	font-size: inherit;
371
	font-family: var(--monaco-monospace-font);
372
}
373

374
.review-widget .body .comment-form-container .review-thread-reply-button:focus {
375
	outline-style: solid;
376
	outline-width: 1px;
377
}
378

379
.review-widget .body .comment-form-container .monaco-editor,
380
.review-widget .body .comment-form-container .monaco-editor .monaco-editor-background,
381
.review-widget .body .edit-container .monaco-editor .monaco-editor-background {
382
	background-color: var(--vscode-editorCommentsWidget-replyInputBackground);
383
}
384

385
.review-widget .body .comment-form-container .monaco-editor,
386
.review-widget .body .edit-container .monaco-editor {
387
	width: 100%;
388
	min-height: 90px;
389
	max-height: 500px;
390
	border-radius: 3px;
391
	border: 0px;
392
	box-sizing: content-box;
393
	padding: 6px 0 6px 12px;
394
	outline: 1px solid var(--vscode-contrastBorder);
395
}
396

397
.review-widget .body .monaco-editor.focused {
398
	outline: 1px solid var(--vscode-focusBorder);
399
}
400

401
.review-widget .body .comment-form-container .monaco-editor,
402
.review-widget .body .comment-form-container .form-actions {
403
	display: none;
404
}
405

406
.review-widget .body .comment-form-container .form-actions,
407
.review-widget .body .edit-container .form-actions {
408
	overflow: auto;
409
	margin: 10px 0;
410
}
411

412
.review-widget .body .edit-container .form-actions {
413
	padding-top: 10px;
414
}
415

416
.review-widget .body .edit-textarea {
417
	margin: 5px 0 10px 0;
418
	margin-right: 12px;
419
}
420

421
.review-widget .body .comment-form-container .form-actions .monaco-text-button,
422
.review-widget .body .edit-container .monaco-text-button {
423
	width: auto;
424
	margin-left: 5px;
425
}
426

427
.review-widget .body .form-actions .monaco-text-button {
428
	float: right;
429
}
430

431
.review-widget .head {
432
	box-sizing: border-box;
433
	display: flex;
434
	height: 100%;
435
}
436

437
.review-widget .head .review-title {
438
	display: inline-block;
439
	font-size: 13px;
440
	margin-left: 20px;
441
	cursor: default;
442
	overflow: hidden;
443
	text-overflow: ellipsis;
444
	white-space: nowrap;
445
}
446

447
.review-widget .head .review-title .dirname:not(:empty) {
448
	font-size: 0.9em;
449
	margin-left: 0.5em;
450
}
451

452
.review-widget .head .review-actions {
453
	flex: 1;
454
	text-align: right;
455
	padding-right: 2px;
456
}
457

458
.review-widget .head .review-actions > .monaco-action-bar {
459
	display: inline-block;
460
}
461

462
.review-widget .head .review-actions > .monaco-action-bar,
463
.review-widget .head .review-actions > .monaco-action-bar > .actions-container {
464
	height: 100%;
465
}
466

467
.review-widget .action-item {
468
	min-width: 18px;
469
	min-height: 20px;
470
	margin-left: 4px;
471
}
472

473
.review-widget .head .review-actions > .monaco-action-bar .action-label {
474
	margin: 0;
475
	line-height: inherit;
476
	background-repeat: no-repeat;
477
	background-position: center center;
478
}
479

480
.review-widget .head .review-actions > .monaco-action-bar .action-label.codicon {
481
	margin: 0;
482
}
483

484
.monaco-editor .review-widget > .body {
485
	border-top: 1px solid var(--comment-thread-state-color);
486
}
487

488
.monaco-editor .review-widget > .head {
489
	background-color: var(--comment-thread-state-background-color);
490
}
491

492
.review-widget > .body {
493
	border-top: 1px solid;
494
	position: relative;
495
}
496

497
.monaco-editor .comment-range-glyph {
498
	margin-left: 10px;
499
	width: 4px !important;
500
	cursor: pointer;
501
	z-index: 10;
502
}
503

504
div.preview.inline .monaco-editor .comment-range-glyph {
505
	display: none !important;
506
}
507

508
.monaco-editor .comment-diff-added {
509
	border-left-width: 3px;
510
	border-left-style: solid;
511
}
512

513
.monaco-editor .comment-diff-added,
514
.monaco-editor .comment-range-glyph.multiline-add {
515
	border-left-color: var(--vscode-editorGutter-commentRangeForeground);
516
}
517

518
.monaco-editor .comment-diff-added:before,
519
.monaco-editor .comment-range-glyph.line-hover:before {
520
	background: var(--vscode-editorGutter-commentRangeForeground);
521
}
522

523
.monaco-editor .comment-thread:before,
524
.monaco-editor .comment-thread-unresolved:before,
525
.monaco-editor .comment-thread-draft:before {
526
	background: var(--vscode-editorGutter-commentRangeForeground);
527
}
528

529
.monaco-editor .comment-thread-range {
530
	background-color: var(--vscode-editorCommentsWidget-rangeBackground);
531
}
532

533
.monaco-editor .comment-thread-range-current {
534
	background-color: var(--vscode-editorCommentsWidget-rangeActiveBackground);
535
}
536

537
.monaco-editor .margin-view-overlays .comment-range-glyph.line-hover,
538
.monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread,
539
.monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread-unresolved,
540
.monaco-editor .margin-view-overlays .comment-range-glyph.comment-thread-draft {
541
	margin-left: 13px;
542
}
543

544
.monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before,
545
.monaco-editor .margin-view-overlays .comment-range-glyph.line-hover:before,
546
.monaco-editor .comment-range-glyph.comment-thread:before,
547
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before,
548
.monaco-editor .comment-range-glyph.comment-thread-draft:before {
549
	position: absolute;
550
	height: 100%;
551
	width: 9px;
552
	left: -6px;
553
	z-index: 10;
554
	color: var(--vscode-editorGutter-commentGlyphForeground);
555
	text-align: center;
556
	display: flex;
557
	flex-direction: row;
558
	align-items: center;
559
	justify-content: center;
560
}
561

562
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before {
563
	color: var(--vscode-editorGutter-commentUnresolvedGlyphForeground);
564
}
565

566
.monaco-editor .comment-range-glyph.comment-thread-draft:before {
567
	color: var(--vscode-editorGutter-commentDraftGlyphForeground);
568
}
569

570
.monaco-editor .margin-view-overlays .comment-range-glyph.multiline-add {
571
	border-left-width: 3px;
572
	border-left-style: dotted;
573
	height: 16px;
574
	margin-top: 2px;
575
}
576

577
.monaco-editor .margin-view-overlays > div:hover > .comment-range-glyph.comment-diff-added:before,
578
.monaco-editor .margin-view-overlays .comment-range-glyph.line-hover:before {
579
	content: var(--vscode-icon-plus-content);
580
	font-family: var(--vscode-icon-plus-font-family);
581
	font-family: "codicon";
582
	border-radius: 3px;
583
	width: 18px !important;
584
	margin-left: -5px;
585
	padding-left: 1px;
586
}
587

588
.monaco-editor .comment-range-glyph.comment-thread,
589
.monaco-editor .comment-range-glyph.comment-thread-unresolved,
590
.monaco-editor .comment-range-glyph.comment-thread-draft {
591
	z-index: 20;
592
}
593

594
.monaco-editor .comment-range-glyph.comment-thread:before,
595
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before,
596
.monaco-editor .comment-range-glyph.comment-thread-draft:before {
597
	font-family: "codicon";
598
	font-size: 13px;
599
	width: 18px !important;
600
	line-height: 100%;
601
	border-radius: 3px;
602
	z-index: 20;
603
	margin-left: -5px;
604
	padding-top: 1px;
605
	padding-left: 1px;
606
}
607

608
.monaco-editor .comment-range-glyph.comment-thread:before {
609
	content: var(--vscode-icon-comment-add-content);
610
	font-family: var(--vscode-icon-comment-add-font-family);
611

612
}
613
.monaco-editor .comment-range-glyph.comment-thread-unresolved:before {
614
	content: var(--vscode-icon-comment-unresolved-content);
615
	font-family: var(--vscode-icon-comment-unresolved-font-family);
616
}
617
.monaco-editor .comment-range-glyph.comment-thread-draft:before {
618
	content: var(--vscode-icon-comment-draft-content);
619
	font-family: var(--vscode-icon-comment-draft-font-family);
620
}
621

622
.monaco-editor.inline-comment .margin-view-overlays .codicon-folding-expanded,
623
.monaco-editor.inline-comment .margin-view-overlays .codicon-folding-collapsed {
624
	margin-left: 11px;
625
}
626

627
.monaco-editor.inline-comment .margin-view-overlays .dirty-diff-glyph {
628
	margin-left: 25px;
629
}
630

631
Product

Resources

Company
