iTop/css/backoffice/vendors/_ckeditor.scss

/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

/* SCSS variables */
$ibo-vendors-highlightjs--padding: 0.9rem !default;
$ibo-vendors-highlightjs--border-radius: $ibo-border-radius-300 !default;

$ibo-vendors-ckeditor--autocomplete-panel--border: none !default;
$ibo-vendors-ckeditor--autocomplete-panel--border-radius: $ibo-border-radius-300 !default;
$ibo-vendors-ckeditor--autocomplete-panel--background-color: $ibo-color-white-100 !default;

$ibo-vendors-ckeditor--autocomplete-item-image--size: 25px !default;
$ibo-vendors-ckeditor--autocomplete-item-image--margin-right: 0.5rem !default;
$ibo-vendors-ckeditor--autocomplete-item-image--background-color: $ibo-color-blue-100 !default;
$ibo-vendors-ckeditor--autocomplete-item-image--border: 1px solid $ibo-color-grey-600 !default;

$ibo-vendors-ckeditor--autocomplete-item-title--text-color: #3A3A3A !default;
$ibo-vendors-ckeditor--ck-content--text-color: $ibo-color-grey-900 !default;
/* - Following SCSS variables are only there to overlaod the CSS3 variables of CKEditor (see `src/resources/styles/default-theme.css` in CKEditor) */
$ibo-vendors-ckeditor--ck-color-list-button-on-background: $ibo-color-grey-200 !default;
$ibo-vendors-ckeditor--ck-color-list-button-on-background-focus: $ibo-color-grey-200 !default;
$ibo-vendors-ckeditor--ck-color-list-button-hover-background: $ibo-color-grey-200 !default;
$ibo-vendors-ckeditor--ck-color-list-button-on-text: $ibo-color-grey-900 !default;

$ibo-vendors-ckeditor--ck-text-tiny-font-size: $ibo-font-size-20 !default;
$ibo-vendors-ckeditor--ck-text-small-font-size: $ibo-font-size-50 !default;
$ibo-vendors-ckeditor--ck-text-big-font-size: $ibo-font-size-200 !default;
$ibo-vendors-ckeditor--ck-text-huge-font-size: $ibo-font-size-350 !default;

$ibo-vendors-ckeditor--ck-color-image-caption-text: $ibo-color-grey-900 !default;

/* CSS3 variables */
.ck {
  --ck-color-list-button-on-background: #{$ibo-vendors-ckeditor--ck-color-list-button-on-background};
  --ck-color-list-button-on-background-focus: #{$ibo-vendors-ckeditor--ck-color-list-button-on-background-focus};
  --ck-color-list-button-hover-background: #{$ibo-vendors-ckeditor--ck-color-list-button-hover-background};
  --ck-color-list-button-on-text: #{$ibo-vendors-ckeditor--ck-color-list-button-on-text};

  --ck-text-tiny-font-size: #{$ibo-vendors-ckeditor--ck-text-tiny-font-size};
  --ck-text-small-font-size: #{$ibo-vendors-ckeditor--ck-text-small-font-size};
  --ck-text-big-font-size: #{$ibo-vendors-ckeditor--ck-text-big-font-size};
  --ck-text-huge-font-size: #{$ibo-vendors-ckeditor--ck-text-huge-font-size};

  --ck-color-image-caption-text: #{$ibo-vendors-ckeditor--ck-color-image-caption-text};
}

/* Base style */
.ck-editor {
  width: 100% !important; /* Force editor to always take its container full width (not less, not more) */
  display: inline-grid; /* Force editor to always take its container full width (not less, not more) */

  .ck-editor__main {
    overflow: auto;
  }
}

.ck.ck-content {
  color: $ibo-vendors-ckeditor--ck-content--text-color;
}

.ck-editor__editable_inline:not(.ck-comment__input *) {
  height: 200px;
}

/* Fullscreen button (Combodo custom plugin) */
.ck.ck-editor.cke-maximized {
  position: fixed;
  left: 0px;
  top:0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;

  .ck-editor__main{
    flex-grow: 1;
  }
  .ck-editor__editable_inline:not(.ck-comment__input *), .ck-source-editing-area{
    height: 100% !important; /* !important to overload inline style from configuration.height */
    width: 100% !important; /* !important to overload inline style from configuration.width */
  }
}

/* Highlight JS */
.hljs {
	padding: $ibo-vendors-highlightjs--padding !important;
	box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
	border-radius: $ibo-vendors-highlightjs--border-radius;
	white-space: pre-wrap;
}

.ibo-hljs-container{
  padding: 0 !important;
}

/* Mentions */
.ibo-mention-item{
  line-height: 1.6rem;
}

[data-role="object-mention"]{
  color: #0782C1;
}
[data-role="object-mention"]:hover{
  color: #2b6bb0;
}

/* Mentions in caselogs */
/* Note: Mind the "ul", it allows us to have a more precise rule than the original plugin's CSS so we can override it */
ul.cke_autocomplete_panel{
	background-color: $ibo-vendors-ckeditor--autocomplete-panel--background-color;
	border: $ibo-vendors-ckeditor--autocomplete-panel--border;
	border-radius: $ibo-vendors-ckeditor--autocomplete-panel--border-radius;
	@extend %ibo-elevation-300;

	.ibo-vendors-ckeditor--autocomplete-item{
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.ibo-vendors-ckeditor--autocomplete-item-image{
    width: $ibo-vendors-ckeditor--autocomplete-item-image--size;
    height: $ibo-vendors-ckeditor--autocomplete-item-image--size;
    /* min-xxx are here to avoid medallion to be horizontally compressed when the title is to long */
    min-width: $ibo-vendors-ckeditor--autocomplete-item-image--size;
    min-height: $ibo-vendors-ckeditor--autocomplete-item-image--size;
    background-position: center center;
    background-size: 100%;
    border-radius: 100%;
    margin-right: $ibo-vendors-ckeditor--autocomplete-item-image--margin-right;
    background-color: $ibo-vendors-ckeditor--autocomplete-item-image--background-color;
    border: $ibo-vendors-ckeditor--autocomplete-item-image--border;

    @extend %ibo-fully-centered-content;
  }
	.ibo-vendors-ckeditor--autocomplete-item-title{
    white-space: nowrap; /* Here we don't want to truncate the text as in an autocomplete we might have similar values and we need the user to see the entire text to be able to differenciate them */
		color: $ibo-vendors-ckeditor--autocomplete-item-title--text-color;
		@extend %ibo-font-weight-700;
	}
}