@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-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{
  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{
  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-line{
  width:0;
  height:100%;
  position:absolute;
  bottom:0;
}

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

.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{
  opacity:1;
  animation:.3s ease-in-out userMarkersFadeInLeft;
  display:block;
}

.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 userMarkersFadeInLeft{
  from{
    opacity:0;
    transform:translateX(-10px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

:root{
  --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{
  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;
}

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

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

.ck.ck-presence-list__list-item{
  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: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{
  width:0;
  height:0;
  overflow:hidden;
}

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

.ck.ck-tooltip.ck-presence-list__list-item__tooltip > .ck-tooltip__text{
  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{
  width:100%;
  height:3px;
  margin-top:5px;
  display:block;
  position:relative;
}

.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{
  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 .4s ease-in-out;
}

.ck.ck-presence-list--collapsed .ck-presence-list__list:focus{
  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{
  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;
}

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

.ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-item{
  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{
  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);
}

.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;
  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{
  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);
  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;
  -webkit-user-select:none;
  user-select:none;
}

@keyframes fadeIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}