@ckeditor/ckeditor5-ai
Version:
AI features for CKEditor 5.
263 lines (214 loc) • 6.3 kB
CSS
/*
* 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
*/
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
: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%;
@mixin ck-media-phone {
/* Allow the for the layout to be fluid in narrow viewports to avoid breaking it due to limited
* horizontal space (https://github.com/ckeditor/ckeditor5-commercial/issues/5913). */
--ck-ai-form-view-width: 100vw;
}
& .ck-ai-form-content {
padding: var(--ck-spacing-large);
width: 100%;
& .ck-input {
width: 100%;
}
& .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;
&:focus {
outline: none;
border: var(--ck-focus-ring);
box-shadow: var(--ck-focus-outer-shadow), 0 0;
}
}
& .ck-ai-form__content-area {
display: flex;
background-color: var(--ck-ai-form-content-background);
&.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-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;
@mixin ck-dir ltr {
padding-right: 0;
}
@mixin ck-dir rtl {
padding-left: 0;
}
& > * {
white-space: normal;
color: inherit;
}
}
& .ck-spinner-container {
@mixin ck-dir ltr {
margin-right: var(--ck-spacing-medium);
}
@mixin ck-dir rtl {
margin-left: var(--ck-spacing-medium);
}
}
& .ck-ai-form__copy-button-wrapper {
display: flex;
flex-direction: column-reverse;
padding-left: 2px;
}
& .ck-ai-form__copy-button {
position: sticky;
right: 1px;
bottom: 1px;
padding: 4px;
min-height: unset;
min-width: unset;
& svg {
--ck-icon-size: 16px;
}
&.ck-ai-form__copy-button--copied {
color: inherit;
}
}
}
& .ck-ai-form__toolbar {
border: none;
padding: 0;
margin-top: var(--ck-spacing-medium);
margin-bottom: calc( 2 * var(--ck-spacing-medium) );
}
& .ck-ai-form__loader {
display: flex;
align-items: center;
& .ck-spinner {
box-sizing: border-box;
}
}
& .ck-autocomplete {
display: flex;
justify-content: space-between;
& > .ck-labeled-field-view {
flex-grow: 1;
}
& > .ck.ck-ai-form__submit {
@mixin ck-dir ltr {
margin-left: var(--ck-spacing-medium);
}
@mixin ck-dir rtl {
margin-right: var(--ck-spacing-medium);
}
border-color: var(--ck-ai-form-submit-button-border-color);
color: var(--ck-ai-form-submit-button-text-color);
&.ck-disabled {
border-color: var(--ck-ai-form-submit-button-disabled-border-color);
}
}
/* Toggle history button */
& > .ck-labeled-field-view .ck-ai-form__toggle-history {
position: absolute;
font-size: var(--ck-font-size-tiny);
@mixin ck-dir ltr {
right: var(--ck-spacing-medium);
}
@mixin ck-dir rtl {
left: var(--ck-spacing-medium);
}
bottom: var(--ck-spacing-small);
top: var(--ck-spacing-small);
padding: 4px;
min-height: unset;
min-width: unset;
}
& .ck-textarea {
/* Give the toggle history button some space */
@mixin ck-dir ltr {
padding-right: 30px;
}
@mixin ck-dir rtl {
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/ckeditor/ckeditor5-commercial/issues/5913). */
@mixin ck-media-phone {
--ck-input-width: auto;
}
}
/* Prompt history group */
& .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 */
& > span {
grid-area: 1 / 1 / 2 / 2;
}
/* Clear button in the history */
& > .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-button__label {
line-height: inherit;
&:hover {
text-decoration: underline;
}
}
}
& > .ck-list {
grid-area: 2 / 1 / 3 / 3;
/* Prompts can be very long. We need to display them whole. */
& .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-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);
}
}