@ckeditor/ckeditor5-comments 47.6.1 → 48.0.0-alpha.0

package/dist/index-editor.css

@@ -3,787 +3,759 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 :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-comment-content-font-family:var(--ck-font-face);
-	--ck-comment-content-font-size:var(--ck-font-size-base);
-	--ck-comment-content-font-color:var(--ck-color-base-text);
+  --ck-color-comment-background:#f3f7fb;
+  --ck-color-comment-separator:#cddeef;
+  --ck-color-comment-remove-background:var(--ck-color-light-red);
+  --ck-color-comment-input-background:var(--ck-color-comment-background);
+  --ck-comment-content-font-family:var(--ck-font-face);
+  --ck-comment-content-font-size:var(--ck-font-size-base);
+  --ck-comment-content-font-color:var(--ck-color-base-text);
 }
 
 .ck .ck-comment__wrapper{
-	font-size:var(--ck-font-size-base);
-	position:relative;
-	outline:0;
-	transition:all 300ms linear;
+  font-size:var(--ck-font-size-base);
+  outline:0;
+  transition:all .3s linear;
+  position:relative;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-comment__wrapper{
-		transition:none;
+  .ck .ck-comment__wrapper{
+    transition:none;
+  }
 }
-	}
 
 .ck .ck-comment__wrapper:first-of-type{
-		border-top-right-radius:var(--ck-border-radius);
-		border-top-left-radius:var(--ck-border-radius);
-	}
+  border-top-right-radius:var(--ck-border-radius);
+  border-top-left-radius:var(--ck-border-radius);
+}
 
 .ck .ck-comment__wrapper:focus{
-		background:var(--ck-color-button-default-hover-background);
-	}
-
-.ck .ck-comment::after{
-		content:'';
-		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)
+  background:var(--ck-color-button-default-hover-background);
+}
+
+.ck .ck-comment:after{
+  content:"";
+  opacity:1;
+  top:calc(var(--ck-user-avatar-size) + var(--ck-spacing-small));
+  left:calc(var(--ck-spacing-standard) + ( var(--ck-user-avatar-size) / 2)
 
 			 
 			- 2px);
-		width:4px;
-		height:100%;
-		background-color:var(--ck-color-comment-separator);
-	}
+  background-color:var(--ck-color-comment-separator);
+  width:4px;
+  height:100%;
+  display:block;
+  position:absolute;
+}
 
 .ck .ck-comment--edit{
-	background-color:var(--ck-color-comment-input-background);
+  background-color:var(--ck-color-comment-input-background);
 }
 
-.ck .ck-comment--edit::after{
-		opacity:0;
-	}
+.ck .ck-comment--edit:after{
+  opacity:0;
+}
 
 .ck .ck-comment--edit .ck-comment__input-actions{
-		margin-top:var(--ck-spacing-standard);
-	}
+  margin-top:var(--ck-spacing-standard);
+}
 
 .ck .ck-comment__content{
-	word-break:normal;
-	overflow-wrap:anywhere;
-	font-family:var(--ck-comment-content-font-family);
-	color:var(--ck-comment-content-font-color);
+  word-break:normal;
+  overflow-wrap:anywhere;
+  font-family:var(--ck-comment-content-font-family);
+  color:var(--ck-comment-content-font-color);
 }
 
 .ck .ck-comment--info .ck-comment__content{
-		font-style:italic;
-		font-family:var(--ck-comment-content-font-family);
-		font-size:var(--ck-comment-content-font-size);
-		color:var(--ck-comment-content-font-color);
-	}
-.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;
-			}
+  font-style:italic;
+  font-family:var(--ck-comment-content-font-family);
+  font-size:var(--ck-comment-content-font-size);
+  color:var(--ck-comment-content-font-color);
+}
+
+:is(.ck .ck-comment, .ck .ck-comment__input) p{
+  margin:0;
+}
+
+:is(.ck .ck-comment, .ck .ck-comment__input) ul, :is(.ck .ck-comment, .ck .ck-comment__input) ol{
+  margin-left:10px;
+  padding-left:10px;
+}
+
+:is(.ck .ck-comment, .ck .ck-comment__input) ul{
+  margin-top:0;
+  margin-bottom:5px;
+  list-style:outside;
+}
+
+:is(.ck .ck-comment, .ck .ck-comment__input) ul ul{
+  list-style:circle;
+}
+
+:is(.ck .ck-comment, .ck .ck-comment__input) ul ul ul{
+  list-style:square;
+}
 
 .ck .ck-comment__main .ck-comment__input-wrapper{
-		display:flex;
-		flex-direction:column;
-		position:relative;
-		transition:all 300ms linear;
-	}
+  flex-direction:column;
+  transition:all .3s linear;
+  display:flex;
+  position:relative;
+}
 
 .ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input{
-			padding:0;
-		}
+  padding:0;
+}
 
 .ck .ck-comment__user{
-	z-index:var(--ck-z-default);
+  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%);
+  background:var(--ck-color-base-action);
+  color:#fff;
 }
+
 .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit:hover{
-		background:var(--ck-color-button-save);
-	}
+  background:var(--ck-color-button-save);
+}
 
 .ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel{
-	color:var(--ck-color-text);
+  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);
+  color:var(--ck-color-annotation-info);
+  font-style:italic;
+  font-size:var(--ck-font-size-tiny);
+  margin-top:var(--ck-spacing-standard);
 }
 
 .ck .ck-comment .ck-dropdown .ck-dropdown__arrow{
-		display:none;
-	}
+  display:none;
+}
 
 .ck .ck-comment .ck-dropdown .ck-list{
-		margin:0;
-		padding:var(--ck-spacing-small) 0;
-	}
+  padding:var(--ck-spacing-small) 0;
+  margin:0;
+}
 
 .ck .ck-comment .ck-dropdown .ck-list .ck-list__item{
-			font-size:1.2em;
-			color:var(--ck-color-base-text);
-			min-width:auto;
-		}
+  color:var(--ck-color-base-text);
+  min-width:auto;
+  font-size:1.2em;
+}
 
 .ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button{
-				color:var(--ck-color-text);
-			}
+  color:var(--ck-color-text);
+}
 
 :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-color-thread-remove-background:var(--ck-color-comment-remove-background);
+  --ck-color-comment-count:#5891ca;
+  --ck-color-thread-header-background:#fdfadd;
+  --ck-color-thread-header-active-background:#fff3a8;
+  --ck-color-unlinked-background:#f5f5f5;
+  --ck-color-unlinked-active-background:#ebebeb;
 }
 
 .ck .ck-thread{
-	border-radius:0;
-
-	width:100%;
-	color:var(--ck-color-base-text);
-	outline:0;
-	background-color:var(--ck-color-base-background);
-	overflow:hidden;
-	transition-property:color, background-color, width, outline;
-	transition-duration:300ms;
-	transition-timing-function:ease;
+  border-radius:var(--ck-rounded-corners-radius);
+  width:100%;
+  color:var(--ck-color-base-text);
+  background-color:var(--ck-color-base-background);
+  outline:0;
+  transition-property:color, background-color, width, outline;
+  transition-duration:.3s;
+  transition-timing-function:ease;
+  overflow:hidden;
 }
 
-.ck-rounded-corners .ck .ck-thread,
-	.ck .ck-thread.ck-rounded-corners{
-		border-radius:var(--ck-border-radius);
-	}
-
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-thread{
-		transition:none;
+  .ck .ck-thread{
+    transition:none;
+  }
 }
-	}
 
 .ck .ck-thread:focus{
-		outline:var(--ck-focus-ring);
-		box-shadow:0 0 0 4px var(--ck-color-focus-outer-shadow);
-	}
-.ck-balloon-panel:has( .ck-thread:focus){
-	outline:none;
-	border:var(--ck-focus-ring);
-	box-shadow:var(--ck-drop-shadow), var(--ck-focus-outer-shadow);
+  outline:var(--ck-focus-ring);
+  box-shadow:0 0 0 4px var(--ck-color-focus-outer-shadow);
+}
+
+.ck-balloon-panel:has(.ck-thread:focus){
+  border:var(--ck-focus-ring);
+  box-shadow:var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
+  outline:none;
 }
 
 .ck .ck-thread__header{
-	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);
+  padding:var(--ck-spacing-standard);
+  background-color:var(--ck-color-thread-header-background);
+  line-height:1.57;
+  font-size:var(--ck-font-size-base);
+  justify-content:space-between;
+  display:flex;
 }
 
 .ck .ck-thread__header .ck-button{
-		font-size:var(--ck-annotation-button-size);
-	}
+  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);
-	}
+  width:100%;
+  min-width:0;
+  height:25px;
+  padding-right:var(--ck-spacing-large);
+  display:inline-flex;
+  position:relative;
+}
 
 .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-thread__header .ck-context.ck-context--quotes::after, .ck .ck-thread__header .ck-context.ck-context--quotes::before{
-				display:inline-block;
-				content:'"';
-			}
+  white-space:nowrap;
+  width:100%;
+  padding:var(--ck-spacing-small) var(--ck-spacing-medium);
+  display:flex;
+  overflow:hidden;
+}
+
+.ck .ck-thread__header .ck-context.ck-context--quotes:after, .ck .ck-thread__header .ck-context.ck-context--quotes:before{
+  content:"\"";
+  display:inline-block;
+}
 
 .ck .ck-thread__header .ck-context .ck-context__type{
-			font-weight:bold;
-			padding-right:var(--ck-spacing-standard);
-		}
+  padding-right:var(--ck-spacing-standard);
+  font-weight:bold;
+}
 
 .ck .ck-thread__header .ck-context .ck-context__value{
-			overflow:hidden;
-			text-overflow:ellipsis;
-			border:1px solid transparent;
-		}
+  text-overflow:ellipsis;
+  border:1px solid #0000;
+  overflow:hidden;
+}
 
 .ck .ck-thread__header .ck-context .ck-context__value:focus{
-				outline:none;
-				border:var(--ck-focus-ring);
-				box-shadow:var(--ck-focus-outer-shadow), 0 0;
-			}
+  border:var(--ck-focus-ring);
+  box-shadow:var(--ck-focus-outer-shadow), 0 0;
+  outline:none;
+}
 
 .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;
-		}
+  z-index:2;
+  background:var(--ck-color-base-background);
+  white-space:normal;
+  box-sizing:border-box;
+  border-radius:2px;
+  display:inline-block;
+  position:absolute;
+  top:0;
+  box-shadow:0 2px 3px #fff3;
+}
 
 .ck .ck-thread__comment-count{
-	--ck-user-avatar-size:28px;
-
-	padding-left:calc( var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2);
-
-	color:var(--ck-color-comment-count);
-	font-size:var(--ck-font-size-base);
-	font-weight:bold;
-	cursor:pointer;
-	transition:background-color 300ms ease;
+  --ck-user-avatar-size:28px;
+  padding-left:calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2);
+  color:var(--ck-color-comment-count);
+  font-size:var(--ck-font-size-base);
+  cursor:pointer;
+  font-weight:bold;
+  transition:background-color .3s;
 }
 
-.ck .ck-thread__comment-count::before{
-		content:'\25BC';
-		margin-right:var(--ck-spacing-small);
-	}
+.ck .ck-thread__comment-count:before{
+  content:"▼";
+  margin-right:var(--ck-spacing-small);
+}
 
 .ck .ck-thread--remove .ck-comment{
-		background-color:var(--ck-color-comment-remove-background);
-	}
+  background-color:var(--ck-color-comment-remove-background);
+}
 
 .ck .ck-thread--remove .ck-thread__input--active{
-		background-color:var(--ck-color-base-background);
-	}
+  background-color:var(--ck-color-base-background);
+}
 
 .ck .ck-thread--remove .ck-thread__input--active.ck-thread__input{
-			background-color:var(--ck-color-comment-remove-background);
-		}
+  background-color:var(--ck-color-comment-remove-background);
+}
 
 .ck .ck-thread--remove .ck-thread__comment-count{
-		background-color:var(--ck-color-comment-remove-background);
-	}
+  background-color:var(--ck-color-comment-remove-background);
+}
+
+.ck .ck-thread--remove .ck-comment__wrapper .ck-comment:after{
+  opacity: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__comments .ck-comment__wrapper:last-of-type .ck-comment:after{
+  opacity:0;
+}
 
 .ck .ck-thread__container{
-	transition:transform 300ms ease;
+  transition:transform .3s;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-thread__container{
-		transition:none;
+  .ck .ck-thread__container{
+    transition:none;
+  }
 }
-	}
 
 .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);
+  z-index:var(--ck-z-default);
+  border-radius:var(--ck-border-radius);
+  margin:0;
+  padding:0;
+  list-style:none;
+  position:relative;
 }
 
 .ck .ck-thread__user{
-	font-size:0.85em;
+  font-size:.85em;
 }
 
 .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;
+  width:calc(100% - var(--ck-user-avatar-size));
+  white-space:normal;
+  border-radius:var(--ck-border-radius);
+  min-height:38px;
+  transition:background-color .2s ease-in-out;
 }
 
 .ck .ck-thread--active .ck-comment__options.ck-dropdown{
-		display:block;
-	}
+  display:block;
+}
 
 .ck .ck-thread--active .ck-thread__input{
-		display:block;
-		background-color:var(--ck-color-comment-background);
-	}
+  background-color:var(--ck-color-comment-background);
+  display:block;
+}
 
 .ck .ck-thread--active .ck-thread__header{
-		background-color:var(--ck-color-thread-header-active-background);
-	}
+  background-color:var(--ck-color-thread-header-active-background);
+}
 
 .ck .ck-thread--unlinked{
-	--ck-color-comment-box-border:var(--ck-color-base-border);
-
-	--ck-color-thread-header-background:var(--ck-color-unlinked-background);
-	--ck-color-thread-header-active-background:var(--ck-color-unlinked-active-background);
+  --ck-color-comment-box-border:var(--ck-color-base-border);
+  --ck-color-thread-header-background:var(--ck-color-unlinked-background);
+  --ck-color-thread-header-active-background:var(--ck-color-unlinked-active-background);
 }
+
 .ck.ck-button.ck-confirm-view-submit{
-	color:var(--ck-color-button-save);
+  color:var(--ck-color-button-save);
 }
 
 .ck.ck-button.ck-confirm-view-cancel{
-	color:var(--ck-color-button-cancel);
+  color:var(--ck-color-button-cancel);
 }
 
 .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-user-avatar-size:28px;
+  font-size:var(--ck-font-size-base);
+  padding:var(--ck-spacing-standard);
+  background:var(--ck-color-comment-background);
+  display:none;
 }
 
 .ck .ck-comment__input-container--active{
-	display:flex;
+  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;
+  padding:var(--ck-spacing-standard);
+  padding-top:var(--ck-spacing-medium);
+  color:var(--ck-color-base-text);
+  resize:none;
+  background-color:#0000;
+  border-width:0;
+  transition:color .3s ease-in-out;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-comment__input{
-		transition:none;
+  .ck .ck-comment__input{
+    transition:none;
+  }
 }
-	}
 
 .ck .ck-comment__input:focus{
-		outline:none;
-	}
+  outline:none;
+}
 
 .ck .ck-comment__input .ck-editor__editable_inline{
-		--ck-focus-ring:none;
-		--ck-inner-shadow:none;
-		font-family:var(--ck-comment-content-font-family);
-		font-size:var(--ck-comment-content-font-size);
-		color:var(--ck-comment-content-font-color);
-
-		padding:0;
-		overflow:visible;
-		border:0;
-		background-color:transparent;
-		word-break:normal;
-		overflow-wrap:anywhere;
-	}
-.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-focus-ring:none;
+  --ck-inner-shadow:none;
+  font-family:var(--ck-comment-content-font-family);
+  font-size:var(--ck-comment-content-font-size);
+  color:var(--ck-comment-content-font-color);
+  word-break:normal;
+  overflow-wrap:anywhere;
+  background-color:#0000;
+  border:0;
+  padding:0;
+  overflow:visible;
+}
+
+.ck-comment__input-wrapper .ck.ck-editor__editable_inline :first-child{
+  margin-top:0;
+}
+
+.ck-comment__input-wrapper .ck.ck-editor__editable_inline :last-child{
+  margin-bottom:0;
 }
 
 .ck .ck-comment__input-actions{
-	width:100%;
-	text-align:right;
-	display:none;
+  text-align:right;
+  width:100%;
+  display:none;
 }
 
 .ck .ck-comment__input-actions.ck-comment__input-actions--active{
-		display:block;
-	}
+  display:block;
+}
 
 .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);
-	}
+  cursor:pointer;
+  min-height:var(--ck-ui-component-min-height);
+  min-width:60px;
+  font-size:var(--ck-annotation-button-size);
+  margin-left:var(--ck-spacing-large);
+  padding:0 var(--ck-spacing-medium);
+  justify-content:center;
+  align-items:center;
+  display:inline-flex;
+}
 
 .ck .ck-comment__input-actions .ck-button.ck-disabled{
-		opacity:.3;
-	}
+  opacity:.3;
+}
 
 .ck .ck-comment__input-textarea{
-	display:block;
+  display:block;
 }
 
 :root{
-	--ck-inline-annotation-container-width:300px;
-	--ck-inline-annotation-container-max-height:400px;
+  --ck-inline-annotation-container-width:300px;
+  --ck-inline-annotation-container-max-height:400px;
 }
 
 .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;
+  width:var(--ck-inline-annotation-container-width);
+  max-height:var(--ck-inline-annotation-container-max-height);
+  overscroll-behavior-y:contain;
+  position:static;
+  overflow:hidden auto;
 }
 
 .ck.ck-balloon-panel .ck-annotation{
-	animation:none;
+  animation:none;
 }
 
 .ck.ck-balloon-panel .ck-annotation-wrapper *{
-	white-space:normal;
+  white-space:normal;
 }
+
 .ck.ck-balloon-panel .ck-annotation-wrapper strong{
-	font-weight:bold;
+  font-weight:bold;
 }
 
 .ck.ck-balloon-panel .ck-annotation-wrapper i{
-	font-style:italic;
+  font-style:italic;
 }
 
 :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-annotation-counter-icon-size:16px;
+  --ck-annotation-counter-number-size:10px;
+  --ck-color-annotation-counter-comment:#f2de02;
+  --ck-color-annotation-counter-suggestion-insertion:#5ad86b;
+  --ck-color-annotation-counter-suggestion-deletion:#d85a79;
+  --ck-color-annotation-counter-suggestion-format:#5ac1d8;
 }
+
 .ck.ck-sidebar--narrow .ck-sidebar-item{
-	display:flex;
-	justify-content:center;
+  justify-content:center;
+  display:flex;
 }
 
 .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%);
+  font-size:var(--ck-annotation-counter-icon-size);
+  min-height:unset;
+  cursor:pointer;
+  color:gray;
+  padding:0;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter:hover,
-.ck.ck-sidebar--narrow .ck-annotation-counter:focus{
-	background:transparent;
-	box-shadow:none;
-	color:hsl(0, 0%, 30%);
+.ck.ck-sidebar--narrow .ck-annotation-counter:hover, .ck.ck-sidebar--narrow .ck-annotation-counter:focus{
+  box-shadow:none;
+  color:#4d4d4d;
+  background:none;
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge{
-	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;
+  color:#fff;
+  width:16px;
+  height:16px;
+  font-weight:bold;
+  font-size:var(--ck-annotation-counter-number-size);
+  font-family:var(--ck-font-face);
+  text-shadow:-1px 0 2px #454545, 1px 0 2px #454545;
+  z-index:1;
+  background:#333;
+  border-radius:50%;
+  justify-content:center;
+  line-height:16px;
+  display:flex;
+  position:absolute;
+  top:-6px;
+  right:0;
 }
+
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode{
-	line-height:1;
+  line-height:1;
 }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion,
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace{
-	background:var(--ck-color-annotation-counter-suggestion-insertion);
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion, .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace{
+  background:var(--ck-color-annotation-counter-suggestion-insertion);
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion{
-	background:var(--ck-color-annotation-counter-suggestion-deletion);
+  background:var(--ck-color-annotation-counter-suggestion-deletion);
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format{
-	background:var(--ck-color-annotation-counter-suggestion-format);
+  background:var(--ck-color-annotation-counter-suggestion-format);
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment{
-	background:var(--ck-color-annotation-counter-comment);
+  background:var(--ck-color-annotation-counter-comment);
 }
-:root{
-	--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-annotation-icon:gray;
+  --ck-color-annotation-info:#757575;
+  --ck-annotation-button-size:.85em;
 }
 
 .ck .ck-annotation{
-	--ck-user-avatar-size:28px;
-
-	font-size:var(--ck-font-size-base);
-
-	display:flex;
-	position:relative;
-	animation:fadeInLeft 300ms;
-	transition:background-color 300ms ease;
-	padding:var(--ck-spacing-standard);
-	white-space:normal;
+  --ck-user-avatar-size:28px;
+  font-size:var(--ck-font-size-base);
+  padding:var(--ck-spacing-standard);
+  white-space:normal;
+  transition:background-color .3s;
+  animation:.3s annotationFadeInLeft;
+  display:flex;
+  position:relative;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-annotation{
-		animation:none;
-		transition:none;
+  .ck .ck-annotation{
+    transition:none;
+    animation:none;
+  }
 }
-	}
 
 .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);
-	}
+  min-width:unset;
+  min-height:unset;
+  cursor:pointer;
+  color:var(--ck-color-annotation-icon);
+  border-radius:var(--ck-border-radius);
+  font-size:var(--ck-annotation-button-size);
+  background-color:#0000;
+}
 
 .ck .ck-annotation .ck-user{
-		font-size:0.85em;
-	}
+  font-size:.85em;
+}
 
 .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);
+  width:calc(100% - var(--ck-user-avatar-size));
+  border-radius:var(--ck-border-radius);
+  padding-left:var(--ck-spacing-standard);
+  grid-template-columns:minmax(0, 1fr) auto;
+  grid-template-areas:"info actions" "content content";
+  transition:all .2s;
+  display:grid;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-annotation__main{
-		transition:none;
+  .ck .ck-annotation__main{
+    transition:none;
+  }
 }
-	}
 
 .ck .ck-annotation__main p{
-	margin:0;
-	white-space:normal;
-	font-size:var(--ck-comment-content-font-size);
-	line-height:1.5em;
+  white-space:normal;
+  font-size:var(--ck-comment-content-font-size);
+  margin:0;
+  line-height:1.5em;
 }
 
 .ck .ck-annotation__user{
-	margin-top:var(--ck-spacing-small);
+  margin-top:var(--ck-spacing-small);
 }
 
 .ck .ck-annotation__info{
-	grid-area:info;
-
-	display:flex;
-	align-items:center;
-	color:var(--ck-color-annotation-info);
-	min-height:2.4em;
+  color:var(--ck-color-annotation-info);
+  grid-area:info;
+  align-items:center;
+  min-height:2.4em;
+  display:flex;
 }
 
-.ck .ck-annotation__info-name,
-.ck .ck-annotation__info-time{
-	font-weight:bold;
-	white-space:nowrap;
-	overflow:hidden;
-	color:var(--ck-color-annotation-info);
-	font-size:var(--ck-font-size-small);
+.ck .ck-annotation__info-name, .ck .ck-annotation__info-time{
+  white-space:nowrap;
+  color:var(--ck-color-annotation-info);
+  font-weight:bold;
+  font-size:var(--ck-font-size-small);
+  overflow:hidden;
 }
 
 .ck .ck-annotation__info-name{
-	text-overflow:ellipsis;
+  text-overflow:ellipsis;
 }
 
 .ck .ck-annotation__info-time{
-	flex:0 0 auto;
-
-	margin:0 var(--ck-spacing-large);
+  margin:0 var(--ck-spacing-large);
+  flex:none;
 }
 
-.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name,
-.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time{
-	white-space:nowrap;
+.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name, .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time{
+  white-space:nowrap;
 }
 
 .ck .ck-annotation__actions{
-	grid-area:actions;
-
-	transition:opacity 200ms ease;
-	opacity:0.5;
+  opacity:.5;
+  grid-area:actions;
+  transition:opacity .2s;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck .ck-annotation__actions{
-		transition:none;
+  .ck .ck-annotation__actions{
+    transition:none;
+  }
 }
-	}
-.ck .ck-annotation__content-wrapper{
-	grid-area:content;
 
-	width:100%;
+.ck .ck-annotation__content-wrapper{
+  grid-area:content;
+  width:100%;
 }
 
-@keyframes fadeInLeft{
-	from{
-		transform:translate3d( -5%, 0, 0);
-		opacity:0;
-	}
+@keyframes annotationFadeInLeft{
+  from{
+    opacity:0;
+    transform:translate3d(-5%, 0, 0);
+  }
 
-	to{
-		transform:translate3d( 0, 0, 0);
-		opacity:1;
-	}
+  to{
+    opacity:1;
+    transform:translate3d(0, 0, 0);
+  }
 }
 
 :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-color-annotation-wrapper-background:#fff;
+  --ck-color-annotation-wrapper-drop-shadow:0 1px 1px 1px #e6e6e6;
 }
 
 .ck.ck-sidebar{
-	position:relative;
-	transition:min-height 250ms ease;
-	outline:0;
+  outline:0;
+  transition:min-height .25s;
+  position:relative;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck.ck-sidebar{
-		transition:none;
+  .ck.ck-sidebar{
+    transition:none;
+  }
 }
-	}
 
 .ck-sidebar-item{
-	position:absolute;
-	width:100%;
-	transition:top 300ms ease, box-shadow 300ms ease;
+  width:100%;
+  transition:top .3s, box-shadow .3s;
+  position:absolute;
 }
 
 @media (prefers-reduced-motion: reduce){
-
-.ck-sidebar-item{
-		transition:none;
+  .ck-sidebar-item{
+    transition:none;
+  }
 }
-	}
 
 .ck-sidebar-item--no-animation{
-	transition:top 0s ease !important;
+  transition:top !important;
 }
 
 .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);
+  border-radius:var(--ck-border-radius);
+  background:var(--ck-color-annotation-wrapper-background);
+  box-shadow:var(--ck-color-annotation-wrapper-drop-shadow);
+  outline:0;
 }
 
-.ck.ck-annotation-wrapper--active .ck-annotation__actions, .ck.ck-annotation-wrapper:hover .ck-annotation__actions{
-		opacity:1;
-	}
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions{
+  opacity:1;
+}
 
-.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);
-		}
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-annotation__actions .ck-comment--resolve{
+  color:var(--ck-color-button-save);
+}
+
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--accept{
+  color:var(--ck-color-button-save);
+}
 
-.ck.ck-annotation-wrapper--active .ck-suggestion--accept, .ck.ck-annotation-wrapper:hover .ck-suggestion--accept{
-		color:var(--ck-color-button-save)
-	}
+:is(.ck.ck-annotation-wrapper--active, .ck.ck-annotation-wrapper:hover) .ck-suggestion--discard{
+  color:var(--ck-color-button-cancel);
+}
 
-.ck.ck-annotation-wrapper--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);
+  box-shadow:var(--ck-drop-shadow);
 }
 
 .ck.ck-annotation-wrapper--active{
-	box-shadow:var(--ck-drop-shadow-active);
+  box-shadow:var(--ck-drop-shadow-active);
 }
 
 .ck .ck-comments-archive-dropdown.ck-dropdown__panel{
-		z-index:var(--ck-z-panel);
-	}
+  z-index:var(--ck-z-panel);
+}
 
 .ck .ck-comments-archive{
-	width:400px;
-	max-height:450px;
-	box-sizing:content-box;
+  box-sizing:content-box;
+  width:400px;
+  max-height:450px;
 }
 
 .ck .ck-comments-archive .ck-annotation{
-		animation:none;
-	}
+  animation:none;
+}
 
 .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);
-	}
+  max-height:410px;
+  padding:var(--ck-spacing-large);
+  overflow:auto;
+}
 
 .ck .ck-comments-archive .ck-comments-archive__header{
-		max-height:40px;
-		line-height:var(--ck-font-size-base);
-		font-weight:bold;
-		border-bottom:1px solid var(--ck-color-toolbar-border);
-	}
+  max-height:40px;
+  line-height:var(--ck-font-size-base);
+  border-bottom:1px solid var(--ck-color-toolbar-border);
+  font-weight:bold;
+}
 
 .ck .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child){
-			margin-bottom:var(--ck-spacing-large);
-		}
+  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);
-	}
+  text-align:center;
+  color:var(--ck-color-annotation-info);
+  font-style:italic;
+}
 
 :root{
-	--ck-color-comment-marker:hsl(55, 98%, 83%);
-	--ck-color-comment-marker-active:hsl(55, 98%, 68%);
+  --ck-color-comment-marker:#fef7a9;
+  --ck-color-comment-marker-active:#fdf05d;
 }