ckeditor5-premium-features
Version:
Premium features for CKEditor 5.
1,284 lines (1,109 loc) • 319 kB
CSS
/**
* @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
*/
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
/*
* These definitions bring violet accents (tint) across the AI UI.
*/
:root {
--ck-ai-form-submit-button-text-color: var(--ck-color-text);
--ck-ai-form-submit-button-border-color: transparent;
--ck-ai-form-submit-button-disabled-border-color: transparent;
--ck-ai-toolbar-button-hover-color: var(--ck-color-text);
--ck-color-ai-selection: hsla(201, 100%, 56%, 0.3);
}
/* Note: This class name is mentioned in the guide and acts like a public API. */
.ck-ai-assistant-ui_theme {
--ck-color-button-default-hover-background: hsl(262.1,100%,96.3%);
--ck-color-button-default-active-background: hsl(262.1,100%,96.3%);
--ck-color-button-on-background: hsl(262.1,100%,96.3%);
--ck-color-button-on-hover-background: hsl(262.1,100%,96.3%);
--ck-color-button-on-active-background: hsl(262.1,100%,96.3%);
--ck-color-button-on-disabled-background: hsl(262.1,100%,96.3%);
--ck-color-button-on-color: hsl(263.2,59.2%,52%);
--ck-color-button-action-background: hsl(263.2,59.2%,52%);
--ck-color-button-action-hover-background: hsl(262.6,58.9%,49.6%);
--ck-color-button-action-active-background: hsl(262.6,58.9%,49.6%);
--ck-color-button-action-disabled-background: hsl(263.8,59.3%,75.9%);
--ck-color-list-button-hover-background: hsl(262.1,100%,96.3%);
--ck-ai-form-content-background: hsl(0,0%,97.6%);
--ck-ai-form-submit-button-text-color: var(--ck-color-button-on-color);
--ck-ai-form-submit-button-border-color: var(--ck-color-button-action-background);
--ck-ai-form-submit-button-disabled-border-color: var(--ck-color-button-action-disabled-background);
--ck-ai-toolbar-button-hover-color: var(--ck-color-button-on-color);
--ck-color-ai-selection: hsl(262.5,60%,90%);
}
/*
* Apply the theme colors for specific elements.
*/
.ck-ai-commands-dropdown > .ck-button:hover,
.ck-ai-assistant-button:hover {
color: var(--ck-ai-toolbar-button-hover-color);
}
/*
* Classes used by the "fake visual selection" displayed in the content
* when the AI dialog is open.
*
* Narrow down to <span> to prevent changing background for widgets and nested editables.
*/
.ck span.ck-fake-ai-selection {
background: var(--ck-color-ai-selection);
}
.ck .ck-widget.ck-fake-ai-selection {
outline-color: var(--ck-color-ai-selection);
}
/*
* Classes used by the "fake visual candidate selection" displayed in the content when an input
* in the AI dropdown has focus (the browser does not render the native selection in this state).
*
* Narrow down to <span> to prevent changing background for widgets and nested editables.
*/
.ck span.ck-fake-ai-selection-candidate {
background: var(--ck-color-ai-selection);
}
/* A collapsed fake visual selection. */
.ck .ck-fake-ai-selection_collapsed {
height: 100%;
border-right: 1px solid var(--ck-color-base-text);
margin-right: -1px;
outline: solid 1px hsla(0, 0%, 100%, .5);
}
/*
* Styles of the AI response field. The margins, font sizes and line-heights have been reduced
* to save space.
*
* Note: This class name is mentioned in the guide and acts like a public API.
*/
.ck.ck-content.ck-ai-form__content-field h2 {
font-size: 1.3em;
}
.ck.ck-content.ck-ai-form__content-field h3 {
font-size: 1.2em;
}
.ck.ck-content.ck-ai-form__content-field h4, .ck.ck-content.ck-ai-form__content-field h5, .ck.ck-content.ck-ai-form__content-field h6 {
font-size: 1.1em;
}
.ck.ck-content.ck-ai-form__content-field h2, .ck.ck-content.ck-ai-form__content-field h3, .ck.ck-content.ck-ai-form__content-field h4, .ck.ck-content.ck-ai-form__content-field h5, .ck.ck-content.ck-ai-form__content-field h6, .ck.ck-content.ck-ai-form__content-field p, .ck.ck-content.ck-ai-form__content-field ul, .ck.ck-content.ck-ai-form__content-field ol {
margin-block-start: .5em;
margin-block-end: .5em;
line-height: 1.7em;
}
.ck.ck-content.ck-ai-form__content-field > :first-child {
margin-top: 0;
}
.ck.ck-content.ck-ai-form__content-field > :last-child {
margin-bottom: 0;
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
/*
* 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
*/
/*
* 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
*/
:root {
--ck-ai-dropdown-view-width: 250px;
--ck-ai-dropdown-view-list-max-height: 250px;
}
.ck.ck-ai-commands-search {
width: var(--ck-ai-dropdown-view-width);
}
.ck.ck-ai-commands-search > .ck-labeled-field-view {
padding: var(--ck-spacing-large);
}
.ck.ck-ai-commands-search > .ck-labeled-field-view .ck-input {
min-width: unset;
}
.ck.ck-ai-commands-search > .ck-search__results {
border-top: 1px solid var(--ck-color-base-border);
}
.ck.ck-ai-commands-search > .ck-search__results > .ck-list {
max-height: var(--ck-ai-dropdown-view-list-max-height);
overflow: auto;
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
/*
* 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
*/
/*
* 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
*/
:root {
--ck-ai-form-view-width: 600px;
--ck-ai-form-content-height: 175px;
--ck-ai-form-content-background: hsl(0, 0%, 98%);
--ck-ai-form-history-font-size: .9em;
--ck-ai-form-error-background: var(--ck-color-light-red);
}
/* Note: This class name is mentioned in the guide and acts like a public API. */
.ck .ck-ai-form {
width: var(--ck-ai-form-view-width);
/* Don't overflow the parent dialog container */
max-width: 100%;
}
@media screen and (max-width: 600px) {
.ck .ck-ai-form {
/* Allow the for the layout to be fluid in narrow viewports to avoid breaking it due to limited
* horizontal space (https://github.com/cksource/ckeditor5-commercial/issues/5913). */
--ck-ai-form-view-width: 100vw;
}
}
.ck .ck-ai-form .ck-ai-form-content {
padding: var(--ck-spacing-large);
width: 100%;
}
.ck .ck-ai-form .ck-ai-form-content .ck-input {
width: 100%;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper {
width: 100%;
max-height: var(--ck-ai-form-content-height);
overflow-y: auto;
border: 1px solid var(--ck-color-base-border);
border-radius: 2px;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area-wrapper:focus {
outline: none;
border: var(--ck-focus-ring);
box-shadow: var(--ck-focus-outer-shadow), 0 0;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area {
display: flex;
background-color: var(--ck-ai-form-content-background);
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area.ck-ai-form__content-area--processing {
--ck-color-text: var(--ck-color-input-disabled-text);
background-color: var(--ck-color-input-disabled-background);
}
/* Note: This class name is mentioned in the guide and acts like a public API */
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field {
width: 100%;
white-space: normal;
padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
min-height: calc( var(--ck-line-height-base) * var(--ck-font-size-base) );
box-sizing: content-box;
}
[dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field {
padding-right: 0;
}
[dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field {
padding-left: 0;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__content-field > * {
white-space: normal;
color: inherit;
}
[dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container {
margin-right: var(--ck-spacing-medium);
}
[dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-spinner-container {
margin-left: var(--ck-spacing-medium);
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button-wrapper {
display: flex;
flex-direction: column-reverse;
padding-left: 2px;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button {
position: sticky;
right: 1px;
bottom: 1px;
padding: 4px;
min-height: unset;
min-width: unset;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button svg {
--ck-icon-size: 16px;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__content-area .ck-ai-form__copy-button.ck-ai-form__copy-button--copied {
color: inherit;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__toolbar {
border: none;
padding: 0;
margin-top: var(--ck-spacing-medium);
margin-bottom: calc( 2 * var(--ck-spacing-medium) );
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader {
display: flex;
align-items: center;
}
.ck .ck-ai-form .ck-ai-form-content .ck-ai-form__loader .ck-spinner {
box-sizing: border-box;
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete {
display: flex;
justify-content: space-between;
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view {
flex-grow: 1;
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit {
border-color: var(--ck-ai-form-submit-button-border-color);
color: var(--ck-ai-form-submit-button-text-color);
}
[dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit {
margin-left: var(--ck-spacing-medium);
}
[dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit {
margin-right: var(--ck-spacing-medium);
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck.ck-ai-form__submit.ck-disabled {
border-color: var(--ck-ai-form-submit-button-disabled-border-color);
}
/* Toggle history button */
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history {
position: absolute;
font-size: var(--ck-font-size-tiny);
bottom: var(--ck-spacing-small);
top: var(--ck-spacing-small);
padding: 4px;
min-height: unset;
min-width: unset;
}
[dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history {
right: var(--ck-spacing-medium);
}
[dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete > .ck-labeled-field-view .ck-ai-form__toggle-history {
left: var(--ck-spacing-medium);
}
/* Give the toggle history button some space */
[dir="ltr"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea {
padding-right: 30px;
}
[dir="rtl"] .ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea {
padding-left: 30px;
}
/* Squash the textarea horizontally if necessary on narrow layouts
* to avoid breaking the layout even at the cost of the placeholder
* being cut off (https://github.com/cksource/ckeditor5-commercial/issues/5913). */
@media screen and (max-width: 600px) {
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-textarea {
--ck-input-width: auto;
}
}
/* Prompt history group */
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
/* History group label */
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > span {
grid-area: 1 / 1 / 2 / 2;
}
/* Clear button in the history */
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button {
padding: 0;
min-height: auto;
grid-area: 1 / 2 / 2 / 3;
font-size: var(--ck-ai-form-history-font-size);
justify-self: start;
background: none;
margin: var(--ck-spacing-medium) 0 0;
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button .ck-button__label {
line-height: inherit;
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-button .ck-button__label:hover {
text-decoration: underline;
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-list {
grid-area: 2 / 1 / 3 / 3;
/* Prompts can be very long. We need to display them whole. */
}
.ck .ck-ai-form .ck-ai-form-content .ck-autocomplete .ck-search__results .ck-list .ck-list__group > .ck-list .ck-list__item .ck-button .ck-button__label {
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
font-size: var(--ck-ai-form-history-font-size);
line-height: var(--ck-line-height-base);
}
.ck .ck-ai-form .ck-ai-form__error {
display: flex;
justify-content: center;
align-items: center;
padding: var(--ck-spacing-medium);
background-color: var(--ck-ai-form-error-background);
color: var(--ck-color-base-text);
border-radius: 2px;
margin-bottom: var(--ck-spacing-medium);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
:root {
--ck-user-colors--0: hsla(235, 73%, 67%, 1);
--ck-user-colors--0-alpha: hsla(235, 73%, 67%, 0.15);
--ck-user-colors--1: hsla(173, 100%, 24%, 1);
--ck-user-colors--1-alpha: hsla(173, 100%, 24%, 0.15);
--ck-user-colors--2: hsla(0, 46%, 50%, 1);
--ck-user-colors--2-alpha: hsla(0, 46%, 50%, 0.15);
--ck-user-colors--3: hsla(256, 54%, 45%, 1);
--ck-user-colors--3-alpha: hsla(256, 54%, 45%, 0.15);
--ck-user-colors--4: hsla(95, 50%, 36%, 1);
--ck-user-colors--4-alpha: hsla(95, 50%, 36%, 0.15);
--ck-user-colors--5: hsla(336, 78%, 43%, 1);
--ck-user-colors--5-alpha: hsla(336, 78%, 43%, 0.15);
--ck-user-colors--6: hsla(0, 80%, 59%, 1);
--ck-user-colors--6-alpha: hsla(0, 80%, 59%, 0.15);
--ck-user-colors--7: hsla(184, 90%, 43%, 1);
--ck-user-colors--7-alpha: hsla(184, 90%, 43%, 0.15);
--ck-user-dot-size: 6px;
}
/* We are using mixins here because of lack of PostCSS loop plugin. */
.ck .ck-user__color--0 {
color: var(--ck-user-colors--0);
}
.ck .ck-user__bg-color--0 {
background-color: var(--ck-user-colors--0);
}
.ck .ck-user__selection--0 {
background-color: var(--ck-user-colors--0-alpha);
}
.ck .ck-user__selection--0.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--0);
}
.ck .ck-user__marker--0, .ck .ck-user__marker--0 .ck-user__marker-tooltip, .ck .ck-user__marker--0 .ck-user__marker-dot, .ck .ck-user__marker--0::selection, .ck .ck-user__marker--0 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--0 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--0);
}
.ck .ck-user__marker--0 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--0);
}
.ck .ck-user__color--1 {
color: var(--ck-user-colors--1);
}
.ck .ck-user__bg-color--1 {
background-color: var(--ck-user-colors--1);
}
.ck .ck-user__selection--1 {
background-color: var(--ck-user-colors--1-alpha);
}
.ck .ck-user__selection--1.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--1);
}
.ck .ck-user__marker--1, .ck .ck-user__marker--1 .ck-user__marker-tooltip, .ck .ck-user__marker--1 .ck-user__marker-dot, .ck .ck-user__marker--1::selection, .ck .ck-user__marker--1 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--1 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--1);
}
.ck .ck-user__marker--1 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--1);
}
.ck .ck-user__color--2 {
color: var(--ck-user-colors--2);
}
.ck .ck-user__bg-color--2 {
background-color: var(--ck-user-colors--2);
}
.ck .ck-user__selection--2 {
background-color: var(--ck-user-colors--2-alpha);
}
.ck .ck-user__selection--2.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--2);
}
.ck .ck-user__marker--2, .ck .ck-user__marker--2 .ck-user__marker-tooltip, .ck .ck-user__marker--2 .ck-user__marker-dot, .ck .ck-user__marker--2::selection, .ck .ck-user__marker--2 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--2 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--2);
}
.ck .ck-user__marker--2 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--2);
}
.ck .ck-user__color--3 {
color: var(--ck-user-colors--3);
}
.ck .ck-user__bg-color--3 {
background-color: var(--ck-user-colors--3);
}
.ck .ck-user__selection--3 {
background-color: var(--ck-user-colors--3-alpha);
}
.ck .ck-user__selection--3.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--3);
}
.ck .ck-user__marker--3, .ck .ck-user__marker--3 .ck-user__marker-tooltip, .ck .ck-user__marker--3 .ck-user__marker-dot, .ck .ck-user__marker--3::selection, .ck .ck-user__marker--3 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--3 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--3);
}
.ck .ck-user__marker--3 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--3);
}
.ck .ck-user__color--4 {
color: var(--ck-user-colors--4);
}
.ck .ck-user__bg-color--4 {
background-color: var(--ck-user-colors--4);
}
.ck .ck-user__selection--4 {
background-color: var(--ck-user-colors--4-alpha);
}
.ck .ck-user__selection--4.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--4);
}
.ck .ck-user__marker--4, .ck .ck-user__marker--4 .ck-user__marker-tooltip, .ck .ck-user__marker--4 .ck-user__marker-dot, .ck .ck-user__marker--4::selection, .ck .ck-user__marker--4 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--4 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--4);
}
.ck .ck-user__marker--4 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--4);
}
.ck .ck-user__color--5 {
color: var(--ck-user-colors--5);
}
.ck .ck-user__bg-color--5 {
background-color: var(--ck-user-colors--5);
}
.ck .ck-user__selection--5 {
background-color: var(--ck-user-colors--5-alpha);
}
.ck .ck-user__selection--5.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--5);
}
.ck .ck-user__marker--5, .ck .ck-user__marker--5 .ck-user__marker-tooltip, .ck .ck-user__marker--5 .ck-user__marker-dot, .ck .ck-user__marker--5::selection, .ck .ck-user__marker--5 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--5 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--5);
}
.ck .ck-user__marker--5 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--5);
}
.ck .ck-user__color--6 {
color: var(--ck-user-colors--6);
}
.ck .ck-user__bg-color--6 {
background-color: var(--ck-user-colors--6);
}
.ck .ck-user__selection--6 {
background-color: var(--ck-user-colors--6-alpha);
}
.ck .ck-user__selection--6.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--6);
}
.ck .ck-user__marker--6, .ck .ck-user__marker--6 .ck-user__marker-tooltip, .ck .ck-user__marker--6 .ck-user__marker-dot, .ck .ck-user__marker--6::selection, .ck .ck-user__marker--6 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--6 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--6);
}
.ck .ck-user__marker--6 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--6);
}
.ck .ck-user__color--7 {
color: var(--ck-user-colors--7);
}
.ck .ck-user__bg-color--7 {
background-color: var(--ck-user-colors--7);
}
.ck .ck-user__selection--7 {
background-color: var(--ck-user-colors--7-alpha);
}
.ck .ck-user__selection--7.ck-widget {
background-color: transparent;
border: 3px solid var(--ck-user-colors--7);
}
.ck .ck-user__marker--7, .ck .ck-user__marker--7 .ck-user__marker-tooltip, .ck .ck-user__marker--7 .ck-user__marker-dot, .ck .ck-user__marker--7::selection, .ck .ck-user__marker--7 .ck-user__marker-tooltip::selection, .ck .ck-user__marker--7 .ck-user__marker-dot::selection {
background-color: var(--ck-user-colors--7);
}
.ck .ck-user__marker--7 .ck-user__marker-line {
border: 1px solid var(--ck-user-colors--7);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
/*
* 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
*/
/**
* Makes element unselectable.
*/
:root {
--ck-user-avatar-size: 40px;
--ck-user-avatar-background: hsl(210, 52%, 44%);
--ck-user-avatar-color: hsl(0, 0%, 100%);
--ck-user-me-border-color: hsl(0, 0%, 100%);
}
.ck.ck-user {
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 50%;
background-color: var(--ck-user-avatar-background);
box-sizing: border-box;
height: var(--ck-user-avatar-size);
width: var(--ck-user-avatar-size);
min-width: var(--ck-user-avatar-size);
min-height: var(--ck-user-avatar-size);
line-height: 100%;
margin: 2px;
}
.ck.ck-user.ck-user_me {
border: 2px solid var(--ck-user-me-border-color);
outline: 2px solid var(--ck-user-avatar-background);
}
.ck.ck-user__name {
color: var(--ck-user-avatar-color);
cursor: default;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ck.ck-user__name.ck-user__name--hidden {
display: none;
}
.ck.ck-user__img {
display: none;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--ck-user-avatar-background);
border-radius: 50%;
border: none;
}
.ck.ck-user__img.ck-user__anonymous {
display: block;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.8%2020H2c0-5.7%205-5.7%206-7l.2-.8c-1.6-.8-2.7-2.7-2.7-5%200-2.8%202-5.2%204.3-5.2S14%204.4%2014%207.3c0%202.2-1%204-2.6%205l.2.6c1.2%201.3%206%201.4%206%207H9.8z%22%2F%3E%0A%3C%2Fsvg%3E);
/* Do not display initials when user is anonymous. */
}
.ck.ck-user__img.ck-user__anonymous + .ck-user__name {
display: none;
}
.ck.ck-user__img.ck-user__avatar {
display: block;
/* In case if avatar is transparent make background white. */
background-color: hsl(0, 0%, 100%);
}
.ck.ck-user__img.ck-user__img--hidden {
display: none;
}
.ck.ck-user__notification {
display: flex;
width: 15px;
height: 15px;
justify-content: center;
align-items: center;
background: var(--ck-color-base-background);
border: 2px solid var(--ck-color-base-background);
border-radius: 50%;
box-sizing: content-box;
position: absolute;
top: -8px;
right: -7px;
overflow: hidden;
transform: translateZ(0);
}
.ck.ck-user__notification .ck-user__icon {
color: var(--ck-color-annotation-info);
background: var(--ck-color-base-background);
width: 19px;
height: 19px;
max-width: 19px;
max-height: 19px;
min-width: 19px;
min-height: 19px;
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
/*
* 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
*/
/**
* A visual style of focused element's border.
*/
/*
* 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
*/
/**
* A helper to combine multiple shadows.
*/
/**
* Gives an element a drop shadow so it looks like a floating panel.
*/
/*
* 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
*/
/**
* Implements rounded corner interface for .ck-rounded-corners class.
*
* @see $ck-border-radius
*/
:root {
--ck-color-comment-box-border: hsl(55, 98%, 48%);
--ck-color-suggestion-box-deletion-border: hsl(345, 62%, 60%);
--ck-color-suggestion-box-insertion-border: hsl(128, 62%, 60%);
--ck-color-suggestion-box-format-border: hsl(191, 62%, 60%);
}
.ck .ck-suggestion {
border-top-left-radius: var(--ck-border-radius);
}
.ck .ck-suggestion:focus {
background: var(--ck-color-button-default-hover-background);
outline: none;
}
.ck .ck-annotation {
border-left: 3px solid transparent;
}
/* See: #3683.
* Inline Suggestion annotations that can't be commented on contains a scrollbar by default */
.ck .ck-suggestion--disabled-comments .ck-annotation {
min-height: 80px;
}
/* See: #2459.
With track-changes feature enabled, we need to distinguish various types of annotations (comments and suggestions). */
.ck .ck-comment,
.ck .ck-thread__comment-count,
.ck .ck-comment__input-container,
.ck .ck-thread__header {
border-left: 3px solid var(--ck-color-comment-box-border);
}
.ck .ck-suggestion-insertion .ck-suggestion {
border-left-color: var(--ck-color-suggestion-box-insertion-border);
}
.ck .ck-suggestion-deletion .ck-suggestion {
border-left-color: var(--ck-color-suggestion-box-deletion-border);
}
.ck .ck-suggestion-replace .ck-suggestion {
border-left-color: var(--ck-color-suggestion-box-insertion-border);
}
.ck .ck-suggestion-format .ck-suggestion {
border-left-color: var(--ck-color-suggestion-box-format-border);
}
.ck .ck-suggestion-wrapper {
border-radius: 0;
overflow: hidden;
}
.ck-rounded-corners .ck .ck-suggestion-wrapper,
.ck .ck-suggestion-wrapper.ck-rounded-corners {
border-radius: var(--ck-border-radius);
}
.ck .ck-suggestion-wrapper:focus {
/*
* We cannot use the ck-focus-ring mixin here because it adds a border that would need to stay transparent
* in non-focused state and create an odd space inside the surrounding annotation container.
*/
outline: var(--ck-focus-ring);
/*
* We cannot use the ck-box-shadow mixin because we're using outline instead of border (see the comment above).
* And the shadow size has to be custom because outline is rendered on top of the shadow.
*/
box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
}
/*
* In case of inline annotations, their focus styles get hoisted to the balloon panel to work around overflow that would
* otherwise get them cropped..
*/
.ck-balloon-panel:has( .ck-suggestion-wrapper:focus ) {
/* Disable native outline. */
outline: none;
border: var(--ck-focus-ring);
box-shadow: var(--ck-drop-shadow), var(--ck-focus-outer-shadow);
}
.ck .ck-suggestion-type {
font-weight: bold;
}
.ck .ck-suggestion-color {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
vertical-align: text-bottom;
margin: 0 5px;
box-shadow: 0 0 0 1px hsl(0, 0%, 27%);
}
/* Comments inside suggestion. */
/* Handle comments inside suggestion keep same border-color. */
.ck .ck-suggestion-insertion .ck-comment,
.ck .ck-suggestion-insertion .ck-thread__comment-count,
.ck .ck-suggestion-insertion .ck-comment__input-container,
.ck .ck-suggestion-replace .ck-comment,
.ck .ck-suggestion-replace .ck-thread__comment-count,
.ck .ck-suggestion-replace .ck-comment__input-container {
border-left-color: var(--ck-color-suggestion-box-insertion-border);
}
.ck .ck-suggestion-deletion .ck-comment,
.ck .ck-suggestion-deletion .ck-thread__comment-count,
.ck .ck-suggestion-deletion .ck-comment__input-container {
border-left-color: var(--ck-color-suggestion-box-deletion-border);
}
.ck .ck-suggestion-format .ck-comment,
.ck .ck-suggestion-format .ck-thread__comment-count,
.ck .ck-suggestion-format .ck-comment__input-container {
border-left-color: var(--ck-color-suggestion-box-format-border);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
:root {
--ck-color-suggestion-marker-insertion-border: hsla(128, 71%, 40%, .35);
--ck-color-suggestion-marker-insertion-border-active: hsla(128, 71%, 25%, .5);
--ck-color-suggestion-marker-insertion-background: hsla(128, 71%, 65%, .35);
--ck-color-suggestion-marker-insertion-background-active: hsla(128, 71%, 50%, .5);
--ck-color-suggestion-marker-deletion-border: hsla(345, 71%, 40%, .35);
--ck-color-suggestion-marker-deletion-border-active: hsla(345, 71%, 25%, .5);
--ck-color-suggestion-marker-deletion-background: hsla(345, 71%, 65%, .35);
--ck-color-suggestion-marker-deletion-background-active: hsla(345, 71%, 50%, .5);
--ck-color-suggestion-marker-deletion-stroke: hsla(345, 71%, 20%, .5);
--ck-color-suggestion-marker-format-border: hsla(191, 60%, 75%, 1);
--ck-color-suggestion-marker-format-border-active: hsla(191, 60%, 60%, 1);
--ck-color-suggestion-widget-insertion-background: hsla(128, 71%, 65%, .05);
--ck-color-suggestion-widget-insertion-background-active: hsla(128, 71%, 50%, .07);
--ck-color-suggestion-widget-deletion-background: hsla(345, 71%, 65%, .05);
--ck-color-suggestion-widget-deletion-background-active: hsla(345, 71%, 45%, .07);
--ck-color-suggestion-widget-format-background: hsla(191, 90%, 40%, .09);
--ck-color-suggestion-widget-format-background-active: hsla(191, 90%, 40%, .16);
}
.ck-content .ck-suggestion-marker-insertion {
border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
background: var(--ck-color-suggestion-marker-insertion-background);
}
.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active {
border-color: var(--ck-color-suggestion-marker-insertion-border-active);
background: var(--ck-color-suggestion-marker-insertion-background-active);
}
/* Disable background of marker inside widget. */
.ck-content .ck-suggestion-marker-insertion.ck-widget {
background: none;
text-decoration: none;
border: 3px solid var(--ck-color-suggestion-marker-insertion-border);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-suggestion-marker--active {
border-color: var(--ck-color-suggestion-marker-insertion-border-active);
}
.ck-content .ck-suggestion-marker-deletion {
border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
/* #2810. Safari doesn't support combined text-decoration values. */
text-decoration: line-through;
text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
text-decoration-thickness: 3px;
background: var(--ck-color-suggestion-marker-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active {
border-color: var(--ck-color-suggestion-marker-deletion-border-active);
background: var(--ck-color-suggestion-marker-deletion-background-active);
}
/* Disable background of marker inside widget. */
.ck-content .ck-suggestion-marker-deletion.ck-widget {
background: none;
text-decoration: none;
border: 3px solid var(--ck-color-suggestion-marker-deletion-border);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-suggestion-marker--active {
border-color: var(--ck-color-suggestion-marker-deletion-border-active);
}
.ck-content .ck-suggestion-marker-merge::after {
border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
/* #2810. Safari doesn't support combined text-decoration values. */
text-decoration: line-through;
text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
background: var(--ck-color-suggestion-marker-deletion-background);
color: var(--ck-color-suggestion-marker-deletion-stroke);
content: '¶';
}
.ck-content .ck-suggestion-marker-merge.ck-suggestion-marker--active::after {
border-color: var(--ck-color-suggestion-marker-deletion-border-active);
background: var(--ck-color-suggestion-marker-deletion-background-active);
}
.ck-content .ck-suggestion-marker-split::after {
border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
background: var(--ck-color-suggestion-marker-insertion-background);
color: var(--ck-color-suggestion-marker-insertion-border);
content: '¶';
}
.ck-content .ck-suggestion-marker-split.ck-suggestion-marker--active::after {
border-color: var(--ck-color-suggestion-marker-insertion-border-active);
background: var(--ck-color-suggestion-marker-insertion-background-active);
}
.ck-content .ck-suggestion-marker-formatInline {
border-top: 3px solid var(--ck-color-suggestion-marker-format-border);
border-bottom: 3px solid var(--ck-color-suggestion-marker-format-border);
}
.ck-content .ck-suggestion-marker-formatInline.ck-suggestion-marker--active {
border-color: var(--ck-color-suggestion-marker-format-border-active);
}
.ck-content .ck-suggestion-marker-formatInline.ck-widget {
background: none;
border: 3px solid var(--ck-color-suggestion-marker-format-border);
}
.ck-content .ck-suggestion-marker-formatInline.ck-widget.ck-suggestion-marker--active {
border-color: var(--ck-color-suggestion-marker-format-border-active);
}
/* This is a tricky case.
* We can't use `border-left` because sticky marker to the element looks kinda ugly.
* We can't use `::before` pseudoelement because it requires `position: relative` of parent, which breaks side-image.
* We can't use `outline` because it's impossible to display only left side of outline.
* So... we need to use power of CSS hacks <3 and use doubled box-shadow.
*/
.ck-content .ck-suggestion-marker-formatBlock {
border: 0;
background: none;
box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}
.ck-content .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active {
box-shadow: -5px 0 0 0 var(--ck-color-base-background), -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}
.ck-content ul .ck-suggestion-marker-formatBlock,
.ck-content ol .ck-suggestion-marker-formatBlock {
box-shadow: -2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}
.ck-content ul .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active, .ck-content ol .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active {
box-shadow: -2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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-aria-description {
display: none;
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion {
background-color: var(--ck-color-suggestion-widget-deletion-background);
border: none;
}
.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}
.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion {
background-color: var(--ck-color-suggestion-widget-insertion-background);
border: none;
}
.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.image {
background-color: var(--ck-color-suggestion-widget-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.image img {
opacity: 0.6;
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.image figcaption {
background-color: var(--ck-color-suggestion-widget-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active figcaption {
background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.image {
background-color: var(--ck-color-suggestion-widget-insertion-background);
/* stylelint-disable no-descending-specificity */
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.image figcaption {
background-color: var(--ck-color-suggestion-widget-insertion-background);
}
/* stylelint-enable no-descending-specificity */
.ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active figcaption {
background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line {
background-color: var(--ck-color-suggestion-widget-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line {
background-color: var(--ck-color-suggestion-widget-insertion-background);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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-content .ck-suggestion-marker-deletion.ck-widget.media {
background-color: var(--ck-color-suggestion-widget-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.media .ck-media__wrapper {
opacity: 0.6;
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.media.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.media {
background-color: var(--ck-color-suggestion-widget-insertion-background);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.media.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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-content .ck-suggestion-marker.ck-widget.ck-merge-field,
.ck-content .ck-comment-marker.ck-widget.ck-merge-field {
/* Note that comments markers have transparent border to be better aligned with suggestions markers. */
border-width: 2px;
border-left: none;
border-right: none;
padding-top: 0;
padding-bottom: 0;
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field {
border-top-color: var(--ck-color-suggestion-marker-deletion-border);
border-bottom-color: var(--ck-color-suggestion-marker-deletion-border);
background: var(--ck-color-suggestion-marker-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field :not(.ck-merge-field__affix),
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-merge-field_with-value,
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-merge-field_with-warning {
text-decoration: line-through;
text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
text-decoration-thickness: 3px;
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-marker-deletion-background-active);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-merge-field {
background-color: var(--ck-color-suggestion-marker-insertion-background);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-merge-field.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-marker-insertion-background-active);
}
.ck-content .ck-comment-marker.ck-widget.ck-merge-field {
background: var(--ck-color-comment-marker);
}
.ck-content .ck-comment-marker.ck-widget.ck-merge-field.ck-comment-marker--active {
background: var(--ck-color-comment-marker-active);
}
/*
This is a hack for a specific situation. The selector targets all regular markers made on text that are just before
a merge field (also in marker). This is a common situation. For example, if you have some text and a merge field
just after and all that is in a suggestion. Without this hack, there is a 1px spacing between the span and the merge
field, because the merge field has margin. The margin is needed because otherwise caret does not display. To
"remove" the spacing, we extend the span before the merge field by 1px using padding, but we need to compensate
by using negative margin, so that the whole content does not change its position.
*/
.ck-content span.ck-comment-marker:has(+.ck-comment-marker.ck-widget.ck-merge-field),
.ck-content span.ck-suggestion-marker:has(+.ck-suggestion-marker.ck-widget.ck-merge-field) {
padding-right: 1px;
margin-right: -1px;
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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-content .ck-suggestion-marker-deletion.ck-widget.page-break {
background-color: var(--ck-color-suggestion-widget-deletion-background);
}
.ck-content .ck-suggestion-marker-deletion.ck-widget.page-break.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.page-break {
background-color: var(--ck-color-suggestion-widget-insertion-background);
}
.ck-content .ck-suggestion-marker-insertion.ck-widget.page-break.ck-suggestion-marker--active {
background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}
/*
* What you're currently looking at is the source code of a legally protected, proprietary software.
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
*
* 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
*/
:root {
--ck-color-suggestion-widget-th-insertion-background: hsla(128, 71%, 65%, .12);
--ck-color-s