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