@ckeditor/ckeditor5-ai
Version:
AI features for CKEditor 5.
271 lines (220 loc) • 7.92 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 {
--ck-ai-review-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
--ck-ai-review-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
--ck-ai-review-check-list-item-title-color: var(--ck-color-text);
--ck-ai-review-check-list-item-description-color: hsla(0, 0%, 44%, 1);
--ck-ai-review-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
--ck-ai-review-check-list-model-dropdown-width: 426px;
--ck-ai-review-check-list-model-dropdown-max-height: 340px;
--ck-ai-review-check-list-model-dropdown-arrow-drop-shadow: 0 -2px 0px var(--ck-color-shadow-drop);
--ck-ai-review-check-list-model-dropdown-hover-background-color: hsla(262, 100%, 96%, 1);
--ck-ai-review-check-list-model-dropdown-active-color: hsla(263, 59%, 52%, 1);
}
.ck.ck-ai-review-mode {
& * {
font-family: var(--ck-ai-review-font-family) ;
}
& .ck-ai-review-mode__check-list {
position: relative;
height: 100%;
overflow: auto;
& > .ck-ai-review-mode__check-list-item {
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
border-bottom: 1px solid var(--ck-color-base-border);
box-shadow: 3px 0px 0px 0px transparent inset;
opacity: 0;
visibility: hidden;
transition: box-shadow 0.3s ease-in-out;
@media (prefers-reduced-motion: reduce) {
transition-duration: 0s;
}
& .ck-ai-review-mode__check-list-item-description {
color: var(--ck-ai-review-check-list-item-description-color);
}
& .ck-ai-review-mode__check-list-item-title-text,
& .ck-ai-review-mode__check-list-item-description {
white-space: normal;
line-height: 1.3;
}
&:hover {
cursor: pointer;
& .ck-ai-review-mode__check-list-item-title-text,
& .ck-ai-review-mode__check-list-item-description {
cursor: pointer;
}
}
&.ck-ai-review-mode__check-list-item_rendered {
opacity: 1;
visibility: visible;
transition: box-shadow 0.3s ease-in-out,
opacity 0.1s calc(0.05s * var(--ck-ai-review-check-list-item-index)),
visibility 0.1s calc(0.05s * var(--ck-ai-review-check-list-item-index));
@media (prefers-reduced-motion: reduce) {
opacity: 1;
visibility: visible;
}
}
&.ck-ai-review-mode__check-list-item_selected {
box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-active-border-color) inset;
}
& .ck-ai-review-mode__check-list-item-title {
display: flex;
justify-content: space-between;
margin-block-end: var(--ck-spacing-tiny);
& > .ck-ai-review-mode__check-list-item-title-text {
flex-grow: 1;
color: var(--ck-ai-review-check-list-item-title-color);
font-weight: 700;
}
& > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
--ck-icon-size: 20px;
flex-shrink: 0;
margin-inline-start: var(--ck-spacing-small);
color: var(--ck-ai-review-check-list-item-title-icon-color);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
@media (prefers-reduced-motion: reduce) {
transition-duration: 0s;
}
}
}
&:not(.ck-ai-review-mode__check-list-item_selected):hover {
box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-hover-border-color) inset;
& .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
opacity: 1;
visibility: visible;
}
}
/* Parameterized form view. */
& .ck-ai-review-mode__check-list-item-parameterized {
& .ck.ck-form__row {
padding-left: 0;
padding-right: 0;
& > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element {
flex: 1;
& > *:first-child {
width: 100%;
}
&.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown {
& .ck-button.ck-dropdown__button {
border-color: hsl(216, 5%, 81%);
& > .ck-button__label {
width: 100%;
}
}
}
}
& .ck.ck-button {
flex-shrink: 0;
}
& .ck.ck-labeled-field-view {
width: 100%;
}
}
}
& .ck-ai-review-mode__check-list-item-custom-actions {
& .ck.ck-form__row {
& .ck.ck-input.ck-textarea.ck-review-mode__prompt-input {
width: 100%;
}
& .ck-ai-review-mode__check-list-item-custom-actions-footer {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
& .ck-ai-review-mode__check-list-item-parameterized-custom-actions-buttons {
display: flex;
gap: var(--ck-spacing-small);
}
}
}
}
& .ck-ai-review-mode__check-list-item-model-dropdown {
& > .ck.ck-button.ck-dropdown__button {
font-size: .9em;
&.ck-on,
&:active {
background-color: var(--ck-ai-button-secondary-active-background-color);
color: var(--ck-ai-review-check-list-model-dropdown-active-color);
}
&:hover:not(.ck-disabled) {
background-color: var(--ck-ai-review-check-list-model-dropdown-hover-background-color);
color: var(--ck-ai-review-check-list-model-dropdown-active-color);
}
& > .ck.ck-button__label {
width: auto;
}
}
& .ck-dropdown__panel {
width: var(--ck-ai-review-check-list-model-dropdown-width);
padding-top: var(--ck-spacing-standard);
top: calc(100% + var(--ck-balloon-arrow-height));
bottom: auto;
&.ck-dropdown__panel_se {
&::before,
&::after {
content: '';
position: absolute;
left: calc(2 * var(--ck-balloon-arrow-half-width));
top: calc(-1 * var(--ck-balloon-arrow-height) + 2px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-half-width);
border-color: transparent transparent var(--ck-color-panel-background) transparent;
}
&::before {
z-index: var(--ck-balloon-panel-arrow-z-index);
margin-bottom: calc(-1 * var(--ck-balloon-border-width));
filter: drop-shadow(var(--ck-ai-review-check-list-model-dropdown-arrow-drop-shadow));
}
&::after {
z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
}
& > .ck-list {
max-height: var(--ck-ai-review-check-list-model-dropdown-max-height);
overflow-y: scroll;
}
}
& > .ck.ck-list {
gap: var(--ck-spacing-medium-small);
& > .ck.ck-list__item {
& > .ck.ck-button.ck-list-item-button {
align-items: baseline;
&:hover:not(.ck-disabled) {
background-color: var(--ck-ai-button-secondary-hover-background-color);
}
& .ck-list-item-button__check-holder {
flex-shrink: 0;
}
& .ck-ai-review-mode__check-list-item-model-dropdown-name {
line-height: 1.3;
font-weight: 500;
}
& .ck-ai-review-mode__check-list-item-model-dropdown-description {
padding-top: var(--ck-spacing-tiny);
line-height: 1.3;
& > span {
color: var(--ck-ai-review-color-icon);
line-height: 1;
white-space: normal;
}
}
}
}
}
}
}
}
}
}