ckeditor5-premium-features 46.1.1 → 47.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +9 -0
- package/dist/browser/ckeditor5-premium-features-editor.css +5 -2
- package/dist/browser/ckeditor5-premium-features.css +5 -2
- package/dist/browser/ckeditor5-premium-features.js +63 -61
- package/dist/browser/ckeditor5-premium-features.umd.js +65 -63
- package/dist/ckeditor5-premium-features-editor.css +2698 -53
- package/dist/ckeditor5-premium-features.css +3109 -55
- package/dist/translations/af.js +1 -1
- package/dist/translations/af.umd.js +1 -1
- package/dist/translations/ar.js +1 -1
- package/dist/translations/ar.umd.js +1 -1
- package/dist/translations/ast.js +1 -1
- package/dist/translations/ast.umd.js +1 -1
- package/dist/translations/az.js +1 -1
- package/dist/translations/az.umd.js +1 -1
- package/dist/translations/be.js +1 -1
- package/dist/translations/be.umd.js +1 -1
- package/dist/translations/bg.js +1 -1
- package/dist/translations/bg.umd.js +1 -1
- package/dist/translations/bn.js +1 -1
- package/dist/translations/bn.umd.js +1 -1
- package/dist/translations/bs.js +1 -1
- package/dist/translations/bs.umd.js +1 -1
- package/dist/translations/ca.js +1 -1
- package/dist/translations/ca.umd.js +1 -1
- package/dist/translations/cs.js +1 -1
- package/dist/translations/cs.umd.js +1 -1
- package/dist/translations/da.js +1 -1
- package/dist/translations/da.umd.js +1 -1
- package/dist/translations/de-ch.js +1 -1
- package/dist/translations/de-ch.umd.js +1 -1
- package/dist/translations/de.js +1 -1
- package/dist/translations/de.umd.js +1 -1
- package/dist/translations/el.js +1 -1
- package/dist/translations/el.umd.js +1 -1
- package/dist/translations/en-au.js +1 -1
- package/dist/translations/en-au.umd.js +1 -1
- package/dist/translations/en-gb.js +1 -1
- package/dist/translations/en-gb.umd.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/en.umd.js +1 -1
- package/dist/translations/eo.js +1 -1
- package/dist/translations/eo.umd.js +1 -1
- package/dist/translations/es-co.js +1 -1
- package/dist/translations/es-co.umd.js +1 -1
- package/dist/translations/es.js +1 -1
- package/dist/translations/es.umd.js +1 -1
- package/dist/translations/et.js +1 -1
- package/dist/translations/et.umd.js +1 -1
- package/dist/translations/eu.js +1 -1
- package/dist/translations/eu.umd.js +1 -1
- package/dist/translations/fa.js +1 -1
- package/dist/translations/fa.umd.js +1 -1
- package/dist/translations/fi.js +1 -1
- package/dist/translations/fi.umd.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/fr.umd.js +1 -1
- package/dist/translations/gl.js +1 -1
- package/dist/translations/gl.umd.js +1 -1
- package/dist/translations/gu.js +1 -1
- package/dist/translations/gu.umd.js +1 -1
- package/dist/translations/he.js +1 -1
- package/dist/translations/he.umd.js +1 -1
- package/dist/translations/hi.js +1 -1
- package/dist/translations/hi.umd.js +1 -1
- package/dist/translations/hr.js +1 -1
- package/dist/translations/hr.umd.js +1 -1
- package/dist/translations/hu.js +1 -1
- package/dist/translations/hu.umd.js +1 -1
- package/dist/translations/hy.js +1 -1
- package/dist/translations/hy.umd.js +1 -1
- package/dist/translations/id.js +1 -1
- package/dist/translations/id.umd.js +1 -1
- package/dist/translations/it.js +1 -1
- package/dist/translations/it.umd.js +1 -1
- package/dist/translations/ja.js +1 -1
- package/dist/translations/ja.umd.js +1 -1
- package/dist/translations/jv.js +1 -1
- package/dist/translations/jv.umd.js +1 -1
- package/dist/translations/kk.js +1 -1
- package/dist/translations/kk.umd.js +1 -1
- package/dist/translations/km.js +1 -1
- package/dist/translations/km.umd.js +1 -1
- package/dist/translations/kn.js +1 -1
- package/dist/translations/kn.umd.js +1 -1
- package/dist/translations/ko.js +1 -1
- package/dist/translations/ko.umd.js +1 -1
- package/dist/translations/ku.js +1 -1
- package/dist/translations/ku.umd.js +1 -1
- package/dist/translations/lt.js +1 -1
- package/dist/translations/lt.umd.js +1 -1
- package/dist/translations/lv.js +1 -1
- package/dist/translations/lv.umd.js +1 -1
- package/dist/translations/ms.js +1 -1
- package/dist/translations/ms.umd.js +1 -1
- package/dist/translations/nb.js +1 -1
- package/dist/translations/nb.umd.js +1 -1
- package/dist/translations/ne.js +1 -1
- package/dist/translations/ne.umd.js +1 -1
- package/dist/translations/nl.js +1 -1
- package/dist/translations/nl.umd.js +1 -1
- package/dist/translations/no.js +1 -1
- package/dist/translations/no.umd.js +1 -1
- package/dist/translations/oc.js +1 -1
- package/dist/translations/oc.umd.js +1 -1
- package/dist/translations/pl.js +1 -1
- package/dist/translations/pl.umd.js +1 -1
- package/dist/translations/pt-br.js +1 -1
- package/dist/translations/pt-br.umd.js +1 -1
- package/dist/translations/pt.js +1 -1
- package/dist/translations/pt.umd.js +1 -1
- package/dist/translations/ro.js +1 -1
- package/dist/translations/ro.umd.js +1 -1
- package/dist/translations/ru.js +1 -1
- package/dist/translations/ru.umd.js +1 -1
- package/dist/translations/si.js +1 -1
- package/dist/translations/si.umd.js +1 -1
- package/dist/translations/sk.js +1 -1
- package/dist/translations/sk.umd.js +1 -1
- package/dist/translations/sl.js +1 -1
- package/dist/translations/sl.umd.js +1 -1
- package/dist/translations/sq.js +1 -1
- package/dist/translations/sq.umd.js +1 -1
- package/dist/translations/sr-latn.js +1 -1
- package/dist/translations/sr-latn.umd.js +1 -1
- package/dist/translations/sr.js +1 -1
- package/dist/translations/sr.umd.js +1 -1
- package/dist/translations/sv.js +1 -1
- package/dist/translations/sv.umd.js +1 -1
- package/dist/translations/th.js +1 -1
- package/dist/translations/th.umd.js +1 -1
- package/dist/translations/ti.js +1 -1
- package/dist/translations/ti.umd.js +1 -1
- package/dist/translations/tk.js +1 -1
- package/dist/translations/tk.umd.js +1 -1
- package/dist/translations/tr.js +1 -1
- package/dist/translations/tr.umd.js +1 -1
- package/dist/translations/tt.js +1 -1
- package/dist/translations/tt.umd.js +1 -1
- package/dist/translations/ug.js +1 -1
- package/dist/translations/ug.umd.js +1 -1
- package/dist/translations/uk.js +1 -1
- package/dist/translations/uk.umd.js +1 -1
- package/dist/translations/ur.js +1 -1
- package/dist/translations/ur.umd.js +1 -1
- package/dist/translations/uz.js +1 -1
- package/dist/translations/uz.umd.js +1 -1
- package/dist/translations/vi.js +1 -1
- package/dist/translations/vi.umd.js +1 -1
- package/dist/translations/zh-cn.js +1 -1
- package/dist/translations/zh-cn.umd.js +1 -1
- package/dist/translations/zh.js +1 -1
- package/dist/translations/zh.umd.js +1 -1
- package/package.json +26 -26
|
@@ -391,6 +391,3053 @@
|
|
|
391
391
|
}
|
|
392
392
|
|
|
393
393
|
|
|
394
|
+
/*
|
|
395
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
396
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
397
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
398
|
+
*
|
|
399
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
400
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
401
|
+
*/
|
|
402
|
+
|
|
403
|
+
.ck.ck-button.ck-tab-button {
|
|
404
|
+
padding: 0;
|
|
405
|
+
border: 0;
|
|
406
|
+
cursor: pointer;
|
|
407
|
+
justify-content: center;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.ck.ck-button.ck-tab-button:active,
|
|
411
|
+
.ck.ck-button.ck-tab-button:focus {
|
|
412
|
+
box-shadow: none;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.ck.ck-button.ck-tab-button:not(.ck-disabled):hover {
|
|
416
|
+
background-color: var(--ck-color-tab-button-active-background);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.ck.ck-button.ck-tab-button .ck.ck-icon {
|
|
420
|
+
padding: var(--ck-tab-button-padding);
|
|
421
|
+
color: var(--ck-color-tab-button-icon);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.ck.ck-button.ck-tab-button.ck-on {
|
|
425
|
+
border: 0;
|
|
426
|
+
background-color: var(--ck-color-tab-button-active-background);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.ck.ck-button.ck-tab-button.ck-on .ck.ck-icon {
|
|
430
|
+
color: var(--ck-color-tab-button-active-icon);
|
|
431
|
+
background-color: var(--ck-color-tab-button-active-background);
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.ck.ck-button.ck-tab-button.ck-tab-button_top.ck-on {
|
|
435
|
+
border-bottom: 1px solid var(--ck-color-tab-button-active-icon);
|
|
436
|
+
box-shadow: var(--ck-color-tab-button-active-icon) 0 1px 0 0;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.ck.ck-button.ck-tab-button.ck-tab-button_top.ck-on .ck.ck-icon {
|
|
440
|
+
padding-bottom: calc(var(--ck-tab-button-padding) - 1px);
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.ck.ck-button.ck-tab-button.ck-tab-button_left.ck-on {
|
|
444
|
+
border-left: 0;
|
|
445
|
+
border-right: 1px solid var(--ck-color-tab-button-active-icon);
|
|
446
|
+
box-shadow: var(--ck-color-tab-button-active-icon) 1px 0 0 0;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.ck.ck-button.ck-tab-button.ck-tab-button_left.ck-on .ck.ck-icon {
|
|
450
|
+
padding-right: calc(var(--ck-tab-button-padding) - 1px);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.ck.ck-button.ck-tab-button.ck-tab-button_right.ck-on {
|
|
454
|
+
border-right: 0;
|
|
455
|
+
border-left: 1px solid var(--ck-color-tab-button-active-icon);
|
|
456
|
+
box-shadow: var(--ck-color-tab-button-active-icon) -1px 0 0 0;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.ck.ck-button.ck-tab-button.ck-tab-button_right.ck-on .ck.ck-icon {
|
|
460
|
+
padding-left: calc(var(--ck-tab-button-padding) - 1px);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
/*
|
|
464
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
465
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
466
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
467
|
+
*
|
|
468
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
469
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
470
|
+
*/
|
|
471
|
+
|
|
472
|
+
:root {
|
|
473
|
+
--ck-tabs-buttons-container-buttons-vertical-spacing: 0;
|
|
474
|
+
--ck-tabs-panels-container-width: auto;
|
|
475
|
+
--ck-tabs-panels-container-background: hsl(0, 0%, 100%);
|
|
476
|
+
--ck-tab-button-padding: 12px;
|
|
477
|
+
--ck-tab-button-gap: var(--ck-spacing-medium);
|
|
478
|
+
--ck-color-tabs-buttons-container-background: hsl(0, 0%, 96%);
|
|
479
|
+
--ck-color-tab-button-icon: hsl(0, 0%, 44%);
|
|
480
|
+
--ck-color-tab-button-active-icon: hsl(0, 0%, 44%);
|
|
481
|
+
--ck-color-tab-button-active-background: hsl(0, 0%, 91%);
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.ck.ck-tabs {
|
|
485
|
+
display: flex;
|
|
486
|
+
height: 100%;
|
|
487
|
+
|
|
488
|
+
font-size: var(--ck-font-size-base);
|
|
489
|
+
border: 1px solid var(--ck-color-base-border);
|
|
490
|
+
border-radius: var(--ck-border-radius);
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.ck.ck-tabs.ck-tabs_top {
|
|
494
|
+
flex-direction: column;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.ck.ck-tabs.ck-tabs_left {
|
|
498
|
+
flex-direction: row;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.ck.ck-tabs.ck-tabs_right {
|
|
502
|
+
flex-direction: row-reverse;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.ck.ck-tabs .ck-tabs__panels-container {
|
|
506
|
+
width: var(--ck-tabs-panels-container-width);
|
|
507
|
+
transition: width 0.8s ease-in-out;
|
|
508
|
+
transition: height 0.8s ease-in-out;
|
|
509
|
+
background-color: var(--ck-tabs-panels-container-background);
|
|
510
|
+
flex-grow: 1;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.ck.ck-tabs .ck-tabs__buttons-container {
|
|
514
|
+
display: flex;
|
|
515
|
+
background-color: var(--ck-color-tabs-buttons-container-background);
|
|
516
|
+
gap: var(--ck-tab-button-gap);
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_top {
|
|
520
|
+
border-top: none;
|
|
521
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
522
|
+
flex-direction: row;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_left {
|
|
526
|
+
border-left: none;
|
|
527
|
+
border-right: 1px solid var(--ck-color-base-border);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
.ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_right {
|
|
531
|
+
border-right: none;
|
|
532
|
+
border-left: 1px solid var(--ck-color-base-border);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_left,
|
|
536
|
+
.ck.ck-tabs .ck-tabs__buttons-container.ck-tabs__buttons-container_right {
|
|
537
|
+
flex-direction: column;
|
|
538
|
+
padding-top: var(--ck-tabs-buttons-container-buttons-vertical-spacing);
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
/*
|
|
542
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
543
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
544
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
545
|
+
*
|
|
546
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
547
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
548
|
+
*/
|
|
549
|
+
|
|
550
|
+
:root {
|
|
551
|
+
--ck-tabs-overlay-top-position: 0;
|
|
552
|
+
--ck-tabs-overlay-right-position: 0;
|
|
553
|
+
--ck-tabs-overlay-left-position: auto;
|
|
554
|
+
--ck-tabs-overlay-bottom-position: auto;
|
|
555
|
+
--ck-tabs-overlay-height: 100%;
|
|
556
|
+
--ck-ai-tabs-overlay-width: 500px;
|
|
557
|
+
--ck-ai-tabs-overlay-width-maximized: 50%;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.ck.ck-tabs.ck-ai-tabs {
|
|
561
|
+
--ck-tabs-buttons-container-buttons-vertical-spacing: 61.5px;
|
|
562
|
+
--ck-color-tab-button-active-icon: hsl(263, 59%, 52%);
|
|
563
|
+
--ck-tabs-panels-container-width: 450px;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.ck.ck-tabs.ck-ai-tabs .ck-tab-panel {
|
|
567
|
+
height: 100%;
|
|
568
|
+
display: flex;
|
|
569
|
+
flex-direction: column;
|
|
570
|
+
overflow: hidden;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.ck.ck-tabs.ck-ai-tabs .ck-tab-panel>* {
|
|
574
|
+
flex-grow: 1;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
.ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay {
|
|
578
|
+
position: fixed;
|
|
579
|
+
height: var(--ck-tabs-overlay-height);
|
|
580
|
+
top: var(--ck-tabs-overlay-top-position);
|
|
581
|
+
right: var(--ck-tabs-overlay-right-position);
|
|
582
|
+
left: var(--ck-tabs-overlay-left-position);
|
|
583
|
+
bottom: var(--ck-tabs-overlay-bottom-position);
|
|
584
|
+
z-index: calc(var(--ck-z-dialog) - 1);
|
|
585
|
+
border-radius: 0;
|
|
586
|
+
border-top: 0;
|
|
587
|
+
border-bottom: 0;
|
|
588
|
+
width: var(--ck-ai-tabs-overlay-width);
|
|
589
|
+
transition: width 0.3s ease;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-ai-tabs_maximized {
|
|
593
|
+
width: var(--ck-ai-tabs-overlay-width-maximized);
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_left {
|
|
597
|
+
--ck-tabs-overlay-right-position: auto;
|
|
598
|
+
--ck-tabs-overlay-left-position: 0;
|
|
599
|
+
border-left: 0;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
.ck.ck-tabs.ck-ai-tabs.ck-ai-tabs__overlay.ck-tabs_right {
|
|
603
|
+
border-right: 0;
|
|
604
|
+
}
|
|
605
|
+
/*
|
|
606
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
607
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
608
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
609
|
+
*
|
|
610
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
611
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
612
|
+
*/
|
|
613
|
+
|
|
614
|
+
/*
|
|
615
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
616
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
617
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
618
|
+
*
|
|
619
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
620
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
621
|
+
*/
|
|
622
|
+
|
|
623
|
+
/*
|
|
624
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
625
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
626
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
627
|
+
*
|
|
628
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
629
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
630
|
+
*/
|
|
631
|
+
|
|
632
|
+
/*
|
|
633
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
634
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
635
|
+
*/
|
|
636
|
+
|
|
637
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view {
|
|
638
|
+
width: 100%;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view .ck-labeled-field-view__status_error {
|
|
642
|
+
line-height: 1.4em;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea {
|
|
646
|
+
line-height: calc(var(--ck-font-size-base) * 2);
|
|
647
|
+
|
|
648
|
+
/* The padding is used to make space for the add context button. */
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
[dir="ltr"] .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea {
|
|
652
|
+
padding-right: 2.6em;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
[dir="rtl"] .ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper .ck.ck-input.ck-textarea {
|
|
656
|
+
padding-left: 2.6em;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-labeled-field-view__input-wrapper > .ck.ck-label {
|
|
660
|
+
visibility: hidden;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button {
|
|
664
|
+
height: auto;
|
|
665
|
+
align-self: flex-end;
|
|
666
|
+
margin-left: var(--ck-spacing-medium);
|
|
667
|
+
background-color: var(--ck-ai-background-color-action-button);
|
|
668
|
+
color: var(--ck-ai-font-color-action-button);
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button.ck-disabled {
|
|
672
|
+
opacity: var(--ck-disabled-opacity);
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
.ck.ck-ai-chat__prompt-input.ck-search .ck-ai-chat__prompt-submit-button > svg {
|
|
676
|
+
opacity: 1;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
/*
|
|
680
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
681
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
682
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
683
|
+
*
|
|
684
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
685
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
686
|
+
*/
|
|
687
|
+
|
|
688
|
+
.ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities {
|
|
689
|
+
display: flex;
|
|
690
|
+
justify-content: space-between;
|
|
691
|
+
align-items: center;
|
|
692
|
+
padding-top: var(--ck-spacing-medium-small);
|
|
693
|
+
gap: var(--ck-spacing-medium-small);
|
|
694
|
+
padding-inline-end: calc(var(--ck-ui-component-min-height) + var(--ck-spacing-medium));
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button:not(.ck-button_with-text) {
|
|
698
|
+
margin: 0;
|
|
699
|
+
padding: var(--ck-spacing-tiny);
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button > .ck-icon {
|
|
703
|
+
--ck-icon-size: 16px;
|
|
704
|
+
color: var(--ck-ai-chat-color-icon);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls-button--commands {
|
|
708
|
+
margin-inline-start: auto;
|
|
709
|
+
margin-inline-end: 0;
|
|
710
|
+
margin-block-start: 0;
|
|
711
|
+
margin-block-end: 0;
|
|
712
|
+
padding: 0;
|
|
713
|
+
/*
|
|
714
|
+
* TODO: Remove this when the commands button is implemented.
|
|
715
|
+
*/
|
|
716
|
+
visibility: hidden;
|
|
717
|
+
pointer-events: none;
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.ck.ck-ai-chat-controls .ck-ai-chat__prompt-capabilities .ck-ai-chat-controls__model-name {
|
|
721
|
+
color: var(--ck-ai-chat-color-icon);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
/*
|
|
725
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
726
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
727
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
728
|
+
*
|
|
729
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
730
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
731
|
+
*/
|
|
732
|
+
|
|
733
|
+
:root {
|
|
734
|
+
--ck-ai-chat-context-controls-balloon-width: 400px;
|
|
735
|
+
}
|
|
736
|
+
|
|
737
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-context-controls {
|
|
738
|
+
display: flex;
|
|
739
|
+
align-content: center;
|
|
740
|
+
justify-content: flex-start;
|
|
741
|
+
align-items: flex-start;
|
|
742
|
+
flex-wrap: wrap;
|
|
743
|
+
padding-top: 0;
|
|
744
|
+
gap: var(--ck-spacing-medium-small);
|
|
745
|
+
|
|
746
|
+
padding-bottom: var(--ck-spacing-medium-small);
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-context-controls:has(.ck-ai-chat-context-controls__pending-contexts:empty) {
|
|
750
|
+
padding-bottom: var(--ck-spacing-small);
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-context-controls .ck-ai-chat-context-controls__pending-contexts {
|
|
754
|
+
display: contents;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
/* The button to add context living inside the query input. */
|
|
758
|
+
|
|
759
|
+
.ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button {
|
|
760
|
+
position: absolute;
|
|
761
|
+
bottom: 3px;
|
|
762
|
+
opacity: .7;
|
|
763
|
+
margin: 0;
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
.ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button:hover, .ck.ck-ai-chat-controls .ck-button.ck-ai-chat-controls-button.ck-ai-chat-context-controls__add-context-button:focus {
|
|
767
|
+
opacity: 1;
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
/*
|
|
771
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
772
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
773
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
774
|
+
*
|
|
775
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
776
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
777
|
+
*/
|
|
778
|
+
|
|
779
|
+
/* .ck-ai-chat-context-chip {
|
|
780
|
+
|
|
781
|
+
} */
|
|
782
|
+
|
|
783
|
+
:root {
|
|
784
|
+
--ck-ai-chat-context-balloon-width: 290px;
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip, .ck.ck-ai-chat .ck-ai-chat-context-chip {
|
|
788
|
+
display: inline-flex;
|
|
789
|
+
align-items: center;
|
|
790
|
+
justify-content: center;
|
|
791
|
+
flex-shrink: 0;
|
|
792
|
+
|
|
793
|
+
max-width: max(calc(33% - var(--ck-spacing-medium-small) - (2 * var(--ck-spacing-large) / 3)), 118px);
|
|
794
|
+
box-sizing: border-box;
|
|
795
|
+
|
|
796
|
+
width: auto;
|
|
797
|
+
|
|
798
|
+
padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
|
|
799
|
+
|
|
800
|
+
background-color: var(--ck-ai-chat-user-context-background);
|
|
801
|
+
border-radius: var(--ck-ai-border-radius);
|
|
802
|
+
border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-main);
|
|
803
|
+
|
|
804
|
+
line-height: 1;
|
|
805
|
+
color: var(--ck-ai-chat-color-icon);
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip.ck-ai-chat-context-chip_wide, .ck.ck-ai-chat .ck-ai-chat-context-chip.ck-ai-chat-context-chip_wide {
|
|
809
|
+
max-width: max(calc(66% - var(--ck-spacing-medium-small)), 240px);
|
|
810
|
+
width: auto;
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip.ck-ai-chat-context-chip_document, .ck.ck-ai-chat .ck-ai-chat-context-chip.ck-ai-chat-context-chip_document {
|
|
814
|
+
max-width: unset;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip, .ck.ck-ai-chat .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip {
|
|
818
|
+
animation: ck-ai-new-item-flash var(--ck-ai-chat-animation-duration) var(--ck-ai-chat-animation-timing);
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip > .ck-ai-chat-context-chip__label, .ck.ck-ai-chat .ck-ai-chat-context-chip > .ck-ai-chat-context-chip__label {
|
|
822
|
+
font-size: 0.9em;
|
|
823
|
+
display: inline-block;
|
|
824
|
+
margin: 0 var(--ck-spacing-medium-small);
|
|
825
|
+
text-overflow: ellipsis;
|
|
826
|
+
overflow: hidden;
|
|
827
|
+
line-height: 1.25;
|
|
828
|
+
color: var(--ck-ai-chat-color-icon);
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip > .ck-icon.ck-ai-chat-context-chip__type-icon, .ck.ck-ai-chat .ck-ai-chat-context-chip > .ck-icon.ck-ai-chat-context-chip__type-icon {
|
|
832
|
+
--ck-icon-size: 1em;
|
|
833
|
+
|
|
834
|
+
flex-shrink: 0;
|
|
835
|
+
font-size: 1em;
|
|
836
|
+
fill: var(--ck-ai-chat-color-icon);
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip .ck-button, .ck.ck-ai-chat .ck-ai-chat-context-chip .ck-button {
|
|
840
|
+
--ck-ui-component-min-height: 1em;
|
|
841
|
+
|
|
842
|
+
max-width: var(--ck-ui-component-min-height);
|
|
843
|
+
max-height: var(--ck-ui-component-min-height);
|
|
844
|
+
border: none;
|
|
845
|
+
padding: var(--ck-spacing-tiny);
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chip .ck-button > .ck-icon, .ck.ck-ai-chat .ck-ai-chat-context-chip .ck-button > .ck-icon {
|
|
849
|
+
--ck-icon-size: 1em;
|
|
850
|
+
|
|
851
|
+
font-size: 1em;
|
|
852
|
+
fill: var(--ck-ai-chat-color-icon);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper {
|
|
856
|
+
display: flex;
|
|
857
|
+
gap: var(--ck-spacing-medium-small);
|
|
858
|
+
flex-wrap: wrap;
|
|
859
|
+
align-items: center;
|
|
860
|
+
justify-content: flex-end;
|
|
861
|
+
|
|
862
|
+
width: 100%;
|
|
863
|
+
margin-bottom: 0;
|
|
864
|
+
padding: 0;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon {
|
|
868
|
+
display: flex;
|
|
869
|
+
gap: var(--ck-spacing-standard);
|
|
870
|
+
flex-wrap: wrap;
|
|
871
|
+
align-items: center;
|
|
872
|
+
justify-content: flex-start;
|
|
873
|
+
|
|
874
|
+
width: var(--ck-ai-chat-context-balloon-width);
|
|
875
|
+
max-height: 10em;
|
|
876
|
+
padding: var(--ck-spacing-standard);
|
|
877
|
+
overflow-y: auto;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip {
|
|
881
|
+
max-width: max( calc(50% - var(--ck-spacing-standard)), 110px);
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon.ck-ai-chat-context-chip_wide, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon.ck-ai-chat-context-chip_wide {
|
|
885
|
+
max-width: 100%;
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
.ck.ck-balloon-panel .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip, .ck.ck-ai-chat .ck-ai-chat-context-chips-wrapper-balloon .ck-ai-chat-context-chip.ck-ai-chat-context-chip_new-chip {
|
|
889
|
+
animation: none;
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
@keyframes ck-ai-new-item-flash {
|
|
893
|
+
0% {
|
|
894
|
+
background-color: var(--ck-ai-chat-flash-color);
|
|
895
|
+
color: var(--ck-ai-chat-flash-color-text);
|
|
896
|
+
border-color: var(--ck-ai-chat-flash-color-text);
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
100% {
|
|
900
|
+
background-color: var(--ck-ai-chat-user-context-background);
|
|
901
|
+
color: var(--ck-ai-chat-color-icon);
|
|
902
|
+
border-color: var(--ck-ai-border-color-main);
|
|
903
|
+
}
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
/*
|
|
907
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
908
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
909
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
910
|
+
*
|
|
911
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
912
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
913
|
+
*/
|
|
914
|
+
|
|
915
|
+
.ck.ck-button.ck-ai-chat-controls-button {
|
|
916
|
+
--ck-ui-component-min-height: 1.88em;
|
|
917
|
+
|
|
918
|
+
padding: var(--ck-spacing-tiny);
|
|
919
|
+
flex-shrink: 0;
|
|
920
|
+
display: flex;
|
|
921
|
+
align-items: center;
|
|
922
|
+
justify-content: center;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
.ck.ck-button.ck-ai-chat-controls-button:not(.ck-button_with-text) {
|
|
926
|
+
margin: 0 0 var(--ck-spacing-tiny) 0;
|
|
927
|
+
padding: var(--ck-spacing-tiny);
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
.ck.ck-button.ck-ai-chat-controls-button.ck-button_with-text.ck-ai-chat-controls_context_show-more-button {
|
|
931
|
+
display: block;
|
|
932
|
+
padding: 0;
|
|
933
|
+
border-width: 0;
|
|
934
|
+
letter-spacing: -0.1em;
|
|
935
|
+
text-align: center;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover {
|
|
939
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
940
|
+
color: var(--ck-ai-chat-button-hover-color);
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):hover .ck-button__icon {
|
|
944
|
+
fill: var(--ck-ai-chat-button-hover-color);
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active {
|
|
948
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
949
|
+
color: var(--ck-ai-chat-button-active-color);
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.ck.ck-button.ck-ai-chat-controls-button:not(.ck-disabled):active .ck-button__icon {
|
|
953
|
+
fill: var(--ck-ai-chat-button-active-color);
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled) {
|
|
957
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
958
|
+
color: var(--ck-ai-chat-button-active-color);
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
.ck.ck-button.ck-ai-chat-controls-button.ck-on:not(.ck-disabled):not(:hover):not(:active):not(.ck-disabled) .ck-button__icon {
|
|
962
|
+
color: var(--ck-ai-chat-button-active-color);
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
.ck.ck-button.ck-ai-chat-controls-button > .ck-icon {
|
|
966
|
+
--ck-icon-size: 16px;
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
.ck.ck-button.ck-ai-chat-controls-button .ck-dropdown__arrow {
|
|
970
|
+
display: none;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
/* svg {
|
|
974
|
+
margin-right: 0;
|
|
975
|
+
width: auto;
|
|
976
|
+
font-size: 1em;
|
|
977
|
+
} */
|
|
978
|
+
|
|
979
|
+
/*
|
|
980
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
981
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
982
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
983
|
+
*
|
|
984
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
985
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
986
|
+
*/
|
|
987
|
+
|
|
988
|
+
:root {
|
|
989
|
+
--ck-ai-chat-loader-icon-dot-color: hsl(216, 5%, 81%);
|
|
990
|
+
--ck-ai-chat-loader-icon-dot-active-color: hsl(0, 0%, 20%);
|
|
991
|
+
--ck-ai-loader-dot-pulse-dot-size: 6px;
|
|
992
|
+
--ck-ai-loader-dot-pulse-width: 40px;
|
|
993
|
+
--ck-ai-loader-dot-pulse-height: 20px;
|
|
994
|
+
--ck-ai-loader-dot-pulse-border-radius: 8px;
|
|
995
|
+
--ck-ai-loader-dot-pulse-animation-delay: 0.3s;
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
.ck-ai-chat-controls-loader {
|
|
999
|
+
display: flex;
|
|
1000
|
+
align-items: center;
|
|
1001
|
+
color: var(--ck-color-input-disabled-text);
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon {
|
|
1005
|
+
box-sizing: border-box;
|
|
1006
|
+
display: flex;
|
|
1007
|
+
align-items: center;
|
|
1008
|
+
justify-content: space-between;
|
|
1009
|
+
width: var(--ck-ai-loader-dot-pulse-width);
|
|
1010
|
+
height: var(--ck-ai-loader-dot-pulse-height);
|
|
1011
|
+
margin-inline-end: var(--ck-spacing-standard);
|
|
1012
|
+
padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
|
|
1013
|
+
border-radius: var(--ck-ai-loader-dot-pulse-border-radius);
|
|
1014
|
+
background-color: var(--ck-ai-chat-loader-icon-color);
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot {
|
|
1018
|
+
width: var(--ck-ai-loader-dot-pulse-dot-size);
|
|
1019
|
+
height: var(--ck-ai-loader-dot-pulse-dot-size);
|
|
1020
|
+
border-radius: 50%;
|
|
1021
|
+
background-color: var(--ck-ai-chat-loader-icon-dot-color);
|
|
1022
|
+
flex-shrink: 0;
|
|
1023
|
+
|
|
1024
|
+
animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-loader-animation-duration) infinite;
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(1) {
|
|
1028
|
+
animation-delay: 0s;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(2) {
|
|
1032
|
+
animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
|
|
1033
|
+
}
|
|
1034
|
+
|
|
1035
|
+
.ck-ai-chat-controls-loader .ck-ai-chat-controls-loader-icon-dot:nth-child(3) {
|
|
1036
|
+
animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
.ck.ck-button.ai-chat-controls-loader__cancel-button {
|
|
1040
|
+
min-height: 22px;
|
|
1041
|
+
padding: 0 var(--ck-spacing-medium) 0 var(--ck-spacing-small);
|
|
1042
|
+
border: var(--ck-ai-chat-border-width) solid var(--ck-ai-border-color-button);
|
|
1043
|
+
border-radius: var(--ck-border-radius);
|
|
1044
|
+
color: var(--ck-ai-chat-color-text);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
.ck.ck-button.ai-chat-controls-loader__cancel-button .ck.ck-icon.ck-button__icon {
|
|
1048
|
+
color: var(--ck-ai-chat-color-text);
|
|
1049
|
+
height: 14px;
|
|
1050
|
+
width: 14px;
|
|
1051
|
+
margin-right: 4px;
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
.ck.ck-button.ai-chat-controls-loader__cancel-button:hover {
|
|
1055
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
.ck-ai-chat-controls-loader-wrapper {
|
|
1059
|
+
display: flex;
|
|
1060
|
+
justify-content: space-between;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
@keyframes ck-ai-loader-dot-pulse {
|
|
1064
|
+
0%, 80%, 100% {
|
|
1065
|
+
background-color: var(--ck-ai-chat-loader-icon-dot-color);
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
40% {
|
|
1069
|
+
background-color: var(--ck-ai-chat-loader-icon-dot-active-color);
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
/*
|
|
1074
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
1075
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
1076
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
1077
|
+
*
|
|
1078
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1079
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1080
|
+
*/
|
|
1081
|
+
|
|
1082
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel {
|
|
1083
|
+
min-width: 157px;
|
|
1084
|
+
max-width: 250px;
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button {
|
|
1088
|
+
width: 100%;
|
|
1089
|
+
display: flex;
|
|
1090
|
+
padding-left: var(--ck-spacing-extra-large);
|
|
1091
|
+
padding-right: var(--ck-spacing-extra-large);
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:first-child {
|
|
1095
|
+
margin-top: var(--ck-spacing-tiny);
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:last-child {
|
|
1099
|
+
margin-bottom: var(--ck-spacing-tiny);
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button .ck-icon.ck-button__icon {
|
|
1103
|
+
--ck-icon-size: 16px;
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button .ck-button__label {
|
|
1107
|
+
margin: 0;
|
|
1108
|
+
line-height: var(--ck-line-height-base);
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button:hover {
|
|
1112
|
+
background-color: var(--ck-ai-button-secondary-hover-background-color);
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button > .ck-ai-chat-context-controls__balloon-button-source__arrow {
|
|
1116
|
+
width: var(--ck-dropdown-arrow-size);
|
|
1117
|
+
|
|
1118
|
+
transform: rotate(-90deg);
|
|
1119
|
+
|
|
1120
|
+
/* A space to accommodate the triangle. */
|
|
1121
|
+
margin-left: var(--ck-spacing-standard);
|
|
1122
|
+
|
|
1123
|
+
/* Nudge the arrow gently to the right because its center of gravity is to the left */
|
|
1124
|
+
margin-right: calc(-1 * var(--ck-spacing-small));
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__add-context-balloon-panel .ck-ai-chat-context-controls__balloon-button > span {
|
|
1128
|
+
flex-grow: 1;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form {
|
|
1132
|
+
width: var(--ck-ai-chat-context-controls-balloon-width);
|
|
1133
|
+
line-height: var(--ck-form-header-height);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section {
|
|
1137
|
+
display: flex;
|
|
1138
|
+
align-items: flex-start;
|
|
1139
|
+
padding: var(--ck-spacing-large);
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck-labeled-field-view {
|
|
1143
|
+
width: 100%;
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-input {
|
|
1147
|
+
width: 100%;
|
|
1148
|
+
font: normal normal normal var(--ck-font-size-base) / var(--ck-line-height-base) var(--ck-font-face);
|
|
1149
|
+
vertical-align: middle;
|
|
1150
|
+
line-height: var(--ck-line-height-base);
|
|
1151
|
+
}
|
|
1152
|
+
|
|
1153
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label {
|
|
1154
|
+
visibility: hidden;
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck.ck-button {
|
|
1158
|
+
height: auto;
|
|
1159
|
+
margin-left: var(--ck-spacing-medium);
|
|
1160
|
+
background-color: var(--ck-ai-background-color-action-button);
|
|
1161
|
+
color: var(--ck-ai-font-color-action-button);
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck.ck-button.ck-disabled {
|
|
1165
|
+
opacity: 0.5;
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__url-balloon-panel .ck-ai-chat-context-controls__url-form .ck-ai-chat-context-controls__url-input-section>.ck.ck-button.ck-disabled>.ck-button__icon {
|
|
1169
|
+
opacity: 1;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel {
|
|
1173
|
+
width: var(--ck-ai-chat-context-controls-balloon-width);
|
|
1174
|
+
height: 319px;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel:has(.ck-ai-skeleton:not(.ck-hidden)) {
|
|
1178
|
+
overflow: hidden;
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck.ck-search__query_with-icon {
|
|
1182
|
+
padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny) var(--ck-spacing-large);
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-skeleton {
|
|
1186
|
+
--ck-ai-skeleton-gap: var(--ck-spacing-small);
|
|
1187
|
+
|
|
1188
|
+
padding-top: var(--ck-spacing-standard);
|
|
1189
|
+
padding-bottom: var(--ck-spacing-standard);
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list {
|
|
1193
|
+
height: 233px;
|
|
1194
|
+
overflow-y: auto;
|
|
1195
|
+
overflow-x: hidden;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item {
|
|
1199
|
+
display: flex;
|
|
1200
|
+
align-items: center;
|
|
1201
|
+
padding: var(--ck-spacing-tiny) var(--ck-spacing-extra-large);
|
|
1202
|
+
border-radius: var(--ck-border-radius);
|
|
1203
|
+
|
|
1204
|
+
cursor: pointer;
|
|
1205
|
+
transition: background-color 0.2s;
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item:hover {
|
|
1209
|
+
background-color: var(--ck-ai-button-secondary-hover-background-color);
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context {
|
|
1213
|
+
color: hsla(0, 0%, 20%, 0.5);
|
|
1214
|
+
pointer-events: none;
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1217
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context * {
|
|
1218
|
+
color: inherit;
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item .ck-ai-chat-resources__item__icon {
|
|
1222
|
+
display: flex;
|
|
1223
|
+
align-items: center;
|
|
1224
|
+
justify-content: center;
|
|
1225
|
+
height: 1.14em;
|
|
1226
|
+
margin-right: 0.35em;
|
|
1227
|
+
flex-shrink: 0;
|
|
1228
|
+
}
|
|
1229
|
+
|
|
1230
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item .ck-ai-chat-resources__item__icon .ck-icon {
|
|
1231
|
+
height: 1.368em;
|
|
1232
|
+
fill: currentColor;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item.ck-ai-chat-resources__item--in-context .ck-ai-chat-resources__item__icon {
|
|
1236
|
+
color: hsla(0, 0%, 20%, 0.5);
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list .ck-ai-chat-resources__item .ck-ai-chat-resources__item-title {
|
|
1240
|
+
flex: 1;
|
|
1241
|
+
font-size: 1em;
|
|
1242
|
+
line-height: var(--ck-line-height-base);
|
|
1243
|
+
overflow: hidden;
|
|
1244
|
+
text-overflow: ellipsis;
|
|
1245
|
+
white-space: nowrap;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__source-balloon-panel .ck-ai-chat-resources__list.ck-hidden {
|
|
1249
|
+
display: none;
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__chip-tooltip {
|
|
1253
|
+
max-width: 180px;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
.ck.ck-balloon-panel.ck-ai-chat-context-controls__chip-tooltip .ck.ck-tooltip__text {
|
|
1257
|
+
white-space: normal;
|
|
1258
|
+
display: inline-block;
|
|
1259
|
+
padding: var(--ck-tooltip-text-padding) 0;
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
.ck.ck-ai-chat-controls {
|
|
1263
|
+
padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard);
|
|
1264
|
+
line-height: var(--ck-form-header-height);
|
|
1265
|
+
border-top: var(--ck-ai-chat-border-width) solid var(--ck-color-base-border);
|
|
1266
|
+
|
|
1267
|
+
/* When loader wrapper (second child) is visible, bottom padding should be larger to match the top one. */
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
.ck.ck-ai-chat-controls:has(>:first-child.ck-hidden) {
|
|
1271
|
+
padding-bottom: var(--ck-spacing-large);
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection {
|
|
1275
|
+
line-height: 0;
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne {
|
|
1279
|
+
bottom: calc(100% + 10px);
|
|
1280
|
+
top: auto;
|
|
1281
|
+
padding-top: .5em;
|
|
1282
|
+
width: 426px;
|
|
1283
|
+
max-width: max-content;
|
|
1284
|
+
max-height: 600px;
|
|
1285
|
+
overflow-y: scroll;
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::before,
|
|
1289
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::after {
|
|
1290
|
+
content: '';
|
|
1291
|
+
position: absolute;
|
|
1292
|
+
left: calc(2 * var(--ck-balloon-arrow-half-width));
|
|
1293
|
+
bottom: calc(-1 * var(--ck-balloon-arrow-height));
|
|
1294
|
+
width: 0;
|
|
1295
|
+
height: 0;
|
|
1296
|
+
border-style: solid;
|
|
1297
|
+
border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
|
|
1298
|
+
border-color: var(--ck-color-panel-border) transparent transparent;
|
|
1299
|
+
}
|
|
1300
|
+
|
|
1301
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::before {
|
|
1302
|
+
z-index: var(--ck-balloon-panel-arrow-z-index);
|
|
1303
|
+
margin-bottom: calc(-1 * var(--ck-balloon-border-width));
|
|
1304
|
+
filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
|
|
1305
|
+
}
|
|
1306
|
+
|
|
1307
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-dropdown__panel.ck-dropdown__panel_ne::after {
|
|
1308
|
+
z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
|
|
1309
|
+
margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button {
|
|
1313
|
+
border: 0;
|
|
1314
|
+
font-size: .9em;
|
|
1315
|
+
margin-inline-end: 0;
|
|
1316
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1317
|
+
padding-top: 0;
|
|
1318
|
+
padding-bottom: 0;
|
|
1319
|
+
min-height: auto;
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on .ck-dropdown__arrow {
|
|
1323
|
+
transform: rotate(180deg);
|
|
1324
|
+
}
|
|
1325
|
+
|
|
1326
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button .ck-button__label {
|
|
1327
|
+
width: auto;
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover,
|
|
1331
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on {
|
|
1332
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
1333
|
+
color: var(--ck-ai-background-color-action-button);
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button:hover .ck-dropdown__arrow, .ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-button.ck-dropdown__button.ck-on .ck-dropdown__arrow {
|
|
1337
|
+
color: var(--ck-ai-background-color-action-button);
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1340
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item:not(:last-child) {
|
|
1341
|
+
margin-bottom: var(--ck-spacing-medium-small);
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button {
|
|
1345
|
+
align-items: start;
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder {
|
|
1349
|
+
height: 1.2em;
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-list-item-button__check-holder > .ck-list-item-button__check-icon {
|
|
1353
|
+
padding-top: 2px;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label {
|
|
1357
|
+
line-height: 1.3;
|
|
1358
|
+
}
|
|
1359
|
+
|
|
1360
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-name {
|
|
1361
|
+
line-height: 1.3;
|
|
1362
|
+
font-weight: 500;
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1365
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-description {
|
|
1366
|
+
line-height: 1.3;
|
|
1367
|
+
padding-top: var(--ck-spacing-tiny);
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-description > span {
|
|
1371
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1372
|
+
line-height: 1;
|
|
1373
|
+
white-space: normal;
|
|
1374
|
+
}
|
|
1375
|
+
|
|
1376
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities {
|
|
1377
|
+
line-height: 1.3;
|
|
1378
|
+
--ck-icon-font-size: .5em;
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > span {
|
|
1382
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1383
|
+
}
|
|
1384
|
+
|
|
1385
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > span:nth-of-type(2n) {
|
|
1386
|
+
font-weight: bold;
|
|
1387
|
+
display: inline-block;
|
|
1388
|
+
width: 4ch;
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
.ck.ck-ai-chat-controls .ck-ai-chat-controls__model-selection .ck-list > .ck-list__item > .ck-button > .ck-button__label > .ck-ai-chat-controls__model-selection__item-capabilities > .ck-icon {
|
|
1392
|
+
margin-inline-end: var(--ck-spacing-standard);
|
|
1393
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1394
|
+
fill: var(--ck-ai-chat-color-icon);
|
|
1395
|
+
}
|
|
1396
|
+
/*
|
|
1397
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
1398
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
1399
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
1400
|
+
*
|
|
1401
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1402
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1403
|
+
*/
|
|
1404
|
+
/*
|
|
1405
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1406
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1407
|
+
*/
|
|
1408
|
+
/**
|
|
1409
|
+
* Implements rounded corner interface for .ck-rounded-corners class.
|
|
1410
|
+
*
|
|
1411
|
+
* @see $ck-border-radius
|
|
1412
|
+
*/
|
|
1413
|
+
:root {
|
|
1414
|
+
--ck-ai-chat-feed-item-color-text: hsla(0, 0%, 0%, 1);
|
|
1415
|
+
--ck-ai-chat-feed-item-color-background: hsla(0, 0%, 96%, 1);
|
|
1416
|
+
--ck-ai-chat-feed-item-color-background-secondary: hsla(0, 0%, 96%, 1);
|
|
1417
|
+
--ck-ai-chat-feed-item-color-actions-button-hover: hsla(263, 59%, 40%, 1);
|
|
1418
|
+
--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color: hsla(263, 59%, 40%, 1);
|
|
1419
|
+
--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background: hsl(262, 100%, 96%);
|
|
1420
|
+
--ck-ai-chat-feed-item-color-show-changes-toggle-on-color: hsla(263, 59%, 40%, 1);
|
|
1421
|
+
--ck-ai-chat-feed-item-color-show-changes-toggle-on-background: hsl(262, 100%, 96%);
|
|
1422
|
+
--ck-ai-chat-feed-item-color-show-changes-toggle-active-background: hsl(262, 100%, 96%);
|
|
1423
|
+
--ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
|
|
1424
|
+
--ck-ai-chat-feed-interaction-header-capabilities-color-text: hsla(0, 0%, 44%, 1);
|
|
1425
|
+
}
|
|
1426
|
+
.ck.ck-ai-chat__feed {
|
|
1427
|
+
flex: 1 1 auto;
|
|
1428
|
+
overflow-y: auto;
|
|
1429
|
+
display: flex;
|
|
1430
|
+
flex-direction: column;
|
|
1431
|
+
justify-content: flex-start;
|
|
1432
|
+
align-items: stretch;
|
|
1433
|
+
flex-wrap: nowrap;
|
|
1434
|
+
padding-bottom: var(--ck-spacing-extra-large);
|
|
1435
|
+
gap: var(--ck-spacing-large);
|
|
1436
|
+
position: relative;
|
|
1437
|
+
|
|
1438
|
+
/* This is needed to prevent the feed from overflowing when the skeleton is visible. */
|
|
1439
|
+
}
|
|
1440
|
+
.ck.ck-ai-chat__feed:has(.ck-ai-skeleton:not(.ck-hidden)) {
|
|
1441
|
+
overflow: hidden;
|
|
1442
|
+
}
|
|
1443
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items {
|
|
1444
|
+
display: flex;
|
|
1445
|
+
flex-direction: column;
|
|
1446
|
+
gap: var(--ck-spacing-extra-large) 0;
|
|
1447
|
+
}
|
|
1448
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items > .ck-ai-chat__feed__item:first-child {
|
|
1449
|
+
margin-top: var(--ck-spacing-extra-large);
|
|
1450
|
+
}
|
|
1451
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item {
|
|
1452
|
+
margin: 0 var(--ck-spacing-large);
|
|
1453
|
+
scroll-margin: var(--ck-spacing-large);
|
|
1454
|
+
|
|
1455
|
+
/* These controls show up only after the item is done */
|
|
1456
|
+
}
|
|
1457
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar,
|
|
1458
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions,
|
|
1459
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
|
|
1460
|
+
transition: opacity .4s, display .4s allow-discrete;
|
|
1461
|
+
}
|
|
1462
|
+
@starting-style {
|
|
1463
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-mini-toolbar, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-suggestion__actions, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
|
|
1464
|
+
opacity: 0;
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle {
|
|
1468
|
+
--ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
|
|
1469
|
+
--ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-background);
|
|
1470
|
+
--ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
|
|
1471
|
+
--ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
|
|
1472
|
+
--ck-color-focus-border: var(--ck-ai-chat-feed-item-color-show-changes-toggle-active-background);
|
|
1473
|
+
--ck-focus-ring: 1px solid var(--ck-color-focus-border);
|
|
1474
|
+
|
|
1475
|
+
padding: 0 var(--ck-spacing-small);
|
|
1476
|
+
min-height: 22px;
|
|
1477
|
+
font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
|
|
1478
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1479
|
+
}
|
|
1480
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:hover {
|
|
1481
|
+
color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-hover-color);
|
|
1482
|
+
}
|
|
1483
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:active {
|
|
1484
|
+
box-shadow: none;
|
|
1485
|
+
color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
|
|
1486
|
+
}
|
|
1487
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle.ck-on {
|
|
1488
|
+
color: var(--ck-ai-chat-feed-item-color-show-changes-toggle-on-color);
|
|
1489
|
+
}
|
|
1490
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle:focus {
|
|
1491
|
+
border: 1px solid transparent;
|
|
1492
|
+
}
|
|
1493
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-suggestion__header__show-changes-toggle > .ck-icon {
|
|
1494
|
+
width: 16px;
|
|
1495
|
+
height: 16px;
|
|
1496
|
+
margin-right: 0;
|
|
1497
|
+
margin-left: var(--ck-spacing-medium);
|
|
1498
|
+
}
|
|
1499
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-mini-toolbar,
|
|
1500
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-chat__feed__ai-suggestion__actions,
|
|
1501
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item:not(.ck-ai-chat__feed__item_done) .ck-ai-suggestion__header__show-changes-toggle {
|
|
1502
|
+
display: none;
|
|
1503
|
+
opacity: 0;
|
|
1504
|
+
}
|
|
1505
|
+
/*
|
|
1506
|
+
* Any item that contains text (AI replies, suggestions, user messages etc.)
|
|
1507
|
+
*/
|
|
1508
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item {
|
|
1509
|
+
word-break: normal;
|
|
1510
|
+
text-wrap: auto;
|
|
1511
|
+
}
|
|
1512
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item pre > code {
|
|
1513
|
+
white-space: pre-wrap;
|
|
1514
|
+
}
|
|
1515
|
+
/*
|
|
1516
|
+
* User message item with a query to the AI
|
|
1517
|
+
*/
|
|
1518
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message:has(.ck-ai-chat-context-chips-wrapper) {
|
|
1519
|
+
max-width: 100%;
|
|
1520
|
+
}
|
|
1521
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message .ck-ai-chat__feed__message-content {
|
|
1522
|
+
max-width: 80%;
|
|
1523
|
+
margin-inline-end: 0;
|
|
1524
|
+
margin-inline-start: auto;
|
|
1525
|
+
text-align: end;
|
|
1526
|
+
}
|
|
1527
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__user-message p {
|
|
1528
|
+
display: inline-block;
|
|
1529
|
+
background-color: var(--ck-ai-chat-feed-item-color-background-secondary);
|
|
1530
|
+
padding: 8px;
|
|
1531
|
+
border-radius: var(--ck-ai-border-radius);
|
|
1532
|
+
}
|
|
1533
|
+
/*
|
|
1534
|
+
* Replies from the AI that aren't suggestions.
|
|
1535
|
+
*
|
|
1536
|
+
* Also, occasionally used for static notifications.
|
|
1537
|
+
*/
|
|
1538
|
+
/* &.ck-ai-chat__feed__ai-reply {} */
|
|
1539
|
+
/*
|
|
1540
|
+
* This is the kind of reply from the AI where content changes are suggested.
|
|
1541
|
+
*/
|
|
1542
|
+
/*
|
|
1543
|
+
* Actions for the suggestion.
|
|
1544
|
+
*/
|
|
1545
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions {
|
|
1546
|
+
--ck-color-split-button-hover-background: var(--ck-ai-background-color-action-button);
|
|
1547
|
+
|
|
1548
|
+
margin-top: var(--ck-spacing-medium);
|
|
1549
|
+
width: fit-content;
|
|
1550
|
+
}
|
|
1551
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button {
|
|
1552
|
+
--ck-color-button-default-background: var(--ck-ai-background-color-action-button);
|
|
1553
|
+
--ck-color-button-default-hover-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
|
|
1554
|
+
--ck-color-button-on-hover-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
|
|
1555
|
+
--ck-color-button-default-active-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
|
|
1556
|
+
--ck-color-button-on-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
|
|
1557
|
+
--ck-color-button-on-active-background: var(--ck-ai-chat-feed-item-color-actions-button-hover);
|
|
1558
|
+
--ck-color-focus-border: var(--ck-color-base-background);
|
|
1559
|
+
--ck-focus-ring: 1px solid var(--ck-color-focus-border);
|
|
1560
|
+
|
|
1561
|
+
color: var(--ck-color-base-background);
|
|
1562
|
+
}
|
|
1563
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action {
|
|
1564
|
+
border-radius: 0;
|
|
1565
|
+
}
|
|
1566
|
+
.ck-rounded-corners .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action,
|
|
1567
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__action.ck-rounded-corners {
|
|
1568
|
+
border-radius: var(--ck-border-radius);
|
|
1569
|
+
border-top-right-radius: 0;
|
|
1570
|
+
border-bottom-right-radius: 0;
|
|
1571
|
+
}
|
|
1572
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__arrow {
|
|
1573
|
+
width: 1.9em;
|
|
1574
|
+
color: var(--ck-color-base-background);
|
|
1575
|
+
|
|
1576
|
+
/* Separator always visible */
|
|
1577
|
+
}
|
|
1578
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-splitbutton__arrow:after {
|
|
1579
|
+
content: '';
|
|
1580
|
+
position: absolute;
|
|
1581
|
+
width: 1px;
|
|
1582
|
+
height: 100%;
|
|
1583
|
+
left: -1px;
|
|
1584
|
+
background: var(--ck-color-base-background);
|
|
1585
|
+
}
|
|
1586
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck-ai-chat__feed__ai-suggestion .ck-ai-chat__feed__ai-suggestion__actions > .ck-button.ck-disabled {
|
|
1587
|
+
background: hsl(263, 59%, 52%, 0.5);
|
|
1588
|
+
}
|
|
1589
|
+
/*
|
|
1590
|
+
* Interaction header showing capabilities used for the entire interaction.
|
|
1591
|
+
*/
|
|
1592
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities {
|
|
1593
|
+
display: flex;
|
|
1594
|
+
align-items: center;
|
|
1595
|
+
gap: 4px;
|
|
1596
|
+
color: var(--ck-ai-chat-feed-interaction-header-capabilities-color-text);
|
|
1597
|
+
}
|
|
1598
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities svg {
|
|
1599
|
+
border-radius: 50%;
|
|
1600
|
+
flex-shrink: 0;
|
|
1601
|
+
background-color: var(--ck-tabs-panels-container-background);
|
|
1602
|
+
}
|
|
1603
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities svg:not(:first-child) {
|
|
1604
|
+
margin-left: calc(var(--ck-icon-size) * -0.75)
|
|
1605
|
+
}
|
|
1606
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__interaction-header .ck-ai-chat__feed__interaction-header__capabilities__text {
|
|
1607
|
+
color: var(--ck-ai-chat-feed-interaction-header-capabilities-color-text);
|
|
1608
|
+
font-weight: 500;
|
|
1609
|
+
}
|
|
1610
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:first-child {
|
|
1611
|
+
/* This is needed to clear the default top margin from first HTML element from reply. */
|
|
1612
|
+
margin-top: 0;
|
|
1613
|
+
}
|
|
1614
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__ai-reply-container > *:last-child {
|
|
1615
|
+
/* This is needed to clear the default bottom margin from last HTML element from reply. */
|
|
1616
|
+
margin-bottom: 0;
|
|
1617
|
+
}
|
|
1618
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__ai-suggestion .ck-ai-suggestion__body *,
|
|
1619
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item.ck.ck-ai-chat__feed__text-item
|
|
1620
|
+
*:not(.ck-ai-chat__feed__context-chips):not(.ck-ai-chat__feed__context-chips *):not(.ck-ai-web-source .ck-button__label) {
|
|
1621
|
+
white-space: normal;
|
|
1622
|
+
line-height: 1.4em;
|
|
1623
|
+
}
|
|
1624
|
+
/* TODO: This CSS class is added twice. */
|
|
1625
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-chat__feed__context-chips {
|
|
1626
|
+
display: flex;
|
|
1627
|
+
justify-content: flex-end;
|
|
1628
|
+
margin-bottom: var(--ck-spacing-medium-small);
|
|
1629
|
+
}
|
|
1630
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
1631
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources {
|
|
1632
|
+
display: grid;
|
|
1633
|
+
grid-template-columns: repeat(3, 1fr);
|
|
1634
|
+
gap: var(--ck-spacing-standard);
|
|
1635
|
+
|
|
1636
|
+
padding: var(--ck-spacing-medium-small) var(--ck-spacing-large) var(--ck-spacing-extra-large) var(--ck-spacing-large);
|
|
1637
|
+
}
|
|
1638
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header {
|
|
1639
|
+
grid-column-start: span 3;
|
|
1640
|
+
|
|
1641
|
+
font-size: 12px;
|
|
1642
|
+
font-weight: 500;
|
|
1643
|
+
line-height: 1.4em;
|
|
1644
|
+
}
|
|
1645
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > .ck-icon {
|
|
1646
|
+
vertical-align: text-bottom;
|
|
1647
|
+
width: 14px;
|
|
1648
|
+
height: 14px;
|
|
1649
|
+
margin-right: var(--ck-spacing-medium-small);
|
|
1650
|
+
color: hsl(0, 0%, 44%);
|
|
1651
|
+
}
|
|
1652
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-sources__header > span {
|
|
1653
|
+
color: hsl(0, 0%, 44%);
|
|
1654
|
+
}
|
|
1655
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source {
|
|
1656
|
+
padding: var(--ck-spacing-medium) var(--ck-spacing-large);
|
|
1657
|
+
border: 0;
|
|
1658
|
+
border-radius: 50px;
|
|
1659
|
+
background-color: var(--ck-ai-chat-feed-item-color-background);
|
|
1660
|
+
}
|
|
1661
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:focus, .ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source:active {
|
|
1662
|
+
box-shadow: none;
|
|
1663
|
+
}
|
|
1664
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__icon {
|
|
1665
|
+
margin-right: var(--ck-spacing-medium);
|
|
1666
|
+
color: var(--ck-ai-button-primary-background-color);
|
|
1667
|
+
width: 16px;
|
|
1668
|
+
height: 16px;
|
|
1669
|
+
}
|
|
1670
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-button__label {
|
|
1671
|
+
/* display: inline-block; */
|
|
1672
|
+
white-space: nowrap;
|
|
1673
|
+
overflow: hidden;
|
|
1674
|
+
text-overflow: ellipsis;
|
|
1675
|
+
max-width: 80px;
|
|
1676
|
+
font-size: 10px;
|
|
1677
|
+
font-weight: 700;
|
|
1678
|
+
line-height: 1.4em;
|
|
1679
|
+
}
|
|
1680
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item .ck-ai-web-sources > .ck-ai-web-source .ck-ai-web-source__title {
|
|
1681
|
+
display: flex;
|
|
1682
|
+
align-items: center;
|
|
1683
|
+
gap: var(--ck-spacing-small);
|
|
1684
|
+
}
|
|
1685
|
+
/* Remove padding if it's directly inside the reply container as the padding is already set. */
|
|
1686
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__item > .ck-ai-web-sources {
|
|
1687
|
+
padding: var(--ck-spacing-extra-large) 0 var(--ck-spacing-medium) 0;
|
|
1688
|
+
}
|
|
1689
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__loader {
|
|
1690
|
+
display: flex;
|
|
1691
|
+
align-items: flex-start;
|
|
1692
|
+
}
|
|
1693
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-spinner-container.ck-ai-spinner {
|
|
1694
|
+
/* Designs have 16px but it needs to be aligned with chat feed items */
|
|
1695
|
+
margin: 0 var(--ck-spacing-large);
|
|
1696
|
+
}
|
|
1697
|
+
.ck.ck-ai-chat__feed .ck.ck-ai-chat__loader .ck.ck-ai-chat__loader-text {
|
|
1698
|
+
font-weight: 500;
|
|
1699
|
+
line-height: 1.462em;
|
|
1700
|
+
white-space: normal;
|
|
1701
|
+
}
|
|
1702
|
+
/**
|
|
1703
|
+
* This is the balloon panel for the suggestion actions.
|
|
1704
|
+
*/
|
|
1705
|
+
.ck-ai-chat__feed__ai-suggestion__actions__balloon .ck-button.ck-list-item-button {
|
|
1706
|
+
padding-top: 0;
|
|
1707
|
+
padding-bottom: 0;
|
|
1708
|
+
}
|
|
1709
|
+
@keyframes ck-html-streamer-fade-in {
|
|
1710
|
+
from {
|
|
1711
|
+
opacity: 0;
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
to {
|
|
1715
|
+
opacity: 1;
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
/*
|
|
1719
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
1720
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
1721
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
1722
|
+
*
|
|
1723
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1724
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1725
|
+
*/
|
|
1726
|
+
/*
|
|
1727
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1728
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1729
|
+
*/
|
|
1730
|
+
/**
|
|
1731
|
+
* Implements rounded corner interface for .ck-rounded-corners class.
|
|
1732
|
+
*
|
|
1733
|
+
* @see $ck-border-radius
|
|
1734
|
+
*/
|
|
1735
|
+
:root {
|
|
1736
|
+
--ck-ai-chat-suggestion-container-header-font-size: .9em;
|
|
1737
|
+
--ck-ai-background-color-action-button-semi-transparent: hsla(263, 59%, 52%, 0.5);
|
|
1738
|
+
}
|
|
1739
|
+
/*
|
|
1740
|
+
* Container for the suggestion where the content returned by the AI is displayed.
|
|
1741
|
+
*
|
|
1742
|
+
* It supports the regular output and "Show preview" mode.
|
|
1743
|
+
*
|
|
1744
|
+
* It works in the feed (sidebar) and in the dialog/balloon.
|
|
1745
|
+
*/
|
|
1746
|
+
.ck.ck-ai-suggestion__container {
|
|
1747
|
+
border-radius: 0;
|
|
1748
|
+
|
|
1749
|
+
--ck-border-radius: 4px;
|
|
1750
|
+
|
|
1751
|
+
border: 1px solid var(--ck-color-base-border);
|
|
1752
|
+
position: relative;
|
|
1753
|
+
}
|
|
1754
|
+
.ck-rounded-corners .ck.ck-ai-suggestion__container,
|
|
1755
|
+
.ck.ck-ai-suggestion__container.ck-rounded-corners {
|
|
1756
|
+
border-radius: var(--ck-border-radius);
|
|
1757
|
+
}
|
|
1758
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header {
|
|
1759
|
+
height: 3.23em; /* 42px */
|
|
1760
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
1761
|
+
display: flex;
|
|
1762
|
+
flex-direction: row;
|
|
1763
|
+
justify-content: space-between;
|
|
1764
|
+
align-items: center;
|
|
1765
|
+
padding: 0 var(--ck-spacing-large);
|
|
1766
|
+
}
|
|
1767
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header > span {
|
|
1768
|
+
font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
|
|
1769
|
+
font-weight: bold;
|
|
1770
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1771
|
+
flex-grow: 1;
|
|
1772
|
+
}
|
|
1773
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-icon {
|
|
1774
|
+
width: 14px;
|
|
1775
|
+
height: 14px;
|
|
1776
|
+
margin-right: var(--ck-spacing-medium);
|
|
1777
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1778
|
+
}
|
|
1779
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton {
|
|
1780
|
+
--ck-switch-button-toggle-width: 2.307em;
|
|
1781
|
+
--ck-switch-button-toggle-inner-size: 1em;
|
|
1782
|
+
--ck-switch-button-translation: calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px );
|
|
1783
|
+
--ck-color-switch-button-off-background: var(--ck-ai-chat-color-icon);
|
|
1784
|
+
}
|
|
1785
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__label {
|
|
1786
|
+
font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
|
|
1787
|
+
margin-right: var(--ck-spacing-standard);
|
|
1788
|
+
}
|
|
1789
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle {
|
|
1790
|
+
border-radius: var(--ck-switch-button-toggle-inner-size);
|
|
1791
|
+
}
|
|
1792
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__header > .ck-switchbutton .ck-button__toggle .ck-button__toggle__inner {
|
|
1793
|
+
border-radius: 100%;
|
|
1794
|
+
}
|
|
1795
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body {
|
|
1796
|
+
display: flex;
|
|
1797
|
+
flex-direction: column;
|
|
1798
|
+
}
|
|
1799
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-parts {
|
|
1800
|
+
display: flex;
|
|
1801
|
+
flex-direction: column;
|
|
1802
|
+
}
|
|
1803
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part {
|
|
1804
|
+
position: relative;
|
|
1805
|
+
padding-bottom: var(--ck-spacing-large);
|
|
1806
|
+
}
|
|
1807
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title {
|
|
1808
|
+
display: flex;
|
|
1809
|
+
justify-content: space-between;
|
|
1810
|
+
align-items: center;
|
|
1811
|
+
color: var(--ck-ai-background-color-action-button);
|
|
1812
|
+
height: 2.308em;
|
|
1813
|
+
}
|
|
1814
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-ai-suggestion__body__content-part__icon-title {
|
|
1815
|
+
position: absolute;
|
|
1816
|
+
left: calc(-1.8 * var(--ck-spacing-large));
|
|
1817
|
+
background: var(--ck-color-base-background);
|
|
1818
|
+
box-shadow: 0 0 5px 6px var(--ck-color-base-background);
|
|
1819
|
+
clip-path: inset(-6px 0 -6px 0);
|
|
1820
|
+
border-radius: 100%;
|
|
1821
|
+
}
|
|
1822
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-ai-suggestion__body__content-part__icon-accepted {
|
|
1823
|
+
color: var(--ck-color-base-action);
|
|
1824
|
+
}
|
|
1825
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-ai-suggestion__body__content-part__icon-rejected {
|
|
1826
|
+
color: var(--ck-color-base-error);
|
|
1827
|
+
}
|
|
1828
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-icon,
|
|
1829
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title > .ck-toolbar .ck-icon {
|
|
1830
|
+
--ck-icon-size: 1.477em;
|
|
1831
|
+
}
|
|
1832
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar {
|
|
1833
|
+
border: 0;
|
|
1834
|
+
}
|
|
1835
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-button {
|
|
1836
|
+
margin: 0;
|
|
1837
|
+
opacity: .6;
|
|
1838
|
+
}
|
|
1839
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part .ck-ai-suggestion__body__content-part__content :last-child {
|
|
1840
|
+
padding-bottom: 0;
|
|
1841
|
+
margin-bottom: var(--ck-spacing-medium);
|
|
1842
|
+
}
|
|
1843
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {
|
|
1844
|
+
visibility: visible;
|
|
1845
|
+
opacity: 1;
|
|
1846
|
+
}
|
|
1847
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part:not(:last-child)::after {
|
|
1848
|
+
content: '...';
|
|
1849
|
+
width: 100%;
|
|
1850
|
+
text-align: center;
|
|
1851
|
+
display: block;
|
|
1852
|
+
clear: both;
|
|
1853
|
+
}
|
|
1854
|
+
/* TODO: This is only a temporary implementation for preview demo purposes. Make it nice. */
|
|
1855
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:hover::before {
|
|
1856
|
+
content: '';
|
|
1857
|
+
position: absolute;
|
|
1858
|
+
left: calc((-1 * var(--ck-spacing-large)) - 1px);
|
|
1859
|
+
top: 5px;
|
|
1860
|
+
height: 100%;
|
|
1861
|
+
border-left: 2px solid hsl( 262, 51%, 80% );
|
|
1862
|
+
}
|
|
1863
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:last-child::before {
|
|
1864
|
+
height: calc(100% - 10px);
|
|
1865
|
+
}
|
|
1866
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_active:last-child:first-child::before {
|
|
1867
|
+
display: none;
|
|
1868
|
+
}
|
|
1869
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted .ck-ai-suggestion__body__content-part__content, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected .ck-ai-suggestion__body__content-part__content {
|
|
1870
|
+
opacity: 0.5;
|
|
1871
|
+
}
|
|
1872
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted .ck-ai-suggestion__body__content-part__title
|
|
1873
|
+
:not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *), .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected .ck-ai-suggestion__body__content-part__title
|
|
1874
|
+
:not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *) {
|
|
1875
|
+
opacity: 0.5;
|
|
1876
|
+
}
|
|
1877
|
+
/* stylelint-disable no-descending-specificity */
|
|
1878
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted .ck-ai-suggestion__body__content-part__icon-title, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected .ck-ai-suggestion__body__content-part__icon-title {
|
|
1879
|
+
/* Icon can not be transparent because the border would be visible, it has to be controlled by the color. */
|
|
1880
|
+
color: var(--ck-ai-background-color-action-button-semi-transparent);
|
|
1881
|
+
}
|
|
1882
|
+
/* stylelint-enable no-descending-specificity */
|
|
1883
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_accepted::after, .ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck-ai-suggestion__body__content-part_rejected::after {
|
|
1884
|
+
opacity: 0.5;
|
|
1885
|
+
}
|
|
1886
|
+
/* The warning is displayed when some parts of the suggestion are empty. */
|
|
1887
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body .ck.ck-ai-chat__feed__item.ck-ai-chat-error_warning {
|
|
1888
|
+
margin-left: 0;
|
|
1889
|
+
margin-right: 0;
|
|
1890
|
+
margin-bottom: var(--ck-spacing-large);
|
|
1891
|
+
}
|
|
1892
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__body,
|
|
1893
|
+
.ck.ck-ai-suggestion__container .ck-ai-suggestion__changes {
|
|
1894
|
+
padding: var(--ck-spacing-large);
|
|
1895
|
+
padding-bottom: 0px;
|
|
1896
|
+
}
|
|
1897
|
+
/*
|
|
1898
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
1899
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
1900
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
1901
|
+
*
|
|
1902
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1903
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1904
|
+
*/
|
|
1905
|
+
.ck.ck-ai-mini-toolbar {
|
|
1906
|
+
--ck-color-button-action-background: hsl(263.2, 59.2%, 52%);
|
|
1907
|
+
--ck-color-button-default-hover-background: hsl(262.1, 100%, 96.3%);
|
|
1908
|
+
--ck-color-button-default-active-background: hsl(262.1, 100%, 96.3%);
|
|
1909
|
+
--ck-color-button-on-background: hsl(262.1, 100%, 96.3%);
|
|
1910
|
+
--ck-color-button-on-hover-background: hsl(262.1, 100%, 96.3%);
|
|
1911
|
+
--ck-color-button-on-active-background: hsl(262.1, 100%, 96.3%);
|
|
1912
|
+
--ck-color-button-on-disabled-background: hsl(262.1, 100%, 96.3%);
|
|
1913
|
+
--ck-color-button-on-color: hsl(263.2, 59.2%, 52%);
|
|
1914
|
+
--ck-color-button-action-hover-background: hsl(262.6, 58.9%, 49.6%);
|
|
1915
|
+
--ck-color-button-action-active-background: hsl(262.6, 58.9%, 49.6%);
|
|
1916
|
+
--ck-color-button-action-disabled-background: hsl(263.8, 59.3%, 75.9%);
|
|
1917
|
+
|
|
1918
|
+
position: absolute;
|
|
1919
|
+
right: var(--ck-spacing-large);
|
|
1920
|
+
bottom: 0;
|
|
1921
|
+
transform: translateY(50%);
|
|
1922
|
+
}
|
|
1923
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button {
|
|
1924
|
+
font-size: .9em;
|
|
1925
|
+
font-family: var(--ck-ai-chat-font-family);
|
|
1926
|
+
color: var(--ck-ai-chat-color-icon);
|
|
1927
|
+
}
|
|
1928
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-on {
|
|
1929
|
+
color: var(--ck-ai-background-color-action-button);
|
|
1930
|
+
}
|
|
1931
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-button_with-text {
|
|
1932
|
+
min-height: 2.1em;
|
|
1933
|
+
box-sizing: border-box;
|
|
1934
|
+
flex-direction: row-reverse;
|
|
1935
|
+
padding-right: 0.3em;
|
|
1936
|
+
padding-left: 0.3em;
|
|
1937
|
+
}
|
|
1938
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-button_with-text span {
|
|
1939
|
+
line-height: 1.4em;
|
|
1940
|
+
}
|
|
1941
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-button_with-text svg {
|
|
1942
|
+
margin-left: var(--ck-spacing-medium);
|
|
1943
|
+
margin-right: 0;
|
|
1944
|
+
--ck-icon-size: 16px
|
|
1945
|
+
}
|
|
1946
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-ai-mini-toolbar-copy-button .ck-ai-mini-toolbar-copy-button__check-mark {
|
|
1947
|
+
position: absolute;
|
|
1948
|
+
top: 50%;
|
|
1949
|
+
right: 50%;
|
|
1950
|
+
transform: translate(50%, -50%);
|
|
1951
|
+
color: var(--ck-color-base-action);
|
|
1952
|
+
display: none;
|
|
1953
|
+
}
|
|
1954
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-ai-mini-toolbar-copy-button.ck-ai-mini-toolbar-copy-button_copied .ck-button__icon {
|
|
1955
|
+
display: none;
|
|
1956
|
+
}
|
|
1957
|
+
.ck.ck-ai-mini-toolbar .ck.ck-button.ck-ai-mini-toolbar-copy-button.ck-ai-mini-toolbar-copy-button_copied .ck-ai-mini-toolbar-copy-button__check-mark {
|
|
1958
|
+
display: block;
|
|
1959
|
+
animation-duration: 1s;
|
|
1960
|
+
animation-name: ck-ai-mini-toolbar-copy-animation;
|
|
1961
|
+
animation-iteration-count: 1;
|
|
1962
|
+
animation-timing-function: ease-out;
|
|
1963
|
+
}
|
|
1964
|
+
@keyframes ck-ai-mini-toolbar-copy-animation {
|
|
1965
|
+
0% {
|
|
1966
|
+
clip-path: inset(0 100% 0 0);
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
50% {
|
|
1970
|
+
clip-path: inset(0 0 0 0);
|
|
1971
|
+
}
|
|
1972
|
+
|
|
1973
|
+
100% {
|
|
1974
|
+
clip-path: inset(0 0 0 0);
|
|
1975
|
+
}
|
|
1976
|
+
}
|
|
1977
|
+
/*
|
|
1978
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
1979
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
1980
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
1981
|
+
*
|
|
1982
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
1983
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
1984
|
+
*/
|
|
1985
|
+
.ck-ai-header {
|
|
1986
|
+
/* Custom values unlike the rest of editor UI. */
|
|
1987
|
+
--ck-ui-component-min-height: 1.7em;
|
|
1988
|
+
--ck-ui-component-min-width: 1.7em;
|
|
1989
|
+
|
|
1990
|
+
/* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
|
|
1991
|
+
--ck-form-header-height: 3em;
|
|
1992
|
+
--ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);
|
|
1993
|
+
}
|
|
1994
|
+
.ck-ai-header > .ck-button {
|
|
1995
|
+
margin-inline-start: var(--ck-spacing-standard);
|
|
1996
|
+
}
|
|
1997
|
+
.ck-ai-header > .ck-button > .ck-button__icon {
|
|
1998
|
+
/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
|
|
1999
|
+
--ck-icon-font-size: .666em;
|
|
2000
|
+
|
|
2001
|
+
color: var(--ck-ai-chat-color-icon);
|
|
2002
|
+
}
|
|
2003
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
|
|
2004
|
+
/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
|
|
2005
|
+
font-size: 11.7px;
|
|
2006
|
+
min-height: unset;
|
|
2007
|
+
border: 1px solid var(--ck-ai-border-color-button);
|
|
2008
|
+
border-radius: var(--ck-border-radius);
|
|
2009
|
+
gap: var(--ck-spacing-small);
|
|
2010
|
+
color: var(--ck-ai-chat-color-text);
|
|
2011
|
+
}
|
|
2012
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
|
|
2013
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
2014
|
+
}
|
|
2015
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__label {
|
|
2016
|
+
/* Custom value unlike the rest of editor UI. */
|
|
2017
|
+
line-height: 1.4em;
|
|
2018
|
+
}
|
|
2019
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__icon {
|
|
2020
|
+
/* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
|
|
2021
|
+
--ck-icon-font-size: .632em;
|
|
2022
|
+
|
|
2023
|
+
margin-inline-end: 0;
|
|
2024
|
+
color: var(--ck-ai-chat-color-text);
|
|
2025
|
+
}
|
|
2026
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
|
|
2027
|
+
position: relative;
|
|
2028
|
+
top: 1px;
|
|
2029
|
+
}
|
|
2030
|
+
.ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back {
|
|
2031
|
+
margin-inline-start: 0;
|
|
2032
|
+
margin-inline-end: var(--ck-spacing-small);
|
|
2033
|
+
}
|
|
2034
|
+
.ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
|
|
2035
|
+
/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
|
|
2036
|
+
--ck-icon-font-size: 13px;
|
|
2037
|
+
|
|
2038
|
+
color: var(--ck-form-header-small-icon-color);
|
|
2039
|
+
}
|
|
2040
|
+
.ck-ai-header.ck-ai-header_small .ck-form__header__label {
|
|
2041
|
+
--ck-font-size-base: 13px;
|
|
2042
|
+
--ck-font-face: var(--ck-ai-chat-font-family);
|
|
2043
|
+
|
|
2044
|
+
font-weight: 500;
|
|
2045
|
+
}
|
|
2046
|
+
.ck-ai-header .ck-form__header__label:not(:last-child) {
|
|
2047
|
+
margin-inline-end: var(--ck-spacing-small);
|
|
2048
|
+
}
|
|
2049
|
+
/*
|
|
2050
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2051
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2052
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2053
|
+
*
|
|
2054
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2055
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2056
|
+
*/
|
|
2057
|
+
:root {
|
|
2058
|
+
--ck-ai-chat-color-background-error: hsla(15, 100%, 97%, 1);
|
|
2059
|
+
--ck-ai-chat-color-background-warning: hsla(36, 100%, 65.10%, 0.10);
|
|
2060
|
+
|
|
2061
|
+
--ck-ai-chat-color-border-error: hsla(14, 100%, 68%, 1);
|
|
2062
|
+
--ck-ai-chat-color-border-warning: hsla(36, 100%, 65%, 1);
|
|
2063
|
+
}
|
|
2064
|
+
/* TODO: rename the class to make it more generic and function as a modifier. */
|
|
2065
|
+
.ck.ck-ai-chat-error {
|
|
2066
|
+
display: flex;
|
|
2067
|
+
align-items: flex-start;
|
|
2068
|
+
justify-content: space-between;
|
|
2069
|
+
gap: var(--ck-spacing-medium);
|
|
2070
|
+
width: fit-content;
|
|
2071
|
+
|
|
2072
|
+
background-color: var(--ck-ai-chat-color-background-error);
|
|
2073
|
+
border: 1px solid var(--ck-ai-chat-color-border-error);
|
|
2074
|
+
padding: var(--ck-spacing-standard);
|
|
2075
|
+
border-radius: var(--ck-ai-border-radius);
|
|
2076
|
+
}
|
|
2077
|
+
.ck.ck-ai-chat-error.ck-ai-chat-error_warning {
|
|
2078
|
+
background-color: var(--ck-ai-chat-color-background-warning);
|
|
2079
|
+
border-color: var(--ck-ai-chat-color-border-warning);
|
|
2080
|
+
}
|
|
2081
|
+
.ck.ck-ai-chat-error > p {
|
|
2082
|
+
flex: 1;
|
|
2083
|
+
max-width: calc(100% - (16px + var(--ck-spacing-medium)));
|
|
2084
|
+
white-space: normal;
|
|
2085
|
+
color: var(--ck-color-base-text);
|
|
2086
|
+
line-height: var(--ck-line-height-base);
|
|
2087
|
+
}
|
|
2088
|
+
.ck.ck-ai-chat-error > .ck-button {
|
|
2089
|
+
--ck-icon-font-size: 0.666em;
|
|
2090
|
+
}
|
|
2091
|
+
.ck.ck-ai-chat-error > .ck-button.ck-ai-chat-error__dismiss-button {
|
|
2092
|
+
--ck-icon-font-size: 0.666em;
|
|
2093
|
+
--ck-ui-component-min-height: 16px;
|
|
2094
|
+
|
|
2095
|
+
padding: 0;
|
|
2096
|
+
flex-shrink: 0;
|
|
2097
|
+
}
|
|
2098
|
+
.ck.ck-ai-chat-error.ck-ai-chat-error_full-width > p {
|
|
2099
|
+
max-width: 100%;
|
|
2100
|
+
}
|
|
2101
|
+
/*
|
|
2102
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2103
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2104
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2105
|
+
*
|
|
2106
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2107
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2108
|
+
*/
|
|
2109
|
+
:root {
|
|
2110
|
+
--ai-skeleton-z-index: calc( var(--ck-z-default) + 1 );
|
|
2111
|
+
--ck-ai-skeleton-item-background: linear-gradient(90deg, hsl(0, 0.00%, 98.00%) 0%, hsl(0, 0.00%, 94.10%) 50%, hsl(0, 0.00%, 98.00%) 100%);
|
|
2112
|
+
--ck-ai-skeleton-animation-duration: 1s;
|
|
2113
|
+
--ck-ai-skeleton-gap: var(--ck-spacing-extra-large);
|
|
2114
|
+
}
|
|
2115
|
+
.ck.ck-ai-skeleton {
|
|
2116
|
+
position: absolute;
|
|
2117
|
+
inset: 0;
|
|
2118
|
+
z-index: var(--ai-skeleton-z-index);
|
|
2119
|
+
display: flex;
|
|
2120
|
+
flex-direction: column;
|
|
2121
|
+
align-items: flex-end;
|
|
2122
|
+
gap: var(--ck-ai-skeleton-gap) 0;
|
|
2123
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-large);
|
|
2124
|
+
width: 100%;
|
|
2125
|
+
height: 100%;
|
|
2126
|
+
background-color: var(--ck-color-base-background);
|
|
2127
|
+
opacity: 1;
|
|
2128
|
+
transition: opacity .4s, display .4s allow-discrete;
|
|
2129
|
+
transition-delay: 350ms;
|
|
2130
|
+
}
|
|
2131
|
+
.ck.ck-ai-skeleton.ck-hidden {
|
|
2132
|
+
transition-delay: 0ms;
|
|
2133
|
+
opacity: 0;
|
|
2134
|
+
}
|
|
2135
|
+
@starting-style {
|
|
2136
|
+
.ck.ck-ai-skeleton {
|
|
2137
|
+
opacity: 0;
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2140
|
+
.ck.ck-ai-skeleton > .ck.ck-ai-skeleton__item {
|
|
2141
|
+
background: var(--ck-ai-skeleton-item-background);
|
|
2142
|
+
background-size: 200% 100%;
|
|
2143
|
+
animation: var(--ck-ai-skeleton-animation-duration) ck-ai-skeleton-shine linear infinite;
|
|
2144
|
+
width: 100%;
|
|
2145
|
+
}
|
|
2146
|
+
@keyframes ck-ai-skeleton-shine {
|
|
2147
|
+
to {
|
|
2148
|
+
background-position-x: -200%;
|
|
2149
|
+
}
|
|
2150
|
+
}
|
|
2151
|
+
/*
|
|
2152
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2153
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2154
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2155
|
+
*
|
|
2156
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2157
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2158
|
+
*/
|
|
2159
|
+
:root {
|
|
2160
|
+
--ck-ai-spinner-size: var(--ck-toolbar-spinner-size);
|
|
2161
|
+
--ck-ai-spinner-background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 58%));
|
|
2162
|
+
--ck-ai-spinner-mask: radial-gradient(farthest-side, transparent 66%, hsl(0, 0%, 0%) 61%);
|
|
2163
|
+
--ck-ai-spinner-animation-duration: 1s;
|
|
2164
|
+
}
|
|
2165
|
+
.ck.ck-spinner-container.ck-ai-spinner {
|
|
2166
|
+
display: inline-block;
|
|
2167
|
+
width: var(--ck-ai-spinner-size);
|
|
2168
|
+
height: var(--ck-ai-spinner-size);
|
|
2169
|
+
margin: 0;
|
|
2170
|
+
flex-shrink: 0;
|
|
2171
|
+
animation-duration: var(--ck-ai-spinner-animation-duration);
|
|
2172
|
+
}
|
|
2173
|
+
.ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
|
|
2174
|
+
width: var(--ck-ai-spinner-size);
|
|
2175
|
+
height: var(--ck-ai-spinner-size);
|
|
2176
|
+
|
|
2177
|
+
border: none;
|
|
2178
|
+
|
|
2179
|
+
background: var(--ck-ai-spinner-background);
|
|
2180
|
+
-webkit-mask: var(--ck-ai-spinner-mask);
|
|
2181
|
+
mask: var(--ck-ai-spinner-mask);
|
|
2182
|
+
|
|
2183
|
+
box-sizing: border-box;
|
|
2184
|
+
}
|
|
2185
|
+
.ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
|
|
2186
|
+
--ck-ai-spinner-size: 1em;
|
|
2187
|
+
}
|
|
2188
|
+
.ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_tiny {
|
|
2189
|
+
--ck-ai-spinner-size: 12px;
|
|
2190
|
+
}
|
|
2191
|
+
.ck.ck-spinner-container.ck-hidden {
|
|
2192
|
+
display: none;
|
|
2193
|
+
animation: none;
|
|
2194
|
+
}
|
|
2195
|
+
@keyframes ck-spin {
|
|
2196
|
+
to {
|
|
2197
|
+
transform: rotate(360deg);
|
|
2198
|
+
}
|
|
2199
|
+
}
|
|
2200
|
+
/*
|
|
2201
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2202
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2203
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2204
|
+
*
|
|
2205
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2206
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2207
|
+
*/
|
|
2208
|
+
:root {
|
|
2209
|
+
/* Primary button */
|
|
2210
|
+
--ck-ai-button-primary-color: hsla(0, 0%, 100%, 1);
|
|
2211
|
+
--ck-ai-button-primary-disabled-color: hsla(0, 0%, 100%, 1);
|
|
2212
|
+
--ck-ai-button-primary-background-color: hsla(263, 59%, 52%, 1);
|
|
2213
|
+
--ck-ai-button-primary-disabled-background-color: hsla(263, 59%, 52%, 0.5);
|
|
2214
|
+
--ck-ai-button-primary-hover-background-color: hsla(263, 59%, 40%, 1);
|
|
2215
|
+
|
|
2216
|
+
/* Secondary button */
|
|
2217
|
+
--ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
|
|
2218
|
+
--ck-ai-button-secondary-disabled-color: hsla(263, 59%, 52%, 0.5);
|
|
2219
|
+
--ck-ai-button-secondary-background-color: hsla(0, 0%, 100%, 1);
|
|
2220
|
+
--ck-ai-button-secondary-disabled-background-color: hsla(0, 0%, 100%, 0.5);
|
|
2221
|
+
--ck-ai-button-secondary-border-color: hsla(262, 51%, 80%, 1);
|
|
2222
|
+
--ck-ai-button-secondary-disabled-border-color: hsla(262, 51%, 80%, 0.5);
|
|
2223
|
+
--ck-ai-button-secondary-hover-background-color: hsla(262, 100%, 96%, 1);
|
|
2224
|
+
--ck-ai-button-secondary-active-background-color: hsla(262, 100%, 96%, 1);
|
|
2225
|
+
|
|
2226
|
+
/* Tertiary text button */
|
|
2227
|
+
--ck-ai-button-tertiary-text-color: hsla(263, 59%, 52%, 1);
|
|
2228
|
+
--ck-ai-button-tertiary-disabled-text-color: hsla(263, 59%, 52%, 0.5);
|
|
2229
|
+
--ck-ai-button-tertiary-text-background-color: transparent;
|
|
2230
|
+
--ck-ai-button-tertiary-text-hover-background-color: hsla(262, 100%, 96%, 1);
|
|
2231
|
+
|
|
2232
|
+
/* Tertiary filled button */
|
|
2233
|
+
--ck-ai-button-tertiary-filled-color: hsla(0, 0%, 44%, 1);
|
|
2234
|
+
--ck-ai-button-tertiary-filled-disabled-color: hsla(0, 0%, 44%, 0.5);
|
|
2235
|
+
--ck-ai-button-tertiary-filled-hover-color: hsla(0, 0%, 20%, 1);
|
|
2236
|
+
--ck-ai-button-tertiary-filled-active-color: hsla(263, 59%, 52%, 1);
|
|
2237
|
+
--ck-ai-button-tertiary-filled-background-color: transparent;
|
|
2238
|
+
--ck-ai-button-tertiary-filled-disabled-background-color: hsla(0, 0%, 93%, 1);
|
|
2239
|
+
--ck-ai-button-tertiary-filled-hover-background-color: hsla(262, 100%, 96%, 1);
|
|
2240
|
+
--ck-ai-button-tertiary-filled-active-background-color: hsla(262, 100%, 96%, 1);
|
|
2241
|
+
}
|
|
2242
|
+
.ck.ck-button.ck-ai-button-primary {
|
|
2243
|
+
color: var(--ck-ai-button-primary-color);
|
|
2244
|
+
background-color: var(--ck-ai-button-primary-background-color);
|
|
2245
|
+
border: none;
|
|
2246
|
+
}
|
|
2247
|
+
.ck.ck-button.ck-ai-button-primary:hover {
|
|
2248
|
+
background-color: var(--ck-ai-button-primary-hover-background-color);
|
|
2249
|
+
}
|
|
2250
|
+
.ck.ck-button.ck-ai-button-primary:disabled,
|
|
2251
|
+
.ck.ck-button.ck-ai-button-primary.ck-disabled {
|
|
2252
|
+
color: var(--ck-ai-button-primary-disabled-color);
|
|
2253
|
+
background-color: var(--ck-ai-button-primary-disabled-background-color);
|
|
2254
|
+
cursor: not-allowed;
|
|
2255
|
+
}
|
|
2256
|
+
.ck.ck-button.ck-ai-button-primary:disabled > .ck.ck-button__label,
|
|
2257
|
+
.ck.ck-button.ck-ai-button-primary.ck-disabled > .ck.ck-button__label,
|
|
2258
|
+
.ck.ck-button.ck-ai-button-primary:disabled > .ck-button__icon,
|
|
2259
|
+
.ck.ck-button.ck-ai-button-primary.ck-disabled > .ck-button__icon {
|
|
2260
|
+
opacity: 1;
|
|
2261
|
+
}
|
|
2262
|
+
.ck.ck-button.ck-ai-button-secondary {
|
|
2263
|
+
color: var(--ck-ai-button-secondary-color);
|
|
2264
|
+
background-color: var(--ck-ai-button-secondary-background-color);
|
|
2265
|
+
border: 1px solid var(--ck-ai-button-secondary-border-color);
|
|
2266
|
+
}
|
|
2267
|
+
.ck.ck-button.ck-ai-button-secondary:hover {
|
|
2268
|
+
background-color: var(--ck-ai-button-secondary-hover-background-color);
|
|
2269
|
+
}
|
|
2270
|
+
.ck.ck-button.ck-ai-button-secondary:active,
|
|
2271
|
+
.ck.ck-button.ck-ai-button-secondary.ck-on {
|
|
2272
|
+
background-color: var(--ck-ai-button-secondary-active-background-color);
|
|
2273
|
+
}
|
|
2274
|
+
.ck.ck-button.ck-ai-button-secondary:disabled,
|
|
2275
|
+
.ck.ck-button.ck-ai-button-secondary.ck-disabled {
|
|
2276
|
+
color: var(--ck-ai-button-secondary-disabled-color);
|
|
2277
|
+
background-color: var(--ck-ai-button-secondary-disabled-background-color);
|
|
2278
|
+
border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
|
|
2279
|
+
cursor: not-allowed;
|
|
2280
|
+
}
|
|
2281
|
+
.ck.ck-button.ck-ai-button-secondary:disabled > .ck.ck-button__label,
|
|
2282
|
+
.ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck.ck-button__label,
|
|
2283
|
+
.ck.ck-button.ck-ai-button-secondary:disabled > .ck-button__icon,
|
|
2284
|
+
.ck.ck-button.ck-ai-button-secondary.ck-disabled > .ck-button__icon {
|
|
2285
|
+
opacity: 1;
|
|
2286
|
+
}
|
|
2287
|
+
.ck.ck-button.ck-ai-button-tertiary-text {
|
|
2288
|
+
color: var(--ck-ai-button-tertiary-text-color);
|
|
2289
|
+
background-color: var(--ck-ai-button-tertiary-text-background-color);
|
|
2290
|
+
border: none;
|
|
2291
|
+
}
|
|
2292
|
+
.ck.ck-button.ck-ai-button-tertiary-text:hover {
|
|
2293
|
+
background-color: var(--ck-ai-button-tertiary-text-hover-background-color);
|
|
2294
|
+
}
|
|
2295
|
+
.ck.ck-button.ck-ai-button-tertiary-text:disabled,
|
|
2296
|
+
.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled {
|
|
2297
|
+
color: var(--ck-ai-button-tertiary-disabled-text-color);
|
|
2298
|
+
cursor: not-allowed;
|
|
2299
|
+
}
|
|
2300
|
+
.ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck.ck-button__label,
|
|
2301
|
+
.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck.ck-button__label,
|
|
2302
|
+
.ck.ck-button.ck-ai-button-tertiary-text:disabled > .ck-button__icon,
|
|
2303
|
+
.ck.ck-button.ck-ai-button-tertiary-text.ck-disabled > .ck-button__icon {
|
|
2304
|
+
opacity: 1;
|
|
2305
|
+
}
|
|
2306
|
+
.ck.ck-button.ck-ai-button-tertiary-filled {
|
|
2307
|
+
color: var(--ck-ai-button-tertiary-filled-color);
|
|
2308
|
+
background-color: var(--ck-ai-button-tertiary-filled-background-color);
|
|
2309
|
+
border: none;
|
|
2310
|
+
}
|
|
2311
|
+
.ck.ck-button.ck-ai-button-tertiary-filled:hover {
|
|
2312
|
+
color: var(--ck-ai-button-tertiary-filled-hover-color);
|
|
2313
|
+
background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
|
|
2314
|
+
}
|
|
2315
|
+
.ck.ck-button.ck-ai-button-tertiary-filled:active,
|
|
2316
|
+
.ck.ck-button.ck-ai-button-tertiary-filled.ck-on {
|
|
2317
|
+
color: var(--ck-ai-button-tertiary-filled-active-color);
|
|
2318
|
+
background-color: var(--ck-ai-button-tertiary-filled-active-background-color);
|
|
2319
|
+
}
|
|
2320
|
+
.ck.ck-button.ck-ai-button-tertiary-filled:disabled,
|
|
2321
|
+
.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled {
|
|
2322
|
+
color: var(--ck-ai-button-tertiary-filled-disabled-color);
|
|
2323
|
+
background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
|
|
2324
|
+
cursor: not-allowed;
|
|
2325
|
+
}
|
|
2326
|
+
.ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck.ck-button__label,
|
|
2327
|
+
.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck.ck-button__label,
|
|
2328
|
+
.ck.ck-button.ck-ai-button-tertiary-filled:disabled > .ck-button__icon,
|
|
2329
|
+
.ck.ck-button.ck-ai-button-tertiary-filled.ck-disabled > .ck-button__icon {
|
|
2330
|
+
opacity: 1;
|
|
2331
|
+
}
|
|
2332
|
+
/*
|
|
2333
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2334
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2335
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2336
|
+
*
|
|
2337
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2338
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2339
|
+
*/
|
|
2340
|
+
:root {
|
|
2341
|
+
--ck-ai-disclaimer-background-color: hsla(0, 0%, 96%, 1);
|
|
2342
|
+
--ck-ai-disclaimer-border-color: hsla(220, 6%, 82%, 1);
|
|
2343
|
+
--ck-ai-disclaimer-text-color: hsla(0, 0%, 44%, 1);
|
|
2344
|
+
}
|
|
2345
|
+
.ck.ck-ai-disclaimer {
|
|
2346
|
+
background-color: var(--ck-ai-disclaimer-background-color);
|
|
2347
|
+
border-top: 1px solid var(--ck-ai-disclaimer-border-color);
|
|
2348
|
+
padding: var(--ck-spacing-standard) 1em;
|
|
2349
|
+
}
|
|
2350
|
+
.ck.ck-ai-disclaimer > .ck.ck-ai-disclaimer__content {
|
|
2351
|
+
color: var(--ck-ai-disclaimer-text-color);
|
|
2352
|
+
font-size: 0.75em;
|
|
2353
|
+
line-height: 1.025em;
|
|
2354
|
+
text-align: center;
|
|
2355
|
+
word-break: normal;
|
|
2356
|
+
text-wrap: auto;
|
|
2357
|
+
}
|
|
2358
|
+
|
|
2359
|
+
:root {
|
|
2360
|
+
--ck-ai-border-color-main: hsla(216, 5%, 81%, 1);
|
|
2361
|
+
--ck-ai-border-color-button: hsla(262, 51%, 80%, 1);
|
|
2362
|
+
--ck-ai-background-color-action-button: hsla(263, 59%, 52%, 1);
|
|
2363
|
+
--ck-ai-font-color-action-button: hsl(0, 0%, 100%);
|
|
2364
|
+
|
|
2365
|
+
--ck-ai-chat-color-text: hsla(263, 59%, 52%, 1);
|
|
2366
|
+
--ck-ai-chat-color-icon: hsla(0, 0%, 44%, 1);
|
|
2367
|
+
--ck-ai-chat-border-width: 1px;
|
|
2368
|
+
|
|
2369
|
+
--ck-ai-chat-button-active-background-color: hsla(262, 100%, 96%, 1);
|
|
2370
|
+
--ck-ai-chat-button-active-color: hsla(263, 59%, 52%, 1);
|
|
2371
|
+
--ck-ai-chat-button-hover-color: hsla(0, 0%, 20%, 1);
|
|
2372
|
+
--ck-ai-chat-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
2373
|
+
--ck-ai-chat-user-context-background: hsla(0, 0%, 98%, 1);
|
|
2374
|
+
|
|
2375
|
+
--ck-ai-chat-flash-color: hsla(263, 59%, 52%, 0.102);
|
|
2376
|
+
--ck-ai-chat-flash-color-text: hsla(263, 59%, 52%, 1);
|
|
2377
|
+
--ck-ai-chat-animation-duration: 0.6s;
|
|
2378
|
+
--ck-ai-chat-animation-timing: ease-out;
|
|
2379
|
+
|
|
2380
|
+
--ck-ai-chat-loader-animation-duration: 1.5s;
|
|
2381
|
+
--ck-ai-chat-loader-icon-color: hsla(0, 0%, 96%, 0.98);
|
|
2382
|
+
|
|
2383
|
+
--ck-ai-chat-feed-loader-icon-color: hsla(0, 0%, 85%, 1);
|
|
2384
|
+
|
|
2385
|
+
--ck-ai-border-radius: calc(var(--ck-border-radius) * 2);
|
|
2386
|
+
}
|
|
2387
|
+
|
|
2388
|
+
/* Note: This class name is mentioned in the guide and acts like a public API. */
|
|
2389
|
+
.ck-ai-ui_theme {
|
|
2390
|
+
/* @TODO: there should be one theme applied on all NextGenAI features */
|
|
2391
|
+
}
|
|
2392
|
+
|
|
2393
|
+
.ck.ck-ai-chat {
|
|
2394
|
+
|
|
2395
|
+
width: 100%;
|
|
2396
|
+
min-height: 300px;
|
|
2397
|
+
display: flex;
|
|
2398
|
+
flex-direction: column;
|
|
2399
|
+
overflow: hidden;
|
|
2400
|
+
font-family: var(--ck-ai-chat-font-family) !important;
|
|
2401
|
+
}
|
|
2402
|
+
|
|
2403
|
+
.ck.ck-ai-chat * {
|
|
2404
|
+
font-family: var(--ck-ai-chat-font-family) !important;
|
|
2405
|
+
}
|
|
2406
|
+
|
|
2407
|
+
/*
|
|
2408
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2409
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2410
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2411
|
+
*
|
|
2412
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2413
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2414
|
+
*/
|
|
2415
|
+
|
|
2416
|
+
:root {
|
|
2417
|
+
--ai-active-icon-size: 17px;
|
|
2418
|
+
|
|
2419
|
+
--ck-ai-loader-icon-color: hsla(0, 0%, 85%, 1);
|
|
2420
|
+
--ck-ai-loader-icon-dot-color: hsla(0, 0%, 65%, 1);
|
|
2421
|
+
--ck-ai-chat-feed-item-spacing: var(--ck-spacing-extra-large);
|
|
2422
|
+
}
|
|
2423
|
+
|
|
2424
|
+
.ck .ck-ai-chat-history {
|
|
2425
|
+
display: flex;
|
|
2426
|
+
flex-direction: column;
|
|
2427
|
+
height: 100%;
|
|
2428
|
+
}
|
|
2429
|
+
|
|
2430
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__content,
|
|
2431
|
+
.ck .ck-ai-chat-history .ck-search {
|
|
2432
|
+
display: flex;
|
|
2433
|
+
flex-direction: column;
|
|
2434
|
+
flex: 1 1 auto;
|
|
2435
|
+
min-height: 0;
|
|
2436
|
+
gap: var(--ck-spacing-medium-small);
|
|
2437
|
+
position: relative;
|
|
2438
|
+
}
|
|
2439
|
+
|
|
2440
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__content .ck-ai-chat-error {
|
|
2441
|
+
margin: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-medium) var(--ck-spacing-large);
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
.ck .ck-ai-chat-history .ck-search > .ck-labeled-field-view {
|
|
2445
|
+
margin-top: var(--ck-spacing-medium);
|
|
2446
|
+
padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny);
|
|
2447
|
+
}
|
|
2448
|
+
|
|
2449
|
+
.ck .ck-ai-chat-history .ck-search__results {
|
|
2450
|
+
min-height: 0;
|
|
2451
|
+
flex: 1 1 auto;
|
|
2452
|
+
overflow-y: auto;
|
|
2453
|
+
overflow-x: hidden;
|
|
2454
|
+
}
|
|
2455
|
+
|
|
2456
|
+
.ck .ck-ai-chat-history .ck-dropdown .ck-dropdown__arrow {
|
|
2457
|
+
display: none;
|
|
2458
|
+
}
|
|
2459
|
+
|
|
2460
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__sections {
|
|
2461
|
+
gap: var(--ck-spacing-medium-small);
|
|
2462
|
+
}
|
|
2463
|
+
|
|
2464
|
+
.ck .ck-ai-chat-history .ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
|
|
2465
|
+
padding: 0;
|
|
2466
|
+
}
|
|
2467
|
+
|
|
2468
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__section-title {
|
|
2469
|
+
color: var(--ck-ai-chat-color-icon);
|
|
2470
|
+
font-size: 0.85em;
|
|
2471
|
+
font-weight: 700;
|
|
2472
|
+
line-height: 1.85em;
|
|
2473
|
+
padding: 0.48em 0.9em 0 0.9em;
|
|
2474
|
+
}
|
|
2475
|
+
|
|
2476
|
+
.ck .ck-ai-chat-history .ck-confirm-view .ck-confirm-view-inner, .ck .ck-ai-chat-history .ck-ai-chat-history__item {
|
|
2477
|
+
padding: var(--ck-spacing-tiny)
|
|
2478
|
+
var(--ck-spacing-extra-large)
|
|
2479
|
+
var(--ck-spacing-tiny)
|
|
2480
|
+
var(--ck-spacing-large);
|
|
2481
|
+
}
|
|
2482
|
+
|
|
2483
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item {
|
|
2484
|
+
display: flex;
|
|
2485
|
+
position: relative;
|
|
2486
|
+
transition: transform 300ms ease;
|
|
2487
|
+
}
|
|
2488
|
+
|
|
2489
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2490
|
+
|
|
2491
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item {
|
|
2492
|
+
transition: none;
|
|
2493
|
+
}
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item:hover {
|
|
2497
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
2498
|
+
}
|
|
2499
|
+
|
|
2500
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-title {
|
|
2501
|
+
display: inline-block;
|
|
2502
|
+
width: 100%;
|
|
2503
|
+
overflow: hidden;
|
|
2504
|
+
text-overflow: ellipsis;
|
|
2505
|
+
}
|
|
2506
|
+
|
|
2507
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item--active .ck-ai-chat-history__item-title {
|
|
2508
|
+
font-weight: 700;
|
|
2509
|
+
}
|
|
2510
|
+
|
|
2511
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-row {
|
|
2512
|
+
--ck-icon-font-size: .666em;
|
|
2513
|
+
--ck-ui-component-min-height: 1.7em;
|
|
2514
|
+
--ck-ui-component-min-width: 1.7em;
|
|
2515
|
+
|
|
2516
|
+
width: 100%;
|
|
2517
|
+
min-width: 0;
|
|
2518
|
+
margin-left: 0.3em;
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-row, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions {
|
|
2522
|
+
display: flex;
|
|
2523
|
+
align-items: center;
|
|
2524
|
+
gap: 0.6em;
|
|
2525
|
+
}
|
|
2526
|
+
|
|
2527
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions {
|
|
2528
|
+
height: 100%;
|
|
2529
|
+
}
|
|
2530
|
+
|
|
2531
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button,
|
|
2532
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button {
|
|
2533
|
+
opacity: .7;
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button:hover, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button:hover {
|
|
2537
|
+
opacity: 1;
|
|
2538
|
+
background: none;
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2541
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button.ck-on, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button.ck-on {
|
|
2542
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
2543
|
+
color: var(--ck-ai-chat-button-hover-color);
|
|
2544
|
+
}
|
|
2545
|
+
|
|
2546
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-button.ck-on svg, .ck .ck-ai-chat-history .ck-ai-chat-history__item-actions > .ck-dropdown .ck-dropdown__button.ck-on svg {
|
|
2547
|
+
color: var(--ck-ai-chat-button-active-color);
|
|
2548
|
+
}
|
|
2549
|
+
|
|
2550
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-input,
|
|
2551
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-input_focused {
|
|
2552
|
+
width: 100%;
|
|
2553
|
+
padding: 0;
|
|
2554
|
+
border: none;
|
|
2555
|
+
box-shadow: none;
|
|
2556
|
+
background: transparent;
|
|
2557
|
+
}
|
|
2558
|
+
|
|
2559
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item--edit {
|
|
2560
|
+
background: var(--ck-ai-chat-button-active-background-color);
|
|
2561
|
+
}
|
|
2562
|
+
|
|
2563
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-ai-chat-history__item-edit .ck-input {
|
|
2564
|
+
background: var(--ck-ai-chat-button-active-background-color);
|
|
2565
|
+
}
|
|
2566
|
+
|
|
2567
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item--edit .ck-ai-chat-history__item-actions {
|
|
2568
|
+
align-items: center;
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-content {
|
|
2572
|
+
display: flex;
|
|
2573
|
+
flex-direction: column;
|
|
2574
|
+
justify-content: center;
|
|
2575
|
+
align-items: flex-start;
|
|
2576
|
+
flex: 1 0 0;
|
|
2577
|
+
overflow: hidden;
|
|
2578
|
+
}
|
|
2579
|
+
|
|
2580
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-main-content {
|
|
2581
|
+
width: 100%;
|
|
2582
|
+
}
|
|
2583
|
+
|
|
2584
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-main-content, .ck .ck-ai-chat-history .ck-ai-chat-history__item-check-container {
|
|
2585
|
+
display: flex;
|
|
2586
|
+
align-items: center;
|
|
2587
|
+
height: 2em;
|
|
2588
|
+
}
|
|
2589
|
+
|
|
2590
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-check-container {
|
|
2591
|
+
--ck-icon-font-size: .5em;
|
|
2592
|
+
|
|
2593
|
+
min-width: var(--ai-active-icon-size);
|
|
2594
|
+
}
|
|
2595
|
+
|
|
2596
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__item-date {
|
|
2597
|
+
line-height: 1.385em;
|
|
2598
|
+
color: var(--ck-ai-chat-color-icon);
|
|
2599
|
+
}
|
|
2600
|
+
|
|
2601
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__empty {
|
|
2602
|
+
padding: var(--ck-spacing-tiny) var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-large);
|
|
2603
|
+
}
|
|
2604
|
+
|
|
2605
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat-history__empty-message {
|
|
2606
|
+
text-wrap: auto;
|
|
2607
|
+
line-height: 1.85em;
|
|
2608
|
+
margin: var(--ck-spacing-large) 0;
|
|
2609
|
+
}
|
|
2610
|
+
|
|
2611
|
+
.ck .ck-ai-chat-history .ck-ai-chat-history__empty .ck-ai-chat-history__open-chat-button {
|
|
2612
|
+
font-size: 0.9em;
|
|
2613
|
+
border: none;
|
|
2614
|
+
padding: 0 var(--ck-spacing-standard);
|
|
2615
|
+
min-height: 22px;
|
|
2616
|
+
height: 22px;
|
|
2617
|
+
|
|
2618
|
+
background-color: var(--ck-ai-background-color-action-button);
|
|
2619
|
+
color: var(--ck-ai-font-color-action-button);
|
|
2620
|
+
}
|
|
2621
|
+
|
|
2622
|
+
.ck .ck-ai-chat-history .ck-confirm-view {
|
|
2623
|
+
--ck-icon-font-size: .666em;
|
|
2624
|
+
--ck-ui-component-min-height: 1.7em;
|
|
2625
|
+
--ck-ui-component-min-width: 1.7em;
|
|
2626
|
+
}
|
|
2627
|
+
|
|
2628
|
+
.ck .ck-ai-chat-history .ck-confirm-view .ck-confirm-view-inner {
|
|
2629
|
+
flex-direction: row;
|
|
2630
|
+
align-items: center;
|
|
2631
|
+
justify-content: space-between;
|
|
2632
|
+
gap: 0.6em;
|
|
2633
|
+
flex: 1 0 0;
|
|
2634
|
+
margin-left: var(--ai-active-icon-size);
|
|
2635
|
+
}
|
|
2636
|
+
|
|
2637
|
+
.ck .ck-ai-chat-history .ck-confirm-view .ck-confirm-view-actions {
|
|
2638
|
+
display: flex;
|
|
2639
|
+
gap: 0.6em;
|
|
2640
|
+
}
|
|
2641
|
+
|
|
2642
|
+
/*
|
|
2643
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2644
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2645
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2646
|
+
*
|
|
2647
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2648
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2649
|
+
*/
|
|
2650
|
+
|
|
2651
|
+
:root {
|
|
2652
|
+
--ck-ai-quick-actions-button-color: hsla(263, 59%, 52%, 1);
|
|
2653
|
+
--ck-ai-quick-actions-button-background-color: hsla(265, 100%, 96%, 1);
|
|
2654
|
+
}
|
|
2655
|
+
|
|
2656
|
+
.ck-ai-quick-actions {
|
|
2657
|
+
width: 300px;
|
|
2658
|
+
}
|
|
2659
|
+
|
|
2660
|
+
.ck-ai-quick-actions svg.ck-icon {
|
|
2661
|
+
width: 20px;
|
|
2662
|
+
height: 20px;
|
|
2663
|
+
}
|
|
2664
|
+
|
|
2665
|
+
:scope .ck-ai-quick-actions-dropdown,:scope .ck-ai-quick-actions-group-panel {
|
|
2666
|
+
--ck-color-list-button-hover-background: var(--ck-ai-quick-actions-button-background-color);
|
|
2667
|
+
--ck-color-button-default-hover-background: var(--ck-ai-quick-actions-button-background-color);
|
|
2668
|
+
--ck-color-button-on-background: var(--ck-ai-quick-actions-button-background-color);
|
|
2669
|
+
--ck-color-button-on-hover-background: var(--ck-ai-quick-actions-button-background-color);
|
|
2670
|
+
}
|
|
2671
|
+
|
|
2672
|
+
:scope .ck-ai-quick-actions-dropdown .ck.ck-button:not(.ck-dropdown__button),:scope .ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button) {
|
|
2673
|
+
border-color: transparent;
|
|
2674
|
+
box-shadow: none;
|
|
2675
|
+
}
|
|
2676
|
+
|
|
2677
|
+
:scope .ck-ai-quick-actions-dropdown .ck.ck-button:not(.ck-dropdown__button):focus,:scope .ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button):focus {
|
|
2678
|
+
background-color: var(--ck-ai-quick-actions-button-background-color);
|
|
2679
|
+
}
|
|
2680
|
+
|
|
2681
|
+
:scope .ck-ai-quick-actions-dropdown .ck.ck-button.ck-dropdown__button.ck-on,:scope .ck-ai-quick-actions-group-panel .ck.ck-button.ck-dropdown__button.ck-on {
|
|
2682
|
+
color: var(--ck-ai-quick-actions-button-color);
|
|
2683
|
+
}
|
|
2684
|
+
|
|
2685
|
+
/*
|
|
2686
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2687
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2688
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2689
|
+
*
|
|
2690
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2691
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2692
|
+
*/
|
|
2693
|
+
|
|
2694
|
+
:root {
|
|
2695
|
+
/* Taken from old AI Assistant */
|
|
2696
|
+
--ck-color-ai-selection: hsl(262.5, 60%, 90%);
|
|
2697
|
+
|
|
2698
|
+
/* Primary button */
|
|
2699
|
+
--ck-ai-button-primary-color: hsla(0, 0%, 100%, 1);
|
|
2700
|
+
--ck-ai-button-primary-disabled-color: hsla(0, 0%, 100%, 1);
|
|
2701
|
+
--ck-ai-button-primary-background-color: hsla(263, 59%, 52%, 1);
|
|
2702
|
+
--ck-ai-button-primary-disabled-background-color: hsla(263, 59%, 52%, 0.5);
|
|
2703
|
+
--ck-ai-button-primary-hover-background-color: hsla(263, 59%, 40%, 1);
|
|
2704
|
+
|
|
2705
|
+
/* Secondary button */
|
|
2706
|
+
--ck-ai-button-secondary-color: hsla(263, 59%, 52%, 1);
|
|
2707
|
+
--ck-ai-button-secondary-disabled-color: hsla(263, 59%, 52%, 0.5);
|
|
2708
|
+
--ck-ai-button-secondary-background-color: hsla(0, 0%, 100%, 1);
|
|
2709
|
+
--ck-ai-button-secondary-disabled-background-color: hsla(0, 0%, 100%, 0.5);
|
|
2710
|
+
--ck-ai-button-secondary-border-color: hsla(262, 51%, 80%, 1);
|
|
2711
|
+
--ck-ai-button-secondary-disabled-border-color: hsla(262, 51%, 80%, 0.5);
|
|
2712
|
+
--ck-ai-button-secondary-hover-background-color: hsla(262, 100%, 96%, 1);
|
|
2713
|
+
--ck-ai-button-secondary-active-background-color: hsla(262, 100%, 96%, 1);
|
|
2714
|
+
}
|
|
2715
|
+
|
|
2716
|
+
.ck.ai-balloon {
|
|
2717
|
+
--ck-ai-balloon-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
2718
|
+
--ck-ai-balloon-disclaimer-text-color: hsla(0, 0%, 44%, 1);
|
|
2719
|
+
}
|
|
2720
|
+
|
|
2721
|
+
.ck.ai-balloon .ck-dialog__content {
|
|
2722
|
+
width: 580px;
|
|
2723
|
+
padding: var(--ck-spacing-large);
|
|
2724
|
+
}
|
|
2725
|
+
|
|
2726
|
+
.ck.ai-balloon .ck-ai-suggestion__header {
|
|
2727
|
+
display: none
|
|
2728
|
+
}
|
|
2729
|
+
|
|
2730
|
+
.ck.ai-balloon .ck.ck-ai-balloon__toolbar {
|
|
2731
|
+
border: none;
|
|
2732
|
+
padding: 0;
|
|
2733
|
+
margin-top: var(--ck-spacing-medium);
|
|
2734
|
+
margin-bottom: 0;
|
|
2735
|
+
}
|
|
2736
|
+
|
|
2737
|
+
.ck.ai-balloon .ck.ck-ai-balloon__toolbar .ck-button_with-text {
|
|
2738
|
+
margin-bottom: 0;
|
|
2739
|
+
margin-top: 0;
|
|
2740
|
+
}
|
|
2741
|
+
|
|
2742
|
+
.ck.ai-balloon .ck-ai-balloon__disclaimer {
|
|
2743
|
+
margin-top: var(--ck-spacing-medium);
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2746
|
+
.ck.ai-balloon .ck-ai-balloon__disclaimer .ck-ai-balloon__disclaimer-content {
|
|
2747
|
+
color: var(--ck-ai-balloon-disclaimer-text-color);
|
|
2748
|
+
font-size: 0.75em;
|
|
2749
|
+
line-height: 1.025em;
|
|
2750
|
+
text-align: left;
|
|
2751
|
+
word-break: normal;
|
|
2752
|
+
text-wrap: auto;
|
|
2753
|
+
}
|
|
2754
|
+
|
|
2755
|
+
.ck.ai-balloon .ck-ai-suggestion__body {
|
|
2756
|
+
height: 150px;
|
|
2757
|
+
word-break: normal;
|
|
2758
|
+
text-wrap: auto;
|
|
2759
|
+
overflow-y: auto;
|
|
2760
|
+
}
|
|
2761
|
+
|
|
2762
|
+
.ck.ai-balloon .ck-ai-suggestion__body pre>code {
|
|
2763
|
+
white-space: pre-wrap;
|
|
2764
|
+
}
|
|
2765
|
+
|
|
2766
|
+
.ck.ai-balloon .ck-ai-suggestion__changes {
|
|
2767
|
+
height: 150px;
|
|
2768
|
+
overflow-y: auto;
|
|
2769
|
+
}
|
|
2770
|
+
|
|
2771
|
+
.ck.ai-balloon * {
|
|
2772
|
+
font-family: var(--ck-ai-balloon-font-family) !important;
|
|
2773
|
+
}
|
|
2774
|
+
|
|
2775
|
+
.ck.ai-balloon .ck-ai-suggestion__changes *,
|
|
2776
|
+
.ck.ai-balloon .ck-ai-suggestion__body *,
|
|
2777
|
+
.ck.ai-balloon .ck-ai-suggestion__change * {
|
|
2778
|
+
white-space: normal;
|
|
2779
|
+
line-height: 1.4em;
|
|
2780
|
+
}
|
|
2781
|
+
|
|
2782
|
+
.ck.ai-balloon-rotator .ck.ck-form__header {
|
|
2783
|
+
justify-content: center;
|
|
2784
|
+
position: relative;
|
|
2785
|
+
}
|
|
2786
|
+
|
|
2787
|
+
.ck.ai-balloon-rotator .ck.ck-form__header h2.ck.ck-form__header__label {
|
|
2788
|
+
flex-grow: 0;
|
|
2789
|
+
}
|
|
2790
|
+
|
|
2791
|
+
.ck.ai-balloon-rotator .ck.ck-form__header button.ck-button {
|
|
2792
|
+
margin-right: var(--ck-spacing-large);
|
|
2793
|
+
margin-left: var(--ck-spacing-large);
|
|
2794
|
+
}
|
|
2795
|
+
|
|
2796
|
+
.ck.ai-balloon-rotator .ck.ck-form__header .ck-button:last-child {
|
|
2797
|
+
position: absolute;
|
|
2798
|
+
right: var(--ck-spacing-large);
|
|
2799
|
+
}
|
|
2800
|
+
|
|
2801
|
+
.ck.ai-balloon-rotator::after {
|
|
2802
|
+
content: "";
|
|
2803
|
+
position: absolute;
|
|
2804
|
+
top: 8px;
|
|
2805
|
+
left: 8px;
|
|
2806
|
+
width: 100%;
|
|
2807
|
+
height: 100%;
|
|
2808
|
+
background: var(--ck-color-dialog-background);
|
|
2809
|
+
z-index: -1;
|
|
2810
|
+
border-radius: var(--ck-border-radius);
|
|
2811
|
+
box-shadow: var(--ck-drop-shadow), 0 0;
|
|
2812
|
+
border: 1px solid var(--ck-color-base-border);
|
|
2813
|
+
}
|
|
2814
|
+
|
|
2815
|
+
/* Buttons styles will be removed after shared code is merged. */
|
|
2816
|
+
.ck.ck-button.ck-ai-button-primary {
|
|
2817
|
+
color: var(--ck-ai-button-primary-color);
|
|
2818
|
+
background-color: var(--ck-ai-button-primary-background-color);
|
|
2819
|
+
border: none;
|
|
2820
|
+
}
|
|
2821
|
+
.ck.ck-button.ck-ai-button-primary:hover {
|
|
2822
|
+
background-color: var(--ck-ai-button-primary-hover-background-color);
|
|
2823
|
+
}
|
|
2824
|
+
.ck.ck-button.ck-ai-button-primary:disabled {
|
|
2825
|
+
color: var(--ck-ai-button-primary-disabled-color);
|
|
2826
|
+
background-color: var(--ck-ai-button-primary-disabled-background-color);
|
|
2827
|
+
cursor: not-allowed;
|
|
2828
|
+
}
|
|
2829
|
+
.ck.ck-button.ck-ai-button-secondary {
|
|
2830
|
+
color: var(--ck-ai-button-secondary-color);
|
|
2831
|
+
background-color: var(--ck-ai-button-secondary-background-color);
|
|
2832
|
+
border: 1px solid var(--ck-ai-button-secondary-border-color);
|
|
2833
|
+
}
|
|
2834
|
+
.ck.ck-button.ck-ai-button-secondary:hover {
|
|
2835
|
+
background-color: var(--ck-ai-button-secondary-hover-background-color);
|
|
2836
|
+
}
|
|
2837
|
+
.ck.ck-button.ck-ai-button-secondary:active,
|
|
2838
|
+
.ck.ck-button.ck-ai-button-secondary.ck-on {
|
|
2839
|
+
background-color: var(--ck-ai-button-secondary-active-background-color);
|
|
2840
|
+
}
|
|
2841
|
+
.ck.ck-button.ck-ai-button-secondary:disabled {
|
|
2842
|
+
color: var(--ck-ai-button-secondary-disabled-color);
|
|
2843
|
+
background-color: var(--ck-ai-button-secondary-disabled-background-color);
|
|
2844
|
+
border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
|
|
2845
|
+
cursor: not-allowed;
|
|
2846
|
+
}
|
|
2847
|
+
|
|
2848
|
+
.ck-ai-suggestion__container .ck.ck-ai-suggestion__loader {
|
|
2849
|
+
padding: var(--ck-spacing-large) !important;
|
|
2850
|
+
height: 150px;
|
|
2851
|
+
}
|
|
2852
|
+
|
|
2853
|
+
.ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck.ck-spinner-container.ck-ai-spinner .ck-spinner {
|
|
2854
|
+
--ck-ai-spinner-size: 18px;
|
|
2855
|
+
}
|
|
2856
|
+
|
|
2857
|
+
.ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck.ck-spinner-container.ck-ai-spinner.ck-ai-spinner_small {
|
|
2858
|
+
--ck-ai-spinner-size: 18px;
|
|
2859
|
+
}
|
|
2860
|
+
|
|
2861
|
+
.ck-ai-suggestion__container .ck.ck-ai-suggestion__loader .ck-ai-suggestion__loader-text {
|
|
2862
|
+
margin-left: var(--ck-spacing-medium);
|
|
2863
|
+
}
|
|
2864
|
+
|
|
2865
|
+
/*
|
|
2866
|
+
* Classes used by the "fake visual selection" displayed in the content
|
|
2867
|
+
* when the AI Balloon is open.
|
|
2868
|
+
*
|
|
2869
|
+
* Narrow down to <span> to prevent changing background for widgets and nested editables.
|
|
2870
|
+
*/
|
|
2871
|
+
.ck span.ck-fake-ai-selection {
|
|
2872
|
+
background: var(--ck-color-ai-selection);
|
|
2873
|
+
}
|
|
2874
|
+
|
|
2875
|
+
.ck .ck-widget.ck-fake-ai-selection {
|
|
2876
|
+
outline-color: var(--ck-color-ai-selection);
|
|
2877
|
+
}
|
|
2878
|
+
|
|
2879
|
+
.ck.ck-dialog-overlay:has(.ai-balloon) {
|
|
2880
|
+
z-index: 998;
|
|
2881
|
+
}
|
|
2882
|
+
/*
|
|
2883
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
2884
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
2885
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
2886
|
+
*
|
|
2887
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
2888
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
2889
|
+
*/
|
|
2890
|
+
|
|
2891
|
+
:root {
|
|
2892
|
+
--ck-ai-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
|
|
2893
|
+
--ck-ai-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
|
|
2894
|
+
--ck-ai-check-list-item-title-color: var(--ck-color-text);
|
|
2895
|
+
--ck-ai-check-list-item-description-color: hsla(0, 0%, 44%, 1);
|
|
2896
|
+
--ck-ai-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
|
|
2897
|
+
}
|
|
2898
|
+
|
|
2899
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list {
|
|
2900
|
+
position: relative;
|
|
2901
|
+
height: 100%;
|
|
2902
|
+
overflow: auto;
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item {
|
|
2906
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
|
|
2907
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
2908
|
+
box-shadow: 3px 0px 0px 0px transparent inset;
|
|
2909
|
+
opacity: 0;
|
|
2910
|
+
visibility: hidden;
|
|
2911
|
+
|
|
2912
|
+
transition: box-shadow 0.3s ease-in-out;
|
|
2913
|
+
}
|
|
2914
|
+
|
|
2915
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2916
|
+
|
|
2917
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item {
|
|
2918
|
+
transition-duration: 0s;
|
|
2919
|
+
}
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_rendered {
|
|
2923
|
+
opacity: 1;
|
|
2924
|
+
visibility: visible;
|
|
2925
|
+
|
|
2926
|
+
transition: box-shadow 0.3s ease-in-out,
|
|
2927
|
+
opacity 0.1s calc(0.05s * var(--ck-ai-check-list-item-index)),
|
|
2928
|
+
visibility 0.1s calc(0.05s * var(--ck-ai-check-list-item-index));
|
|
2929
|
+
}
|
|
2930
|
+
|
|
2931
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2932
|
+
|
|
2933
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_rendered {
|
|
2934
|
+
opacity: 1;
|
|
2935
|
+
visibility: visible;
|
|
2936
|
+
}
|
|
2937
|
+
}
|
|
2938
|
+
|
|
2939
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item.ck-ai-review-mode__check-list-item_selected {
|
|
2940
|
+
box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
|
|
2941
|
+
}
|
|
2942
|
+
|
|
2943
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title-text,
|
|
2944
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-description {
|
|
2945
|
+
white-space: normal;
|
|
2946
|
+
line-height: 1.3;
|
|
2947
|
+
}
|
|
2948
|
+
|
|
2949
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title {
|
|
2950
|
+
display: flex;
|
|
2951
|
+
justify-content: space-between;
|
|
2952
|
+
margin-block-end: var(--ck-spacing-tiny);
|
|
2953
|
+
}
|
|
2954
|
+
|
|
2955
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck-ai-review-mode__check-list-item-title-text {
|
|
2956
|
+
flex-grow: 1;
|
|
2957
|
+
color: var(--ck-ai-check-list-item-title-color);
|
|
2958
|
+
font-weight: 700;
|
|
2959
|
+
}
|
|
2960
|
+
|
|
2961
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
|
|
2962
|
+
--ck-icon-size: 20px;
|
|
2963
|
+
|
|
2964
|
+
flex-shrink: 0;
|
|
2965
|
+
margin-inline-start: var(--ck-spacing-small);
|
|
2966
|
+
color: var(--ck-ai-check-list-item-title-icon-color);
|
|
2967
|
+
|
|
2968
|
+
opacity: 0;
|
|
2969
|
+
visibility: hidden;
|
|
2970
|
+
|
|
2971
|
+
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
|
2972
|
+
}
|
|
2973
|
+
|
|
2974
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2975
|
+
|
|
2976
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
|
|
2977
|
+
transition-duration: 0s;
|
|
2978
|
+
}
|
|
2979
|
+
}
|
|
2980
|
+
|
|
2981
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:not(.ck-ai-review-mode__check-list-item_selected):hover {
|
|
2982
|
+
box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
|
|
2983
|
+
}
|
|
2984
|
+
|
|
2985
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item:not(.ck-ai-review-mode__check-list-item_selected):hover .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
|
|
2986
|
+
opacity: 1;
|
|
2987
|
+
visibility: visible;
|
|
2988
|
+
}
|
|
2989
|
+
|
|
2990
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-description {
|
|
2991
|
+
color: var(--ck-ai-check-list-item-description-color);
|
|
2992
|
+
}
|
|
2993
|
+
|
|
2994
|
+
/* Parameterized form view. */
|
|
2995
|
+
|
|
2996
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row {
|
|
2997
|
+
padding-left: 0;
|
|
2998
|
+
padding-right: 0;
|
|
2999
|
+
}
|
|
3000
|
+
|
|
3001
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element {
|
|
3002
|
+
flex: 1;
|
|
3003
|
+
}
|
|
3004
|
+
|
|
3005
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element > *:first-child {
|
|
3006
|
+
width: 100%;
|
|
3007
|
+
}
|
|
3008
|
+
|
|
3009
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown .ck-button.ck-dropdown__button {
|
|
3010
|
+
border-color: hsl(216, 5%, 81%);
|
|
3011
|
+
}
|
|
3012
|
+
|
|
3013
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown .ck-button.ck-dropdown__button .ck-button__label {
|
|
3014
|
+
width: 100%;
|
|
3015
|
+
}
|
|
3016
|
+
|
|
3017
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-parameterized .ck.ck-form__row .ck.ck-button {
|
|
3018
|
+
flex-shrink: 0;
|
|
3019
|
+
}
|
|
3020
|
+
|
|
3021
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-custom-actions .ck.ck-form__row .ck.ck-input.ck-textarea.ck-review-mode__prompt-input {
|
|
3022
|
+
width: 100%;
|
|
3023
|
+
}
|
|
3024
|
+
|
|
3025
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-custom-actions .ck.ck-form__row .ck-ai-review-mode__check-list-item-custom-actions-footer {
|
|
3026
|
+
display: flex;
|
|
3027
|
+
width: 100%;
|
|
3028
|
+
align-items: center;
|
|
3029
|
+
justify-content: space-between;
|
|
3030
|
+
}
|
|
3031
|
+
|
|
3032
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-list > .ck-ai-review-mode__check-list-item .ck-ai-review-mode__check-list-item-custom-actions .ck.ck-form__row .ck-ai-review-mode__check-list-item-custom-actions-footer .ck-ai-review-mode__check-list-item-parameterized-custom-actions-buttons {
|
|
3033
|
+
display: flex;
|
|
3034
|
+
gap: var(--ck-spacing-small);
|
|
3035
|
+
}
|
|
3036
|
+
|
|
3037
|
+
/*
|
|
3038
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
3039
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
3040
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
3041
|
+
*
|
|
3042
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
3043
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
3044
|
+
*/
|
|
3045
|
+
|
|
3046
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run {
|
|
3047
|
+
position: relative;
|
|
3048
|
+
height: 100%;
|
|
3049
|
+
overflow: auto;
|
|
3050
|
+
display: flex;
|
|
3051
|
+
flex-direction: column;
|
|
3052
|
+
}
|
|
3053
|
+
|
|
3054
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
|
|
3055
|
+
overflow: hidden;
|
|
3056
|
+
}
|
|
3057
|
+
|
|
3058
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result {
|
|
3059
|
+
opacity: 0;
|
|
3060
|
+
visibility: hidden;
|
|
3061
|
+
box-shadow: 3px 0px 0px 0px transparent inset;
|
|
3062
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
|
|
3063
|
+
|
|
3064
|
+
animation: ck-ai-check-run-list-item-show 0.25s 0.1s forwards;
|
|
3065
|
+
|
|
3066
|
+
transition: box-shadow 0.3s ease-in-out;
|
|
3067
|
+
transition-behavior: allow-discrete;
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3070
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3071
|
+
|
|
3072
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result {
|
|
3073
|
+
animation: none;
|
|
3074
|
+
opacity: 1;
|
|
3075
|
+
visibility: visible;
|
|
3076
|
+
transition-duration: 0s;
|
|
3077
|
+
}
|
|
3078
|
+
}
|
|
3079
|
+
|
|
3080
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:not(:first-child) {
|
|
3081
|
+
border-top: 1px solid var(--ck-color-base-border);
|
|
3082
|
+
}
|
|
3083
|
+
|
|
3084
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:last-child {
|
|
3085
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
3086
|
+
}
|
|
3087
|
+
|
|
3088
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result .ck-suggestion-marker {
|
|
3089
|
+
white-space: break-spaces;
|
|
3090
|
+
}
|
|
3091
|
+
|
|
3092
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result:hover {
|
|
3093
|
+
box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
|
|
3094
|
+
}
|
|
3095
|
+
|
|
3096
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_active {
|
|
3097
|
+
box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
|
|
3098
|
+
}
|
|
3099
|
+
|
|
3100
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response {
|
|
3101
|
+
overflow: hidden;
|
|
3102
|
+
}
|
|
3103
|
+
|
|
3104
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response > * {
|
|
3105
|
+
white-space: normal;
|
|
3106
|
+
}
|
|
3107
|
+
|
|
3108
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-response img {
|
|
3109
|
+
max-width: 125px;
|
|
3110
|
+
max-height: 125px;
|
|
3111
|
+
}
|
|
3112
|
+
|
|
3113
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer {
|
|
3114
|
+
margin-top: var(--ck-spacing-standard);
|
|
3115
|
+
display: flex;
|
|
3116
|
+
justify-content: space-between;
|
|
3117
|
+
align-items: center;
|
|
3118
|
+
gap: var(--ck-spacing-standard);
|
|
3119
|
+
}
|
|
3120
|
+
|
|
3121
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer > .ck-ai-review-mode__check-run-result-action-buttons {
|
|
3122
|
+
display: flex;
|
|
3123
|
+
gap: var(--ck-spacing-standard);
|
|
3124
|
+
flex-grow: 1;
|
|
3125
|
+
}
|
|
3126
|
+
|
|
3127
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result > .ck-ai-review-mode__check-run-result-footer .ck.ck-button.ck-ai-review-mode__check-run-result-info-button {
|
|
3128
|
+
--ck-icon-size: 16px;
|
|
3129
|
+
--ck-ui-component-min-height: 1.75em;
|
|
3130
|
+
|
|
3131
|
+
max-height: var(--ck-ui-component-min-height);
|
|
3132
|
+
margin-left: auto;
|
|
3133
|
+
}
|
|
3134
|
+
|
|
3135
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-result.ck-ai-review-mode__check-run-result_removing {
|
|
3136
|
+
animation: ck-ai-check-run-item-remove 0.2s forwards;
|
|
3137
|
+
}
|
|
3138
|
+
|
|
3139
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header {
|
|
3140
|
+
display: flex;
|
|
3141
|
+
justify-content: space-between;
|
|
3142
|
+
align-items: center;
|
|
3143
|
+
gap: var(--ck-spacing-standard);
|
|
3144
|
+
|
|
3145
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
|
|
3146
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
3147
|
+
}
|
|
3148
|
+
|
|
3149
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header .ck-ai-review-mode__check-run-results-header-title {
|
|
3150
|
+
align-self: center;
|
|
3151
|
+
font-weight: bold;
|
|
3152
|
+
white-space: nowrap;
|
|
3153
|
+
overflow: hidden;
|
|
3154
|
+
max-width: 100%;
|
|
3155
|
+
text-overflow: ellipsis;
|
|
3156
|
+
}
|
|
3157
|
+
|
|
3158
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-header .ck-ai-review-mode__check-run-results-header-buttons {
|
|
3159
|
+
display: flex;
|
|
3160
|
+
gap: var(--ck-spacing-standard);
|
|
3161
|
+
flex-shrink: 0;
|
|
3162
|
+
align-items: center;
|
|
3163
|
+
/* To prevent jumping when visibility of buttons is changing.
|
|
3164
|
+
TODO: probably it will be replaced with different loader UI. */
|
|
3165
|
+
min-height: 30px;
|
|
3166
|
+
}
|
|
3167
|
+
|
|
3168
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-wrapper {
|
|
3169
|
+
position: relative;
|
|
3170
|
+
height: 100%;
|
|
3171
|
+
overflow: auto;
|
|
3172
|
+
}
|
|
3173
|
+
|
|
3174
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-results-wrapper:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
|
|
3175
|
+
overflow: hidden;
|
|
3176
|
+
}
|
|
3177
|
+
|
|
3178
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container {
|
|
3179
|
+
position: absolute;
|
|
3180
|
+
width: 100%;
|
|
3181
|
+
top: 0;
|
|
3182
|
+
height: 100%;
|
|
3183
|
+
}
|
|
3184
|
+
|
|
3185
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container .ck-ai-review-mode__check-run-skeleton-item {
|
|
3186
|
+
position: static;
|
|
3187
|
+
height: auto;
|
|
3188
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
|
|
3189
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
3190
|
+
}
|
|
3191
|
+
|
|
3192
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-skeleton-container .ck-ai-review-mode__check-run-skeleton-item.ck-ai-skeleton {
|
|
3193
|
+
--ck-ai-skeleton-gap: var(--ck-spacing-small);
|
|
3194
|
+
}
|
|
3195
|
+
|
|
3196
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container {
|
|
3197
|
+
display: flex;
|
|
3198
|
+
flex-direction: column;
|
|
3199
|
+
align-items: flex-end;
|
|
3200
|
+
gap: var(--ck-spacing-medium-small);
|
|
3201
|
+
padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard) var(--ck-spacing-large);
|
|
3202
|
+
}
|
|
3203
|
+
|
|
3204
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container.ck-ai-review-mode__check-run-error-container_border-bottom {
|
|
3205
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
3206
|
+
}
|
|
3207
|
+
|
|
3208
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__check-run .ck-ai-review-mode__check-run-error-container .ck-ai-review-mode__check-run-error-retry-button {
|
|
3209
|
+
font-size: 11.7px;
|
|
3210
|
+
min-height: unset;
|
|
3211
|
+
border: 1px solid var(--ck-ai-border-color-button);
|
|
3212
|
+
border-radius: var(--ck-border-radius);
|
|
3213
|
+
gap: var(--ck-spacing-small);
|
|
3214
|
+
color: var(--ck-ai-chat-color-text);
|
|
3215
|
+
}
|
|
3216
|
+
|
|
3217
|
+
@keyframes ck-ai-check-run-list-item-show {
|
|
3218
|
+
0% {
|
|
3219
|
+
opacity: 0;
|
|
3220
|
+
visibility: hidden;
|
|
3221
|
+
}
|
|
3222
|
+
100% {
|
|
3223
|
+
opacity: 1;
|
|
3224
|
+
visibility: visible;
|
|
3225
|
+
}
|
|
3226
|
+
}
|
|
3227
|
+
|
|
3228
|
+
@keyframes ck-ai-check-run-item-remove {
|
|
3229
|
+
0% {
|
|
3230
|
+
opacity: 1;
|
|
3231
|
+
visibility: visible;
|
|
3232
|
+
display: block;
|
|
3233
|
+
}
|
|
3234
|
+
100% {
|
|
3235
|
+
opacity: 0;
|
|
3236
|
+
visibility: hidden;
|
|
3237
|
+
display: none;
|
|
3238
|
+
}
|
|
3239
|
+
}
|
|
3240
|
+
|
|
3241
|
+
/*
|
|
3242
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
3243
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
3244
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
3245
|
+
*
|
|
3246
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
3247
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
3248
|
+
*/
|
|
3249
|
+
|
|
3250
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header {
|
|
3251
|
+
display: flex;
|
|
3252
|
+
justify-content: space-between;
|
|
3253
|
+
align-items: center;
|
|
3254
|
+
gap: var(--ck-spacing-standard);
|
|
3255
|
+
|
|
3256
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
|
|
3257
|
+
border-bottom: 1px solid var(--ck-color-base-border);
|
|
3258
|
+
}
|
|
3259
|
+
|
|
3260
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header .ck-ai-review-mode__review-completed-header-title {
|
|
3261
|
+
align-self: center;
|
|
3262
|
+
white-space: nowrap;
|
|
3263
|
+
overflow: hidden;
|
|
3264
|
+
max-width: 100%;
|
|
3265
|
+
text-overflow: ellipsis;
|
|
3266
|
+
}
|
|
3267
|
+
|
|
3268
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-header .ck-ai-review-mode__review-completed-header-buttons {
|
|
3269
|
+
display: flex;
|
|
3270
|
+
gap: var(--ck-spacing-standard);
|
|
3271
|
+
flex-shrink: 0;
|
|
3272
|
+
}
|
|
3273
|
+
|
|
3274
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content {
|
|
3275
|
+
padding: var(--ck-spacing-extra-large) var(--ck-spacing-extra-large) 0 var(--ck-spacing-extra-large);
|
|
3276
|
+
text-align: center;
|
|
3277
|
+
}
|
|
3278
|
+
|
|
3279
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content .ck-ai-review-mode__review-completed-content-icon {
|
|
3280
|
+
font-size: 20px;
|
|
3281
|
+
line-height: 20px;
|
|
3282
|
+
}
|
|
3283
|
+
|
|
3284
|
+
.ck.ck-ai-review-mode .ck-ai-review-mode__review-completed .ck-ai-review-mode__review-completed-content .ck-ai-review-mode__review-completed-content-text {
|
|
3285
|
+
margin-top: var(--ck-spacing-large);
|
|
3286
|
+
text-align: center;
|
|
3287
|
+
white-space: normal;
|
|
3288
|
+
}
|
|
3289
|
+
|
|
3290
|
+
/*
|
|
3291
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
3292
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
3293
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
3294
|
+
*
|
|
3295
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
3296
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
3297
|
+
*/
|
|
3298
|
+
|
|
3299
|
+
/*
|
|
3300
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
3301
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
3302
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
3303
|
+
*
|
|
3304
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
3305
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
3306
|
+
*/
|
|
3307
|
+
|
|
3308
|
+
.ck-ai-header {
|
|
3309
|
+
/* Custom values unlike the rest of editor UI. */
|
|
3310
|
+
--ck-ui-component-min-height: 1.7em;
|
|
3311
|
+
--ck-ui-component-min-width: 1.7em;
|
|
3312
|
+
|
|
3313
|
+
/* Custom value. It defaults to the toolbar component height so they look fine on next to each other. */
|
|
3314
|
+
--ck-form-header-height: 3em;
|
|
3315
|
+
--ck-form-header-small-icon-color: hsla(0, 0%, 20%, 1);
|
|
3316
|
+
}
|
|
3317
|
+
|
|
3318
|
+
.ck-ai-header > .ck-button {
|
|
3319
|
+
margin-inline-start: var(--ck-spacing-standard);
|
|
3320
|
+
}
|
|
3321
|
+
|
|
3322
|
+
.ck-ai-header > .ck-button > .ck-button__icon {
|
|
3323
|
+
/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
|
|
3324
|
+
--ck-icon-font-size: .666em;
|
|
3325
|
+
|
|
3326
|
+
color: var(--ck-ai-chat-color-icon);
|
|
3327
|
+
}
|
|
3328
|
+
|
|
3329
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation {
|
|
3330
|
+
/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
|
|
3331
|
+
font-size: 11.7px;
|
|
3332
|
+
min-height: unset;
|
|
3333
|
+
border: 1px solid var(--ck-ai-border-color-button);
|
|
3334
|
+
border-radius: var(--ck-border-radius);
|
|
3335
|
+
gap: var(--ck-spacing-small);
|
|
3336
|
+
color: var(--ck-ai-chat-color-text);
|
|
3337
|
+
}
|
|
3338
|
+
|
|
3339
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation:hover {
|
|
3340
|
+
background-color: var(--ck-ai-chat-button-active-background-color);
|
|
3341
|
+
}
|
|
3342
|
+
|
|
3343
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__label {
|
|
3344
|
+
/* Custom value unlike the rest of editor UI. */
|
|
3345
|
+
line-height: 1.4em;
|
|
3346
|
+
}
|
|
3347
|
+
|
|
3348
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > .ck-button__icon {
|
|
3349
|
+
/* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
|
|
3350
|
+
--ck-icon-font-size: .632em;
|
|
3351
|
+
|
|
3352
|
+
margin-inline-end: 0;
|
|
3353
|
+
color: var(--ck-ai-chat-color-text);
|
|
3354
|
+
}
|
|
3355
|
+
|
|
3356
|
+
.ck-ai-header > .ck.ck-button.ck-ai-chat__start-conversation > span.ck-button__label {
|
|
3357
|
+
position: relative;
|
|
3358
|
+
top: 1px;
|
|
3359
|
+
}
|
|
3360
|
+
|
|
3361
|
+
.ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back {
|
|
3362
|
+
margin-inline-start: 0;
|
|
3363
|
+
margin-inline-end: var(--ck-spacing-small);
|
|
3364
|
+
}
|
|
3365
|
+
|
|
3366
|
+
.ck-ai-header.ck-ai-header_small > .ck.ck-button.ck-button-back > .ck-button__icon {
|
|
3367
|
+
/* Custom value unlike the rest of editor UI (defaults to 16px). See how it's used in the icon.css */
|
|
3368
|
+
--ck-icon-font-size: 13px;
|
|
3369
|
+
|
|
3370
|
+
color: var(--ck-form-header-small-icon-color);
|
|
3371
|
+
}
|
|
3372
|
+
|
|
3373
|
+
.ck-ai-header.ck-ai-header_small .ck-form__header__label {
|
|
3374
|
+
--ck-font-size-base: 13px;
|
|
3375
|
+
--ck-font-face: var(--ck-ai-chat-font-family);
|
|
3376
|
+
|
|
3377
|
+
font-weight: 500;
|
|
3378
|
+
}
|
|
3379
|
+
|
|
3380
|
+
.ck-ai-header .ck-form__header__label:not(:last-child) {
|
|
3381
|
+
margin-inline-end: var(--ck-spacing-small);
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
.ck {
|
|
3385
|
+
--ck-color-ai-review-mode-suggestion: hsla(263, 59%, 52%, 0.5);
|
|
3386
|
+
}
|
|
3387
|
+
|
|
3388
|
+
.ck .ck-ai-review-mode {
|
|
3389
|
+
max-height: 100%;
|
|
3390
|
+
height: 100%;
|
|
3391
|
+
display: flex;
|
|
3392
|
+
flex-direction: column;
|
|
3393
|
+
}
|
|
3394
|
+
|
|
3395
|
+
.ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_add {
|
|
3396
|
+
border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
|
|
3397
|
+
}
|
|
3398
|
+
|
|
3399
|
+
.ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_hide {
|
|
3400
|
+
display: none;
|
|
3401
|
+
}
|
|
3402
|
+
|
|
3403
|
+
.ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_strikethrough {
|
|
3404
|
+
position: relative;
|
|
3405
|
+
}
|
|
3406
|
+
|
|
3407
|
+
.ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_strikethrough:before {
|
|
3408
|
+
border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
|
|
3409
|
+
position: absolute;
|
|
3410
|
+
content: "";
|
|
3411
|
+
width: 100%;
|
|
3412
|
+
height: 60%;
|
|
3413
|
+
}
|
|
3414
|
+
|
|
3415
|
+
.ck.ck-ai-review-mode-highlights span.ck-ai_review-mode-marker_underline {
|
|
3416
|
+
border-bottom: 3px solid var(--ck-color-ai-review-mode-suggestion);
|
|
3417
|
+
}
|
|
3418
|
+
|
|
3419
|
+
.ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_add {
|
|
3420
|
+
white-space: break-spaces;
|
|
3421
|
+
border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
|
|
3422
|
+
border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
|
|
3423
|
+
background: var(--ck-color-suggestion-marker-insertion-background);
|
|
3424
|
+
}
|
|
3425
|
+
|
|
3426
|
+
.ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_hide,
|
|
3427
|
+
.ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_strikethrough {
|
|
3428
|
+
white-space: break-spaces;
|
|
3429
|
+
border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
|
|
3430
|
+
border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
|
|
3431
|
+
text-decoration: line-through;
|
|
3432
|
+
text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
|
|
3433
|
+
text-decoration-thickness: 3px;
|
|
3434
|
+
background: var(--ck-color-suggestion-marker-deletion-background);
|
|
3435
|
+
}
|
|
3436
|
+
|
|
3437
|
+
.ck.ck-ai-review-mode-diff span.ck-ai_review-mode-marker_underline {
|
|
3438
|
+
border: none;
|
|
3439
|
+
}
|
|
3440
|
+
|
|
394
3441
|
/*
|
|
395
3442
|
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
396
3443
|
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
@@ -728,6 +3775,59 @@
|
|
|
728
3775
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
729
3776
|
*/
|
|
730
3777
|
|
|
3778
|
+
/* We need specificity 020 to beat .ck.ck-button. */
|
|
3779
|
+
.ck.ck-button.ck-confirm-view-submit {
|
|
3780
|
+
color: var(--ck-color-button-save);
|
|
3781
|
+
}
|
|
3782
|
+
|
|
3783
|
+
.ck.ck-button.ck-confirm-view-cancel {
|
|
3784
|
+
color: var(--ck-color-button-cancel);
|
|
3785
|
+
}
|
|
3786
|
+
|
|
3787
|
+
.ck .ck-confirm-view-active {
|
|
3788
|
+
transform: translate3d( -100%, 0, 0 );
|
|
3789
|
+
transition: all 300ms linear;
|
|
3790
|
+
}
|
|
3791
|
+
|
|
3792
|
+
.ck .ck-confirm-view {
|
|
3793
|
+
font-size: var(--ck-font-size-base);
|
|
3794
|
+
position: absolute;
|
|
3795
|
+
display: flex;
|
|
3796
|
+
justify-content: flex-start;
|
|
3797
|
+
top: 0;
|
|
3798
|
+
left: 100%;
|
|
3799
|
+
width: 100%;
|
|
3800
|
+
height: 100%;
|
|
3801
|
+
background-color: var(--ck-color-light-red);
|
|
3802
|
+
}
|
|
3803
|
+
|
|
3804
|
+
.ck .ck-confirm-view .ck-confirm-view-inner {
|
|
3805
|
+
display: flex;
|
|
3806
|
+
flex-direction: column;
|
|
3807
|
+
align-items: center;
|
|
3808
|
+
justify-content: center;
|
|
3809
|
+
padding-top: var(--ck-spacing-standard);
|
|
3810
|
+
height: 100%;
|
|
3811
|
+
width: 100%;
|
|
3812
|
+
|
|
3813
|
+
/* Maximum height of confirmation (in case with such long comment). */
|
|
3814
|
+
max-height: 400px;
|
|
3815
|
+
}
|
|
3816
|
+
|
|
3817
|
+
.ck .ck-confirm-view p {
|
|
3818
|
+
font-weight: bold;
|
|
3819
|
+
margin: 0;
|
|
3820
|
+
}
|
|
3821
|
+
|
|
3822
|
+
/*
|
|
3823
|
+
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
3824
|
+
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
3825
|
+
* all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
|
|
3826
|
+
*
|
|
3827
|
+
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
3828
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
3829
|
+
*/
|
|
3830
|
+
|
|
731
3831
|
/*
|
|
732
3832
|
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
|
|
733
3833
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
|
|
@@ -1522,10 +4622,6 @@ With track-changes feature enabled, we need to distinguish various types of anno
|
|
|
1522
4622
|
}
|
|
1523
4623
|
}
|
|
1524
4624
|
|
|
1525
|
-
.ck .ck-comment__wrapper.ck-comment--remove-confirmation {
|
|
1526
|
-
transform: translate3d( -100%, 0, 0 );
|
|
1527
|
-
}
|
|
1528
|
-
|
|
1529
4625
|
.ck .ck-comment__wrapper:first-of-type {
|
|
1530
4626
|
border-top-right-radius: var(--ck-border-radius);
|
|
1531
4627
|
border-top-left-radius: var(--ck-border-radius);
|
|
@@ -1552,14 +4648,6 @@ With track-changes feature enabled, we need to distinguish various types of anno
|
|
|
1552
4648
|
background-color: var(--ck-color-comment-separator);
|
|
1553
4649
|
}
|
|
1554
4650
|
|
|
1555
|
-
.ck .ck-comment--remove {
|
|
1556
|
-
background-color: var(--ck-color-comment-remove-background);
|
|
1557
|
-
}
|
|
1558
|
-
|
|
1559
|
-
.ck .ck-comment--remove::after {
|
|
1560
|
-
opacity: 0;
|
|
1561
|
-
}
|
|
1562
|
-
|
|
1563
4651
|
.ck .ck-comment--edit {
|
|
1564
4652
|
background-color: var(--ck-color-comment-input-background);
|
|
1565
4653
|
}
|
|
@@ -1943,49 +5031,15 @@ We are styling resetting list-style because of parent <ul> element. */
|
|
|
1943
5031
|
--ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
|
|
1944
5032
|
}
|
|
1945
5033
|
|
|
1946
|
-
.ck .ck-thread--remove-confirmation .ck-thread__container {
|
|
1947
|
-
transform: translate3d( -100%, 0, 0 );
|
|
1948
|
-
}
|
|
1949
|
-
|
|
1950
5034
|
/* We need specificity 020 to beat .ck.ck-button. */
|
|
1951
|
-
.ck.ck-button.ck-
|
|
5035
|
+
.ck.ck-button.ck-confirm-view-submit {
|
|
1952
5036
|
color: var(--ck-color-button-save);
|
|
1953
5037
|
}
|
|
1954
5038
|
|
|
1955
|
-
.ck.ck-button.ck-
|
|
5039
|
+
.ck.ck-button.ck-confirm-view-cancel {
|
|
1956
5040
|
color: var(--ck-color-button-cancel);
|
|
1957
5041
|
}
|
|
1958
5042
|
|
|
1959
|
-
.ck .ck-thread__remove-confirm {
|
|
1960
|
-
font-size: var(--ck-font-size-base);
|
|
1961
|
-
position: absolute;
|
|
1962
|
-
display: flex;
|
|
1963
|
-
justify-content: flex-start;
|
|
1964
|
-
top: 0;
|
|
1965
|
-
left: 100%;
|
|
1966
|
-
width: 100%;
|
|
1967
|
-
height: 100%;
|
|
1968
|
-
background-color: var(--ck-color-comment-remove-background);
|
|
1969
|
-
}
|
|
1970
|
-
|
|
1971
|
-
.ck .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
|
|
1972
|
-
display: flex;
|
|
1973
|
-
flex-direction: column;
|
|
1974
|
-
align-items: center;
|
|
1975
|
-
justify-content: center;
|
|
1976
|
-
padding-top: var(--ck-spacing-standard);
|
|
1977
|
-
height: 100%;
|
|
1978
|
-
width: 100%;
|
|
1979
|
-
|
|
1980
|
-
/* Maximum height of confirmation (in case with such long comment). */
|
|
1981
|
-
max-height: 400px;
|
|
1982
|
-
}
|
|
1983
|
-
|
|
1984
|
-
.ck .ck-thread__remove-confirm p {
|
|
1985
|
-
font-weight: bold;
|
|
1986
|
-
margin: 0;
|
|
1987
|
-
}
|
|
1988
|
-
|
|
1989
5043
|
/*
|
|
1990
5044
|
* What you're currently looking at is the source code of a legally protected, proprietary software.
|
|
1991
5045
|
* CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
|
|
@@ -4593,7 +7647,7 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
|
|
|
4593
7647
|
|
|
4594
7648
|
/* A confirmation that shows up when attempting to delete a revision */
|
|
4595
7649
|
|
|
4596
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7650
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view {
|
|
4597
7651
|
display: flex;
|
|
4598
7652
|
flex-direction: row;
|
|
4599
7653
|
justify-content: space-around;
|
|
@@ -4611,14 +7665,14 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
|
|
|
4611
7665
|
user-select: none;
|
|
4612
7666
|
}
|
|
4613
7667
|
|
|
4614
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7668
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner {
|
|
4615
7669
|
text-align: center;
|
|
4616
7670
|
margin-top: var(--ck-spacing-small);
|
|
4617
7671
|
|
|
4618
7672
|
/* Confirmation message */
|
|
4619
7673
|
}
|
|
4620
7674
|
|
|
4621
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7675
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner p {
|
|
4622
7676
|
margin: 0;
|
|
4623
7677
|
font-weight: bold;
|
|
4624
7678
|
color: var(--ck-color-text);
|
|
@@ -4626,21 +7680,21 @@ See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. *
|
|
|
4626
7680
|
|
|
4627
7681
|
/* Confirmation buttons */
|
|
4628
7682
|
|
|
4629
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7683
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions {
|
|
4630
7684
|
display: flex;
|
|
4631
7685
|
flex-direction: row;
|
|
4632
7686
|
justify-content: space-evenly;
|
|
4633
7687
|
}
|
|
4634
7688
|
|
|
4635
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7689
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:hover, .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:focus, .ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button:active {
|
|
4636
7690
|
background: var(--ck-revision-history-revision-delete-confirmation-active-button-background);
|
|
4637
7691
|
}
|
|
4638
7692
|
|
|
4639
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7693
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button.ck-confirm-view-submit {
|
|
4640
7694
|
color: var(--ck-color-button-save);
|
|
4641
7695
|
}
|
|
4642
7696
|
|
|
4643
|
-
.ck.ck-revision-history-sidebar__revision-wrapper .ck-
|
|
7697
|
+
.ck.ck-revision-history-sidebar__revision-wrapper .ck-confirm-view .ck-confirm-view-inner .ck-confirm-view-actions .ck.ck-button.ck-confirm-view-cancel {
|
|
4644
7698
|
color: var(--ck-color-button-cancel);
|
|
4645
7699
|
}
|
|
4646
7700
|
|