@ckeditor/ckeditor5-html-embed
Version:
HTML embed feature for CKEditor 5.
68 lines (60 loc) • 2.13 kB
CSS
/**
* @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/*
* Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/* The feature container. */
.ck-widget.raw-html-embed {
/* Give the embed some air. */
/* The first value should be equal to --ck-spacing-large variable if used in the editor context
to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
margin: 0.9em auto;
position: relative;
display: flow-root;
/* Give the html embed some minimal width in the content to prevent them
from being "squashed" in tight spaces, e.g. in table cells (https://github.com/ckeditor/ckeditor5/issues/8331) */
min-width: 15em;
/* Don't inherit the style, e.g. when in a block quote. */
font-style: normal;
/* ----- Emebed label in the upper left corner ----------------------------------------------- */
}
.ck-widget.raw-html-embed::before {
position: absolute;
/* Make sure the content does not cover the label. */
z-index: 1;
}
/* ----- Emebed internals --------------------------------------------------------------------- */
/* The switch mode button wrapper. */
.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper {
position: absolute;
display: flex;
flex-direction: column;
}
.ck-widget.raw-html-embed .raw-html-embed__preview {
position: relative;
overflow: hidden;
display: flex;
}
.ck-widget.raw-html-embed .raw-html-embed__preview-content {
width: 100%;
position: relative;
margin: auto;
/* Gives spacing to the small renderable elements, so they always cover the placeholder. */
display: table;
border-collapse: separate;
border-spacing: 7px;
}
.ck-widget.raw-html-embed .raw-html-embed__preview-placeholder {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
/*# sourceMappingURL=index.css.map */