Files
iTop/css/backoffice/vendors/_ckeditor.scss
2024-04-15 12:53:21 +02:00

111 lines
4.3 KiB
SCSS

/*
* @copyright Copyright (C) 2010-2023 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-vendors-ckeditor--toolbar-fullscreen-button--background-color--on-hover: #CCC !default;
$ibo-vendors-ckeditor--toolbar-fullscreen-button--width: 12px !default;
$ibo-vendors-ckeditor--toolbar-fullscreen-button--height: 11px !default;
$ibo-vendors-ckeditor--toolbar-fullscreen-button--border: 1px #A6A6A6 solid !default;
$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;
.ck-editor__editable_inline:not(.ck-comment__input *) {
min-height: 200px;
}
/* Fullscreen button (Combodo custom) */
.ibo-vendors-ckeditor--toolbar-fullscreen-button {
display: none;
}
.cke_toolbox_collapser.cke_toolbox_collapser_min ~ .ibo-vendors-ckeditor--toolbar-fullscreen-button {
display: block;
width: $ibo-vendors-ckeditor--toolbar-fullscreen-button--width;
height: $ibo-vendors-ckeditor--toolbar-fullscreen-button--height;
border: $ibo-vendors-ckeditor--toolbar-fullscreen-button--border;
cursor: pointer;
/* !important so it overrides the .cke_reset_all style */
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
background-image: url('../../../../images/full-screen.png') !important;
&:hover {
background-color: $ibo-vendors-ckeditor--toolbar-fullscreen-button--background-color--on-hover;
}
}
/* 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 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;
}
}
/* These rules should be the same as those in css/ckeditor/contents.css */
.ibo-vendors-ckeditor--display-content{
.cke_editable{
line-height: 1.4;
}
figure{
border: solid 1px #ccc;
border-radius: 2px;
}
p{
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}