@ckeditor/ckeditor5-ai
Version:
AI features for CKEditor 5.
232 lines (194 loc) • 6.27 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-color-text: hsla(263, 59%, 52%, 1);
--ck-ai-review-border-color-button: hsla(262, 51%, 80%, 1);
}
.ck.ck-ai-review-mode {
& .ck-ai-review-mode__check-run {
position: relative;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
&:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
overflow: hidden;
}
& .ck-ai-review-mode__check-run-result {
opacity: 0;
visibility: hidden;
box-shadow: 3px 0px 0px 0px transparent inset;
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
animation: ck-ai-check-run-list-item-show 0.25s 0.1s forwards;
transition: box-shadow 0.3s ease-in-out;
transition-behavior: allow-discrete;
@media (prefers-reduced-motion: reduce) {
animation: none;
opacity: 1;
visibility: visible;
transition-duration: 0s;
}
&:not(:first-child) {
border-top: 1px solid var(--ck-color-base-border);
}
&:last-child {
position: relative;
contain: layout;
}
&:last-child::after {
display: block;
content: "";
height: 1px;
background: var(--ck-color-base-border);
position: absolute;
left: 0;
right: 0;
bottom: -1px;
}
& .ck-suggestion-marker {
white-space: break-spaces;
}
&:hover {
box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-hover-border-color) inset;
}
&.ck-ai-review-mode__check-run-result_active {
box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-active-border-color) inset;
& .ck-suggestion-marker-insertion {
border-top: 3px solid var(--ck-ai-suggestion-marker-insertion-border-color-active);
border-bottom: 3px solid var(--ck-ai-suggestion-marker-insertion-border-color-active);
background: var(--ck-ai-suggestion-marker-insertion-background-color-active);
}
& .ck-suggestion-marker-deletion {
border-top: 3px solid var(--ck-ai-suggestion-marker-deletion-border-color-active);
border-bottom: 3px solid var(--ck-ai-suggestion-marker-deletion-border-color-active);
background: var(--ck-ai-suggestion-marker-deletion-background-color-active);
}
}
&.ck-ai-review-mode__check-run-result_removing {
animation: ck-ai-check-run-item-remove 0.2s forwards;
}
}
& .ck-ai-review-mode__check-run-results-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--ck-spacing-standard);
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
border-bottom: 1px solid var(--ck-color-base-border);
& .ck-ai-review-mode__check-run-results-header-title-wrapper {
display: flex;
align-items: flex-start;
min-width: 0;
& > .ck-ai-spinner {
transition: width 0.25s, opacity 0.25s, margin-inline-end 0.25s, display 0.25s;
transition-behavior: allow-discrete;
margin-inline-end: var(--ck-spacing-large);
&.ck-hidden {
width: 0;
opacity: 0;
margin-inline-end: 0;
}
}
& .ck-ai-review-mode__check-run-results-header-title-content {
min-width: 0;
& .ck-ai-review-mode__check-run-results-header-title,
& .ck-ai-review-mode__check-run-results-header-subtitle {
display: block;
align-self: center;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
line-height: 1.5;
}
& .ck-ai-review-mode__check-run-results-header-title {
font-weight: bold;
}
}
}
& .ck-ai-review-mode__check-run-results-header-buttons {
display: flex;
gap: var(--ck-spacing-standard);
flex-shrink: 0;
align-items: center;
/* To prevent jumping when visibility of buttons is changing.
TODO: probably it will be replaced with different loader UI. */
min-height: 30px;
}
}
& .ck-ai-review-mode__check-run-results-wrapper {
position: relative;
height: 100%;
overflow: auto;
&:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
overflow: hidden;
}
}
& .ck-ai-review-mode__check-run-skeleton-container {
position: absolute;
width: 100%;
top: 0;
height: 100%;
& .ck-ai-review-mode__check-run-skeleton-item {
position: static;
height: auto;
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
border-bottom: 1px solid var(--ck-color-base-border);
&.ck-ai-skeleton {
--ck-ai-skeleton-gap: var(--ck-spacing-small);
}
}
}
& .ck-ai-review-mode__check-run-error-container {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--ck-spacing-medium-small);
padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard) var(--ck-spacing-large);
&.ck-ai-review-mode__check-run-error-container_border-bottom {
border-bottom: 1px solid var(--ck-color-base-border);
}
& .ck-ai-review-mode__check-run-error-retry-button {
font-size: 11.7px;
min-height: unset;
border: 1px solid var(--ck-ai-review-border-color-button);
border-radius: var(--ck-border-radius);
gap: var(--ck-spacing-small);
color: var(--ck-ai-review-color-text);
}
&:not(.ck-hidden) + .ck-ai-review-mode__check-run-results-container:not(.ck-hidden) {
& > .ck-ai-review-mode__check-run-result:first-child {
border-top: 1px solid var(--ck-color-base-border);
}
}
}
}
}
@keyframes ck-ai-check-run-list-item-show {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes ck-ai-check-run-item-remove {
0% {
opacity: 1;
visibility: visible;
display: block;
}
100% {
opacity: 0;
visibility: hidden;
display: none;
}
}