@ckeditor/ckeditor5-ai
Version:
AI features for CKEditor 5.
265 lines (218 loc) • 6.18 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
*/
:root {
--ai-active-icon-size: 17px;
--ck-ai-loader-icon-color: hsla(0, 0%, 85%, 1);
--ck-ai-loader-icon-dot-color: hsla(0, 0%, 65%, 1);
--ck-ai-chat-feed-item-spacing: var(--ck-spacing-extra-large);
}
.ck .ck-ai-chat-history {
display: flex;
flex-direction: column;
height: 100%;
.ck-ai-chat-history__content,
.ck-search {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
gap: var(--ck-spacing-medium-small);
position: relative;
}
.ck-ai-chat-history__content {
.ck-ai-notification_error {
margin: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-medium) var(--ck-spacing-large);
}
}
.ck-search > .ck-labeled-field-view {
margin-top: var(--ck-spacing-medium);
padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny);
}
.ck-search__results {
min-height: 0;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
}
.ck-dropdown .ck-dropdown__arrow {
display: none;
}
.ck-ai-chat-history__sections {
gap: var(--ck-spacing-medium-small);
}
.ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
padding: 0;
}
.ck-ai-chat-history__section-title {
color: var(--ck-ai-chat-color-icon);
font-size: 0.85em;
font-weight: 700;
line-height: 1.85em;
padding: 0.48em 0.9em 0 0.9em;
}
.ck-confirm-view .ck-confirm-view-inner, .ck-ai-chat-history__item {
padding: var(--ck-spacing-tiny)
var(--ck-spacing-extra-large)
var(--ck-spacing-tiny)
var(--ck-spacing-large);
}
.ck-ai-chat-history__item {
display: flex;
position: relative;
transition: transform 300ms ease;
@media (prefers-reduced-motion: reduce) {
transition: none;
}
&:hover {
background-color: var(--ck-ai-chat-button-active-background-color);
}
}
.ck-ai-chat-history__item-title {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.ck-ai-chat-history__item--active {
& .ck-ai-chat-history__item-title {
font-weight: 700;
}
}
.ck-ai-chat-history__item-row {
--ck-icon-font-size: .666em;
--ck-ui-component-min-height: 1.7em;
--ck-ui-component-min-width: 1.7em;
width: 100%;
min-width: 0;
margin-left: 0.3em;
}
.ck-ai-chat-history__item-row, .ck-ai-chat-history__item-actions {
display: flex;
align-items: center;
gap: 0.6em;
}
.ck-ai-chat-history__item-actions {
height: 100%;
& > .ck-button,
& > .ck-dropdown .ck-dropdown__button {
opacity: .7;
&:hover {
opacity: 1;
background: none;
}
&.ck-on {
background-color: var(--ck-ai-chat-button-active-background-color);
color: var(--ck-ai-chat-button-hover-color);
svg {
color: var(--ck-ai-chat-button-active-color);
}
}
}
& .ck-dropdown {
& .ck-dropdown__panel {
& .ck-list__item {
& .ck-button {
&:hover, &:active {
background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
}
}
}
}
}
}
.ck-ai-chat-history__item--edit .ck-input,
.ck-ai-chat-history__item--edit .ck-input_focused {
width: 100%;
padding: 0;
border: none;
box-shadow: none;
background: transparent;
}
.ck-ai-chat-history__item--edit {
background: var(--ck-ai-chat-button-active-background-color);
& .ck-ai-chat-history__item-edit .ck-input {
background: var(--ck-ai-chat-button-active-background-color);
}
& .ck-ai-chat-history__item-actions {
align-items: center;
}
}
.ck-ai-chat-history__item-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
flex: 1 0 0;
overflow: hidden;
}
.ck-ai-chat-history__item-main-content {
width: 100%;
}
.ck-ai-chat-history__item-main-content, .ck-ai-chat-history__item-check-container {
display: flex;
align-items: center;
height: 2em;
}
.ck-ai-chat-history__item-check-container {
--ck-icon-font-size: .5em;
min-width: var(--ai-active-icon-size);
}
.ck-ai-chat-history__item-date {
line-height: 1.385em;
color: var(--ck-ai-chat-color-icon);
}
.ck-ai-chat-history__empty {
padding: var(--ck-spacing-tiny) var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-large);
.ck-ai-chat-history__empty-message {
text-wrap: auto;
line-height: 1.85em;
margin: var(--ck-spacing-large) 0;
}
.ck-ai-chat__start-conversation {
/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat header) */
/* 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-border-color-button);
border-radius: var(--ck-border-radius);
gap: var(--ck-spacing-small);
color: var(--ck-ai-chat-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-chat-color-text);
}
}
}
.ck-confirm-view {
--ck-icon-font-size: .666em;
--ck-ui-component-min-height: 1.7em;
--ck-ui-component-min-width: 1.7em;
.ck-confirm-view-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.6em;
flex: 1 0 0;
margin-left: var(--ai-active-icon-size);
}
.ck-confirm-view-actions {
display: flex;
gap: 0.6em;
}
}
}