@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-2025, 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:hsla(128, 71%, 40%, .35);
	--ck-color-suggestion-marker-insertion-border-active:hsla(128, 71%, 25%, .5);
	--ck-color-suggestion-marker-insertion-background:hsla(128, 71%, 65%, .35);
	--ck-color-suggestion-marker-insertion-background-active:hsla(128, 71%, 50%, .5);

	--ck-color-suggestion-marker-deletion-border:hsla(345, 71%, 40%, .35);
	--ck-color-suggestion-marker-deletion-border-active:hsla(345, 71%, 25%, .5);
	--ck-color-suggestion-marker-deletion-background:hsla(345, 71%, 65%, .35);
	--ck-color-suggestion-marker-deletion-background-active:hsla(345, 71%, 50%, .5);
	--ck-color-suggestion-marker-deletion-stroke:hsla(345, 71%, 20%, .5);

	--ck-color-suggestion-marker-format-border:hsla(191, 60%, 75%, 1);
	--ck-color-suggestion-marker-format-border-active:hsla(191, 60%, 60%, 1);

	--ck-color-suggestion-widget-insertion-background:hsla(128, 71%, 65%, .05);
	--ck-color-suggestion-widget-insertion-background-active:hsla(128, 71%, 50%, .07);

	--ck-color-suggestion-widget-deletion-background:hsla(345, 71%, 65%, .05);
	--ck-color-suggestion-widget-deletion-background-active:hsla(345, 71%, 45%, .07);

	--ck-color-suggestion-widget-format-background:hsla(191, 90%, 40%, .09);
	--ck-color-suggestion-widget-format-background-active:hsla(191, 90%, 40%, .16);
}

.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{
		background:none;
		text-decoration:none;
		border:3px solid var(--ck-color-suggestion-marker-insertion-border);
	}

.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);
	text-decoration-thickness:3px;

	background:var(--ck-color-suggestion-marker-deletion-background);
}

.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{
		background:none;
		text-decoration:none;
		border:3px solid var(--ck-color-suggestion-marker-deletion-border);
	}

.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{
		background:none;
		border:3px solid var(--ck-color-suggestion-marker-format-border);
	}

.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{
	border:0;
	background:none;
	box-shadow:-7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}

.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);
}

.ck-content ul .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active, .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:0.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:0.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;
	border-left:none;
	border-right:none;
	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){
	padding-right:1px;
	margin-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:hsla(128, 71%, 65%, .12);
	--ck-color-suggestion-widget-th-insertion-background-active:hsla(128, 71%, 50%, .14);

	--ck-color-suggestion-widget-th-deletion-background:hsla(345, 71%, 65%, .14);
	--ck-color-suggestion-widget-th-deletion-background-active:hsla(345, 71%, 45%, .16);
}

.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);
	}

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

.ck-content .ck-widget.table > figcaption.ck-suggestion-marker-deletion.ck-suggestion-marker--active, .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);
			}

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

.ck-content .ck-widget.table > figcaption.ck-suggestion-marker-insertion.ck-suggestion-marker--active, .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{
			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 > 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{
			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 > 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{
			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 > 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{
			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 > 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;
	}
.ck-content .table th.ck-suggestion-marker-formatInline.ck-suggestion-marker--active, .ck-content .table td.ck-suggestion-marker-formatInline.ck-suggestion-marker--active, .ck-content .table th.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active, .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{
	display:block;
	box-shadow:-7px 0 0 0 hsl(0deg 0% 93%), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}

.ck-content pre > code.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active{
		box-shadow:-5px 0 0 0 hsl(0deg 0% 93%), -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);
	}