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

Document revision history feature for CKEditor 5.

/**
 * @license Copyright (c) 2003-2025, 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:hsla(0, 0%, 100%, 1);
}

.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:'';
		position:absolute;
		transition-delay:0;
	}

@media (prefers-reduced-motion: reduce){

.ck.ck-editor__editable::before, .ck.ck-editor__editable::after{
			transition:none;
	}
		}

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

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

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

.ck.ck-editor__editable.ck-editor__editable__loading-overlay::before, .ck.ck-editor__editable.ck-editor__editable__overlay::before, .ck.ck-editor__editable.ck-editor__editable__loading-overlay::after, .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__overlay::after{
			visibility:hidden;
		}

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

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

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

.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-vertical-form .ck-button::after{
		content:"";
		width:0;
		position:absolute;
		right:-1px;
		top:-1px;
		bottom:-1px;
		z-index:1;
	}

.ck-vertical-form .ck-button:focus::after{
		display:none;
	}

@media screen and (max-width: 600px){
			.ck.ck-responsive-form .ck-button::after{
				content:"";
				width:0;
				position:absolute;
				right:-1px;
				top:-1px;
				bottom:-1px;
				z-index:1;
			}

			.ck.ck-responsive-form .ck-button:focus::after{
				display:none;
			}
	}

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

.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);
			min-width:auto;
			width:100%;
			border-radius:var(--ck-border-radius);
			transition:var(--ck-revision-history-revision-transitions);
			background:transparent;
			text-overflow:ellipsis;
		}

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

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

.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{
	display:block;
	position:relative;
	transition:var(--ck-revision-history-revision-transitions);
}

@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{
		overflow:hidden;
		text-overflow:ellipsis;
		width:100%;
		white-space:nowrap;
		display:block;
		font-weight:bold;
	}

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

		width:11px;
		height:10px;
	}

.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{
			display:none;
			position:absolute;
			top:var(--ck-spacing-small);
			right:var(--ck-spacing-small);
		}

.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);
					}

.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_selected .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover: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);
					}

.ck.ck-revision-history-sidebar__revision.ck-revision-history-sidebar__revision_highlighted .ck-revision-history-sidebar__revision__actions .ck-dropdown__button:hover: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:hsl(213deg 20% 35%);
	--ck-revision-history-revision-box-shadow:0 1px 1px 1px hsl(0deg 0% 90%);
	--ck-revision-history-revision-author-icon-offset:20px;
	--ck-revision-history-revision-transitions:background 100ms ease-in, border 100ms 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:hsl(208deg 100% 94%);
	--ck-revision-history-revision-highlighted-background-color-hover:hsl(208deg 100% 90%);
	--ck-revision-history-revision-delete-confirmation-background:hsl(0deg 100% 90%);
	--ck-revision-history-revision-delete-confirmation-active-button-background:hsl(0deg 100% 85%);
}

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision{
		position:relative;
		display:block;
		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 ease;
	}

@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{
			display:block;
			font-size:var(--ck-font-size-small);
			font-weight:bold;
			opacity:.8;
			overflow:hidden;
			text-overflow:ellipsis;
			width:100%;
			white-space:nowrap;
		}

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

.ck.ck-revision-history-sidebar__revision-wrapper .ck-revision-history-sidebar__revision .ck-revision-history-sidebar__revision-authors{
			padding:0;
			margin:0 0 0 var(--ck-revision-history-revision-author-icon-offset);
			flex:0 1 auto;
			min-width: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{
			border-left-color:transparent;
			transform:translateX(calc(-1 * var(--ck-revision-history-sidebar-timeline-padding)));
			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-thread__remove-confirm{
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-items:center;

		position:absolute;
		top:0;
		left:100%;
		width:100%;
		height:100%;

		border-radius:var(--ck-border-radius);
		box-shadow:var(--ck-revision-history-revision-box-shadow);
		background:var(--ck-revision-history-revision-delete-confirmation-background);
		user-select:none;
	}

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

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

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

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

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

.ck.ck-revision-history-sidebar__revision-wrapper .ck-thread__remove-confirm .ck-thread__remove-confirm-inner .ck-thread__remove-confirm-actions .ck.ck-button.ck-thread__remove-confirm-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);
		font-size:9px;
		font-weight:bold;
		padding:var(--ck-spacing-tiny) var(--ck-spacing-standard);
		border-radius:var(--ck-border-radius);
		color:var(--ck-color-base-background);
		text-transform:uppercase;
	}

.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{
		display:flex;
		flex-direction:column;
	}

.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);
	overflow:hidden;
	font-family:inherit;
	font-weight:bold;
	color:inherit;
	padding:0 var(--ck-revision-history-sidebar-timeline-padding);
	display:flex;
	flex-direction:row;
	align-items:center;
}

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

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

.ck{
	--ck-revision-history-sidebar-period-background:hsl(14deg 100% 57%);
	--ck-revision-history-sidebar-timeline-padding:var(--ck-spacing-large);
}

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

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

.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{
	display:flex;
	align-items:center;
	margin-left:auto;
}

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

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

.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);
	}

.ck.ck-editor{
	position:relative;
}

.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar{
		z-index:var(--ck-z-panel);
	}