iTop/css/backoffice/vendors/ckeditor/_overloads.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;
$ibo-vendors-ckeditor--ck-content-pre-language--padding: 0 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--code--background-color: $ibo-color-grey-900 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--code--color: $ibo-color-white-100 !default;
$ibo-vendors-ckeditor--ck-content-pre-language--code--padding: $ibo-vendors-highlightjs--padding !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;
  /* Needed to let table grow inside their resizer as `.ibo-is-html-content table` rule unset ckeditor default 100% width */
  .table table {
    width: 100% !important;
  }
}

.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 */
  }
}
.ck-content pre[data-language] {
  padding: $ibo-vendors-ckeditor--ck-content-pre-language--padding !important;
  code {
    display: block;
    background: $ibo-vendors-ckeditor--ck-content-pre-language--code--background-color !important;
    padding: $ibo-vendors-ckeditor--ck-content-pre-language--code--padding !important;
    color: $ibo-vendors-ckeditor--ck-content-pre-language--code--color !important;
  }
}

// N°7552 Allow source editing area to be scrollable in full screen
.ck-maximize_editor_main .ck-source-editing-area textarea{
  overflow: auto !important;
}

/* 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;
	}
}