@ckeditor/ckeditor5-real-time-collaboration 47.6.1 → 48.0.0-alpha.0

package/dist/index.css

@@ -2,464 +2,327 @@
  * @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
  */
-/*
- * What you're currently looking at is the source code of a legally protected, proprietary software.
- * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
- * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
- *
- * 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
- */
-
 .ck .ck-user__marker-dot {
-	/* If you are looking for handling dot color, see `usercolors.css` in the `ckeditor5-collaboration-core`. */
-	display: block;
-	position: absolute;
-	left: 50%;
-
-	/* #124 */
-	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;
+  left: 50%;
+  top: calc(( var(--ck-user-dot-size) / 2 ) * -1);
+  width: var(--ck-user-dot-size);
+  height: var(--ck-user-dot-size);
+  cursor: default;
+  border-radius: 50%;
+  display: block;
+  position: absolute;
+  transform: translate(-50%, -50%);
 }
 
 .ck .ck-user__marker-tooltip {
-	display: none;
-	position: absolute;
-
-	/* It should be one font in case of inheriting (example: headers sans-serif and content serif type). */
-	font-family: Georgia, sans-serif;
-
-	/* It should be px value in case of inheriting (like headers example). */
-	font-size: var(--ck-font-size-base);
-
-	/* In case of inheriting from various components. */
-	line-height: 1;
-	font-style: initial;
-	font-weight: initial;
-
-	left: 0;
-	opacity: 0;
-
-	/* Moving up this element with 100% of its height. */
-	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;
+  font-family: var(--ck-font-face);
+  font-size: var(--ck-font-size-base);
+  line-height: 1;
+  font-style: initial;
+  font-weight: initial;
+  opacity: 0;
+  padding: var(--ck-spacing-small);
+  color: #fff;
+  white-space: nowrap;
+  z-index: 99999;
+  transition: opacity .2s linear, transform .3s ease-in-out;
+  display: none;
+  position: absolute;
+  top: -20px;
+  left: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-
-.ck .ck-user__marker-tooltip {
-		transition: none;
+  .ck .ck-user__marker-tooltip {
+    transition: none;
+  }
 }
-	}
 
 .ck .ck-user__marker-line {
-	/* If you are looking for handling line color, see `usercolors.css` in the `ckeditor5-collaboration-core`. */
-	position: absolute;
-	bottom: 0;
-	height: 100%;
-	width: 0;
+  width: 0;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
 }
 
 .ck .ck-user__marker {
-	display: inline;
-	position: relative;
-	cursor: default;
+  cursor: default;
+  display: inline;
+  position: relative;
 }
 
 .ck .ck-user__marker.ck-user__marker_hovered .ck-user__marker-dot {
-		width: 0;
-	}
+  width: 0;
+}
 
 .ck .ck-user__marker.ck-user__marker_hovered .ck-user__marker-tooltip {
-		display: block;
-		opacity: 1;
-		animation: fadeInLeft 300ms ease-in-out;
-	}
+  opacity: 1;
+  animation: .3s ease-in-out userMarkersFadeInLeft;
+  display: block;
+}
 
 .ck .ck-placeholder .ck-user__marker {
-		display: none;
-	}
+  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 );
-	}
-}
-
-/*
- * What you're currently looking at is the source code of a legally protected, proprietary software.
- * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
- * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
- *
- * 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
- */
-
-/*
- * 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
- */
-
-/*
- * 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
- */
-
-/**
- * Makes element unselectable.
- */
+  .ck .ck-user__marker, .ck .ck-user__marker *, .ck .ck-user__marker:after {
+    animation: none !important;
+  }
+}
 
-.ck.ck-balloon-panel.ck-tooltip {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+@keyframes userMarkersFadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
 
-	z-index: calc( var(--ck-z-dialog) + 100 );
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
-/*
- * 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
- */
-/**
- * A helper to combine multiple shadows.
- */
-/**
- * Gives an element a drop shadow so it looks like a floating panel.
- */
-/*
- * 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
- */
-/**
- * A visual style of focused element's border.
- */
-/*
- * 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
- */
-/**
- * Implements rounded corner interface for .ck-rounded-corners class.
- *
- * @see $ck-border-radius
- */
 
 :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-color-presence-list-dropdown-background: #fff;
+  --ck-color-presence-list-dropdown-arrow-border: #ebebeb;
+  --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);
+  margin-right: var(--ck-spacing-standard);
+  font-size: var(--ck-font-size-base);
+  align-items: center;
+  transition: margin-right .2s ease-in-out;
+  display: inline-flex;
 }
 
 .ck.ck-presence-list * {
-		box-sizing: border-box;
-	}
+  box-sizing: border-box;
+}
 
 .ck.ck-presence-list__list {
-	display: flex;
-	flex-direction: row;
-	position: relative;
-
-	/* Taking care about margin animation in collapsed mode. */
-	justify-content: flex-end;
+  flex-direction: row;
+  justify-content: flex-end;
+  display: flex;
+  position: relative;
 }
 
-.ck.ck-presence-list__list::after {
-		content: "";
-		position: absolute;
-		bottom: -15px;
-		left: 0;
-		width: 100%;
-		height: 15px;
-		background: transparent;
-	}
+.ck.ck-presence-list__list:after {
+  content: "";
+  background: none;
+  width: 100%;
+  height: 15px;
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+}
 
 .ck.ck-presence-list__counter--hidden {
-	display: none;
+  display: none;
 }
 
 .ck.ck-presence-list__list-item {
-	/**
-	 * Reset default CK5 button styles - `.ck-reset__all *`.
-	 * Reset default user agent button stylesheet too.
-	 */
-	font: inherit;
-	color: inherit;
-	border: 1px solid transparent;
-	outline: none;
-	background: none;
-	padding: 0;
-
-	position: relative;
-	margin-left: var(--ck-spacing-medium);
+  font: inherit;
+  color: inherit;
+  margin-left: var(--ck-spacing-medium);
+  background: none;
+  border: 1px solid #0000;
+  outline: none;
+  padding: 0;
+  position: relative;
 }
 
 .ck.ck-presence-list__list-item:focus {
-		border-radius: 0;
-		/* Disable native outline. */
-		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);
-	}
+  border-radius: var(--ck-rounded-corners-radius);
+  border: var(--ck-focus-ring);
+  box-shadow: var(--ck-focus-outer-shadow), 0 0;
+  outline: none;
+}
 
 .ck.ck-presence-list__list-item .ck-label {
-		/*
-		 * Forces screen reader to read label despite the fact that it is hidden.
-		 * Placing `display: none` on the element will prevent screen reader from reading it.
-		 */
-		overflow: hidden;
-		height: 0px;
-		width: 0px;
-	}
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
 
 .ck.ck-presence-list__list-item:first-child {
-		margin-left: 0;
-	}
+  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;
-	}
+  max-width: var(--ck-presence-list-users-tooltip-max-width);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  overflow: hidden;
+}
 
 .ck.ck-presence-list__marker {
-	position: relative;
-	display: block;
-	width: 100%;
-	height: 3px;
-	margin-top: 5px;
+  width: 100%;
+  height: 3px;
+  margin-top: 5px;
+  display: block;
+  position: relative;
 }
 
-/**
- * Add better UX behavior of button to the `clickable` elements.
- * We need to create stronger specificity than `.ck.ck-reset__all *`.
- */
-.ck-presence-list__list button.ck-presence-list__list-item *,
-.ck-presence-list__balloon button.ck-presence-list__dropdown-list-item * {
-	cursor: pointer;
+.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;
-
-		/* Because of moving avatars to the right with margin-left we need to set min-width of container. */
-		min-width: calc( var(--ck-user-avatar-size) * 2 );
-	}
+  min-width: calc(var(--ck-user-avatar-size) * 2);
+  border: 1px solid #0000;
+  padding-left: 1px;
+}
 
 .ck.ck-presence-list--collapsed .ck-presence-list__list * {
-			cursor: pointer;
-			transition: all 400ms ease-in-out;
-		}
+  cursor: pointer;
+  transition: all .4s ease-in-out;
+}
 
 .ck.ck-presence-list--collapsed .ck-presence-list__list:focus {
-			border-radius: 0;
-			/* Disable native outline. */
-			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);
-	}
+  border-radius: var(--ck-rounded-corners-radius);
+  border: var(--ck-focus-ring);
+  box-shadow: var(--ck-focus-outer-shadow), 0 0;
+  outline: none;
+}
 
 .ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item {
-		/* Adding negative margin (35% of avatar) to create collapsed effect. */
-		margin-left: calc( var(--ck-user-avatar-size) * -0.35);
-
-		/* Reset focus borders */
-		border: 0;
-		padding: 0;
-	}
+  margin-left: calc(var(--ck-user-avatar-size) * -.35);
+  border: 0;
+  padding: 0;
+}
 
 .ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:first-child {
-			margin-left: 0;
-		}
+  margin-left: 0;
+}
 
 .ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:last-child {
-			order: unset;
-		}
+  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-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;
-		}
+  margin-left: 0;
+  margin-right: 0;
+}
 
 .ck.ck-presence-list__balloon {
-	/* Overwrite arrows background of 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;
+  --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);
+  opacity: 1;
+  border: 0;
+  animation: .3s ease-in-out fadeIn;
 }
 
 @media (prefers-reduced-motion: reduce) {
-
-.ck.ck-presence-list__balloon {
-		animation: none;
+  .ck.ck-presence-list__balloon {
+    animation: none;
+  }
 }
-	}
 
 .ck.ck-presence-list__balloon ul {
-		background-color: var(--ck-color-presence-list-dropdown-background);
-	}
+  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);
-
-		/*
-		 * Make it scrollable to prevent truncate of focus ring and shadow.
-		 * It's temporary fix, we should rethink max-height of dropdown
-		 */
-	}
+  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;
-		}
+  max-height: 80vh;
+  overflow: hidden auto;
+}
 
 .ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-item {
-		/**
-		 * Reset default CK5 button styles - `.ck-reset__all *`.
-		 * Reset default user agent button stylesheet too.
-		 */
-		font: inherit;
-		color: inherit;
-		outline: none;
-		border: 0;
-		background: none;
-
-		display: flex;
-		align-items: center;
-		position: relative;
-		padding: var(--ck-spacing-standard);
-	}
+  font: inherit;
+  color: inherit;
+  padding: var(--ck-spacing-standard);
+  background: none;
+  border: 0;
+  outline: none;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
 
 .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;
-		}
+  z-index: 1;
+  outline: var(--ck-focus-ring);
+  outline-offset: -1px;
+  box-shadow: var(--ck-focus-outer-shadow), 0 0;
+  position: relative;
+}
 
 .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);
-			}
+  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);
-			}
+  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);
-		}
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--ck-color-base-text);
+  margin-left: var(--ck-spacing-standard);
+  overflow: hidden;
+}
 
 .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;
-		}
+  width: 3px;
+  height: 100%;
+  margin: 0;
+  position: absolute;
+  left: 0;
+}
 
 .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-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);
+  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);
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  margin: 4px 2px 2px;
+  line-height: 100%;
+  display: flex;
+  position: relative;
 }
 
 .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;
+  --ck-presence-list-counter-text-color: var(--ck-user-avatar-background);
+  color: var(--ck-presence-list-counter-text-color);
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 @keyframes fadeIn {
-	from {
-		opacity: 0;
-	}
+  from {
+    opacity: 0;
+  }
 
-	to {
-		opacity: 1;
-	}
+  to {
+    opacity: 1;
+  }
 }