htmlembed.css 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. :root {
  6. --ck-html-embed-content-width: calc(100% - 1.5 * var(--ck-icon-size));
  7. --ck-html-embed-source-height: 10em;
  8. --ck-html-embed-content-min-height: calc(var(--ck-icon-size) + var(--ck-spacing-standard));
  9. }
  10. /* The feature container. */
  11. .ck-widget.raw-html-embed {
  12. font-size: var(--ck-font-size-base);
  13. & .raw-html-embed__content-wrapper {
  14. padding: var(--ck-spacing-standard);
  15. }
  16. /* The switch mode button wrapper. */
  17. & .raw-html-embed__buttons-wrapper {
  18. top: var(--ck-spacing-standard);
  19. right: var(--ck-spacing-standard);
  20. & .ck-button.raw-html-embed__save-button {
  21. color: var(--ck-color-button-save);
  22. }
  23. & .ck-button.raw-html-embed__cancel-button {
  24. color: var(--ck-color-button-cancel);
  25. }
  26. & .ck-button:not(:first-child) {
  27. margin-top: var(--ck-spacing-small);
  28. }
  29. }
  30. /* The edit source element. */
  31. & .raw-html-embed__source {
  32. box-sizing: border-box;
  33. height: var(--ck-html-embed-source-height);
  34. width: var(--ck-html-embed-content-width);
  35. resize: none;
  36. min-width: 0;
  37. padding: var(--ck-spacing-standard);
  38. font-family: monospace;
  39. tab-size: 4;
  40. white-space: pre-wrap;
  41. font-size: var(--ck-font-size-base); /* Safari needs this. */
  42. &[disabled] {
  43. background: hsl(0deg 0% 97%);
  44. color: hsl(0deg 0% 56%);
  45. }
  46. }
  47. /* Using the feature with previews enabled. */
  48. &.raw-html-embed_preview_enabled {
  49. /* The preview data container. */
  50. & .raw-html-embed__preview {
  51. overflow: hidden;
  52. box-sizing: border-box;
  53. width: var(--ck-html-embed-content-width);
  54. min-height: var(--ck-html-embed-content-min-height);
  55. text-align: center;
  56. & > table {
  57. margin-left: auto;
  58. margin-right: auto;
  59. }
  60. /* Disable all mouse interaction as long as the editor is not read–only. */
  61. @nest .ck-editor__editable:not(.ck-read-only) & {
  62. pointer-events: none;
  63. }
  64. }
  65. /* Mode: preview the HTML. */
  66. &.raw-html-embed_preview_visible {
  67. background-color: var(--ck-color-base-foreground);
  68. }
  69. }
  70. }