@ckeditor/ckeditor5-ai/theme/aiquickactions/aiquickactions.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-quick-actions-button-color: hsla(263, 59%, 52%, 1);
	--ck-ai-quick-actions-button-background-color: hsla(265, 100%, 96%, 1);
	--ck-ai-quick-actions-list-max-height: 300px;
	--ck-ai-quick-actions-list-item-group-row-color: hsla(0, 0%, 44%, 1);
	--ck-ai-quick-actions-dropdown-max-width: 309px;
	--ck-ai-quick-actions-group-single-button-height: 28.68px;
	--ck-ai-quick-actions-group-search-result-button-min-height: 40.68px;

}

.ck-dropdown > .ck-dropdown__panel > .ck-ai-quick-actions {
	max-width: var(--ck-ai-quick-actions-dropdown-max-width);

	ul {
		max-height: var(--ck-ai-quick-actions-list-max-height);
		overflow: auto;
	}
}

.ck-ai-quick-actions-group-panel > .ck-ai-quick-actions-group-list {
	max-width: var(--ck-ai-quick-actions-dropdown-max-width);

	span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.ck-ai-quick-actions-dropdown  .ck.ck-button:not(.ck-dropdown__button),
.ck-ai-quick-actions-group-panel  .ck.ck-button:not(.ck-dropdown__button) {
	border-color: transparent;
	box-shadow: none;
}

.ck-toolbar__items {
	&>.ck.ck-button.ck-ai-quick-actions-button,  &>.ck-ai-quick-actions-dropdown > .ck.ck-button {
		--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.ck-button.ck-ai-quick-actions-button:hover,  &>.ck-ai-quick-actions-dropdown > .ck.ck-button:hover {
		color: var(--ck-color-button-on-color);
	}
}

.ck-ai-quick-actions-dropdown,
.ck-ai-quick-actions-group-panel {
	--ck-color-list-button-hover-background: var(--ck-ai-quick-actions-button-background-color);
	--ck-color-button-default-hover-background: var(--ck-ai-quick-actions-button-background-color);
	--ck-color-button-on-background: var(--ck-ai-quick-actions-button-background-color);
	--ck-color-button-on-hover-background: var(--ck-ai-quick-actions-button-background-color);
	--ck-color-search-border: hsla(216, 5%, 81%, 1);

	& .ck.ck-button.ck-dropdown__button.ck-on {
		color: var(--ck-ai-quick-actions-button-color);
	}

	& .ck-ai-quick-actions-search > .ck-search__query_with-icon {
		padding: var(--ck-spacing-large);
		border-bottom: 1px solid var(--ck-color-search-border);
	}

	& .ck-search__info {
		width: 100%;
		padding: var(--ck-spacing-medium) var(--ck-spacing-large);

		& * {
			white-space: normal;
		}

		& > span:first-child {
			display: block;
			font-weight: bold;
		}

		&:not(.ck-hidden) ~ .ck.ck-list {
			display: none;
		}
	}

	& .ck-ai-quick-actions-button_with-group__open-paren {
		margin-left: var(--ck-spacing-medium);
	}

	& .ck-list__item > .ck.ck-button.ck-ai-quick-actions-search-result-button {
		width: 100%;
		margin-bottom: 0;

		& .ck-button__label {
			width: 100%;
		}

		& .ck-ai-quick-actions-search-result__content {
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		& .ck-ai-quick-actions-search-result__group-row {
			display: flex;
			align-items: center;
			color: var(--ck-ai-quick-actions-list-item-group-row-color);
			font-size: calc(var(--ck-font-size-base) * 0.9);
			line-height: 0.923em;
			vertical-align: middle;
			margin-bottom: 0.427em;

			& .ck-icon {
				width: 1.231em;
				height: 1.231em;
				margin-right: 0.297em;
			}

			& .ck.ck-highlighted-text {
				color: hsla(0, 0%, 44%, 1);
				font-size: calc(var(--ck-font-size-base) * 0.7);
				margin-left: var(--ck-spacing-tiny);
				line-height: 1.319em;
				vertical-align: middle;
			}
		}

		&:not(.ck-ai-quick-actions-search-result-button_with-group) .ck-button__label > .ck-icon {
			display: none;
		}

		& .ck-ai-quick-actions-search-result__action-row {
			display: flex;
			align-items: center;

			span {
				line-height: 1.2;
			}
		}

		&.ck-ai-quick-actions-search-result-button_with-group {
			min-height: var(--ck-ai-quick-actions-group-search-result-button-min-height);
			border: none;
			padding-bottom: 0.385em;
			padding-top: 0.385em;

			span {
				white-space: normal; 
			}
		}

		&:not(.ck-ai-quick-actions-search-result-button_with-group) {
			height: var(--ck-ai-quick-actions-group-single-button-height);
			border: none;
			padding-bottom: 0.385em;
			padding-top: 0.385em;
		}
	}

	& .ck.ck-button:not(.ck-dropdown__button):focus {
		background-color: var(--ck-ai-quick-actions-button-background-color);
	}

	& .ck-list__item:last-child > .ck.ck-button:not(.ck-list-item-button) {
		margin-bottom: 0;
	}
}