@ckeditor/ckeditor5-comments/dist/index.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 )

			/* Half width of line. */
			- 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;
}

.ck-content .ck-comment-marker {
  background: var(--ck-color-comment-marker);
  border-top: 3px solid #0000;
  border-bottom: 3px solid #0000;
}

.ck-content .ck-comment-marker.ck-widget {
  border: 3px solid var(--ck-color-comment-marker);
  background-color: #0000;
}

.ck-content .ck-comment-marker--active {
  background: var(--ck-color-comment-marker-active);
}

.ck-content .ck-comment-marker--active .ck-comment-marker {
  background: var(--ck-color-comment-marker-active);
}

.ck-content .ck-comment-marker--active.ck-widget {
  border-color: var(--ck-color-comment-marker-active);
}

.ck-content .ck-comment-marker--active.ck-widget .ck-comment-marker {
  background-color: var(--ck-color-comment-marker);
}