@ckeditor/ckeditor5-collaboration-core/dist/index-editor.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-user-colors--0:#6d78e8;
  --ck-user-colors--0-alpha:#6d78e826;
  --ck-user-colors--1:#007a6c;
  --ck-user-colors--1-alpha:#007a6c26;
  --ck-user-colors--2:#ba4545;
  --ck-user-colors--2-alpha:#ba454526;
  --ck-user-colors--3:#5635b1;
  --ck-user-colors--3-alpha:#5635b126;
  --ck-user-colors--4:#548a2e;
  --ck-user-colors--4-alpha:#548a2e26;
  --ck-user-colors--5:#c3185d;
  --ck-user-colors--5-alpha:#c3185d26;
  --ck-user-colors--6:#ea4343;
  --ck-user-colors--6-alpha:#ea434326;
  --ck-user-colors--7:#0bc3d0;
  --ck-user-colors--7-alpha:#0bc3d026;
  --ck-user-dot-size:6px;
}

.ck [class^="ck-user__color--"], .ck [class*=" ck-user__color--"]{
  color:var(--ck-user-color, var(--ck-user-colors--0));
}

.ck [class^="ck-user__bg-color--"], .ck [class*=" ck-user__bg-color--"]{
  background-color:var(--ck-user-color, var(--ck-user-colors--0));
}

.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"]{
  background-color:var(--ck-user-color-alpha, var(--ck-user-colors--0-alpha));
}

:is(.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"]).ck-widget{
  border:3px solid var(--ck-user-color, var(--ck-user-colors--0));
  background-color:#0000;
}

:is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot), :is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot)::selection{
  background-color:var(--ck-user-color, var(--ck-user-colors--0));
}

:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-line{
  border:1px solid var(--ck-user-color, var(--ck-user-colors--0));
}

:root{
  --ck-user-avatar-size:40px;
  --ck-user-avatar-background:#3670ab;
  --ck-user-avatar-color:#fff;
  --ck-user-me-border-color:#fff;
}

.ck.ck-user{
  background-color:var(--ck-user-avatar-background);
  box-sizing:border-box;
  height:var(--ck-user-avatar-size);
  width:var(--ck-user-avatar-size);
  min-width:var(--ck-user-avatar-size);
  min-height:var(--ck-user-avatar-size);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  margin:2px;
  line-height:100%;
  display:flex;
  position:relative;
}

.ck.ck-user.ck-user_me{
  border:2px solid var(--ck-user-me-border-color);
  outline:2px solid var(--ck-user-avatar-background);
}

.ck.ck-user__name{
  color:var(--ck-user-avatar-color);
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
}

.ck.ck-user__name.ck-user__name--hidden{
  display:none;
}

.ck.ck-user__img{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-color:var(--ck-user-avatar-background);
  border:none;
  border-radius:50%;
  width:100%;
  height:100%;
  display:none;
}

.ck.ck-user__img.ck-user__anonymous{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.8%2020H2c0-5.7%205-5.7%206-7l.2-.8c-1.6-.8-2.7-2.7-2.7-5%200-2.8%202-5.2%204.3-5.2S14%204.4%2014%207.3c0%202.2-1%204-2.6%205l.2.6c1.2%201.3%206%201.4%206%207H9.8z%22%2F%3E%0A%3C%2Fsvg%3E");
  display:block;
}

.ck.ck-user__img.ck-user__anonymous + .ck-user__name{
  display:none;
}

.ck.ck-user__img.ck-user__avatar{
  background-color:#fff;
  display:block;
}

.ck.ck-user__img.ck-user__img--hidden{
  display:none;
}

.ck.ck-user__notification{
  background:var(--ck-color-base-background);
  border:2px solid var(--ck-color-base-background);
  box-sizing:content-box;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:15px;
  height:15px;
  display:flex;
  position:absolute;
  top:-8px;
  right:-7px;
  overflow:hidden;
  transform:translateZ(0);
}

.ck.ck-user__notification .ck-user__icon{
  color:var(--ck-color-annotation-info);
  background:var(--ck-color-base-background);
  width:19px;
  min-width:19px;
  max-width:19px;
  height:19px;
  min-height:19px;
  max-height:19px;
}

.ck.ck-button.ck-confirm-view-submit{
  color:var(--ck-color-button-save);
}

.ck.ck-button.ck-confirm-view-cancel{
  color:var(--ck-color-button-cancel);
}

.ck .ck-confirm-view-active{
  transition:all .3s linear;
  transform:translate3d(-100%, 0, 0);
}

.ck .ck-confirm-view{
  font-size:var(--ck-font-size-base);
  background-color:var(--ck-color-light-red);
  justify-content:flex-start;
  width:100%;
  height:100%;
  display:flex;
  position:absolute;
  top:0;
  left:100%;
}

.ck .ck-confirm-view .ck-confirm-view-inner{
  padding-top:var(--ck-spacing-standard);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  max-height:400px;
  display:flex;
}

.ck .ck-confirm-view p{
  margin:0;
  font-weight:bold;
}

:root{
  --ck-color-comment-box-border:#f2de02;
  --ck-color-suggestion-box-deletion-border:#d85a79;
  --ck-color-suggestion-box-insertion-border:#5ad86b;
  --ck-color-suggestion-box-format-border:#5ac1d8;
}

.ck .ck-suggestion{
  border-top-left-radius:var(--ck-border-radius);
}

.ck .ck-suggestion:focus{
  background:var(--ck-color-button-default-hover-background);
  outline:none;
}

.ck .ck-annotation{
  border-left:3px solid #0000;
}

.ck .ck-suggestion--disabled-comments .ck-annotation{
  min-height:80px;
}

.ck .ck-comment, .ck .ck-thread__comment-count, .ck .ck-comment__input-container, .ck .ck-thread__header{
  border-left:3px solid var(--ck-color-comment-box-border);
}

.ck .ck-suggestion-insertion .ck-suggestion{
  border-left-color:var(--ck-color-suggestion-box-insertion-border);
}

.ck .ck-suggestion-deletion .ck-suggestion{
  border-left-color:var(--ck-color-suggestion-box-deletion-border);
}

.ck .ck-suggestion-replace .ck-suggestion{
  border-left-color:var(--ck-color-suggestion-box-insertion-border);
}

.ck .ck-suggestion-format .ck-suggestion{
  border-left-color:var(--ck-color-suggestion-box-format-border);
}

.ck .ck-suggestion-wrapper{
  border-radius:var(--ck-rounded-corners-radius);
  overflow:hidden;
}

.ck .ck-suggestion-wrapper:focus{
  outline:var(--ck-focus-ring);
  box-shadow:0 0 0 4px var(--ck-color-focus-outer-shadow);
}

.ck-balloon-panel:has(.ck-suggestion-wrapper:focus){
  border:var(--ck-focus-ring);
  box-shadow:var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
  outline:none;
}

.ck .ck-suggestion-type{
  font-weight:bold;
}

.ck .ck-suggestion-color{
  vertical-align:text-bottom;
  border-radius:14px;
  width:14px;
  height:14px;
  margin:0 5px;
  display:inline-block;
  box-shadow:0 0 0 1px #454545;
}

.ck .ck-suggestion-insertion .ck-comment, .ck .ck-suggestion-insertion .ck-thread__comment-count, .ck .ck-suggestion-insertion .ck-comment__input-container, .ck .ck-suggestion-replace .ck-comment, .ck .ck-suggestion-replace .ck-thread__comment-count, .ck .ck-suggestion-replace .ck-comment__input-container{
  border-left-color:var(--ck-color-suggestion-box-insertion-border);
}

.ck .ck-suggestion-deletion .ck-comment, .ck .ck-suggestion-deletion .ck-thread__comment-count, .ck .ck-suggestion-deletion .ck-comment__input-container{
  border-left-color:var(--ck-color-suggestion-box-deletion-border);
}

.ck .ck-suggestion-format .ck-comment, .ck .ck-suggestion-format .ck-thread__comment-count, .ck .ck-suggestion-format .ck-comment__input-container{
  border-left-color:var(--ck-color-suggestion-box-format-border);
}

: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.ck-aria-description{
  display:none;
}

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