@ckeditor/ckeditor5-ai
Version:
AI features for CKEditor 5.
227 lines (188 loc) • 6.38 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-theme-lark/theme/mixins/_rounded.css";
:root {
--ck-ai-chat-color-icon-outdated: var(--ck-ai-chat-suggestion-icon-default-color);
--ck-ai-chat-suggestion-container-header-font-size: .9em;
--ck-ai-background-color-action-button-semi-transparent: hsla(263, 59%, 52%, 0.5);
}
/*
* Container for the suggestion where the content returned by the AI is displayed.
*
* It supports the regular output and "Show preview" mode.
*
* It works in the feed (sidebar) and in the dialog/balloon.
*/
.ck.ck-ai-suggestion__container {
@mixin ck-rounded-corners;
--ck-border-radius: 4px;
border: 1px solid var(--ck-color-base-border);
position: relative;
& .ck-ai-suggestion__header {
height: 3.23em; /* 42px */
border-bottom: 1px solid var(--ck-color-base-border);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 var(--ck-spacing-large);
& > span {
font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
font-weight: bold;
color: var(--ck-ai-chat-color-icon);
flex-grow: 1;
}
& > .ck-icon {
width: 14px;
height: 14px;
margin-right: var(--ck-spacing-medium);
color: var(--ck-ai-chat-color-icon);
}
& > .ck-switchbutton {
--ck-switch-button-toggle-width: 2.307em;
--ck-switch-button-toggle-inner-size: 1em;
--ck-switch-button-translation: calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px );
--ck-color-switch-button-off-background: var(--ck-ai-chat-color-icon);
& .ck-button__label {
font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
margin-right: var(--ck-spacing-standard);
}
& .ck-button__toggle {
border-radius: var(--ck-switch-button-toggle-inner-size);
& .ck-button__toggle__inner {
border-radius: 100%;
}
}
}
}
& .ck-ai-suggestion__body {
display: flex;
flex-direction: column;
& .ck-ai-suggestion__body__content-parts {
display: flex;
flex-direction: column;
}
& .ck-ai-suggestion__body__content-part {
position: relative;
padding-bottom: var(--ck-spacing-large);
& .ck-ai-suggestion__body__content-part__title {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--ck-ai-background-color-action-button);
height: 2.308em;
& > .ck-ai-suggestion__body__content-part__icon-title {
position: absolute;
left: calc(-1.8 * var(--ck-spacing-large));
background: var(--ck-color-base-background);
box-shadow: 0 0 5px 6px var(--ck-color-base-background);
clip-path: inset(-6px 0 -6px 0);
border-radius: 100%;
}
& > .ck-ai-suggestion__body__content-part__icon-accepted {
color: var(--ck-color-base-action);
}
& > .ck-ai-suggestion__body__content-part__icon-rejected {
color: var(--ck-color-base-error);
}
& > .ck-ai-suggestion__body__content-part__icon-outdated {
color: var(--ck-ai-chat-color-icon-outdated);
}
& > .ck-icon,
& > .ck-toolbar .ck-icon {
--ck-icon-size: 1.477em;
}
& .ck-toolbar {
border: 0;
& .ck-button {
margin: 0;
color: var(--ck-ai-chat-suggestion-icon-default-color);
&:hover {
background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
}
}
}
}
& .ck-ai-suggestion__body__content-part__content {
& :last-child {
padding-bottom: 0;
margin-bottom: var(--ck-spacing-medium);
}
&.ck.ck-content:not(:focus) {
/* Reset default padding and border of `ck-content` class. */
padding: 0;
border: 0;
}
}
&:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {
visibility: visible;
opacity: 1;
}
&:not(:last-child)::after {
content: '...';
width: 100%;
text-align: center;
display: block;
clear: both;
}
}
& .ck-ai-suggestion__body__content-part_pending:hover {
& .ck-toolbar .ck-icon {
color: var(--ck-ai-background-color-action-button);
}
}
/* TODO: This is only a temporary implementation for preview demo purposes. Make it nice. */
& .ck-ai-suggestion__body__content-part_active:hover::before {
content: '';
position: absolute;
left: calc((-1 * var(--ck-spacing-large)) - 1px);
top: 5px;
height: 100%;
border-left: 3px solid var(--ck-ai-chat-suggestion-border-hover-color);
}
& .ck-ai-suggestion__body__content-part_active:last-child::before {
height: calc(100% - 10px);
}
& .ck-ai-suggestion__body__content-part_active:last-child:first-child::before {
display: none;
}
& .ck-ai-suggestion__body__content-part_accepted,
& .ck-ai-suggestion__body__content-part_rejected,
& .ck-ai-suggestion__body__content-part_outdated {
& .ck-ai-suggestion__body__content-part__content {
opacity: 0.5;
}
& .ck-ai-suggestion__body__content-part__title
:not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *) {
opacity: 0.5;
}
/* stylelint-disable no-descending-specificity */
& .ck-ai-suggestion__body__content-part__icon-title {
/* Icon can not be transparent because the border would be visible, it has to be controlled by the color. */
color: var(--ck-ai-background-color-action-button-semi-transparent);
}
/* stylelint-enable no-descending-specificity */
&::after {
opacity: 0.5;
}
}
/* The warning is displayed when some parts of the suggestion are empty. */
& .ck.ck-ai-chat__feed__item.ck-ai-notification_warning {
margin-left: 0;
margin-right: 0;
margin-bottom: var(--ck-spacing-large);
width: 100%;
}
}
& .ck-ai-suggestion__body,
& .ck-ai-suggestion__changes {
padding: var(--ck-spacing-large);
padding-bottom: 0px;
}
}