@ckeditor/ckeditor5-real-time-collaboration/dist/index-editor.css

A set of CKEditor 5 features enabling real-time collaboration within the editor using CKEditor Cloud Services.

/**
 * @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
 */
.ck .ck-user__marker-dot{
	display:block;
	position:absolute;
	left:50%;
	top:calc( ( var(--ck-user-dot-size) / 2) * -1);

	width:var(--ck-user-dot-size);
	height:var(--ck-user-dot-size);
	border-radius:50%;
	transform:translate( -50%, -50%);
	cursor:default;
}

.ck .ck-user__marker-tooltip{
	display:none;
	position:absolute;
	font-family:Georgia, sans-serif;
	font-size:var(--ck-font-size-base);
	line-height:1;
	font-style:initial;
	font-weight:initial;

	left:0;
	opacity:0;
	top:-20px;

	padding:var(--ck-spacing-small);
	color:hsl(0, 0%, 100%);
	white-space:nowrap;
	transition:opacity 200ms linear, transform 300ms ease-in-out;
	z-index:99999;
}

@media (prefers-reduced-motion: reduce){

.ck .ck-user__marker-tooltip{
		transition:none;
}
	}

.ck .ck-user__marker-line{
	position:absolute;
	bottom:0;
	height:100%;
	width:0;
}

.ck .ck-user__marker{
	display:inline;
	position:relative;
	cursor:default;
}

.ck .ck-user__marker.ck-user__marker_hovered .ck-user__marker-dot{
		width:0;
	}

.ck .ck-user__marker.ck-user__marker_hovered .ck-user__marker-tooltip{
		display:block;
		opacity:1;
		animation:fadeInLeft 300ms ease-in-out;
	}

.ck .ck-placeholder .ck-user__marker{
		display:none;
	}

@media (prefers-reduced-motion: reduce){
		.ck .ck-user__marker, .ck .ck-user__marker *, .ck .ck-user__marker::after{
			animation:none !important;
		}
}

@keyframes fadeInLeft{
	from{
		opacity:0;
		transform:translateX( -10px);
	}
	to{
		opacity:1;
		transform:translateX( 0);
	}
}

.ck.ck-balloon-panel.ck-tooltip{
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;

	z-index:calc( var(--ck-z-dialog) + 100);
}

:root{
	--ck-color-presence-list-dropdown-background:hsl(0, 0%, 100%);
	--ck-color-presence-list-dropdown-arrow-border:hsl(0, 0%, 92%);

	--ck-presence-list-dropdown-list-max-width:250px;
	--ck-presence-list-dropdown-list-min-width:180px;

	--ck-presence-list-users-tooltip-max-width:120px;
	--ck-presence-list-users-tooltip-min-width:25px;
}

.ck.ck-presence-list{
	display:inline-flex;
	align-items:center;
	margin-right:var(--ck-spacing-standard);
	transition:margin-right 200ms ease-in-out;
	font-size:var(--ck-font-size-base);
}

.ck.ck-presence-list *{
		box-sizing:border-box;
	}

.ck.ck-presence-list__list{
	display:flex;
	flex-direction:row;
	position:relative;
	justify-content:flex-end;
}

.ck.ck-presence-list__list::after{
		content:"";
		position:absolute;
		bottom:-15px;
		left:0;
		width:100%;
		height:15px;
		background:transparent;
	}

.ck.ck-presence-list__counter--hidden{
	display:none;
}

.ck.ck-presence-list__list-item{
	font:inherit;
	color:inherit;
	border:1px solid transparent;
	outline:none;
	background:none;
	padding:0;

	position:relative;
	margin-left:var(--ck-spacing-medium);
}

.ck.ck-presence-list__list-item:focus{
		border-radius:0;
		outline:none;
		border:var(--ck-focus-ring);
		box-shadow:var(--ck-focus-outer-shadow), 0 0;
	}

.ck-rounded-corners .ck.ck-presence-list__list-item:focus,
	.ck.ck-presence-list__list-item.ck-rounded-corners:focus{
		border-radius:var(--ck-border-radius);
	}

.ck.ck-presence-list__list-item .ck-label{
		overflow:hidden;
		height:0px;
		width:0px;
	}

.ck.ck-presence-list__list-item:first-child{
		margin-left:0;
	}

.ck.ck-tooltip.ck-presence-list__list-item__tooltip > .ck-tooltip__text{
		display:inline-block;
		max-width:var(--ck-presence-list-users-tooltip-max-width);
		overflow:hidden;
		text-align:center;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

.ck.ck-presence-list__marker{
	position:relative;
	display:block;
	width:100%;
	height:3px;
	margin-top:5px;
}
.ck-presence-list__list button.ck-presence-list__list-item *,
.ck-presence-list__balloon button.ck-presence-list__dropdown-list-item *{
	cursor:pointer;
}

.ck.ck-presence-list--collapsed .ck-presence-list__list{
		border:1px solid transparent;
		padding-left:1px;
		min-width:calc( var(--ck-user-avatar-size) * 2);
	}

.ck.ck-presence-list--collapsed .ck-presence-list__list *{
			cursor:pointer;
			transition:all 400ms ease-in-out;
		}

.ck.ck-presence-list--collapsed .ck-presence-list__list:focus{
			border-radius:0;
			outline:none;
			border:var(--ck-focus-ring);
			box-shadow:var(--ck-focus-outer-shadow), 0 0;
		}

.ck-rounded-corners .ck.ck-presence-list--collapsed .ck-presence-list__list:focus,
	.ck.ck-presence-list--collapsed .ck-presence-list__list.ck-rounded-corners:focus{
		border-radius:var(--ck-border-radius);
	}

.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item{
		margin-left:calc( var(--ck-user-avatar-size) * -0.35);
		border:0;
		padding:0;
	}

.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:first-child{
			margin-left:0;
		}

.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:last-child{
			order:unset;
		}

.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item .ck-user{
			--ck-presence-list-avatar-border-color:var(--ck-color-base-foreground);
			border:2px solid var(--ck-presence-list-avatar-border-color);
			margin-left:0;
			margin-right:0;
		}

.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item.ck-presence-list__users-counter{
			margin-left:0;
			margin-right:0;
		}

.ck.ck-presence-list__balloon{
	--ck-color-panel-border:var(--ck-color-presence-list-dropdown-arrow-border);
	--ck-color-panel-background:var(--ck-color-presence-list-dropdown-background);

	background-color:var(--ck-color-presence-list-dropdown-background);
	border:0;
	opacity:1;
	animation:300ms fadeIn ease-in-out;
}

@media (prefers-reduced-motion: reduce){

.ck.ck-presence-list__balloon{
		animation:none;
}
	}

.ck.ck-presence-list__balloon ul{
		background-color:var(--ck-color-presence-list-dropdown-background);
	}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-wrapper{
		min-width:var(--ck-presence-list-dropdown-list-min-width);
		max-width:var(--ck-presence-list-dropdown-list-max-width);
		border-radius:var(--ck-border-radius);
	}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-wrapper.ck-presence-list__dropdown-list-wrapper_scrollable{
			max-height:80vh;
			overflow-y:auto;
			overflow-x:hidden;
		}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-item{
		font:inherit;
		color:inherit;
		outline:none;
		border:0;
		background:none;

		display:flex;
		align-items:center;
		position:relative;
		padding:var(--ck-spacing-standard);
	}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-item:focus{
			position:relative;
			z-index:1;
			outline:var(--ck-focus-ring);
			outline-offset:-1px;

			box-shadow:var(--ck-focus-outer-shadow), 0 0;
		}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-item:first-of-type .ck-presence-list__marker{
				border-top-left-radius:var(--ck-border-radius);
			}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-item:last-of-type .ck-presence-list__marker{
				border-bottom-left-radius:var(--ck-border-radius);
			}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list .ck-user__full-name{
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			color:var(--ck-color-base-text);
			margin-left:var(--ck-spacing-standard);
		}

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list .ck.ck-presence-list__marker{
			position:absolute;
			left:0;
			margin:0;
			height:100%;
			width:3px;
		}

.ck.ck-presence-list__users-counter{
	--ck-presence-list-counter-border-color:var(--ck-user-avatar-background);
	--ck-presence-list-counter-background-color:var(--ck-user-avatar-color);

	border:2px solid var(--ck-presence-list-counter-border-color);
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	border-radius:50%;
	background-color:var(--ck-presence-list-counter-background-color);
	box-sizing:border-box;
	height:calc(var(--ck-user-avatar-size) - 4px);
	width:calc(var(--ck-user-avatar-size) - 4px);
	line-height:100%;
	margin:2px;
	margin-top:4px;
}

.ck.ck-presence-list__users-counter__text{
	--ck-presence-list-counter-text-color:var(--ck-user-avatar-background);

	color:var(--ck-presence-list-counter-text-color);
	cursor:default;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

@keyframes fadeIn{
	from{
		opacity:0;
	}

	to{
		opacity:1;
	}
}