@ckeditor/ckeditor5-ai/theme/common/aiheader.css

AI features for CKEditor 5.

/*
 * 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-ai-header-color-icon: hsla(0, 0%, 44%, 1);
	--ck-ai-header-color-text: hsla(263, 59%, 52%, 1);
	--ck-ai-header-border-color-button: hsla(262, 51%, 80%, 1);
}

.ck-ai-header {
	/* Custom values unlike the rest of editor UI. */
	--ck-ui-component-min-height: 1.7em;
	--ck-ui-component-min-width: 1.7em;

	/* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
	--ck-form-header-height: 3em;
	--ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);

	& > .ck-button {
		margin-inline-start: var(--ck-spacing-standard);

		& > .ck-button__icon {
			/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
			--ck-icon-font-size: .666em;

			color: var(--ck-ai-header-color-icon);
		}
	}

	& > .ck.ck-button.ck-ai-chat__start-conversation {
		/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat history - empty viewr) */
		/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
		font-size: 11.7px;
		min-height: unset;
		border: 1px solid var(--ck-ai-header-border-color-button);
		border-radius: var(--ck-border-radius);
		gap: var(--ck-spacing-small);
		color: var(--ck-ai-header-color-text);

		&:hover {
			background-color: var(--ck-ai-chat-button-active-background-color);
		}

		& > .ck-button__label {
			/* Custom value unlike the rest of editor UI. */
			line-height: 1.4em;
		}

		& > .ck-button__icon {
			/* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
			--ck-icon-font-size: .632em;

			margin-inline-end: 0;
			color: var(--ck-ai-header-color-text);
		}

		& > span.ck-button__label {
			position: relative;
			top: 1px;
		}
	}

	&.ck-ai-header_small {
		& > .ck.ck-button.ck-button-back {
			margin-inline-start: 0;
			margin-inline-end: var(--ck-spacing-small);

			&:hover {
				background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
			}

			& > .ck-button__icon {
				/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
				--ck-icon-font-size: 13px;

				color: var(--ck-form-header-small-icon-color);
			}
		}

		& .ck-form__header__label {
			--ck-font-size-base: 13px;
			--ck-font-face: var(--ck-ai-chat-font-family);

			font-weight: 500;
		}
	}

	& .ck-form__header__label {
		&:not(:last-child) {
			margin-inline-end: var(--ck-spacing-small);
		}
	}
}