@ckeditor/ckeditor5-revision-history/dist/index-editor.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.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);
}