/* * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size)); --ck-html-embed-source-height: 10em; --ck-html-embed-unfocused-outline-width: 1px; --ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard)); } /* The feature container. */ .ck-widget.raw-html-embed { font-size: var(--ck-font-size-base); background-color: var(--ck-color-base-foreground); &:not(.ck-widget_selected):not(:hover) { outline: var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border); } & .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before { margin-left: 50px; } /* ----- Emebed label in the upper left corner ----------------------------------------------- */ &::before { content: attr(data-html-embed-label); top: calc(-1 * var(--ck-html-embed-unfocused-outline-width)); left: var(--ck-spacing-standard); background: hsl(0deg 0% 60%); transition: background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve); padding: calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny); border-radius: 0 0 var(--ck-border-radius) var(--ck-border-radius); color: var(--ck-color-base-background); font-size: var(--ck-font-size-tiny); font-family: var(--ck-font-face); } @nest .ck.ck-editor__editable.ck-blurred &.ck-widget_selected::before { top: 0px; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); } @nest .ck.ck-editor__editable:not(.ck-blurred) &.ck-widget_selected::before { top: 0; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); background: var(--ck-color-focus-border); } @nest .ck.ck-editor__editable &:not(.ck-widget_selected):hover::before { top: 0px; padding: var(--ck-spacing-tiny) var(--ck-spacing-small); } /* ----- Emebed internals --------------------------------------------------------------------- */ & .raw-html-embed__content-wrapper { padding: var(--ck-spacing-standard); } /* The switch mode button wrapper. */ & .raw-html-embed__buttons-wrapper { top: var(--ck-spacing-standard); right: var(--ck-spacing-standard); & .ck-button.raw-html-embed__save-button { color: var(--ck-color-button-save); } & .ck-button.raw-html-embed__cancel-button { color: var(--ck-color-button-cancel); } & .ck-button:not(:first-child) { margin-top: var(--ck-spacing-small); } } /* The edit source element. */ & .raw-html-embed__source { box-sizing: border-box; height: var(--ck-html-embed-source-height); width: var(--ck-html-embed-content-width); resize: none; min-width: 0; padding: var(--ck-spacing-standard); font-family: monospace; tab-size: 4; white-space: pre-wrap; font-size: var(--ck-font-size-base); /* Safari needs this. */ &[disabled] { background: hsl(0deg 0% 97%); color: hsl(0deg 0% 56%); } } /* The preview data container. */ & .raw-html-embed__preview { overflow: hidden; box-sizing: border-box; width: var(--ck-html-embed-content-width); min-height: var(--ck-html-embed-content-min-height); text-align: center; & > table { margin-left: auto; margin-right: auto; } /* Disable all mouse interaction as long as the editor is not read–only. */ @nest .ck-editor__editable:not(.ck-read-only) & { pointer-events: none; } } }