@ckeditor/ckeditor5-comments/dist/index-editor.css

Collaborative comments feature for CKEditor 5.

/**
 * @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-color-comment-background:#f3f7fb;
  --ck-color-comment-separator:#cddeef;
  --ck-color-comment-remove-background:var(--ck-color-light-red);
  --ck-color-comment-input-background:var(--ck-color-comment-background);
  --ck-comment-content-font-family:var(--ck-font-face);
  --ck-comment-content-font-size:var(--ck-font-size-base);
  --ck-comment-content-font-color:var(--ck-color-base-text);
}

.ck .ck-comment__wrapper{
  font-size:var(--ck-font-size-base);
  outline:0;
  transition:all .3s linear;
  position:relative;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-comment__wrapper{
    transition:none;
  }
}

.ck .ck-comment__wrapper:first-of-type{
  border-top-right-radius:var(--ck-border-radius);
  border-top-left-radius:var(--ck-border-radius);
}

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

.ck .ck-comment:after{
  content:"";
  opacity:1;
  top:calc(var(--ck-user-avatar-size) + var(--ck-spacing-small));
  left:calc(var(--ck-spacing-standard) + ( var(--ck-user-avatar-size) / 2)

			 
			- 2px);
  background-color:var(--ck-color-comment-separator);
  width:4px;
  height:100%;
  display:block;
  position:absolute;
}

.ck .ck-comment--edit{
  background-color:var(--ck-color-comment-input-background);
}

.ck .ck-comment--edit:after{
  opacity:0;
}

.ck .ck-comment--edit .ck-comment__input-actions{
  margin-top:var(--ck-spacing-standard);
}

.ck .ck-comment__content{
  word-break:normal;
  overflow-wrap:anywhere;
  font-family:var(--ck-comment-content-font-family);
  color:var(--ck-comment-content-font-color);
}

.ck .ck-comment--info .ck-comment__content{
  font-style:italic;
  font-family:var(--ck-comment-content-font-family);
  font-size:var(--ck-comment-content-font-size);
  color:var(--ck-comment-content-font-color);
}

:is(.ck .ck-comment, .ck .ck-comment__input) p{
  margin:0;
}

:is(.ck .ck-comment, .ck .ck-comment__input) ul, :is(.ck .ck-comment, .ck .ck-comment__input) ol{
  margin-left:10px;
  padding-left:10px;
}

:is(.ck .ck-comment, .ck .ck-comment__input) ul{
  margin-top:0;
  margin-bottom:5px;
  list-style:outside;
}

:is(.ck .ck-comment, .ck .ck-comment__input) ul ul{
  list-style:circle;
}

:is(.ck .ck-comment, .ck .ck-comment__input) ul ul ul{
  list-style:square;
}

.ck .ck-comment__main .ck-comment__input-wrapper{
  flex-direction:column;
  transition:all .3s linear;
  display:flex;
  position:relative;
}

.ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input{
  padding:0;
}

.ck .ck-comment__user{
  z-index:var(--ck-z-default);
}

.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit{
  background:var(--ck-color-base-action);
  color:#fff;
}

.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit:hover{
  background:var(--ck-color-button-save);
}

.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel{
  color:var(--ck-color-text);
}

.ck .ck-comment__external{
  color:var(--ck-color-annotation-info);
  font-style:italic;
  font-size:var(--ck-font-size-tiny);
  margin-top:var(--ck-spacing-standard);
}

.ck .ck-comment .ck-dropdown .ck-dropdown__arrow{
  display:none;
}

.ck .ck-comment .ck-dropdown .ck-list{
  padding:var(--ck-spacing-small) 0;
  margin:0;
}

.ck .ck-comment .ck-dropdown .ck-list .ck-list__item{
  color:var(--ck-color-base-text);
  min-width:auto;
  font-size:1.2em;
}

.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button{
  color:var(--ck-color-text);
}

:root{
  --ck-color-thread-remove-background:var(--ck-color-comment-remove-background);
  --ck-color-comment-count:#5891ca;
  --ck-color-thread-header-background:#fdfadd;
  --ck-color-thread-header-active-background:#fff3a8;
  --ck-color-unlinked-background:#f5f5f5;
  --ck-color-unlinked-active-background:#ebebeb;
}

.ck .ck-thread{
  border-radius:var(--ck-rounded-corners-radius);
  width:100%;
  color:var(--ck-color-base-text);
  background-color:var(--ck-color-base-background);
  outline:0;
  transition-property:color, background-color, width, outline;
  transition-duration:.3s;
  transition-timing-function:ease;
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-thread{
    transition:none;
  }
}

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

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

.ck .ck-thread__header{
  padding:var(--ck-spacing-standard);
  background-color:var(--ck-color-thread-header-background);
  line-height:1.57;
  font-size:var(--ck-font-size-base);
  justify-content:space-between;
  display:flex;
}

.ck .ck-thread__header .ck-button{
  font-size:var(--ck-annotation-button-size);
}

.ck .ck-thread__header .ck-context-wrapper{
  width:100%;
  min-width:0;
  height:25px;
  padding-right:var(--ck-spacing-large);
  display:inline-flex;
  position:relative;
}

.ck .ck-thread__header .ck-context{
  white-space:nowrap;
  width:100%;
  padding:var(--ck-spacing-small) var(--ck-spacing-medium);
  display:flex;
  overflow:hidden;
}

.ck .ck-thread__header .ck-context.ck-context--quotes:after, .ck .ck-thread__header .ck-context.ck-context--quotes:before{
  content:"\"";
  display:inline-block;
}

.ck .ck-thread__header .ck-context .ck-context__type{
  padding-right:var(--ck-spacing-standard);
  font-weight:bold;
}

.ck .ck-thread__header .ck-context .ck-context__value{
  text-overflow:ellipsis;
  border:1px solid #0000;
  overflow:hidden;
}

.ck .ck-thread__header .ck-context .ck-context__value:focus{
  border:var(--ck-focus-ring);
  box-shadow:var(--ck-focus-outer-shadow), 0 0;
  outline:none;
}

.ck .ck-thread__header .ck-context.overlay{
  z-index:2;
  background:var(--ck-color-base-background);
  white-space:normal;
  box-sizing:border-box;
  border-radius:2px;
  display:inline-block;
  position:absolute;
  top:0;
  box-shadow:0 2px 3px #fff3;
}

.ck .ck-thread__comment-count{
  --ck-user-avatar-size:28px;
  padding-left:calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2);
  color:var(--ck-color-comment-count);
  font-size:var(--ck-font-size-base);
  cursor:pointer;
  font-weight:bold;
  transition:background-color .3s;
}

.ck .ck-thread__comment-count:before{
  content:"▼";
  margin-right:var(--ck-spacing-small);
}

.ck .ck-thread--remove .ck-comment{
  background-color:var(--ck-color-comment-remove-background);
}

.ck .ck-thread--remove .ck-thread__input--active{
  background-color:var(--ck-color-base-background);
}

.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input{
  background-color:var(--ck-color-comment-remove-background);
}

.ck .ck-thread--remove .ck-thread__comment-count{
  background-color:var(--ck-color-comment-remove-background);
}

.ck .ck-thread--remove .ck-comment__wrapper .ck-comment:after{
  opacity:0;
}

.ck .ck-thread__comments .ck-comment__wrapper:last-of-type .ck-comment:after{
  opacity:0;
}

.ck .ck-thread__container{
  transition:transform .3s;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-thread__container{
    transition:none;
  }
}

.ck .ck-thread__comments{
  z-index:var(--ck-z-default);
  border-radius:var(--ck-border-radius);
  margin:0;
  padding:0;
  list-style:none;
  position:relative;
}

.ck .ck-thread__user{
  font-size:.85em;
}

.ck .ck-thread__input{
  width:calc(100% - var(--ck-user-avatar-size));
  white-space:normal;
  border-radius:var(--ck-border-radius);
  min-height:38px;
  transition:background-color .2s ease-in-out;
}

.ck .ck-thread--active .ck-comment__options.ck-dropdown{
  display:block;
}

.ck .ck-thread--active .ck-thread__input{
  background-color:var(--ck-color-comment-background);
  display:block;
}

.ck .ck-thread--active .ck-thread__header{
  background-color:var(--ck-color-thread-header-active-background);
}

.ck .ck-thread--unlinked{
  --ck-color-comment-box-border:var(--ck-color-base-border);
  --ck-color-thread-header-background:var(--ck-color-unlinked-background);
  --ck-color-thread-header-active-background:var(--ck-color-unlinked-active-background);
}

.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-comment__input-container{
  --ck-user-avatar-size:28px;
  font-size:var(--ck-font-size-base);
  padding:var(--ck-spacing-standard);
  background:var(--ck-color-comment-background);
  display:none;
}

.ck .ck-comment__input-container--active{
  display:flex;
}

.ck .ck-comment__input{
  padding:var(--ck-spacing-standard);
  padding-top:var(--ck-spacing-medium);
  color:var(--ck-color-base-text);
  resize:none;
  background-color:#0000;
  border-width:0;
  transition:color .3s ease-in-out;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-comment__input{
    transition:none;
  }
}

.ck .ck-comment__input:focus{
  outline:none;
}

.ck .ck-comment__input .ck-editor__editable_inline{
  --ck-focus-ring:none;
  --ck-inner-shadow:none;
  font-family:var(--ck-comment-content-font-family);
  font-size:var(--ck-comment-content-font-size);
  color:var(--ck-comment-content-font-color);
  word-break:normal;
  overflow-wrap:anywhere;
  background-color:#0000;
  border:0;
  padding:0;
  overflow:visible;
}

.ck-comment__input-wrapper .ck.ck-editor__editable_inline :first-child{
  margin-top:0;
}

.ck-comment__input-wrapper .ck.ck-editor__editable_inline :last-child{
  margin-bottom:0;
}

.ck .ck-comment__input-actions{
  text-align:right;
  width:100%;
  display:none;
}

.ck .ck-comment__input-actions.ck-comment__input-actions--active{
  display:block;
}

.ck .ck-comment__input-actions .ck.ck-button{
  cursor:pointer;
  min-height:var(--ck-ui-component-min-height);
  min-width:60px;
  font-size:var(--ck-annotation-button-size);
  margin-left:var(--ck-spacing-large);
  padding:0 var(--ck-spacing-medium);
  justify-content:center;
  align-items:center;
  display:inline-flex;
}

.ck .ck-comment__input-actions .ck-button.ck-disabled{
  opacity:.3;
}

.ck .ck-comment__input-textarea{
  display:block;
}

:root{
  --ck-inline-annotation-container-width:300px;
  --ck-inline-annotation-container-max-height:400px;
}

.ck.ck-balloon-panel .ck-annotation-wrapper{
  width:var(--ck-inline-annotation-container-width);
  max-height:var(--ck-inline-annotation-container-max-height);
  overscroll-behavior-y:contain;
  position:static;
  overflow:hidden auto;
}

.ck.ck-balloon-panel .ck-annotation{
  animation:none;
}

.ck.ck-balloon-panel .ck-annotation-wrapper *{
  white-space:normal;
}

.ck.ck-balloon-panel .ck-annotation-wrapper strong{
  font-weight:bold;
}

.ck.ck-balloon-panel .ck-annotation-wrapper i{
  font-style:italic;
}

:root{
  --ck-annotation-counter-icon-size:16px;
  --ck-annotation-counter-number-size:10px;
  --ck-color-annotation-counter-comment:#f2de02;
  --ck-color-annotation-counter-suggestion-insertion:#5ad86b;
  --ck-color-annotation-counter-suggestion-deletion:#d85a79;
  --ck-color-annotation-counter-suggestion-format:#5ac1d8;
}

.ck.ck-sidebar--narrow .ck-sidebar-item{
  justify-content:center;
  display:flex;
}

.ck.ck-sidebar--narrow .ck-annotation-counter{
  font-size:var(--ck-annotation-counter-icon-size);
  min-height:unset;
  cursor:pointer;
  color:gray;
  padding:0;
}

.ck.ck-sidebar--narrow .ck-annotation-counter:hover, .ck.ck-sidebar--narrow .ck-annotation-counter:focus{
  box-shadow:none;
  color:#4d4d4d;
  background:none;
}

.ck.ck-sidebar--narrow .ck-annotation-counter__badge{
  color:#fff;
  width:16px;
  height:16px;
  font-weight:bold;
  font-size:var(--ck-annotation-counter-number-size);
  font-family:var(--ck-font-face);
  text-shadow:-1px 0 2px #454545, 1px 0 2px #454545;
  z-index:1;
  background:#333;
  border-radius:50%;
  justify-content:center;
  line-height:16px;
  display:flex;
  position:absolute;
  top:-6px;
  right:0;
}

.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode{
  line-height:1;
}

.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion, .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace{
  background:var(--ck-color-annotation-counter-suggestion-insertion);
}

.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion{
  background:var(--ck-color-annotation-counter-suggestion-deletion);
}

.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format{
  background:var(--ck-color-annotation-counter-suggestion-format);
}

.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment{
  background:var(--ck-color-annotation-counter-comment);
}

:root{
  --ck-color-annotation-icon:gray;
  --ck-color-annotation-info:#757575;
  --ck-annotation-button-size:.85em;
}

.ck .ck-annotation{
  --ck-user-avatar-size:28px;
  font-size:var(--ck-font-size-base);
  padding:var(--ck-spacing-standard);
  white-space:normal;
  transition:background-color .3s;
  animation:.3s annotationFadeInLeft;
  display:flex;
  position:relative;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-annotation{
    transition:none;
    animation:none;
  }
}

.ck .ck-annotation .ck-button{
  min-width:unset;
  min-height:unset;
  cursor:pointer;
  color:var(--ck-color-annotation-icon);
  border-radius:var(--ck-border-radius);
  font-size:var(--ck-annotation-button-size);
  background-color:#0000;
}

.ck .ck-annotation .ck-user{
  font-size:.85em;
}

.ck .ck-annotation__main{
  width:calc(100% - var(--ck-user-avatar-size));
  border-radius:var(--ck-border-radius);
  padding-left:var(--ck-spacing-standard);
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"info actions" "content content";
  transition:all .2s;
  display:grid;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-annotation__main{
    transition:none;
  }
}

.ck .ck-annotation__main p{
  white-space:normal;
  font-size:var(--ck-comment-content-font-size);
  margin:0;
  line-height:1.5em;
}

.ck .ck-annotation__user{
  margin-top:var(--ck-spacing-small);
}

.ck .ck-annotation__info{
  color:var(--ck-color-annotation-info);
  grid-area:info;
  align-items:center;
  min-height:2.4em;
  display:flex;
}

.ck .ck-annotation__info-name, .ck .ck-annotation__info-time{
  white-space:nowrap;
  color:var(--ck-color-annotation-info);
  font-weight:bold;
  font-size:var(--ck-font-size-small);
  overflow:hidden;
}

.ck .ck-annotation__info-name{
  text-overflow:ellipsis;
}

.ck .ck-annotation__info-time{
  margin:0 var(--ck-spacing-large);
  flex:none;
}

.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name, .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time{
  white-space:nowrap;
}

.ck .ck-annotation__actions{
  opacity:.5;
  grid-area:actions;
  transition:opacity .2s;
}

@media (prefers-reduced-motion: reduce){
  .ck .ck-annotation__actions{
    transition:none;
  }
}

.ck .ck-annotation__content-wrapper{
  grid-area:content;
  width:100%;
}

@keyframes annotationFadeInLeft{
  from{
    opacity:0;
    transform:translate3d(-5%, 0, 0);
  }

  to{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }
}

:root{
  --ck-color-annotation-wrapper-background:#fff;
  --ck-color-annotation-wrapper-drop-shadow:0 1px 1px 1px #e6e6e6;
}

.ck.ck-sidebar{
  outline:0;
  transition:min-height .25s;
  position:relative;
}

@media (prefers-reduced-motion: reduce){
  .ck.ck-sidebar{
    transition:none;
  }
}

.ck-sidebar-item{
  width:100%;
  transition:top .3s, box-shadow .3s;
  position:absolute;
}

@media (prefers-reduced-motion: reduce){
  .ck-sidebar-item{
    transition:none;
  }
}

.ck-sidebar-item--no-animation{
  transition:top !important;
}

.ck.ck-annotation-wrapper{
  border-radius:var(--ck-border-radius);
  background:var(--ck-color-annotation-wrapper-background);
  box-shadow:var(--ck-color-annotation-wrapper-drop-shadow);
  outline:0;
}

:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions{
  opacity:1;
}

:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions .ck-comment--resolve{
  color:var(--ck-color-button-save);
}

:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--accept{
  color:var(--ck-color-button-save);
}

:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--discard{
  color:var(--ck-color-button-cancel);
}

.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover{
  box-shadow:var(--ck-drop-shadow);
}

.ck.ck-annotation-wrapper--active{
  box-shadow:var(--ck-drop-shadow-active);
}

.ck .ck-comments-archive-dropdown.ck-dropdown__panel{
  z-index:var(--ck-z-panel);
}

.ck .ck-comments-archive{
  box-sizing:content-box;
  width:400px;
  max-height:450px;
}

.ck .ck-comments-archive .ck-annotation{
  animation:none;
}

.ck .ck-comments-archive .ck-comments-archive__header, .ck .ck-comments-archive .ck-comments-archive__content{
  max-height:410px;
  padding:var(--ck-spacing-large);
  overflow:auto;
}

.ck .ck-comments-archive .ck-comments-archive__header{
  max-height:40px;
  line-height:var(--ck-font-size-base);
  border-bottom:1px solid var(--ck-color-toolbar-border);
  font-weight:bold;
}

.ck .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child){
  margin-bottom:var(--ck-spacing-large);
}

.ck .ck-comments-archive .ck-comments-archive__info{
  text-align:center;
  color:var(--ck-color-annotation-info);
  font-style:italic;
}

:root{
  --ck-color-comment-marker:#fef7a9;
  --ck-color-comment-marker-active:#fdf05d;
}