@ckeditor/ckeditor5-comments 42.0.1-alpha.0 → 42.0.1-alpha.2

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.
@@ -32,65 +32,81 @@
32
32
  background: var(--ck-color-comment-marker);
33
33
  border-top: 3px solid transparent;
34
34
  border-bottom: 3px solid transparent;
35
+
35
36
  }
36
37
  .ck-comment-marker.ck-widget {
37
38
  background-color: transparent;
38
39
  border: 3px solid var(--ck-color-comment-marker);
40
+
39
41
  }
40
42
  .ck-comment-marker--active {
41
43
  background: var(--ck-color-comment-marker-active);
44
+
42
45
  }
43
46
  .ck-comment-marker--active .ck-comment-marker {
44
47
  background: var(--ck-color-comment-marker-active);
48
+
45
49
  }
46
50
  .ck-comment-marker--active.ck-widget {
47
51
  border-color: var(--ck-color-comment-marker-active);
52
+
48
53
  }
49
54
  .ck-comment-marker--active.ck-widget .ck-comment-marker {
50
55
  background-color: var(--ck-color-comment-marker);
56
+
51
57
  }
52
58
  .ck .ck-comments-archive-dropdown.ck-dropdown__panel {
53
59
  z-index: var( --ck-z-panel );
60
+
54
61
  }
55
62
  .ck .ck-comments-archive {
56
63
  width: 400px;
57
64
  max-height: 450px;
58
65
  box-sizing: content-box;
66
+
59
67
  }
60
68
  .ck .ck-comments-archive .ck-annotation {
61
69
  animation: none;
70
+
62
71
  }
63
72
  .ck .ck-comments-archive .ck-comments-archive__header {
64
73
  overflow: auto;
65
74
  max-height: 410px;
66
75
  padding: var( --ck-spacing-large );
76
+
67
77
  }
68
78
  .ck .ck-comments-archive .ck-comments-archive__header {
69
79
  max-height: 40px;
70
80
  line-height: var( --ck-font-size-base );
71
81
  font-weight: bold;
72
82
  border-bottom: 1px solid var( --ck-color-toolbar-border );
83
+
73
84
  }
74
85
  .ck .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child) {
75
86
  margin-bottom: var( --ck-spacing-large );
87
+
76
88
  }
77
89
  .ck .ck-comments-archive .ck-comments-archive__info {
78
90
  text-align: center;
79
91
  font-style: italic;
80
92
  color: var( --ck-color-annotation-info );
93
+
81
94
  }
82
95
  .ck .ck-comment__wrapper {
83
96
  font-size: var(--ck-font-size-base);
84
97
  position: relative;
85
98
  outline: 0;
86
99
  transition: all 300ms linear;
100
+
87
101
  }
88
102
  .ck .ck-comment__wrapper.ck-comment--remove-confirmation {
89
103
  transform: translate3d( -100%, 0, 0 );
104
+
90
105
  }
91
106
  .ck .ck-comment__wrapper:first-of-type {
92
107
  border-top-right-radius: var(--ck-border-radius);
93
108
  border-top-left-radius: var(--ck-border-radius);
109
+
94
110
  }
95
111
  .ck .ck-comment::after {
96
112
  content: '';
@@ -107,91 +123,116 @@ left: calc(
107
123
  width: 4px;
108
124
  height: 100%;
109
125
  background-color: var(--ck-color-comment-separator);
126
+
110
127
  }
111
128
  .ck .ck-comment--remove {
112
129
  background-color: var(--ck-color-comment-remove-background);
130
+
113
131
  }
114
132
  .ck .ck-comment--remove::after {
115
133
  opacity: 0;
134
+
116
135
  }
117
136
  .ck .ck-comment--edit {
118
137
  background-color: var(--ck-color-comment-input-background);
138
+
119
139
  }
120
140
  .ck .ck-comment--edit::after {
121
141
  opacity: 0;
142
+
122
143
  }
123
144
  .ck .ck-comment--edit .ck-comment__input-actions {
124
145
  margin-top: var(--ck-spacing-standard);
146
+
125
147
  }
126
148
  .ck .ck-comment__content {
127
149
  word-break: break-word;
150
+
128
151
  }
129
152
  .ck .ck-comment--info .ck-comment__content {
130
153
  font-style: italic;
154
+
131
155
  }
132
156
  .ck .ck-comment p {
133
157
  margin: 0;
158
+
134
159
  }
135
160
  .ck .ck-comment ul {
136
161
  padding-left: 10px;
137
162
  margin-left: 10px;
163
+
138
164
  }
139
165
  .ck .ck-comment ul {
140
166
  list-style: disc;
141
167
  margin-bottom: 5px;
142
168
  margin-top: 0;
169
+
143
170
  }
144
171
  .ck .ck-comment ul ul {
145
172
  list-style: circle;
173
+
146
174
  }
147
175
  .ck .ck-comment ul ul ul {
148
176
  list-style: square;
177
+
149
178
  }
150
179
  .ck .ck-comment__main .ck-comment__input-wrapper {
151
180
  display: flex;
152
181
  flex-direction: column;
153
182
  position: relative;
154
183
  transition: all 300ms linear;
184
+
155
185
  }
156
186
  .ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input {
157
187
  padding: 0;
188
+
158
189
  }
159
190
  .ck .ck-comment__user {
160
191
  z-index: var(--ck-z-default);
192
+
161
193
  }
162
194
  .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
163
195
  background: var(--ck-color-base-action);
164
196
  color: hsl(0, 0%, 100%);
197
+
165
198
  }
166
199
  .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit:hover {
167
200
  background: var(--ck-color-button-save);
201
+
168
202
  }
169
203
  .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel {
170
204
  color: var(--ck-color-text);
205
+
171
206
  }
172
207
  .ck .ck-comment__external {
173
208
  font-style: italic;
174
209
  color: var(--ck-color-annotation-info);
175
210
  font-size: var(--ck-font-size-tiny);
176
211
  margin-top: var(--ck-spacing-standard);
212
+
177
213
  }
178
214
  .ck .ck-comment .ck-dropdown .ck-dropdown__arrow {
179
215
  display: none;
216
+
180
217
  }
181
218
  .ck .ck-comment .ck-dropdown .ck-list {
182
219
  margin: 0;
183
220
  padding: 0;
221
+
184
222
  }
185
223
  .ck .ck-comment .ck-dropdown .ck-list .ck-list__item {
186
224
  font-size: 1.2em;
187
225
  color: var(--ck-color-base-text);
188
226
  min-width: auto;
227
+
189
228
  }
190
229
  .ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button {
191
230
  color: var(--ck-color-text);
231
+
192
232
  }
193
233
  .ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button__label {
194
234
  margin: 0 var(--ck-spacing-large);
235
+
195
236
  }
196
237
  .ck .ck-thread {
197
238
  width: 100%;
@@ -201,6 +242,7 @@ background-color: var(--ck-color-base-background);
201
242
  overflow: hidden;
202
243
  transition: all 300ms ease;
203
244
  border-radius: var(--ck-border-radius);
245
+
204
246
  }
205
247
  .ck .ck-thread__header {
206
248
  display: flex;
@@ -209,9 +251,11 @@ line-height: 1.57;
209
251
  padding: var(--ck-spacing-standard);
210
252
  background-color: var(--ck-color-thread-header-background);
211
253
  font-size: var(--ck-font-size-base);
254
+
212
255
  }
213
256
  .ck .ck-thread__header .ck-button {
214
257
  font-size: var(--ck-annotation-button-size);
258
+
215
259
  }
216
260
  .ck .ck-thread__header .ck-context-wrapper {
217
261
  display: inline-flex;
@@ -220,6 +264,7 @@ min-width: 0;
220
264
  height: 25px;
221
265
  position: relative;
222
266
  padding-right: var(--ck-spacing-large);
267
+
223
268
  }
224
269
  .ck .ck-thread__header .ck-context {
225
270
  display: flex;
@@ -227,18 +272,22 @@ white-space: nowrap;
227
272
  overflow: hidden;
228
273
  width: 100%;
229
274
  padding: var(--ck-spacing-small) var(--ck-spacing-medium);
275
+
230
276
  }
231
277
  .ck .ck-thread__header .ck-context.ck-context--quotes::after {
232
278
  display: inline-block;
233
279
  content: '"';
280
+
234
281
  }
235
282
  .ck .ck-thread__header .ck-context .ck-context__type {
236
283
  font-weight: bold;
237
284
  padding-right: var(--ck-spacing-standard);
285
+
238
286
  }
239
287
  .ck .ck-thread__header .ck-context .ck-context__value {
240
288
  overflow: hidden;
241
289
  text-overflow: ellipsis;
290
+
242
291
  }
243
292
  .ck .ck-thread__header .ck-context.overlay {
244
293
  display: inline-block;
@@ -250,6 +299,7 @@ box-shadow: 0 2px 3px hsla(0, 0%, 100%, 0.2);
250
299
  border-radius: 2px;
251
300
  white-space: normal;
252
301
  box-sizing: border-box;
302
+
253
303
  }
254
304
  .ck .ck-thread__comment-count {
255
305
  --ck-user-avatar-size: 28px;
@@ -259,31 +309,40 @@ font-size: var(--ck-font-size-base);
259
309
  font-weight: bold;
260
310
  cursor: pointer;
261
311
  transition: background-color 300ms ease;
312
+
262
313
  }
263
314
  .ck .ck-thread__comment-count::before {
264
315
  content: '\25BC';
265
316
  margin-right: var(--ck-spacing-small);
317
+
266
318
  }
267
319
  .ck .ck-thread--remove .ck-comment {
268
320
  background-color: var(--ck-color-comment-remove-background);
321
+
269
322
  }
270
323
  .ck .ck-thread--remove .ck-thread__input--active {
271
324
  background-color: var(--ck-color-base-background);
325
+
272
326
  }
273
327
  .ck .ck-thread--remove .ck-thread__input--active.ck-thread__input {
274
328
  background-color: var(--ck-color-comment-remove-background);
329
+
275
330
  }
276
331
  .ck .ck-thread--remove .ck-thread__comment-count {
277
332
  background-color: var(--ck-color-comment-remove-background);
333
+
278
334
  }
279
335
  .ck .ck-thread--remove .ck-comment__wrapper .ck-comment::after {
280
336
  opacity: 0;
337
+
281
338
  }
282
339
  .ck .ck-thread__comments .ck-comment__wrapper:last-of-type .ck-comment::after {
283
340
  opacity: 0;
341
+
284
342
  }
285
343
  .ck .ck-thread__container {
286
344
  transition: transform 300ms ease;
345
+
287
346
  }
288
347
  .ck .ck-thread__comments {
289
348
  position: relative;
@@ -292,9 +351,11 @@ list-style: none;
292
351
  margin: 0;
293
352
  padding: 0;
294
353
  border-radius: var(--ck-border-radius);
354
+
295
355
  }
296
356
  .ck .ck-thread__user {
297
357
  font-size: 0.85em;
358
+
298
359
  }
299
360
  .ck .ck-thread__input {
300
361
  width: calc( 100% - var(--ck-user-avatar-size) );
@@ -302,30 +363,38 @@ white-space: normal;
302
363
  transition: background-color 200ms ease-in-out;
303
364
  border-radius: var(--ck-border-radius);
304
365
  min-height: 38px;
366
+
305
367
  }
306
368
  .ck .ck-thread--active .ck-comment__options.ck-dropdown {
307
369
  display: block;
370
+
308
371
  }
309
372
  .ck .ck-thread--active .ck-thread__input {
310
373
  display: block;
311
374
  background-color: var(--ck-color-comment-background);
375
+
312
376
  }
313
377
  .ck .ck-thread--active .ck-thread__header {
314
378
  background-color: var(--ck-color-thread-header-active-background);
379
+
315
380
  }
316
381
  .ck .ck-thread--unlinked {
317
382
  --ck-color-comment-box-border: var(--ck-color-base-border);
318
383
  --ck-color-thread-header-background: var(--ck-color-unlinked-background);
319
384
  --ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
385
+
320
386
  }
321
387
  .ck .ck-thread--remove-confirmation .ck-thread__container {
322
388
  transform: translate3d( -100%, 0, 0 );
389
+
323
390
  }
324
391
  .ck.ck-button.ck-thread__remove-confirm-submit {
325
392
  color: var(--ck-color-button-save);
393
+
326
394
  }
327
395
  .ck.ck-button.ck-thread__remove-confirm-cancel {
328
396
  color: var(--ck-color-button-cancel);
397
+
329
398
  }
330
399
  .ck .ck-thread__remove-confirm {
331
400
  font-size: var(--ck-font-size-base);
@@ -337,6 +406,7 @@ left: 100%;
337
406
  width: 100%;
338
407
  height: 100%;
339
408
  background-color: var(--ck-color-comment-remove-background);
409
+
340
410
  }
341
411
  .ck .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
342
412
  display: flex;
@@ -347,10 +417,12 @@ padding-top: var(--ck-spacing-standard);
347
417
  height: 100%;
348
418
  width: 100%;
349
419
  max-height: 400px;
420
+
350
421
  }
351
422
  .ck .ck-thread__remove-confirm p {
352
423
  font-weight: bold;
353
424
  margin: 0;
425
+
354
426
  }
355
427
  .ck .ck-comment__input-container {
356
428
  --ck-user-avatar-size: 28px;
@@ -358,9 +430,11 @@ font-size: var(--ck-font-size-base);
358
430
  display: none;
359
431
  padding: var(--ck-spacing-standard);
360
432
  background: var(--ck-color-comment-background);
433
+
361
434
  }
362
435
  .ck .ck-comment__input-container--active {
363
436
  display: flex;
437
+
364
438
  }
365
439
  .ck .ck-comment__input {
366
440
  padding: var(--ck-spacing-standard);
@@ -370,9 +444,11 @@ border-width: 0;
370
444
  resize: none;
371
445
  background-color: transparent;
372
446
  transition: color 300ms ease-in-out;
447
+
373
448
  }
374
449
  .ck .ck-comment__input:focus {
375
450
  outline: none;
451
+
376
452
  }
377
453
  .ck .ck-comment__input .ck-editor__editable_inline {
378
454
  --ck-focus-ring: none;
@@ -382,20 +458,25 @@ overflow: visible;
382
458
  border: 0;
383
459
  background-color: transparent;
384
460
  word-break: break-word;
461
+
385
462
  }
386
463
  .ck-comment__input-wrapper .ck.ck-editor__editable_inline *:first-child {
387
464
  margin-top: 0;
465
+
388
466
  }
389
467
  .ck-comment__input-wrapper .ck.ck-editor__editable_inline *:last-child {
390
468
  margin-bottom: 0;
469
+
391
470
  }
392
471
  .ck .ck-comment__input-actions {
393
472
  width: 100%;
394
473
  text-align: right;
395
474
  display: none;
475
+
396
476
  }
397
477
  .ck .ck-comment__input-actions.ck-comment__input-actions--active {
398
478
  display: block;
479
+
399
480
  }
400
481
  .ck .ck-comment__input-actions .ck.ck-button {
401
482
  display: inline-flex;
@@ -407,12 +488,15 @@ min-width: 60px;
407
488
  font-size: var(--ck-annotation-button-size);
408
489
  margin-left: var(--ck-spacing-large);
409
490
  padding: 0 var(--ck-spacing-medium);
491
+
410
492
  }
411
493
  .ck .ck-comment__input-actions .ck-button.ck-disabled {
412
494
  opacity: .3;
495
+
413
496
  }
414
497
  .ck .ck-comment__input-textarea {
415
498
  display: block;
499
+
416
500
  }
417
501
  .ck.ck-balloon-panel .ck-annotation-wrapper {
418
502
  position: static;
@@ -421,59 +505,75 @@ max-height: var(--ck-inline-annotation-container-max-height);
421
505
  overflow-y: auto;
422
506
  overscroll-behavior-y: contain;
423
507
  overflow-x: hidden;
508
+
424
509
  }
425
510
  .ck.ck-balloon-panel .ck-annotation {
426
511
  animation: none;
512
+
427
513
  }
428
514
  .ck.ck-balloon-panel .ck-annotation-wrapper * {
429
515
  white-space: normal;
516
+
430
517
  }
431
518
  .ck.ck-balloon-panel .ck-annotation-wrapper strong {
432
519
  font-weight: bold;
520
+
433
521
  }
434
522
  .ck.ck-balloon-panel .ck-annotation-wrapper i {
435
523
  font-style: italic;
524
+
436
525
  }
437
526
  .ck.ck-sidebar {
438
527
  position: relative;
439
528
  transition: min-height 250ms ease;
440
529
  outline: 0;
530
+
441
531
  }
442
532
  .ck-sidebar-item {
443
533
  position: absolute;
444
534
  width: 100%;
445
535
  transition: top 300ms ease, box-shadow 300ms ease;
536
+
446
537
  }
447
538
  .ck-sidebar-item--no-animation {
448
539
  transition: top 0s ease !important;
540
+
449
541
  }
450
542
  .ck.ck-annotation-wrapper {
451
543
  outline: 0;
452
544
  border-radius: var(--ck-border-radius);
453
545
  background: var(--ck-color-annotation-wrapper-background);
454
546
  box-shadow: var(--ck-color-annotation-wrapper-drop-shadow);
547
+
455
548
  }
456
549
  .ck.ck-annotation-wrapper--active .ck-annotation__actions {
457
550
  opacity: 1;
551
+
458
552
  }
459
553
  .ck.ck-annotation-wrapper--active .ck-annotation__actions .ck-comment--resolve {
460
554
  color: var(--ck-color-button-save);
555
+
461
556
  }
462
557
  .ck.ck-annotation-wrapper--active .ck-suggestion--accept {
463
558
  color: var(--ck-color-button-save);
559
+
464
560
  }
465
561
  .ck.ck-annotation-wrapper--active .ck-suggestion--discard {
466
562
  color: var(--ck-color-button-cancel);
563
+
467
564
  }
468
565
  .ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover {
469
566
  box-shadow: var(--ck-drop-shadow);
567
+
470
568
  }
471
569
  .ck.ck-annotation-wrapper--active {
472
570
  box-shadow: var(--ck-drop-shadow-active);
571
+
473
572
  }
474
573
  .ck.ck-sidebar--narrow .ck-sidebar-item {
475
574
  display: flex;
476
575
  justify-content: center;
576
+
477
577
  }
478
578
  .ck.ck-sidebar--narrow .ck-annotation-counter {
479
579
  font-size: var(--ck-annotation-counter-icon-size);
@@ -481,11 +581,13 @@ min-height: unset;
481
581
  padding: 0;
482
582
  cursor: pointer;
483
583
  color: hsl(0, 0%, 50%);
584
+
484
585
  }
485
586
  .ck.ck-sidebar--narrow .ck-annotation-counter:hover {
486
587
  background: transparent;
487
588
  box-shadow: none;
488
589
  color: hsl(0, 0%, 30%);
590
+
489
591
  }
490
592
  .ck.ck-sidebar--narrow .ck-annotation-counter__badge {
491
593
  border-radius: 50%;
@@ -504,21 +606,27 @@ display: flex;
504
606
  justify-content: center;
505
607
  line-height: 16px;
506
608
  z-index: 1;
609
+
507
610
  }
508
611
  .ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode {
509
612
  line-height: 1;
613
+
510
614
  }
511
615
  .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion {
512
616
  background: var(--ck-color-annotation-counter-suggestion-insertion);
617
+
513
618
  }
514
619
  .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion {
515
620
  background: var(--ck-color-annotation-counter-suggestion-deletion);
621
+
516
622
  }
517
623
  .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format {
518
624
  background: var(--ck-color-annotation-counter-suggestion-format);
625
+
519
626
  }
520
627
  .ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment {
521
628
  background: var(--ck-color-annotation-counter-comment);
629
+
522
630
  }
523
631
  .ck .ck-annotation {
524
632
  --ck-user-avatar-size: 28px;
@@ -529,6 +637,7 @@ animation: fadeInLeft 300ms;
529
637
  transition: background-color 300ms ease;
530
638
  padding: var(--ck-spacing-standard);
531
639
  white-space: normal;
640
+
532
641
  }
533
642
  .ck .ck-annotation .ck-button {
534
643
  background-color: transparent;
@@ -538,9 +647,11 @@ cursor: pointer;
538
647
  color: var(--ck-color-annotation-icon);
539
648
  border-radius: var(--ck-border-radius);
540
649
  font-size: var(--ck-annotation-button-size);
650
+
541
651
  }
542
652
  .ck .ck-annotation .ck-user {
543
653
  font-size: 0.85em;
654
+
544
655
  }
545
656
  .ck .ck-annotation__main {
546
657
  display: grid;
@@ -551,15 +662,18 @@ width: calc( 100% - var(--ck-user-avatar-size) );
551
662
  transition: all 200ms ease;
552
663
  border-radius: var(--ck-border-radius);
553
664
  padding-left: var(--ck-spacing-standard);
665
+
554
666
  }
555
667
  .ck .ck-annotation__main p {
556
668
  margin: 0;
557
669
  white-space: normal;
558
670
  font-size: var(--ck-font-size-base);
559
671
  line-height: 1.5em;
672
+
560
673
  }
561
674
  .ck .ck-annotation__user {
562
675
  margin-top: var(--ck-spacing-small);
676
+
563
677
  }
564
678
  .ck .ck-annotation__info {
565
679
  grid-area: info;
@@ -567,6 +681,7 @@ display: flex;
567
681
  align-items: center;
568
682
  color: var(--ck-color-annotation-info);
569
683
  min-height: 2.4em;
684
+
570
685
  }
571
686
  .ck .ck-annotation__info-name {
572
687
  font-weight: bold;
@@ -574,23 +689,29 @@ white-space: nowrap;
574
689
  overflow: hidden;
575
690
  color: var(--ck-color-annotation-info);
576
691
  font-size: var(--ck-font-size-small);
692
+
577
693
  }
578
694
  .ck .ck-annotation__info-name {
579
695
  text-overflow: ellipsis;
696
+
580
697
  }
581
698
  .ck .ck-annotation__info-time {
582
699
  flex: 0 0 auto;
583
700
  margin: 0 var(--ck-spacing-large);
701
+
584
702
  }
585
703
  .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name {
586
704
  white-space: nowrap;
705
+
587
706
  }
588
707
  .ck .ck-annotation__actions {
589
708
  grid-area: actions;
590
709
  transition: opacity 200ms ease;
591
710
  opacity: 0.5;
711
+
592
712
  }
593
713
  .ck .ck-annotation__content-wrapper {
594
714
  grid-area: content;
595
715
  width: 100%;
716
+
596
717
  }