@ckeditor/ckeditor5-collaboration-core/dist/index-content.css

Base utilities used by CKEditor 5 collaboration features to support multiple users working together in a rich text editor.

/**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
:root{
  --ck-color-suggestion-marker-insertion-border:#1eae3159;
  --ck-color-suggestion-marker-insertion-border-active:#126d1f80;
  --ck-color-suggestion-marker-insertion-background:#66e57759;
  --ck-color-suggestion-marker-insertion-background-active:#25da3d80;
  --ck-color-suggestion-marker-deletion-border:#ae1e4259;
  --ck-color-suggestion-marker-deletion-border-active:#6d122980;
  --ck-color-suggestion-marker-deletion-background:#e5668659;
  --ck-color-suggestion-marker-deletion-background-active:#da255280;
  --ck-color-suggestion-marker-deletion-stroke:#570f2180;
  --ck-color-suggestion-marker-format-border:#99d7e6;
  --ck-color-suggestion-marker-format-border-active:#5cc0d6;
  --ck-color-suggestion-widget-insertion-background:#66e5770d;
  --ck-color-suggestion-widget-insertion-background-active:#25da3d12;
  --ck-color-suggestion-widget-deletion-background:#e566860d;
  --ck-color-suggestion-widget-deletion-background-active:#c4214a12;
  --ck-color-suggestion-widget-format-background:#0aa0c217;
  --ck-color-suggestion-widget-format-background-active:#0aa0c229;
}

.ck-content .ck-suggestion-marker-insertion{
  border-top:3px solid var(--ck-color-suggestion-marker-insertion-border);
  border-bottom:3px solid var(--ck-color-suggestion-marker-insertion-border);
  background:var(--ck-color-suggestion-marker-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active{
  border-color:var(--ck-color-suggestion-marker-insertion-border-active);
  background:var(--ck-color-suggestion-marker-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget{
  border:3px solid var(--ck-color-suggestion-marker-insertion-border);
  background:none;
  text-decoration:none;
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-suggestion-marker--active{
  border-color:var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-deletion{
  border-top:3px solid var(--ck-color-suggestion-marker-deletion-border);
  border-bottom:3px solid var(--ck-color-suggestion-marker-deletion-border);
  text-decoration:line-through;
  text-decoration-color:var(--ck-color-suggestion-marker-deletion-stroke);
  background:var(--ck-color-suggestion-marker-deletion-background);
  text-decoration-thickness:3px;
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active{
  border-color:var(--ck-color-suggestion-marker-deletion-border-active);
  background:var(--ck-color-suggestion-marker-deletion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget{
  border:3px solid var(--ck-color-suggestion-marker-deletion-border);
  background:none;
  text-decoration:none;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-suggestion-marker--active{
  border-color:var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .ck-suggestion-marker-merge:after{
  border-top:3px solid var(--ck-color-suggestion-marker-deletion-border);
  border-bottom:3px solid var(--ck-color-suggestion-marker-deletion-border);
  text-decoration:line-through;
  text-decoration-color:var(--ck-color-suggestion-marker-deletion-stroke);
  background:var(--ck-color-suggestion-marker-deletion-background);
  color:var(--ck-color-suggestion-marker-deletion-stroke);
  content:"¶";
}

.ck-content .ck-suggestion-marker-merge.ck-suggestion-marker--active:after{
  border-color:var(--ck-color-suggestion-marker-deletion-border-active);
  background:var(--ck-color-suggestion-marker-deletion-background-active);
}

.ck-content .ck-suggestion-marker-split:after{
  border-top:3px solid var(--ck-color-suggestion-marker-insertion-border);
  border-bottom:3px solid var(--ck-color-suggestion-marker-insertion-border);
  background:var(--ck-color-suggestion-marker-insertion-background);
  color:var(--ck-color-suggestion-marker-insertion-border);
  content:"¶";
}

.ck-content .ck-suggestion-marker-split.ck-suggestion-marker--active:after{
  border-color:var(--ck-color-suggestion-marker-insertion-border-active);
  background:var(--ck-color-suggestion-marker-insertion-background-active);
}

.ck-content .ck-suggestion-marker-formatInline{
  border-top:3px solid var(--ck-color-suggestion-marker-format-border);
  border-bottom:3px solid var(--ck-color-suggestion-marker-format-border);
}

.ck-content .ck-suggestion-marker-formatInline.ck-suggestion-marker--active{
  border-color:var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-suggestion-marker-formatInline.ck-widget{
  border:3px solid var(--ck-color-suggestion-marker-format-border);
  background:none;
}

.ck-content .ck-suggestion-marker-formatInline.ck-widget.ck-suggestion-marker--active{
  border-color:var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-suggestion-marker-formatBlock{
  box-shadow:-7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
  background:none;
  border:0;
}

.ck-content .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active{
  box-shadow:-5px 0 0 0 var(--ck-color-base-background), -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content ul .ck-suggestion-marker-formatBlock, .ck-content ol .ck-suggestion-marker-formatBlock{
  box-shadow:-2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}

:is(.ck-content ul .ck-suggestion-marker-formatBlock, .ck-content ol .ck-suggestion-marker-formatBlock).ck-suggestion-marker--active{
  box-shadow:-2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
  border:none;
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
  border:none;
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image img{
  opacity:.6;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image figcaption{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active figcaption{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image figcaption{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active figcaption{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.media{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.media .ck-media__wrapper{
  opacity:.6;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.media.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.media{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.media.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker.ck-widget.ck-merge-field, .ck-content .ck-comment-marker.ck-widget.ck-merge-field{
  border-width:2px medium;
  border-left-style:none;
  border-left-color:currentColor;
  border-right-style:none;
  border-right-color:currentColor;
  padding-top:0;
  padding-bottom:0;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field{
  border-top-color:var(--ck-color-suggestion-marker-deletion-border);
  border-bottom-color:var(--ck-color-suggestion-marker-deletion-border);
  background:var(--ck-color-suggestion-marker-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field :not(.ck-merge-field__affix), .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-merge-field_with-value, .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-merge-field_with-warning{
  text-decoration:line-through;
  text-decoration-color:var(--ck-color-suggestion-marker-deletion-stroke);
  text-decoration-thickness:3px;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-marker-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-merge-field{
  background-color:var(--ck-color-suggestion-marker-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-merge-field.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-marker-insertion-background-active);
}

.ck-content .ck-comment-marker.ck-widget.ck-merge-field{
  background:var(--ck-color-comment-marker);
}

.ck-content .ck-comment-marker.ck-widget.ck-merge-field.ck-comment-marker--active{
  background:var(--ck-color-comment-marker-active);
}

.ck-content span.ck-comment-marker:has( + .ck-comment-marker.ck-widget.ck-merge-field), .ck-content span.ck-suggestion-marker:has( + .ck-suggestion-marker.ck-widget.ck-merge-field){
  margin-right:-1px;
  padding-right:1px;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.page-break{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.page-break.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.page-break{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.page-break.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

:root{
  --ck-color-suggestion-widget-th-insertion-background:#66e5771f;
  --ck-color-suggestion-widget-th-insertion-background-active:#25da3d24;
  --ck-color-suggestion-widget-th-deletion-background:#e5668624;
  --ck-color-suggestion-widget-th-deletion-background-active:#c4214a29;
}

.ck-content figure.table .ck-suggestion-marker-formatBlock{
  box-shadow:-3px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}

.ck-content figure.table .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active{
  box-shadow:-3px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-deletion{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
  border:none;
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-deletion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-insertion{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
  border:none;
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-insertion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.table{
  border-color:var(--ck-color-suggestion-marker-insertion-border);
}

.ck-content .ck-suggestion-marker-insertion.table > figcaption, .ck-content .ck-suggestion-marker-insertion.table > table > caption{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-insertion.table > table > thead > tr > th{
  background-color:var(--ck-color-suggestion-widget-th-insertion-background);
  border-color:var(--ck-color-suggestion-marker-insertion-border);
}

.ck-content .ck-suggestion-marker-insertion.table > table > tbody > tr > td{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
  border-color:var(--ck-color-suggestion-marker-insertion-border);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table{
  border-color:var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > figcaption, .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > caption{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > thead > tr > th{
  background-color:var(--ck-color-suggestion-widget-th-insertion-background-active);
  border-color:var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > tbody > tr > td{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
  border-color:var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table{
  border-color:var(--ck-color-suggestion-marker-deletion-border);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table > figcaption, .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > caption{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > thead > tr > th{
  background-color:var(--ck-color-suggestion-widget-th-deletion-background);
  border-color:var(--ck-color-suggestion-marker-deletion-border);
  text-decoration:none;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > tbody > tr > td{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
  border-color:var(--ck-color-suggestion-marker-deletion-border);
  text-decoration:none;
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table{
  border-color:var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > figcaption, .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > caption{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > thead > tr > th{
  background-color:var(--ck-color-suggestion-widget-th-deletion-background-active);
  border-color:var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > tbody > tr > td{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
  border-color:var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .table th.ck-suggestion-marker-insertion{
  background-color:var(--ck-color-suggestion-widget-th-insertion-background);
}

.ck-content .table th.ck-suggestion-marker-insertion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-th-insertion-background-active);
}

.ck-content .table th.ck-suggestion-marker-deletion{
  background-color:var(--ck-color-suggestion-widget-th-deletion-background);
  text-decoration:none;
}

.ck-content .table th.ck-suggestion-marker-deletion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-th-deletion-background-active);
}

.ck-content .table td.ck-suggestion-marker-insertion{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .table td.ck-suggestion-marker-insertion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .table td.ck-suggestion-marker-deletion{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
  text-decoration:none;
}

.ck-content .table td.ck-suggestion-marker-deletion.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .table th.ck-suggestion-marker-formatInline, .ck-content .table td.ck-suggestion-marker-formatInline, .ck-content .table th.ck-suggestion-marker-formatBlock, .ck-content .table td.ck-suggestion-marker-formatBlock{
  background-color:var(--ck-color-suggestion-widget-format-background);
  box-shadow:none;
}

:is(.ck-content .table th.ck-suggestion-marker-formatInline, .ck-content .table td.ck-suggestion-marker-formatInline, .ck-content .table th.ck-suggestion-marker-formatBlock, .ck-content .table td.ck-suggestion-marker-formatBlock).ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-format-background-active);
  box-shadow:none;
}

.ck-content pre > code.ck-suggestion-marker-formatBlock{
  box-shadow:-7px 0 0 0 #ededed, -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
  display:block;
}

.ck-content pre > code.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active{
  box-shadow:-5px 0 0 0 #ededed, -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.footnotes-wrapper{
  background-color:var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.footnotes-wrapper.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.footnotes-wrapper{
  background-color:var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.footnotes-wrapper.ck-suggestion-marker--active{
  background-color:var(--ck-color-suggestion-widget-insertion-background-active);
}