@ckeditor/ckeditor5-revision-history/dist/index.css

Document revision history 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
 */
.ck {
  --ck-revision-history-loading-overlay-transition-duration: .2s;
  --ck-revision-history-loading-overlay-transition-delay: 0s;
  --ck-revision-history-loading-overlay-spinner-rotation-duration: 1s;
  --ck-revision-history-loading-overlay-spinner-size: 60px;
  --ck-revision-history-loading-overlay-visible-background: #fff;
}

.ck.ck-editor__editable:before, .ck.ck-editor__editable:after {
  visibility: hidden;
  transition: opacity var(--ck-revision-history-loading-overlay-transition-duration) ease;
  opacity: 0;
  content: "";
  transition-delay: 0s;
  position: absolute;
}

@media (prefers-reduced-motion: reduce) {
  .ck.ck-editor__editable:before, .ck.ck-editor__editable:after {
    transition: none;
  }
}

.ck.ck-editor__editable:before {
  background: var(--ck-revision-history-loading-overlay-visible-background);
  width: 100%;
  height: 100%;
  z-index: var(--ck-z-default);
  top: 0;
  left: 0;
}

.ck.ck-editor__editable:after {
  box-sizing: border-box;
  width: var(--ck-revision-history-loading-overlay-spinner-size);
  height: var(--ck-revision-history-loading-overlay-spinner-size);
  border-top: 3px solid var(--ck-color-base-text);
  z-index: var(--ck-z-default);
  border-right: 3px solid #0000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ck.ck-editor__editable.ck-editor__editable__loading-overlay, .ck.ck-editor__editable.ck-editor__editable__overlay {
  min-height: calc(var(--ck-revision-history-loading-overlay-spinner-size) + 2 * var(--ck-spacing-large));
  position: relative;
}

:is(.ck.ck-editor__editable.ck-editor__editable__loading-overlay, .ck.ck-editor__editable.ck-editor__editable__overlay):before, :is(.ck.ck-editor__editable.ck-editor__editable__loading-overlay, .ck.ck-editor__editable.ck-editor__editable__overlay):after {
  visibility: visible;
  z-index: 2;
  opacity: .8;
  transition-delay: var(--ck-revision-history-loading-overlay-transition-delay);
}

.ck.ck-editor__editable.ck-editor__editable__loading-overlay:after {
  animation: ck-revision-history-spinner-animation var(--ck-revision-history-loading-overlay-spinner-rotation-duration) linear infinite;
}

.ck.ck-editor__editable.ck-editor__editable__overlay:after {
  visibility: hidden;
}

@keyframes ck-revision-history-spinner-animation {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.ck.ck-revision-history-save-revision-form {
  flex-flow: row;
  align-items: flex-start;
  width: 400px;
  display: flex;
}

.ck.ck-revision-history-save-revision-form .ck-labeled-field-view {
  width: 100%;
}

.ck.ck-revision-history-save-revision-form .ck-label {
  display: none;
}

.ck.ck-revision-history-save-revision-form .ck-input {
  width: 100%;
}

.ck.ck-revision-history-sidebar__revision-name {
  left: calc(-1 * var(--ck-spacing-small));
  margin-right: 30px;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  position: relative;
}

.ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-label {
  display: none;
}

.ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input {
  padding: var(--ck-spacing-tiny) var(--ck-spacing-small);
  min-height: auto;
  color: inherit;
  font-family: inherit;
  font-weight: bold;
  font-size: var(--ck-font-size-normal);
  border-radius: var(--ck-border-radius);
  width: 100%;
  min-width: auto;
  transition: var(--ck-revision-history-revision-transitions);
  text-overflow: ellipsis;
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input {
    transition: none;
  }
}

.ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input, .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input:focus, .ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input[readonly] {
  background: none;
}

.ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input:not(.ck-input_focused) {
  border-color: #0000;
}

.ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input::placeholder {
  color: inherit;
}

.ck.ck-revision-history-sidebar__revision-name > .ck-labeled-field-view__input-wrapper > .ck-input[readonly] {
  pointer-events: none;
}

.ck.ck-revision-history-sidebar__revision-author {
  transition: var(--ck-revision-history-revision-transitions);
  display: block;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .ck.ck-revision-history-sidebar__revision-author {
    transition: none;
  }
}

.ck.ck-revision-history-sidebar__revision-author .ck-revision-history-sidebar__revision-author__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-weight: bold;
  display: block;
  overflow: hidden;
}

.ck.ck-revision-history-sidebar__revision-author .ck-icon {
  left: calc(-1 * var(--ck-revision-history-revision-author-icon-offset));
  width: 11px;
  height: 10px;
  position: absolute;
  top: 3px;
}

.ck.ck-revision-history-sidebar__revision-author:not(:first-of-type) .ck-icon {
  display: none;
}

.ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions {
  top: var(--ck-spacing-small);
  right: var(--ck-spacing-small);
  display: none;
  position: absolute;
}

.ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-dropdown__button {
  min-width: unset;
  min-height: unset;
}

.ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-dropdown__button .ck-button__icon {
  transform: scale(.7);
}

.ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-dropdown__arrow {
  display: none;
}

.ck.ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__actions .ck-list__item__danger {
  color: var(--ck-color-button-cancel);
}

.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button {
  color: var(--ck-color-base-background);
}

.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on {
  background: var(--ck-color-base-active-focus);
}

:is(.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on):hover {
  filter: brightness(95%);
}

.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on {
  background: var(--ck-revision-history-revision-highlighted-background-color-hover);
}

:is(.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover, .ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button.ck-on):hover {
  filter: brightness(95%);
}

.ck.ck-revision-history-sidebar__revision:hover:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions, .ck.ck-revision-history-sidebar__revision:not(.ck-disabled) .ck-revision-history-sidebar__revision__actions.ck-on {
  display: block;
}

.ck {
  --ck-revision-history-revision-background-color: var(--ck-color-base-background);
  --ck-revision-history-revision-border-color: #47576b;
  --ck-revision-history-revision-box-shadow: 0 1px 1px 1px #e6e6e6;
  --ck-revision-history-revision-author-icon-offset: 20px;
  --ck-revision-history-revision-transitions: background .1s ease-in, border .1s ease-in;
  --ck-revision-history-revision-selected-text-color: var(--ck-color-base-background);
  --ck-revision-history-revision-selected-input-text-color-empty: var(--ck-color-base-background);
  --ck-revision-history-revision-selected-background-color: var(--ck-color-base-active);
  --ck-revision-history-revision-highlighted-background-color: #e0f1ff;
  --ck-revision-history-revision-highlighted-background-color-hover: #cce7ff;
  --ck-revision-history-revision-delete-confirmation-background: #fcc;
  --ck-revision-history-revision-delete-confirmation-active-button-background: #ffb3b3;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision {
  background: var(--ck-revision-history-revision-background-color);
  padding: var(--ck-spacing-large) calc(2 * var(--ck-spacing-standard));
  border-radius: var(--ck-border-radius);
  border-left: 3px solid var(--ck-revision-history-revision-border-color);
  box-shadow: var(--ck-revision-history-revision-box-shadow);
  width: 100%;
  transition: transform .3s;
  display: block;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision {
    transition: none;
  }
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision:last-child {
  margin-bottom: 0;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__date {
  font-size: var(--ck-font-size-small);
  opacity: .8;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-weight: bold;
  display: block;
  overflow: hidden;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision__controls-wrapper {
  margin: var(--ck-spacing-standard) 0 0;
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision-authors {
  margin: 0 0 0 var(--ck-revision-history-revision-author-icon-offset);
  flex: 0 auto;
  min-width: 0;
  padding: 0;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected, .ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted {
  transform: translateX(calc(-1 * var(--ck-revision-history-sidebar-timeline-padding)));
  border-left-color: #0000;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected {
  background: var(--ck-revision-history-revision-selected-background-color);
  color: var(--ck-revision-history-revision-selected-text-color);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision-name .ck-input {
  color: var(--ck-revision-history-revision-selected-text-color);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision-name .ck-input.ck-input-text_empty::placeholder {
  opacity: .7;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted {
  background: var(--ck-revision-history-revision-highlighted-background-color);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision.ck-revision-history-sidebar__actions_dropdown_open {
  z-index: var(--ck-z-default);
}

.ck.ck-revision-history-sidebar__revision-wrapper.ck-revision-history-sidebar__revision-wrapper_confirmation_visible .ck-revision-history-sidebar__revision {
  box-shadow: none;
  position: relative;
  transform: translate3d(-100%, 0, 0);
}

.ck.ck-revision-history-sidebar__revision-wrapper.ck-revision-history-sidebar__revision-wrapper_confirmation_visible .ck-revision-history-sidebar__revision, .ck.ck-revision-history-sidebar__revision-wrapper.ck-revision-history-sidebar__revision-wrapper_confirmation_visible .ck-revision-history-sidebar__revision * {
  --ck-revision-history-revision-background-color: transparent;
  --ck-revision-history-revision-selected-background-color: transparent;
  --ck-revision-history-revision-highlighted-background-color: transparent;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view {
  border-radius: var(--ck-border-radius);
  width: 100%;
  height: 100%;
  box-shadow: var(--ck-revision-history-revision-box-shadow);
  background: var(--ck-revision-history-revision-delete-confirmation-background);
  user-select: none;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 100%;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner {
  text-align: center;
  margin-top: var(--ck-spacing-small);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner p {
  color: var(--ck-color-text);
  margin: 0;
  font-weight: bold;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions {
  flex-direction: row;
  justify-content: space-evenly;
  display: flex;
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:hover, .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:focus, .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:active {
  background: var(--ck-revision-history-revision-delete-confirmation-active-button-background);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button.ck-confirm-view-submit {
  color: var(--ck-color-button-save);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button.ck-confirm-view-cancel {
  color: var(--ck-color-button-cancel);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__subrevisions {
  margin-left: var(--ck-spacing-large);
}

.ck {
  --ck-revision-history-sidebar-revision-vertical-spacing: calc(2 * var(--ck-spacing-standard));
}

.ck.ck-revision-history-sidebar__time-period {
  width: 100%;
}

.ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__label {
  background: var(--ck-revision-history-sidebar-period-background);
  padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
  border-radius: var(--ck-border-radius);
  color: var(--ck-color-base-background);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: bold;
}

.ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__label:first-child {
  margin-top: var(--ck-spacing-standard);
}

.ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__revisions {
  flex-direction: column;
  display: flex;
}

.ck.ck-revision-history-sidebar__time-period .ck-revision-history-sidebar__time-period__revisions .ck-revision-history-sidebar__revision-wrapper {
  margin-top: var(--ck-revision-history-sidebar-revision-vertical-spacing);
}

.ck.ck-revision-history-sidebar__time-period:not(.ck-hidden) + .ck-revision-history-sidebar__time-period {
  margin-top: var(--ck-revision-history-sidebar-revision-vertical-spacing);
}

.ck.ck-revision-history-sidebar__header {
  --header-height: max(calc(var(--ck-ui-component-min-height) + 2 * var(--ck-spacing-small) + 1px),
		calc(var(--ck-icon-size) + 2 * var(--ck-spacing-small) + 2 * var(--ck-spacing-small) + 1px));
  height: var(--header-height);
  min-height: var(--header-height);
  line-height: var(--header-height);
  border-bottom: 1px solid var(--ck-color-toolbar-border);
  color: inherit;
  padding: 0 var(--ck-revision-history-sidebar-timeline-padding);
  flex-direction: row;
  align-items: center;
  font-family: inherit;
  font-weight: bold;
  display: flex;
  overflow: hidden;
}

.ck.ck-revision-history-sidebar__header .ck-revision-history-sidebar__header__label {
  color: inherit;
  font-family: inherit;
  font-size: 1.2em;
  font-weight: bold;
}

.ck.ck-revision-history-sidebar__header .ck-icon {
  margin-right: var(--ck-spacing-large);
}

.ck {
  --ck-revision-history-sidebar-period-background: #ff5724;
  --ck-revision-history-sidebar-timeline-padding: var(--ck-spacing-large);
}

.ck.ck-revision-history-sidebar {
  flex-direction: column;
  display: flex;
}

.ck.ck-revision-history-sidebar .ck-revision-history-sidebar__timeline {
  padding: var(--ck-revision-history-sidebar-timeline-padding);
  font-size: var(--ck-font-size-base);
  flex-direction: column;
  align-items: start;
  height: 100%;
  display: flex;
  overflow: hidden auto;
}

.ck.ck-revision-history-sidebar .ck-revision-history-sidebar__timeline.ck-disabled {
  filter: grayscale(1) opacity(var(--ck-disabled-opacity));
}

.ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation {
  align-items: center;
  margin-left: auto;
  display: flex;
}

.ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation .ck-revision-history-ui__changes-navigation__wrapper {
  margin-right: var(--ck-spacing-standard);
  display: flex;
}

.ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation .ck-revision-history-ui__changes-navigation__label {
  white-space: pre;
  font-weight: bold;
}

.ck.ck-revision-history-ui.ck-revision-history-ui__changes-navigation .ck-revision-history-ui__changes-navigation__navigation {
  margin-left: var(--ck-spacing-small);
}

.ck .ck-revision-change {
  padding: var(--ck-spacing-small) var(--ck-spacing-large);
  border-top-left-radius: var(--ck-border-radius);
  outline: 0;
}

.ck .ck-revision-change > * {
  vertical-align: bottom;
  font-size: var(--ck-font-size-standard);
}

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

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

.ck .ck-revision-change .ck-revision-change__label {
  font-weight: bold;
  font-size: inherit;
  vertical-align: inherit;
}

.ck.ck-button.ck-revision-history-ui__back-to-editing {
  background: var(--ck-color-base-active);
  color: var(--ck-color-base-background);
}

.ck.ck-button.ck-revision-history-ui__back-to-editing:hover:not(.ck-disabled) {
  background: var(--ck-color-base-active-focus);
}

.ck-content .ck-suggestion-preview-marker, .ck-content .ck-suggestion-preview-marker-split {
  opacity: .75;
}

.ck-content .ck-suggestion-preview-marker-split:after {
  content: "¶";
}

.ck-content .ck-suggestion-preview-marker-merge {
  opacity: .75;
  text-decoration: line-through;
}

.ck-content .ck-suggestion-preview-marker-merge:after {
  content: "¶";
}

.ck-content .ck-suggestion-preview-marker-deletion {
  text-decoration: line-through;
}

.ck-content .ck-suggestion-marker-deletion-new:not(.ck-widget), .ck-content .ck-suggestion-marker-merge-new {
  --ck-color-suggestion-marker-deletion-border: none;
  --ck-color-suggestion-marker-deletion-border-active: none;
  --ck-color-suggestion-marker-deletion-background: none;
  --ck-color-suggestion-marker-deletion-background-active: none;
  --ck-color-suggestion-marker-deletion-stroke: #7a1f36cc;
  --ck-color-suggestion-widget-deletion-background: #e5668608;
  --ck-color-suggestion-widget-deletion-background-active: #c4214a0d;
}

.ck-content .ck-suggestion-marker-merge-new:after {
  color: inherit;
}

.ck-content .ck-suggestion-marker-insertion-new, .ck-content .ck-suggestion-marker-split-new {
  opacity: .75;
}

.ck-content .ck-suggestion-marker-deletion-new.ck-suggestion-marker--active:not(.table), .ck-content .ck-suggestion-marker-merge-new.ck-suggestion-marker--active {
  --ck-color-suggestion-marker-deletion-background-active: #da255214;
  --ck-color-suggestion-marker-deletion-stroke: #7a1f36;
  opacity: 1;
}

.ck-content .ck-suggestion-marker-insertion-new.ck-suggestion-marker--active, .ck-content .ck-suggestion-marker-split-new.ck-suggestion-marker--active {
  opacity: 1;
}

.ck.ck-editor__editable_inline.ck-revision-history-root-add {
  border: 3px solid var(--ck-color-suggestion-marker-insertion-border);
}

.ck.ck-editor__editable_inline.ck-revision-history-root-add.ck-revision-history-root--active {
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck.ck-editor__editable_inline.ck-revision-history-root-remove {
  border: 3px solid var(--ck-color-suggestion-marker-deletion-border);
}

.ck.ck-editor__editable_inline.ck-revision-history-root-remove.ck-revision-history-root--active {
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
}