@ckeditor/ckeditor5-comments 42.0.1 → 42.0.2-alpha.0

package/dist/index-editor.css

@@ -2,716 +2,821 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-:root {
---ck-color-comment-marker: hsl(55, 98%, 83%);
---ck-color-comment-marker-active: hsl(55, 98%, 68%);
---ck-color-comment-background: hsl(210, 52%, 97%);
---ck-color-comment-separator: hsl(210, 52%, 87%);
---ck-color-comment-remove-background: var(--ck-color-light-red);
---ck-color-comment-input-background: var(--ck-color-comment-background);
---ck-color-comment-count: hsl(210, 52%, 57%);
---ck-color-thread-header-background: hsl(54, 88%, 93%);
---ck-color-thread-header-active-background: hsl(52, 100%, 83%);
---ck-color-unlinked-background: hsl(0, 0%, 96%);
---ck-color-unlinked-active-background: hsl(0, 0%, 92%);
---ck-inline-annotation-container-width: 300px;
---ck-inline-annotation-container-max-height: 400px;
---ck-color-annotation-wrapper-background: hsl(0, 0%, 100%);
---ck-color-annotation-wrapper-drop-shadow: 0 1px 1px 1px hsl(0, 0%, 90%);
---ck-annotation-counter-icon-size: 16px;
---ck-annotation-counter-number-size: 10px;
---ck-color-annotation-counter-comment: hsl(55, 98%, 48%);
---ck-color-annotation-counter-suggestion-insertion: hsl(128, 62%, 60%);
---ck-color-annotation-counter-suggestion-deletion: hsl(345, 62%, 60%);
---ck-color-annotation-counter-suggestion-format: hsl(191, 62%, 60%);
---ck-color-annotation-icon: hsl(0, 0%, 50%);
---ck-color-annotation-info: hsl(0, 0%, 46%);
---ck-annotation-button-size: 0.85em;
+:root{
+	--ck-color-comment-marker:hsl(55, 98%, 83%);
+	--ck-color-comment-marker-active:hsl(55, 98%, 68%);
 }
-.ck-comment-marker {
-background: var(--ck-color-comment-marker);
-border-top: 3px solid transparent;
-border-bottom: 3px solid transparent;
 
+.ck-comment-marker{
+	background:var(--ck-color-comment-marker);
+	border-top:3px solid transparent;
+	border-bottom:3px solid transparent;
 }
-.ck-comment-marker.ck-widget {
-background-color: transparent;
-border: 3px solid var(--ck-color-comment-marker);
 
-}
-.ck-comment-marker--active {
-background: var(--ck-color-comment-marker-active);
-
-}
-.ck-comment-marker--active .ck-comment-marker {
-background: var(--ck-color-comment-marker-active);
+.ck-comment-marker.ck-widget{
+		background-color:transparent;
+		border:3px solid var(--ck-color-comment-marker);
+	}
 
+.ck-comment-marker--active{
+	background:var(--ck-color-comment-marker-active);
 }
-.ck-comment-marker--active.ck-widget {
-border-color: var(--ck-color-comment-marker-active);
 
-}
-.ck-comment-marker--active.ck-widget .ck-comment-marker {
-background-color: var(--ck-color-comment-marker);
+.ck-comment-marker--active .ck-comment-marker{
+		background:var(--ck-color-comment-marker-active);
+	}
 
-}
-.ck .ck-comments-archive-dropdown.ck-dropdown__panel {
-z-index: var( --ck-z-panel );
+.ck-comment-marker--active.ck-widget{
+		border-color:var(--ck-color-comment-marker-active);
+	}
 
-}
-.ck .ck-comments-archive {
-width: 400px;
-max-height: 450px;
-box-sizing: content-box;
+.ck-comment-marker--active.ck-widget .ck-comment-marker{
+			background-color:var(--ck-color-comment-marker);
+		}
 
-}
-.ck .ck-comments-archive .ck-annotation {
-animation: none;
+.ck .ck-comments-archive-dropdown.ck-dropdown__panel{
+		z-index:var(--ck-z-panel);
+	}
 
+.ck .ck-comments-archive{
+	width:400px;
+	max-height:450px;
+	box-sizing:content-box;
 }
-.ck .ck-comments-archive .ck-comments-archive__header {
-overflow: auto;
-max-height: 410px;
-padding: var( --ck-spacing-large );
 
-}
-.ck .ck-comments-archive .ck-comments-archive__header {
-max-height: 40px;
-line-height: var( --ck-font-size-base );
-font-weight: bold;
-border-bottom: 1px solid var( --ck-color-toolbar-border );
+.ck .ck-comments-archive .ck-annotation{
+		animation:none;
+	}
 
-}
-.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__header, .ck .ck-comments-archive .ck-comments-archive__content{
+		overflow:auto;
+		max-height:410px;
+		padding:var(--ck-spacing-large);
+	}
 
-}
-.ck .ck-comments-archive .ck-comments-archive__info {
-text-align: center;
-font-style: italic;
-color: var( --ck-color-annotation-info );
+.ck .ck-comments-archive .ck-comments-archive__header{
+		max-height:40px;
+		line-height:var(--ck-font-size-base);
+		font-weight:bold;
+		border-bottom:1px solid var(--ck-color-toolbar-border);
+	}
+
+.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;
+		font-style:italic;
+		color:var(--ck-color-annotation-info);
+	}
+
+:root{
+	--ck-color-comment-background:hsl(210, 52%, 97%);
+	--ck-color-comment-separator:hsl(210, 52%, 87%);
+	--ck-color-comment-remove-background:var(--ck-color-light-red);
+	--ck-color-comment-input-background:var(--ck-color-comment-background);
+}
+
+.ck .ck-comment__wrapper{
+	font-size:var(--ck-font-size-base);
+	position:relative;
+	outline:0;
+	transition:all 300ms linear;
+}
+
+@media (prefers-reduced-motion: reduce){
+
+.ck .ck-comment__wrapper{
+		transition:none;
+}
+	}
+
+.ck .ck-comment__wrapper.ck-comment--remove-confirmation{
+		transform:translate3d( -100%, 0, 0);
+	}
+
+.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::after{
+		content:'';
+		display:block;
+		position:absolute;
+		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);
+		width:4px;
+		height:100%;
+		background-color:var(--ck-color-comment-separator);
+	}
+
+.ck .ck-comment--remove{
+	background-color:var(--ck-color-comment-remove-background);
+}
+
+.ck .ck-comment--remove::after{
+		opacity:0;
+	}
+
+.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:break-word;
+}
+
+.ck .ck-comment--info .ck-comment__content{
+		font-style:italic;
+	}
+.ck .ck-comment p, .ck .ck-comment__input p{
+		margin:0;
+	}
+.ck .ck-comment ul,
+	.ck .ck-comment__input ul,
+	.ck .ck-comment ol,
+	.ck .ck-comment__input ol{
+		padding-left:10px;
+		margin-left:10px;
+	}
+.ck .ck-comment ul, .ck .ck-comment__input ul{
+		list-style:disc;
+		margin-bottom:5px;
+		margin-top:0;
+	}
+.ck .ck-comment ul ul, .ck .ck-comment__input ul ul{
+			list-style:circle;
+		}
+.ck .ck-comment ul ul ul, .ck .ck-comment__input ul ul ul{
+				list-style:square;
+			}
+
+.ck .ck-comment__main .ck-comment__input-wrapper{
+		display:flex;
+		flex-direction:column;
+		position:relative;
+		transition:all 300ms linear;
+	}
+
+.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:hsl(0, 0%, 100%);
+}
+.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{
+	font-style:italic;
+	color:var(--ck-color-annotation-info);
+	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{
+		margin:0;
+		padding:0;
+	}
+
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item{
+			font-size:1.2em;
+			color:var(--ck-color-base-text);
+			min-width:auto;
+		}
+
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button{
+				color:var(--ck-color-text);
+			}
+
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button__label{
+				margin:0 var(--ck-spacing-large);
+			}
+
+:root{
+	--ck-color-thread-remove-background:var(--ck-color-comment-remove-background);
+	--ck-color-comment-count:hsl(210, 52%, 57%);
+
+	--ck-color-thread-header-background:hsl(54, 88%, 93%);
+	--ck-color-thread-header-active-background:hsl(52, 100%, 83%);
+
+	--ck-color-unlinked-background:hsl(0, 0%, 96%);
+	--ck-color-unlinked-active-background:hsl(0, 0%, 92%);
+}
+
+.ck .ck-thread{
+	width:100%;
+	color:var(--ck-color-base-text);
+	outline:0;
+	background-color:var(--ck-color-base-background);
+	overflow:hidden;
+	transition:all 300ms ease;
+	border-radius:var(--ck-border-radius);
+}
+
+@media (prefers-reduced-motion: reduce){
+
+.ck .ck-thread{
+		transition:none;
+}
+	}
+
+.ck .ck-thread__header{
+	display:flex;
+	justify-content:space-between;
+	line-height:1.57;
+	padding:var(--ck-spacing-standard);
+	background-color:var(--ck-color-thread-header-background);
+	font-size:var(--ck-font-size-base);
+}
+
+.ck .ck-thread__header .ck-button{
+		font-size:var(--ck-annotation-button-size);
+	}
+
+.ck .ck-thread__header .ck-context-wrapper{
+		display:inline-flex;
+		width:100%;
+		min-width:0;
+		height:25px;
+		position:relative;
+		padding-right:var(--ck-spacing-large);
+	}
 
-}
-.ck .ck-comment__wrapper {
-font-size: var(--ck-font-size-base);
-position: relative;
-outline: 0;
-transition: all 300ms linear;
+.ck .ck-thread__header .ck-context{
+		display:flex;
+		white-space:nowrap;
+		overflow:hidden;
+		width:100%;
+		padding:var(--ck-spacing-small) var(--ck-spacing-medium);
+	}
 
-}
-.ck .ck-comment__wrapper.ck-comment--remove-confirmation {
-transform: translate3d( -100%, 0, 0 );
+.ck .ck-thread__header .ck-context.ck-context--quotes::after, .ck .ck-thread__header .ck-context.ck-context--quotes::before{
+				display:inline-block;
+				content:'"';
+			}
 
-}
-.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-thread__header .ck-context .ck-context__type{
+			font-weight:bold;
+			padding-right:var(--ck-spacing-standard);
+		}
 
-}
-.ck .ck-comment::after {
-content: '';
-display: block;
-position: absolute;
-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 )
+.ck .ck-thread__header .ck-context .ck-context__value{
+			overflow:hidden;
+			text-overflow:ellipsis;
+		}
 
-			
-			- 2px
-		);
-width: 4px;
-height: 100%;
-background-color: var(--ck-color-comment-separator);
+.ck .ck-thread__header .ck-context.overlay{
+			display:inline-block;
+			position:absolute;
+			top:0;
+			z-index:2;
 
-}
-.ck .ck-comment--remove {
-background-color: var(--ck-color-comment-remove-background);
+			background:var(--ck-color-base-background);
+			box-shadow:0 2px 3px hsla(0, 0%, 100%, 0.2);
+			border-radius:2px;
+			white-space:normal;
+			box-sizing:border-box;
+		}
 
-}
-.ck .ck-comment--remove::after {
-opacity: 0;
+.ck .ck-thread__comment-count{
+	--ck-user-avatar-size:28px;
 
-}
-.ck .ck-comment--edit {
-background-color: var(--ck-color-comment-input-background);
+	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);
+	font-weight:bold;
+	cursor:pointer;
+	transition:background-color 300ms ease;
 }
-.ck .ck-comment--edit::after {
-opacity: 0;
 
-}
-.ck .ck-comment--edit .ck-comment__input-actions {
-margin-top: var(--ck-spacing-standard);
+.ck .ck-thread__comment-count::before{
+		content:'\25BC';
+		margin-right:var(--ck-spacing-small);
+	}
 
-}
-.ck .ck-comment__content {
-word-break: break-word;
+.ck .ck-thread--remove .ck-comment{
+		background-color:var(--ck-color-comment-remove-background);
+	}
 
-}
-.ck .ck-comment--info .ck-comment__content {
-font-style: italic;
+.ck .ck-thread--remove .ck-thread__input--active{
+		background-color:var(--ck-color-base-background);
+	}
 
-}
-.ck .ck-comment p {
-margin: 0;
+.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input{
+			background-color:var(--ck-color-comment-remove-background);
+		}
 
-}
-.ck .ck-comment ul {
-padding-left: 10px;
-margin-left: 10px;
+.ck .ck-thread--remove .ck-thread__comment-count{
+		background-color:var(--ck-color-comment-remove-background);
+	}
 
-}
-.ck .ck-comment ul {
-list-style: disc;
-margin-bottom: 5px;
-margin-top: 0;
+.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 300ms ease;
 }
-.ck .ck-comment ul ul {
-list-style: circle;
 
-}
-.ck .ck-comment ul ul ul {
-list-style: square;
+@media (prefers-reduced-motion: reduce){
 
+.ck .ck-thread__container{
+		transition:none;
 }
-.ck .ck-comment__main .ck-comment__input-wrapper {
-display: flex;
-flex-direction: column;
-position: relative;
-transition: all 300ms linear;
+	}
 
+.ck .ck-thread__comments{
+	position:relative;
+	z-index:var(--ck-z-default);
+	list-style:none;
+	margin:0;
+	padding:0;
+	border-radius:var(--ck-border-radius);
 }
-.ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input {
-padding: 0;
 
+.ck .ck-thread__user{
+	font-size:0.85em;
 }
-.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: hsl(0, 0%, 100%);
+.ck .ck-thread__input{
+	width:calc( 100% - var(--ck-user-avatar-size));
+	white-space:normal;
 
+	transition:background-color 200ms ease-in-out;
+	border-radius:var(--ck-border-radius);
+	min-height:38px;
 }
-.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-thread--active .ck-comment__options.ck-dropdown{
+		display:block;
+	}
 
-}
-.ck .ck-comment__external {
-font-style: italic;
-color: var(--ck-color-annotation-info);
-font-size: var(--ck-font-size-tiny);
-margin-top: var(--ck-spacing-standard);
+.ck .ck-thread--active .ck-thread__input{
+		display:block;
+		background-color:var(--ck-color-comment-background);
+	}
 
-}
-.ck .ck-comment .ck-dropdown .ck-dropdown__arrow {
-display: none;
+.ck .ck-thread--active .ck-thread__header{
+		background-color:var(--ck-color-thread-header-active-background);
+	}
 
-}
-.ck .ck-comment .ck-dropdown .ck-list {
-margin: 0;
-padding: 0;
+.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-comment .ck-dropdown .ck-list .ck-list__item {
-font-size: 1.2em;
-color: var(--ck-color-base-text);
-min-width: auto;
 
+.ck .ck-thread--remove-confirmation .ck-thread__container{
+		transform:translate3d( -100%, 0, 0);
+	}
+.ck.ck-button.ck-thread__remove-confirm-submit{
+	color:var(--ck-color-button-save);
 }
-.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button {
-color: var(--ck-color-text);
 
+.ck.ck-button.ck-thread__remove-confirm-cancel{
+	color:var(--ck-color-button-cancel);
 }
-.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button__label {
-margin: 0 var(--ck-spacing-large);
 
+.ck .ck-thread__remove-confirm{
+	font-size:var(--ck-font-size-base);
+	position:absolute;
+	display:flex;
+	justify-content:flex-start;
+	top:0;
+	left:100%;
+	width:100%;
+	height:100%;
+	background-color:var(--ck-color-comment-remove-background);
 }
-.ck .ck-thread {
-width: 100%;
-color: var(--ck-color-base-text);
-outline: 0;
-background-color: var(--ck-color-base-background);
-overflow: hidden;
-transition: all 300ms ease;
-border-radius: var(--ck-border-radius);
 
-}
-.ck .ck-thread__header {
-display: flex;
-justify-content: space-between;
-line-height: 1.57;
-padding: var(--ck-spacing-standard);
-background-color: var(--ck-color-thread-header-background);
-font-size: var(--ck-font-size-base);
+.ck .ck-thread__remove-confirm .ck-thread__remove-confirm-inner{
+		display:flex;
+		flex-direction:column;
+		align-items:center;
+		justify-content:center;
+		padding-top:var(--ck-spacing-standard);
+		height:100%;
+		width:100%;
+		max-height:400px;
+	}
 
-}
-.ck .ck-thread__header .ck-button {
-font-size: var(--ck-annotation-button-size);
+.ck .ck-thread__remove-confirm p{
+		font-weight:bold;
+		margin:0;
+	}
 
-}
-.ck .ck-thread__header .ck-context-wrapper {
-display: inline-flex;
-width: 100%;
-min-width: 0;
-height: 25px;
-position: relative;
-padding-right: var(--ck-spacing-large);
+.ck .ck-comment__input-container{
+	--ck-user-avatar-size:28px;
 
-}
-.ck .ck-thread__header .ck-context {
-display: flex;
-white-space: nowrap;
-overflow: hidden;
-width: 100%;
-padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+	font-size:var(--ck-font-size-base);
 
+	display:none;
+	padding:var(--ck-spacing-standard);
+	background:var(--ck-color-comment-background);
 }
-.ck .ck-thread__header .ck-context.ck-context--quotes::after {
-display: inline-block;
-content: '"';
 
+.ck .ck-comment__input-container--active{
+	display:flex;
 }
-.ck .ck-thread__header .ck-context .ck-context__type {
-font-weight: bold;
-padding-right: var(--ck-spacing-standard);
 
-}
-.ck .ck-thread__header .ck-context .ck-context__value {
-overflow: hidden;
-text-overflow: ellipsis;
+.ck .ck-comment__input{
+	padding:var(--ck-spacing-standard);
+	padding-top:var(--ck-spacing-medium);
 
+	color:var(--ck-color-base-text);
+	border-width:0;
+	resize:none;
+	background-color:transparent;
+	transition:color 300ms ease-in-out;
 }
-.ck .ck-thread__header .ck-context.overlay {
-display: inline-block;
-position: absolute;
-top: 0;
-z-index: 2;
-background: var(--ck-color-base-background);
-box-shadow: 0 2px 3px hsla(0, 0%, 100%, 0.2);
-border-radius: 2px;
-white-space: normal;
-box-sizing: border-box;
 
-}
-.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);
-font-weight: bold;
-cursor: pointer;
-transition: background-color 300ms ease;
+@media (prefers-reduced-motion: reduce){
 
+.ck .ck-comment__input{
+		transition:none;
 }
-.ck .ck-thread__comment-count::before {
-content: '\25BC';
-margin-right: var(--ck-spacing-small);
+	}
 
-}
-.ck .ck-thread--remove .ck-comment {
-background-color: var(--ck-color-comment-remove-background);
+.ck .ck-comment__input:focus{
+		outline:none;
+	}
 
-}
-.ck .ck-thread--remove .ck-thread__input--active {
-background-color: var(--ck-color-base-background);
+.ck .ck-comment__input .ck-editor__editable_inline{
+		--ck-focus-ring:none;
+		--ck-inner-shadow:none;
 
+		padding:0;
+		overflow:visible;
+		border:0;
+		background-color:transparent;
+		word-break:break-word;
+	}
+.ck-comment__input-wrapper .ck.ck-editor__editable_inline *:first-child{
+	margin-top:0;
 }
-.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input {
-background-color: var(--ck-color-comment-remove-background);
-
+.ck-comment__input-wrapper .ck.ck-editor__editable_inline *:last-child{
+	margin-bottom:0;
 }
-.ck .ck-thread--remove .ck-thread__comment-count {
-background-color: var(--ck-color-comment-remove-background);
 
+.ck .ck-comment__input-actions{
+	width:100%;
+	text-align:right;
+	display:none;
 }
-.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-comment__input-actions.ck-comment__input-actions--active{
+		display:block;
+	}
 
-}
-.ck .ck-thread__container {
-transition: transform 300ms ease;
+.ck .ck-comment__input-actions .ck.ck-button{
+		display:inline-flex;
+		justify-content:center;
+		align-items:center;
+		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);
+	}
 
-}
-.ck .ck-thread__comments {
-position: relative;
-z-index: var(--ck-z-default);
-list-style: none;
-margin: 0;
-padding: 0;
-border-radius: var(--ck-border-radius);
+.ck .ck-comment__input-actions .ck-button.ck-disabled{
+		opacity:.3;
+	}
 
+.ck .ck-comment__input-textarea{
+	display:block;
 }
-.ck .ck-thread__user {
-font-size: 0.85em;
 
+:root{
+	--ck-inline-annotation-container-width:300px;
+	--ck-inline-annotation-container-max-height:400px;
 }
-.ck .ck-thread__input {
-width: calc( 100% - var(--ck-user-avatar-size) );
-white-space: normal;
-transition: background-color 200ms ease-in-out;
-border-radius: var(--ck-border-radius);
-min-height: 38px;
 
-}
-.ck .ck-thread--active .ck-comment__options.ck-dropdown {
-display: block;
+.ck.ck-balloon-panel .ck-annotation-wrapper{
+	position:static;
 
-}
-.ck .ck-thread--active .ck-thread__input {
-display: block;
-background-color: var(--ck-color-comment-background);
+	width:var(--ck-inline-annotation-container-width);
+	max-height:var(--ck-inline-annotation-container-max-height);
 
+	overflow-y:auto;
+	overscroll-behavior-y:contain;
+	overflow-x:hidden;
 }
-.ck .ck-thread--active .ck-thread__header {
-background-color: var(--ck-color-thread-header-active-background);
 
+.ck.ck-balloon-panel .ck-annotation{
+	animation:none;
 }
-.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-balloon-panel .ck-annotation-wrapper *{
+	white-space:normal;
 }
-.ck .ck-thread--remove-confirmation .ck-thread__container {
-transform: translate3d( -100%, 0, 0 );
-
+.ck.ck-balloon-panel .ck-annotation-wrapper strong{
+	font-weight:bold;
 }
-.ck.ck-button.ck-thread__remove-confirm-submit {
-color: var(--ck-color-button-save);
 
+.ck.ck-balloon-panel .ck-annotation-wrapper i{
+	font-style:italic;
 }
-.ck.ck-button.ck-thread__remove-confirm-cancel {
-color: var(--ck-color-button-cancel);
 
+:root{
+	--ck-color-annotation-wrapper-background:hsl(0, 0%, 100%);
+	--ck-color-annotation-wrapper-drop-shadow:0 1px 1px 1px hsl(0, 0%, 90%);
 }
-.ck .ck-thread__remove-confirm {
-font-size: var(--ck-font-size-base);
-position: absolute;
-display: flex;
-justify-content: flex-start;
-top: 0;
-left: 100%;
-width: 100%;
-height: 100%;
-background-color: var(--ck-color-comment-remove-background);
 
+.ck.ck-sidebar{
+	position:relative;
+	transition:min-height 250ms ease;
+	outline:0;
 }
-.ck .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
-display: flex;
-flex-direction: column;
-align-items: center;
-justify-content: center;
-padding-top: var(--ck-spacing-standard);
-height: 100%;
-width: 100%;
-max-height: 400px;
 
-}
-.ck .ck-thread__remove-confirm p {
-font-weight: bold;
-margin: 0;
+@media (prefers-reduced-motion: reduce){
 
+.ck.ck-sidebar{
+		transition:none;
 }
-.ck .ck-comment__input-container {
---ck-user-avatar-size: 28px;
-font-size: var(--ck-font-size-base);
-display: none;
-padding: var(--ck-spacing-standard);
-background: var(--ck-color-comment-background);
+	}
 
+.ck-sidebar-item{
+	position:absolute;
+	width:100%;
+	transition:top 300ms ease, box-shadow 300ms ease;
 }
-.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);
-border-width: 0;
-resize: none;
-background-color: transparent;
-transition: color 300ms ease-in-out;
+@media (prefers-reduced-motion: reduce){
 
+.ck-sidebar-item{
+		transition:none;
 }
-.ck .ck-comment__input:focus {
-outline: none;
+	}
 
+.ck-sidebar-item--no-animation{
+	transition:top 0s ease !important;
 }
-.ck .ck-comment__input .ck-editor__editable_inline {
---ck-focus-ring: none;
---ck-inner-shadow: none;
-padding: 0;
-overflow: visible;
-border: 0;
-background-color: transparent;
-word-break: break-word;
 
+.ck.ck-annotation-wrapper{
+	outline:0;
+	border-radius:var(--ck-border-radius);
+	background:var(--ck-color-annotation-wrapper-background);
+	box-shadow:var(--ck-color-annotation-wrapper-drop-shadow);
 }
-.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-annotation-wrapper--active .ck-annotation__actions, .ck.ck-annotation-wrapper:hover .ck-annotation__actions{
+		opacity:1;
+	}
 
-}
-.ck .ck-comment__input-actions {
-width: 100%;
-text-align: right;
-display: none;
+.ck.ck-annotation-wrapper--active .ck-annotation__actions .ck-comment--resolve, .ck.ck-annotation-wrapper:hover .ck-annotation__actions .ck-comment--resolve{
+			color:var(--ck-color-button-save);
+		}
 
-}
-.ck .ck-comment__input-actions.ck-comment__input-actions--active {
-display: block;
+.ck.ck-annotation-wrapper--active .ck-suggestion--accept, .ck.ck-annotation-wrapper:hover .ck-suggestion--accept{
+		color:var(--ck-color-button-save)
+	}
 
+.ck.ck-annotation-wrapper--active .ck-suggestion--discard, .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-comment__input-actions .ck.ck-button {
-display: inline-flex;
-justify-content: center;
-align-items: center;
-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);
 
+.ck.ck-annotation-wrapper--active{
+	box-shadow:var(--ck-drop-shadow-active);
 }
-.ck .ck-comment__input-actions .ck-button.ck-disabled {
-opacity: .3;
 
+:root{
+	--ck-annotation-counter-icon-size:16px;
+	--ck-annotation-counter-number-size:10px;
+	--ck-color-annotation-counter-comment:hsl(55, 98%, 48%);
+	--ck-color-annotation-counter-suggestion-insertion:hsl(128, 62%, 60%);
+	--ck-color-annotation-counter-suggestion-deletion:hsl(345, 62%, 60%);
+	--ck-color-annotation-counter-suggestion-format:hsl(191, 62%, 60%);
 }
-.ck .ck-comment__input-textarea {
-display: block;
-
+.ck.ck-sidebar--narrow .ck-sidebar-item{
+	display:flex;
+	justify-content:center;
 }
-.ck.ck-balloon-panel .ck-annotation-wrapper {
-position: static;
-width: var(--ck-inline-annotation-container-width);
-max-height: var(--ck-inline-annotation-container-max-height);
-overflow-y: auto;
-overscroll-behavior-y: contain;
-overflow-x: hidden;
 
-}
-.ck.ck-balloon-panel .ck-annotation {
-animation: none;
+.ck.ck-sidebar--narrow .ck-annotation-counter{
+	font-size:var(--ck-annotation-counter-icon-size);
+	min-height:unset;
+	padding:0;
 
+	cursor:pointer;
+	color:hsl(0, 0%, 50%);
 }
-.ck.ck-balloon-panel .ck-annotation-wrapper * {
-white-space: normal;
 
+.ck.ck-sidebar--narrow .ck-annotation-counter:hover,
+.ck.ck-sidebar--narrow .ck-annotation-counter:focus{
+	background:transparent;
+	box-shadow:none;
+	color:hsl(0, 0%, 30%);
 }
-.ck.ck-balloon-panel .ck-annotation-wrapper strong {
-font-weight: bold;
 
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge{
+	border-radius:50%;
+	position:absolute;
+	width:16px;
+	height:16px;
+	background:hsl(0, 0%, 20%);
+	font-weight:bold;
+	color:hsl(0, 0%, 100%);
+	font-size:var(--ck-annotation-counter-number-size);
+	font-family:var(--ck-font-face);
+	right:0;
+	top:-6px;
+	text-shadow:-1px 0 2px hsl(0, 0%, 27%), 1px 0 2px hsl(0, 0%, 27%);
+	display:flex;
+	justify-content:center;
+	line-height:16px;
+	z-index:1;
 }
-.ck.ck-balloon-panel .ck-annotation-wrapper i {
-font-style: italic;
-
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode{
+	line-height:1;
 }
-.ck.ck-sidebar {
-position: relative;
-transition: min-height 250ms ease;
-outline: 0;
 
+.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-sidebar-item {
-position: absolute;
-width: 100%;
-transition: top 300ms ease, box-shadow 300ms ease;
 
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion{
+	background:var(--ck-color-annotation-counter-suggestion-deletion);
 }
-.ck-sidebar-item--no-animation {
-transition: top 0s ease !important;
 
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format{
+	background:var(--ck-color-annotation-counter-suggestion-format);
 }
-.ck.ck-annotation-wrapper {
-outline: 0;
-border-radius: var(--ck-border-radius);
-background: var(--ck-color-annotation-wrapper-background);
-box-shadow: var(--ck-color-annotation-wrapper-drop-shadow);
 
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment{
+	background:var(--ck-color-annotation-counter-comment);
 }
-.ck.ck-annotation-wrapper--active .ck-annotation__actions {
-opacity: 1;
+:root{
+	--ck-color-annotation-icon:hsl(0, 0%, 50%);
+	--ck-color-annotation-info:hsl(0, 0%, 46%);
 
+	--ck-annotation-button-size:0.85em;
 }
-.ck.ck-annotation-wrapper--active .ck-annotation__actions .ck-comment--resolve {
-color: var(--ck-color-button-save);
 
-}
-.ck.ck-annotation-wrapper--active .ck-suggestion--accept {
-color: var(--ck-color-button-save);
+.ck .ck-annotation{
+	--ck-user-avatar-size:28px;
 
-}
-.ck.ck-annotation-wrapper--active .ck-suggestion--discard {
-color: var(--ck-color-button-cancel);
+	font-size:var(--ck-font-size-base);
 
+	display:flex;
+	position:relative;
+	animation:fadeInLeft 300ms;
+	transition:background-color 300ms ease;
+	padding:var(--ck-spacing-standard);
+	white-space:normal;
 }
-.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);
+@media (prefers-reduced-motion: reduce){
 
+.ck .ck-annotation{
+		animation:none;
+		transition:none;
 }
-.ck.ck-sidebar--narrow .ck-sidebar-item {
-display: flex;
-justify-content: center;
+	}
 
-}
-.ck.ck-sidebar--narrow .ck-annotation-counter {
-font-size: var(--ck-annotation-counter-icon-size);
-min-height: unset;
-padding: 0;
-cursor: pointer;
-color: hsl(0, 0%, 50%);
+.ck .ck-annotation .ck-button{
+		background-color:transparent;
+		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);
+	}
 
-}
-.ck.ck-sidebar--narrow .ck-annotation-counter:hover {
-background: transparent;
-box-shadow: none;
-color: hsl(0, 0%, 30%);
+.ck .ck-annotation .ck-user{
+		font-size:0.85em;
+	}
 
-}
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge {
-border-radius: 50%;
-position: absolute;
-width: 16px;
-height: 16px;
-background: hsl(0, 0%, 20%);
-font-weight: bold;
-color: hsl(0, 0%, 100%);
-font-size: var(--ck-annotation-counter-number-size);
-font-family: var(--ck-font-face);
-right: 0;
-top: -6px;
-text-shadow: -1px 0 2px hsl(0, 0%, 27%), 1px 0 2px hsl(0, 0%, 27%);
-display: flex;
-justify-content: center;
-line-height: 16px;
-z-index: 1;
+.ck .ck-annotation__main{
+	display:grid;
+	grid-template-areas:"info actions" "content content";
+	grid-template-columns:minmax(0, 1fr) auto;
+	width:calc( 100% - var(--ck-user-avatar-size));
 
+	transition:all 200ms ease;
+	border-radius:var(--ck-border-radius);
+	padding-left:var(--ck-spacing-standard);
 }
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode {
-line-height: 1;
 
-}
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion {
-background: var(--ck-color-annotation-counter-suggestion-insertion);
+@media (prefers-reduced-motion: reduce){
 
+.ck .ck-annotation__main{
+		transition:none;
 }
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion {
-background: var(--ck-color-annotation-counter-suggestion-deletion);
+	}
 
+.ck .ck-annotation__main p{
+	margin:0;
+	white-space:normal;
+	font-size:var(--ck-font-size-base);
+	line-height:1.5em;
 }
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format {
-background: var(--ck-color-annotation-counter-suggestion-format);
 
+.ck .ck-annotation__user{
+	margin-top:var(--ck-spacing-small);
 }
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment {
-background: var(--ck-color-annotation-counter-comment);
 
-}
-.ck .ck-annotation {
---ck-user-avatar-size: 28px;
-font-size: var(--ck-font-size-base);
-display: flex;
-position: relative;
-animation: fadeInLeft 300ms;
-transition: background-color 300ms ease;
-padding: var(--ck-spacing-standard);
-white-space: normal;
+.ck .ck-annotation__info{
+	grid-area:info;
 
+	display:flex;
+	align-items:center;
+	color:var(--ck-color-annotation-info);
+	min-height:2.4em;
 }
-.ck .ck-annotation .ck-button {
-background-color: transparent;
-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);
 
+.ck .ck-annotation__info-name,
+.ck .ck-annotation__info-time{
+	font-weight:bold;
+	white-space:nowrap;
+	overflow:hidden;
+	color:var(--ck-color-annotation-info);
+	font-size:var(--ck-font-size-small);
 }
-.ck .ck-annotation .ck-user {
-font-size: 0.85em;
 
+.ck .ck-annotation__info-name{
+	text-overflow:ellipsis;
 }
-.ck .ck-annotation__main {
-display: grid;
-grid-template-areas: "info actions"
-		"content content";
-grid-template-columns: minmax(0, 1fr) auto;
-width: calc( 100% - var(--ck-user-avatar-size) );
-transition: all 200ms ease;
-border-radius: var(--ck-border-radius);
-padding-left: var(--ck-spacing-standard);
 
-}
-.ck .ck-annotation__main p {
-margin: 0;
-white-space: normal;
-font-size: var(--ck-font-size-base);
-line-height: 1.5em;
+.ck .ck-annotation__info-time{
+	flex:0 0 auto;
 
+	margin:0 var(--ck-spacing-large);
 }
-.ck .ck-annotation__user {
-margin-top: var(--ck-spacing-small);
 
+.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__info {
-grid-area: info;
-display: flex;
-align-items: center;
-color: var(--ck-color-annotation-info);
-min-height: 2.4em;
 
-}
-.ck .ck-annotation__info-name {
-font-weight: bold;
-white-space: nowrap;
-overflow: hidden;
-color: var(--ck-color-annotation-info);
-font-size: var(--ck-font-size-small);
+.ck .ck-annotation__actions{
+	grid-area:actions;
 
+	transition:opacity 200ms ease;
+	opacity:0.5;
 }
-.ck .ck-annotation__info-name {
-text-overflow: ellipsis;
 
-}
-.ck .ck-annotation__info-time {
-flex: 0 0 auto;
-margin: 0 var(--ck-spacing-large);
+@media (prefers-reduced-motion: reduce){
 
+.ck .ck-annotation__actions{
+		transition:none;
 }
-.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name {
-white-space: nowrap;
+	}
+.ck .ck-annotation__content-wrapper{
+	grid-area:content;
 
+	width:100%;
 }
-.ck .ck-annotation__actions {
-grid-area: actions;
-transition: opacity 200ms ease;
-opacity: 0.5;
 
-}
-.ck .ck-annotation__content-wrapper {
-grid-area: content;
-width: 100%;
+@keyframes fadeInLeft{
+	from{
+		transform:translate3d( -5%, 0, 0);
+		opacity:0;
+	}
 
+	to{
+		transform:translate3d( 0, 0, 0);
+		opacity:1;
+	}
 }